From b28a7a8b11a9330ab60d56a8c2bc4e2f7f03a0b3 Mon Sep 17 00:00:00 2001
From: BusinessShellWallet
 <136577895+BusinessShellWallet@users.noreply.github.com>
Date: Wed, 28 Jun 2023 16:09:32 +0700
Subject: [PATCH] Integrate Shell Wallet (#271)

---
 components/Wallet/Modal/Modal.tsx             |   2 +
 .../Wallet/Modal/ShellConnectButton.tsx       |  24 ++++++
 .../components/TransferDialog/WalletInfo.tsx  |  13 ++++
 hooks/useConnectShell.tsx                     |  73 ++++++++++++++++++
 public/img/shell-icon.png                     | Bin 0 -> 1704 bytes
 5 files changed, 112 insertions(+)
 create mode 100644 components/Wallet/Modal/ShellConnectButton.tsx
 create mode 100644 hooks/useConnectShell.tsx
 create mode 100644 public/img/shell-icon.png

diff --git a/components/Wallet/Modal/Modal.tsx b/components/Wallet/Modal/Modal.tsx
index 58c6f284..9e1110f3 100644
--- a/components/Wallet/Modal/Modal.tsx
+++ b/components/Wallet/Modal/Modal.tsx
@@ -13,6 +13,7 @@ import KeplrConnectButton from './KeplrConnectButton'
 import CosmostationConnectButton from './CosmostationConnectButton'
 import TerraStationConnectButton from './TerraStationConnectButton'
 import LeapConnectButton from './LeapConnectButton'
+import ShellConnectButton from './ShellConnectButton'
 
 function WalletModal({ isOpenModal, onCloseModal, chainId }) {
   return (
@@ -26,6 +27,7 @@ function WalletModal({ isOpenModal, onCloseModal, chainId }) {
             {chainId !== 'comdex-1' && chainId !== 'injective-1' && (
               <TerraStationConnectButton onCloseModal={onCloseModal} />
             )}
+            <ShellConnectButton onCloseModal={onCloseModal} />
             <KeplrConnectButton onCloseModal={onCloseModal} />
             <LeapConnectButton onCloseModal={onCloseModal} />
             <CosmostationConnectButton onCloseModal={onCloseModal} />
diff --git a/components/Wallet/Modal/ShellConnectButton.tsx b/components/Wallet/Modal/ShellConnectButton.tsx
new file mode 100644
index 00000000..daa4879b
--- /dev/null
+++ b/components/Wallet/Modal/ShellConnectButton.tsx
@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react'
+
+import { Button, HStack, Text } from '@chakra-ui/react'
+import useConnectShell from 'hooks/useConnectShell'
+
+function ShellConnectButton({ onCloseModal }) {
+  const { setShellAndConnect } = useConnectShell()
+
+  const setShellMemo = useCallback(() => {
+    setShellAndConnect()
+    onCloseModal()
+  }, [onCloseModal, setShellAndConnect])
+
+  return (
+    <Button variant="wallet" onClick={() => setShellMemo()} colorScheme="black">
+      <HStack justify="space-between" width="full">
+        <Text>Shell Wallet</Text>
+        <img src="/img/shell-icon.png" width={'24px'} />
+      </HStack>
+    </Button>
+  )
+}
+
+export default ShellConnectButton
diff --git a/features/assets/components/TransferDialog/WalletInfo.tsx b/features/assets/components/TransferDialog/WalletInfo.tsx
index 280a6b19..9d8f5a45 100644
--- a/features/assets/components/TransferDialog/WalletInfo.tsx
+++ b/features/assets/components/TransferDialog/WalletInfo.tsx
@@ -40,6 +40,19 @@ export const KeplrWalletInfo = ({ css, depositing }: WalletInfoProps) => {
   )
 }
 
+export const ShellWalletInfo = ({ css, depositing }: WalletInfoProps) => {
+  const { address: ibcWalletAddress } = useRecoilValue(ibcWalletState)
+
+  return (
+    <WalletInfo
+      css={css}
+      label={`${depositing ? 'To ' : ''}Shell wallet`}
+      icon={<StyledImgForIcon src="/img/shell-icon.png" alt="Shell wallet" />}
+      address={ibcWalletAddress}
+    />
+  )
+}
+
 export const AppWalletInfo = ({ css, depositing }: WalletInfoProps) => {
   const { address: walletAddress } = useRecoilValue(walletState)
 
diff --git a/hooks/useConnectShell.tsx b/hooks/useConnectShell.tsx
new file mode 100644
index 00000000..eaddce8a
--- /dev/null
+++ b/hooks/useConnectShell.tsx
@@ -0,0 +1,73 @@
+import { GasPrice } from '@cosmjs/stargate'
+import { useConnectedWallet, useWallet } from '@terra-money/wallet-provider'
+import { useChainInfo } from 'hooks/useChainInfo'
+import { Router } from 'next/router'
+import { useRecoilState } from 'recoil'
+import { walletState, WalletStatusType } from 'state/atoms/walletAtoms'
+import { OfflineSigningWallet } from 'util/wallet-adapters'
+
+export default function useConnectShell() {
+  const [currentWalletState, setCurrentWalletState] =
+    useRecoilState(walletState)
+  const [chainInfo] = useChainInfo(currentWalletState.chainId)
+  const connectedWallet = useConnectedWallet()
+  const { disconnect } = useWallet()
+
+  const connectShell = async () => {
+    if (connectedWallet) {
+      disconnect()
+    }
+    if (window && !window?.shellwallet) {
+      alert('Please install Shell Wallet extension and refresh the page.')
+      return
+    }
+
+    try {
+      if (chainInfo !== undefined) {
+        await window.shellwallet?.experimentalSuggestChain(chainInfo)
+        await window.shellwallet.enable(currentWalletState.chainId)
+        const offlineSigner = await window.getOfflineSignerAutoShell(
+          currentWalletState.chainId
+        )
+
+        const wasmChainClient = await OfflineSigningWallet.connectWithSigner(
+          currentWalletState.chainId,
+          chainInfo.rpc,
+          offlineSigner,
+          currentWalletState.network,
+          {
+            gasPrice: GasPrice.fromString(
+              `${chainInfo?.gasPriceStep?.low}${chainInfo?.feeCurrencies?.[0].coinMinimalDenom}`
+            ),
+          },
+          'shellwallet'
+        )
+        const [{ address }] = await offlineSigner.getAccounts()
+        const key = await window.shellwallet.getKey(currentWalletState.chainId)
+        /* successfully update the wallet state */
+        setCurrentWalletState({
+          key,
+          address: address,
+          client: wasmChainClient,
+          chainId: currentWalletState.chainId,
+          network: currentWalletState.network,
+          status: WalletStatusType.connected,
+          activeWallet: 'shellwallet',
+        })
+      }
+    } catch (e) {
+      throw e
+    }
+  }
+
+  const setShellAndConnect = () => {
+    setCurrentWalletState({
+      ...currentWalletState,
+      activeWallet: 'shellwallet',
+    })
+    localStorage.removeItem('__terra_extension_router_session__')
+    connectShell()
+  }
+
+  return { connectShell, setShellAndConnect }
+}
diff --git a/public/img/shell-icon.png b/public/img/shell-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b4eef17767697cdf3c93aa2dcae8cf030100329
GIT binary patch
literal 1704
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

literal 0
HcmV?d00001