Cleanup, verify sol connection is working

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

@@ -36,7 +36,6 @@ export default function Layout({ children, initialized }: Props) {
           justifyContent: initialized ? 'normal' : 'center',
           alignItems: initialized ? 'normal' : 'center',
           borderRadius: 0,
-
           paddingBottom: 5,
           '@xs': {
             borderRadius: '$lg',
@@ -53,7 +52,8 @@ export default function Layout({ children, initialized }: Props) {
                   paddingLeft: 2,
                   paddingRight: 2,
                   '@xs': {
-                    padding: '20px'
+                    padding: '20px',
+                    paddingBottom: '40px'
                   }
                 }}
               >
@@ -68,6 +68,8 @@ export default function Layout({ children, initialized }: Props) {
                 position: 'sticky',
                 justifyContent: 'flex-end',
                 alignItems: 'flex-end',
+                boxShadow: '0 -30px 20px #111111',
+                zIndex: 200,
                 bottom: 0,
                 left: 0
               }}

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

@@ -0,0 +1,46 @@
+import AccountSelectCard from '@/components/AccountSelectCard'
+import { Col, Divider, Row, Text } from '@nextui-org/react'
+import { Fragment } from 'react'
+
+/**
+ * Types
+ */
+interface IProps {
+  name: string
+  chain: string
+  addresses: string[]
+  selectedAddresses: string[]
+  onSelect: (address: string) => void
+}
+
+/**
+ * Component
+ */
+export default function ProposalSelectSection({
+  name,
+  addresses,
+  selectedAddresses,
+  chain,
+  onSelect
+}: IProps) {
+  return (
+    <Fragment>
+      <Divider y={2} />
+
+      <Row>
+        <Col>
+          <Text h5>{`Select ${name} Accounts`}</Text>
+          {addresses.map((address, index) => (
+            <AccountSelectCard
+              key={address}
+              address={address}
+              index={index}
+              onSelect={() => onSelect(`${chain}:${address}`)}
+              selected={selectedAddresses.includes(`${chain}:${address}`)}
+            />
+          ))}
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}

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

@@ -32,6 +32,7 @@ export default function WalletConnectPage() {
 
       <Input
         bordered
+        aria-label="wc url connect input"
         placeholder="e.g. wc:a281567bb3e4..."
         onChange={e => setUri(e.target.value)}
         value={uri}

wallets/react-wallet-v2/src/views/SessionProposalModal.tsx

@@ -1,5 +1,5 @@
-import AccountSelectCard from '@/components/AccountSelectCard'
 import ProjectInfoCard from '@/components/ProjectInfoCard'
+import ProposalSelectSection from '@/components/ProposalSelectSection'
 import RequesDetailsCard from '@/components/RequestDetalilsCard'
 import RequestMethodCard from '@/components/RequestMethodCard'
 import RequestModalContainer from '@/components/RequestModalContainer'
@@ -12,13 +12,14 @@ import { eip155Addresses } from '@/utils/EIP155WalletUtil'
 import { isCosmosChain, isEIP155Chain, isSolanaChain } from '@/utils/HelperUtil'
 import { solanaAddresses } from '@/utils/SolanaWalletUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
+import { Button, Divider, Modal, Text } from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionProposalModal() {
   const [selectedEIP155, setSelectedEip155] = useState<string[]>([])
   const [selectedCosmos, setSelectedCosmos] = useState<string[]>([])
   const [selectedSolana, setSelectedSolana] = useState<string[]>([])
+  const allSelected = [...selectedEIP155, ...selectedCosmos, ...selectedSolana]
 
   // Get proposal data and wallet address from store
   const proposal = ModalStore.state.data?.proposal
@@ -66,7 +67,7 @@ export default function SessionProposalModal() {
   // Hanlde approve action
   async function onApprove() {
     if (proposal) {
-      const accounts = [...selectedEIP155, ...selectedCosmos]
+      const accounts = allSelected
       const response = {
         state: {
           accounts
@@ -101,70 +102,33 @@ export default function SessionProposalModal() {
         {chains.map(chain => {
           if (isEIP155Chain(chain)) {
             return (
-              <Fragment>
+              <ProposalSelectSection
-                <Divider y={2} />
+                name={EIP155_CHAINS[chain as TEIP155Chain].name}
-
+                addresses={eip155Addresses}
-                <Row>
+                selectedAddresses={selectedEIP155}
-                  <Col>
+                onSelect={onSelectEIP155}
-                    <Text h5>{`Select ${EIP155_CHAINS[chain as TEIP155Chain].name} Accounts`}</Text>
+                chain={chain}
-                    {eip155Addresses.map((address, index) => (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() => onSelectEIP155(`${chain}:${address}`)}
-                        selected={selectedEIP155.includes(`${chain}:${address}`)}
               />
-                    ))}
-                  </Col>
-                </Row>
-              </Fragment>
             )
           } else if (isCosmosChain(chain)) {
             return (
-              <Fragment>
+              <ProposalSelectSection
-                <Divider y={2} />
+                name={COSMOS_MAINNET_CHAINS[chain as TCosmosChain].name}
-
+                addresses={cosmosAddresses}
-                <Row>
+                selectedAddresses={selectedCosmos}
-                  <Col>
+                onSelect={onSelectCosmos}
-                    <Text h5>
+                chain={chain}
-                      {`Select ${COSMOS_MAINNET_CHAINS[chain as TCosmosChain].name} Accounts`}
-                    </Text>
-                    {cosmosAddresses.map((address, index) => (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() => onSelectCosmos(`${chain}:${address}`)}
-                        selected={selectedCosmos.includes(`${chain}:${address}`)}
               />
-                    ))}
-                  </Col>
-                </Row>
-              </Fragment>
             )
           } else if (isSolanaChain(chain)) {
             return (
-              <Fragment>
+              <ProposalSelectSection
-                <Divider y={2} />
+                name={SOLANA_MAINNET_CHAINS[chain as TSolanaChain].name}
-
+                addresses={solanaAddresses}
-                <Row>
+                selectedAddresses={selectedSolana}
-                  <Col>
+                onSelect={onSelectSolana}
-                    <Text h5>
+                chain={chain}
-                      {`Select ${SOLANA_MAINNET_CHAINS[chain as TSolanaChain].name} Accounts`}
-                    </Text>
-                    {solanaAddresses.map((address, index) => (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() => onSelectSolana(`${chain}:${address}`)}
-                        selected={selectedSolana.includes(`${chain}:${address}`)}
               />
-                    ))}
-                  </Col>
-                </Row>
-              </Fragment>
             )
           }
         })}
@@ -180,8 +144,10 @@ export default function SessionProposalModal() {
           flat
           color="success"
           onClick={onApprove}
-          disabled={![...selectedEIP155, ...selectedCosmos].length}
+          disabled={!allSelected.length}
-          css={{ opacity: [...selectedEIP155, ...selectedCosmos].length ? 1 : 0.4 }}
+          css={{
+            opacity: allSelected.length ? 1 : 0.4
+          }}
         >
           Approve
         </Button>