feat: add support of xdefi wallet

src/App/SelectWalletModal/index.tsx

@@ -54,6 +54,24 @@ const SelectEtherBaseWalletModal = (): ReactElement => {
     }
   }
 
+  const onClickXDEFIExtension = async (): Promise<void> => {
+    const xdefiExtInstalled =
+      terraService.checkInstalled() && window?.xfi.terra !== undefined
+
+    if (xdefiExtInstalled) {
+      const result = await terraService.connect()
+
+      await login({
+        user: {
+          address: result.address,
+          walletType: WalletEnum.XDEFIExtension,
+        },
+      })
+    } else {
+      setIsVisibleModalType(SelectWalletModalType.xdefiExtInstall)
+    }
+  }
+
   const onClickTerraWalletConnect = async (): Promise<void> => {
     try {
       const connector = await terraWalletConnectService.connect()
@@ -189,6 +207,9 @@ const SelectEtherBaseWalletModal = (): ReactElement => {
       case WalletEnum.TerraExtension:
         onClickTerraExtension()
         break
+      case WalletEnum.XDEFIExtension:
+        onClickXDEFIExtension()
+        break
       case WalletEnum.TerraWalletConnect:
         onClickTerraWalletConnect()
         break
@@ -198,7 +219,11 @@ const SelectEtherBaseWalletModal = (): ReactElement => {
     }
   }
 
-  let buttons = [WalletEnum.TerraExtension, WalletEnum.TerraWalletConnect]
+  let buttons = [
+    WalletEnum.TerraExtension,
+    WalletEnum.TerraWalletConnect,
+    WalletEnum.XDEFIExtension,
+  ]
   if (
     fromBlockChain === BlockChainType.ethereum ||
     fromBlockChain === BlockChainType.hmy

src/App/XDefiExtensionDownModal.tsx

@@ -0,0 +1,77 @@
+import { ReactElement } from 'react'
+import styled from 'styled-components'
+import { useRecoilState } from 'recoil'
+
+import { NETWORK } from 'consts'
+
+import { Text } from 'components'
+import Button from 'components/Button'
+import DefaultModal from 'components/Modal'
+import ExtLink from 'components/ExtLink'
+
+import SelectWalletStore, {
+  SelectWalletModalType,
+} from 'store/SelectWalletStore'
+
+const StyledContainer = styled.div`
+  padding: 0 30px 30px;
+`
+
+const XDefiExtensionDownModal = (): ReactElement => {
+  const handleInstalled = (): void => {
+    window.location.reload()
+  }
+
+  const [isVisibleModalType, setIsVisibleModalType] = useRecoilState(
+    SelectWalletStore.isVisibleModalType
+  )
+  return (
+    <DefaultModal
+      {...{
+        isOpen: isVisibleModalType === SelectWalletModalType.xdefiExtInstall,
+        close: (): void => {
+          setIsVisibleModalType(undefined)
+        },
+      }}
+    >
+      <StyledContainer>
+        {!navigator.userAgent.includes('Chrome') ? (
+          <div style={{ textAlign: 'center' }}>
+            <Text style={{ fontSize: 18 }}>
+              {'Bridge currently\nonly supports desktop Chrome'}
+            </Text>
+            <br />
+            <ExtLink href={NETWORK.CHROME}>
+              <Text
+                style={{
+                  color: 'inherit',
+                  fontSize: 18,
+                  marginTop: 10,
+                  marginBottom: 30,
+                }}
+              >
+                Download Chrome
+              </Text>
+            </ExtLink>
+          </div>
+        ) : (
+          <>
+            <div>
+              <ExtLink href={NETWORK.XDEFI_EXTENSION}>
+                <Text style={{ color: 'inherit', fontSize: 18 }}>
+                  Download XDEFI Wallet Extension
+                </Text>
+              </ExtLink>
+              <br />
+              <Text style={{ fontSize: 18 }}>{'to connect your wallet'}</Text>
+            </div>
+            <br />
+            <Button onClick={handleInstalled}>I installed it.</Button>
+          </>
+        )}
+      </StyledContainer>
+    </DefaultModal>
+  )
+}
+
+export default XDefiExtensionDownModal

src/App/index.tsx

@@ -11,6 +11,7 @@ import TerraExtensionDownModal from './TerraExtensionDownModal'
 import BscExtensionDownModal from './BscExtensionDownModal'
 import KeplrDownModal from './KeplrDownModal'
 import NotSupportNetworkModal from './NotSupportNetworkModal'
+import XDefiExtensionDownModal from './XDefiExtensionDownModal'
 import NetworkErrorScreen from './NetworkErrorScreen'
 import UnderMaintenance from './UnderMaintenance'
 
@@ -45,6 +46,7 @@ const App = (): ReactElement => {
             </StyledContainer>
             <SelectWalletModal />
             <TerraExtensionDownModal />
+            <XDefiExtensionDownModal />
             <BscExtensionDownModal />
             <KeplrDownModal />
             <NotSupportNetworkModal />

src/components/WalletLogo.tsx

@@ -8,6 +8,7 @@ import MetamaskSvg from 'images/metamask.svg'
 import WalletConnectSvg from 'images/walletconnect.svg'
 import CoinbaseWalletPng from 'images/CoinbaseWallet.png'
 import KeplrPng from 'images/Keplr.png'
+import XDefiSvg from 'images/XDefi.svg'
 import { WalletEnum } from 'types/wallet'
 import FormImage from './FormImage'
 
@@ -24,6 +25,7 @@ const walletLogo: Record<WalletEnum, string | ComponentType<IconProps>> = {
   [WalletEnum.TerraWalletConnect]: WalletConnectSvg,
   [WalletEnum.CoinbaseWallet]: CoinbaseWalletPng,
   [WalletEnum.Keplr]: KeplrPng,
+  [WalletEnum.XDEFIExtension]: XDefiSvg,
 }
 
 const WalletLogo = ({

src/consts/network.ts

@@ -198,6 +198,9 @@ const TERRA_EXTENSION =
 const TERRA_EXTENSION_FIREFOX =
   'https://addons.mozilla.org/en-US/firefox/addon/terra-station-wallet/'
 
+const XDEFI_EXTENSION =
+  'https://chrome.google.com/webstore/detail/xdefi-wallet/hmeobnfnfcmdkdcmlblgagmfpfboieaf'
+
 const BSC_EXTENSION =
   'https://chrome.google.com/webstore/detail/binance-chain-wallet/fhbohimaelbohpjbbldcngcnapndodjp'
 const KEPLR_EXTENSION =
@@ -257,6 +260,7 @@ export default {
   TERRA_ASSETS_URL,
   TERRA_EXTENSION,
   TERRA_EXTENSION_FIREFOX,
+  XDEFI_EXTENSION,
   BSC_EXTENSION,
   KEPLR_EXTENSION,
   CHROME,

src/store/SelectWalletStore.ts

@@ -3,6 +3,7 @@ import { atom } from 'recoil'
 export enum SelectWalletModalType {
   selectWallet,
   terraExtInstall,
+  xdefiExtInstall,
   bscInstall,
   keplrInstall,
 }

src/types/common.ts

@@ -1 +1,7 @@
 export type NominalType<T extends string> = { __type: T }
+
+declare global {
+  interface Window {
+    xfi: any
+  }
+}

src/types/wallet.ts

@@ -7,6 +7,7 @@ import {
 
 export enum WalletEnum {
   TerraExtension = 'TerraExtension',
+  XDEFIExtension = 'XDEFIExtension',
   Binance = 'Binance',
   MetaMask = 'MetaMask',
   TerraWalletConnect = 'TerraWalletConnect',
@@ -17,6 +18,7 @@ export enum WalletEnum {
 
 export const WalletTitle: Record<WalletEnum, string> = {
   TerraExtension: 'Terra Station (Extension)',
+  XDEFIExtension: 'XDEFI Wallet (Extension)',
   TerraWalletConnect: 'Terra Station (Mobile)',
   Binance: 'Binance Chain Wallet',
   MetaMask: 'MetaMask',
@@ -33,6 +35,10 @@ export const WalletSupportBrowser: Record<
     isSupport: isBrowser && (isChrome || isEdgeChromium || isFirefox),
     errorMessage: 'Available for desktop Chrome and Firefox.',
   },
+  XDEFIExtension: {
+    isSupport: isBrowser && (isChrome || isEdgeChromium),
+    errorMessage: 'Available for desktop Chrome.',
+  },
   // support all browser
   TerraWalletConnect: {
     isSupport: true,