Minor layout fixes

wallets/react-wallet-v2/public/main.css

@@ -1,21 +1,18 @@
 * {
   box-sizing: border-box;
+  -ms-overflow-style: none; 
+  scrollbar-width: none; 
 }
 
-body,
+::-webkit-scrollbar {
-html {
+  display: none;
-  position: fixed;
-  height: calc(100vh - calc(100vh - 100%));
-  width: 100vw;
-  overflow: hidden;
 }
 
 .routeTransition {
-  width:  100%;
-  height: 100%;
   display: flex;
   flex: 1;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .container {

wallets/react-wallet-v2/src/components/Layout.tsx

@@ -36,7 +36,7 @@ export default function Layout({ children, initialized }: Props) {
           justifyContent: initialized ? 'normal' : 'center',
           alignItems: initialized ? 'normal' : 'center',
           borderRadius: 0,
-          outline: 'none',
+
           paddingBottom: 5,
           '@xs': {
             borderRadius: '$lg',
@@ -63,9 +63,11 @@ export default function Layout({ children, initialized }: Props) {
 
             <Card.Footer
               css={{
-                height: '50px',
+                height: '85px',
-                minHeight: '50px',
+                minHeight: '85px',
                 position: 'sticky',
+                justifyContent: 'flex-end',
+                alignItems: 'flex-end',
                 bottom: 0,
                 left: 0
               }}

wallets/react-wallet-v2/src/pages/index.tsx

@@ -1,16 +1,35 @@
 import AccountCard from '@/components/AccountCard'
 import PageHeader from '@/components/PageHeader'
-import { EIP155_CHAINS } from '@/data/EIP155Data'
+import { EIP155_CHAINS, EIP155_TEST_CHAINS } from '@/data/EIP155Data'
+import SettingsStore from '@/store/SettingsStore'
 import { wallet } from '@/utils/WalletUtil'
+import { Text } from '@nextui-org/react'
 import { Fragment } from 'react'
+import { useSnapshot } from 'valtio'
 
 export default function HomePage() {
+  const { testNets } = useSnapshot(SettingsStore.state)
+
   return (
     <Fragment>
       <PageHeader>Accounts</PageHeader>
+      <Text h4 css={{ marginBottom: '$5' }}>
+        Mainnets
+      </Text>
       {Object.values(EIP155_CHAINS).map(({ name, logo, rgb }) => (
         <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={wallet.address} />
       ))}
+
+      {testNets ? (
+        <Fragment>
+          <Text h4 css={{ marginBottom: '$5' }}>
+            Testnets
+          </Text>
+          {Object.values(EIP155_TEST_CHAINS).map(({ name, logo, rgb }) => (
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={wallet.address} />
+          ))}
+        </Fragment>
+      ) : null}
     </Fragment>
   )
 }

wallets/react-wallet-v2/src/pages/settings.tsx

@@ -17,7 +17,7 @@ export default function SettingsPage() {
       <Text h4 css={{ marginBottom: '$5' }}>
         Mnemonic
       </Text>
-      <Card bordered borderWeight="light">
+      <Card bordered borderWeight="light" css={{ minHeight: '75px' }}>
         <Text css={{ fontFamily: '$mono' }}>{wallet.mnemonic.phrase}</Text>
       </Card>