From 518510ca1fd41a27ad185d628d1f24574157754d Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Mon, 14 Mar 2022 14:53:12 +0200
Subject: [PATCH] Add solana support to session page

---
 .../src/components/SessionSelectSection.tsx   | 53 ++++++++++++
 wallets/react-wallet-v2/src/pages/session.tsx | 86 ++++++++-----------
 2 files changed, 87 insertions(+), 52 deletions(-)
 create mode 100644 wallets/react-wallet-v2/src/components/SessionSelectSection.tsx

diff --git a/wallets/react-wallet-v2/src/components/SessionSelectSection.tsx b/wallets/react-wallet-v2/src/components/SessionSelectSection.tsx
new file mode 100644
index 0000000..0d2b824
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/wallets/react-wallet-v2/src/pages/session.tsx b/wallets/react-wallet-v2/src/pages/session.tsx
index 10a241d..0935fba 100644
--- a/wallets/react-wallet-v2/src/pages/session.tsx
+++ b/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}>
-              <Divider y={2} />
-
-              <Row>
-                <Col>
-                  <Text h5>{`${EIP155_CHAINS[chain as TEIP155Chain].name} Accounts`}</Text>
-                  {eip155Addresses.map((address, index) => {
-                    const fullAddress = `${chain}:${address}`
-                    const selected = accounts.includes(fullAddress)
-
-                    return (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() =>
-                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
-                        }
-                        selected={selected}
-                      />
-                    )
-                  })}
-                </Col>
-              </Row>
-            </Fragment>
+            <SessionSelectSection
+              key={chain}
+              chain={chain}
+              name={EIP155_CHAINS[chain as TEIP155Chain]?.name}
+              addresses={eip155Addresses}
+              selectedAddresses={accounts}
+              onDelete={onDeleteAccount}
+              onAdd={onAddAccount}
+            />
           )
         } else if (isCosmosChain(chain)) {
           return (
-            <Fragment key={chain}>
-              <Divider y={2} />
-
-              <Row>
-                <Col>
-                  <Text h5>{`${COSMOS_MAINNET_CHAINS[chain as TCosmosChain].name} Accounts`}</Text>
-                  {cosmosAddresses.map((address, index) => {
-                    const fullAddress = `${chain}:${address}`
-                    const selected = accounts.includes(fullAddress)
-
-                    return (
-                      <AccountSelectCard
-                        key={address}
-                        address={address}
-                        index={index}
-                        onSelect={() =>
-                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
-                        }
-                        selected={selected}
-                      />
-                    )
-                  })}
-                </Col>
-              </Row>
-            </Fragment>
+            <SessionSelectSection
+              key={chain}
+              chain={chain}
+              name={COSMOS_MAINNET_CHAINS[chain as TCosmosChain]?.name}
+              addresses={cosmosAddresses}
+              selectedAddresses={accounts}
+              onDelete={onDeleteAccount}
+              onAdd={onAddAccount}
+            />
+          )
+        } else if (isSolanaChain(chain)) {
+          return (
+            <SessionSelectSection
+              key={chain}
+              chain={chain}
+              name={SOLANA_CHAINS[chain as TSolanaChain]?.name}
+              addresses={solanaAddresses}
+              selectedAddresses={accounts}
+              onDelete={onDeleteAccount}
+              onAdd={onAddAccount}
+            />
           )
         }
       })}