Integrate Shell Wallet (#271)

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} />

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

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)
 

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 }
+}