feat: mainnet network

packages/app/src/components/popup/container.tsx

@@ -35,7 +35,6 @@ const Header: React.FC<FlexProps> = props => {
     <Flex
       cursor="pointer"
       flexDirection="row"
-      width="190px"
       onClick={() => doChangeScreen(ScreenPaths.HOME)}
       {...props}
     >
@@ -49,7 +48,14 @@ const Header: React.FC<FlexProps> = props => {
         />
       </Box>
       <Box>
-        <Text fontFamily="heading" color="ink.1000" fontWeight="600" ml="base-tight" fontSize={4}>
+        <Text
+          fontFamily="heading"
+          color="ink.1000"
+          fontWeight="600"
+          ml="base-tight"
+          // fontSize={[2, 4]}
+          fontSize={4}
+        >
           Stacks Wallet
         </Text>
       </Box>
@@ -62,7 +68,6 @@ const ModeBadge: React.FC<FlexProps> = props => {
   const mode = chainId === ChainID.Mainnet ? 'Mainnet' : 'Testnet';
   return (
     <Flex
-      mr="base"
       borderWidth="1px"
       borderColor="ink.300"
       borderRadius="12px"
@@ -79,6 +84,23 @@ const ModeBadge: React.FC<FlexProps> = props => {
   );
 };
 
+const Warning: React.FC = () => {
+  return (
+    <Flex
+      width="100vw"
+      backgroundColor="rgba(249, 161, 77, 0.2)"
+      textAlign="center"
+      py="base"
+      borderBottomWidth="2px"
+      borderBottomColor={color('feedback-alert')}
+    >
+      <Text display="block" width="100%" fontSize={['12px', 1]} fontWeight="500">
+        Stacks Wallet for Web is in alpha and has not been audited yet
+      </Text>
+    </Flex>
+  );
+};
+
 interface PopupHomeProps {
   title?: string;
   onClose?: () => void;
@@ -108,6 +130,7 @@ export const PopupContainer: React.FC<PopupHomeProps> = ({
 
   return (
     <>
+      <Warning />
       <Flex
         minHeight={'500px'}
         minWidth={'440px'}
@@ -121,7 +144,7 @@ export const PopupContainer: React.FC<PopupHomeProps> = ({
         <Flex width="100%" dir="row" display={['none', 'flex']}>
           <Header position="relative" top="-5px" />
           <Box flexGrow={1} />
-          <ModeBadge />
+          <ModeBadge mr="base" />
           <Settings position="relative" top="-9px" />
         </Flex>
         <Flex width="100%" justifyContent="center" flexGrow={1}>
@@ -142,9 +165,9 @@ export const PopupContainer: React.FC<PopupHomeProps> = ({
                 )}
                 {title ? (
                   <Text
-                    fontSize={4}
                     fontWeight="600"
                     textStyle="display.large"
+                    fontSize={[2, 2, 4]}
                     fontFamily="heading"
                     color="ink.1000"
                   >
@@ -154,10 +177,13 @@ export const PopupContainer: React.FC<PopupHomeProps> = ({
                   <Header display={['flex', 'none']} position="relative" top="-1px" />
                 )}
               </Box>
-              <Box display={['flex', 'none']}>
+              <Flex display={['flex', 'none']} flexGrow={1}>
+                <Box flexGrow={1} />
                 <ModeBadge position="relative" top="5px" />
+              </Flex>
+              <Flex display={['flex', 'none']}>
                 <Settings position="relative" top="-4px" />
-              </Box>
+              </Flex>
             </Flex>
             {children}
           </Flex>

packages/app/src/pages/popup/index.tsx

@@ -56,7 +56,7 @@ export const PopupHome: React.FC = () => {
         >
           {getAccountDisplayName(currentAccount)}
         </Text>
-        <Text textStyle="body.small" color="ink.600">
+        <Text textStyle="body.small" color="ink.600" fontSize={['11px', 1]}>
           {currentAccountStxAddress}
         </Text>
       </Box>

packages/app/src/store/recoil/api.ts

@@ -4,6 +4,8 @@ import { rpcClientStore, currentNetworkStore } from './networks';
 import type { CoreNodeInfoResponse } from '@blockstack/stacks-blockchain-api-types';
 import { fetchAllAccountData } from '@common/api/accounts';
 
+const DEFAULT_POLL_RATE = 15000;
+
 export const apiRevalidation = atom({
   key: 'api.revalidation',
   default: 0,
@@ -34,7 +36,7 @@ export const accountInfoStore = selector({
   key: 'wallet.account-info',
   get: async ({ get }) => {
     get(apiRevalidation);
-    get(intervalStore(15000));
+    get(intervalStore(DEFAULT_POLL_RATE));
     const rpcClient = get(rpcClientStore);
     const address = get(currentAccountStxAddressStore);
     if (!address) {
@@ -49,7 +51,7 @@ export const chainInfoStore = selector({
   key: 'api.chain-info',
   get: async ({ get }) => {
     get(apiRevalidation);
-    get(intervalStore(15000));
+    get(intervalStore(DEFAULT_POLL_RATE));
     const { url } = get(currentNetworkStore);
     const infoUrl = `${url}/v2/info`;
     try {
@@ -66,7 +68,7 @@ export const correctNonceStore = selector({
   key: 'api.correct-nonce',
   get: ({ get }) => {
     get(apiRevalidation);
-    get(intervalStore(15000));
+    get(intervalStore(DEFAULT_POLL_RATE));
     try {
       const chainInfo = get(chainInfoStore);
       const account = get(accountInfoStore);
@@ -94,7 +96,7 @@ export const accountDataStore = selector({
   key: 'api.account-data',
   get: async ({ get }) => {
     get(apiRevalidation);
-    get(intervalStore(15000));
+    get(intervalStore(DEFAULT_POLL_RATE));
     const { url } = get(currentNetworkStore);
     const address = get(currentAccountStxAddressStore);
     if (!address) {

packages/app/src/store/recoil/networks.ts

@@ -12,14 +12,13 @@ interface Networks {
 }
 
 export const defaultNetworks: Networks = {
-  // mainnet: {
-  //   url: 'stacks-node-api.mainnet.stacks.co',
-  //   name: 'Mainnet',
-  //   chainId: ChainID.Mainnet,
-  // },
+  mainnet: {
+    url: 'https://stacks-node-api.mainnet.stacks.co',
+    name: 'Mainnet',
+    chainId: ChainID.Mainnet,
+  },
   testnet: {
-    url: 'https://stacks-node-api.blockstack.org',
-    // url: 'stacks-node-api.testnet.stacks.co'
+    url: 'https://stacks-node-api.testnet.stacks.co',
     name: 'Testnet',
     chainId: ChainID.Testnet,
   },

packages/test-app/common/use-faucet.ts

@@ -34,7 +34,7 @@ export const useFaucet = () => {
         return;
       }
       setTimeout(() => {
-        waitForBalance(currentBalance, attempts + 1);
+        void waitForBalance(currentBalance, attempts + 1);
       }, 10000);
     };
     try {

packages/test-app/common/utils.ts

@@ -16,7 +16,7 @@ export const getRPCClient = () => {
   const { origin } = location;
   const url = origin.includes('localhost')
     ? 'http://localhost:3999'
-    : 'https://stacks-node-api.blockstack.org';
+    : 'https://stacks-node-api.testnet.stacks.co';
   return new RPCClient(url);
 };