Add solana support to session page

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

@@ -0,0 +1,53 @@
+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[]
+  onDelete: (address: string) => void
+  onAdd: (address: string) => void
+}
+
+/**
+ * Component
+ */
+export default function SessionSelectSection({
+  name,
+  addresses,
+  chain,
+  selectedAddresses,
+  onDelete,
+  onAdd
+}: IProps) {
+  return (
+    <Fragment>
+      <Divider y={2} />
+
+      <Row>
+        <Col>
+          <Text h5>{`${name} Accounts`}</Text>
+          {addresses.map((address, index) => {
+            const fullAddress = `${chain}:${address}`
+            const selected = selectedAddresses.includes(fullAddress)
+
+            return (
+              <AccountSelectCard
+                key={address}
+                address={address}
+                index={index}
+                onSelect={() => (selected ? onDelete(fullAddress) : onAdd(fullAddress))}
+                selected={selected}
+              />
+            )
+          })}
+        </Col>
+      </Row>
+    </Fragment>
+  )
+}

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

@@ -1,11 +1,13 @@
-import AccountSelectCard from '@/components/AccountSelectCard'
 import PageHeader from '@/components/PageHeader'
 import ProjectInfoCard from '@/components/ProjectInfoCard'
+import SessionSelectSection from '@/components/SessionSelectSection'
 import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
+import { SOLANA_CHAINS, TSolanaChain } from '@/data/SolanaData'
 import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
-import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
+import { isCosmosChain, isEIP155Chain, isSolanaChain } from '@/utils/HelperUtil'
+import { solanaAddresses } from '@/utils/SolanaWalletUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { Button, Col, Divider, Row, Text } from '@nextui-org/react'
 import { ERROR } from '@walletconnect/utils'
@@ -79,59 +81,39 @@ export default function SessionPage() {
       {chains.map(chain => {
         if (isEIP155Chain(chain)) {
           return (
-            <Fragment key={chain}>
+            <SessionSelectSection
-              <Divider y={2} />
+              key={chain}
-
+              chain={chain}
-              <Row>
+              name={EIP155_CHAINS[chain as TEIP155Chain]?.name}
-                <Col>
+              addresses={eip155Addresses}
-                  <Text h5>{`${EIP155_CHAINS[chain as TEIP155Chain].name} Accounts`}</Text>
+              selectedAddresses={accounts}
-                  {eip155Addresses.map((address, index) => {
+              onDelete={onDeleteAccount}
-                    const fullAddress = `${chain}:${address}`
+              onAdd={onAddAccount}
-                    const selected = accounts.includes(fullAddress)
+            />
-
-                    return (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() =>
-                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
-                        }
-                        selected={selected}
-                      />
-                    )
-                  })}
-                </Col>
-              </Row>
-            </Fragment>
           )
         } else if (isCosmosChain(chain)) {
           return (
-            <Fragment key={chain}>
+            <SessionSelectSection
-              <Divider y={2} />
+              key={chain}
-
+              chain={chain}
-              <Row>
+              name={COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name}
-                <Col>
+              addresses={cosmosAddresses}
-                  <Text h5>{`${COSMOS_MAINNET_CHAINS[chain as TCosmosChain].name} Accounts`}</Text>
+              selectedAddresses={accounts}
-                  {cosmosAddresses.map((address, index) => {
+              onDelete={onDeleteAccount}
-                    const fullAddress = `${chain}:${address}`
+              onAdd={onAddAccount}
-                    const selected = accounts.includes(fullAddress)
+            />
-
+          )
-                    return (
+        } else if (isSolanaChain(chain)) {
-                      <AccountSelectCard
+          return (
-                        key={address}
+            <SessionSelectSection
-                        address={address}
+              key={chain}
-                        index={index}
+              chain={chain}
-                        onSelect={() =>
+              name={SOLANA_CHAINS[chain as TSolanaChain]?.name}
-                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
+              addresses={solanaAddresses}
-                        }
+              selectedAddresses={accounts}
-                        selected={selected}
+              onDelete={onDeleteAccount}
-                      />
+              onAdd={onAddAccount}
-                    )
+            />
-                  })}
-                </Col>
-              </Row>
-            </Fragment>
           )
         }
       })}