diff --git a/src/App/SelectWalletModal/index.tsx b/src/App/SelectWalletModal/index.tsx index dd221db..073211c 100644 --- a/src/App/SelectWalletModal/index.tsx +++ b/src/App/SelectWalletModal/index.tsx @@ -54,6 +54,24 @@ const SelectEtherBaseWalletModal = (): ReactElement => { } } + const onClickXDEFIExtension = async (): Promise => { + 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 => { 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 diff --git a/src/App/XDefiExtensionDownModal.tsx b/src/App/XDefiExtensionDownModal.tsx new file mode 100644 index 0000000..48dc717 --- /dev/null +++ b/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 ( + { + setIsVisibleModalType(undefined) + }, + }} + > + + {!navigator.userAgent.includes('Chrome') ? ( +
+ + {'Bridge currently\nonly supports desktop Chrome'} + +
+ + + Download Chrome + + +
+ ) : ( + <> +
+ + + Download XDEFI Wallet Extension + + +
+ {'to connect your wallet'} +
+
+ + + )} + + + ) +} + +export default XDefiExtensionDownModal diff --git a/src/App/index.tsx b/src/App/index.tsx index 8c9c8c9..9bd0f14 100644 --- a/src/App/index.tsx +++ b/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 => { + diff --git a/src/components/WalletLogo.tsx b/src/components/WalletLogo.tsx index ec1ba65..83feedf 100644 --- a/src/components/WalletLogo.tsx +++ b/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.TerraWalletConnect]: WalletConnectSvg, [WalletEnum.CoinbaseWallet]: CoinbaseWalletPng, [WalletEnum.Keplr]: KeplrPng, + [WalletEnum.XDEFIExtension]: XDefiSvg, } const WalletLogo = ({ diff --git a/src/consts/network.ts b/src/consts/network.ts index 6aac46d..bb6bf80 100644 --- a/src/consts/network.ts +++ b/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, diff --git a/src/images/XDefi.svg b/src/images/XDefi.svg new file mode 100644 index 0000000..b500309 --- /dev/null +++ b/src/images/XDefi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/store/SelectWalletStore.ts b/src/store/SelectWalletStore.ts index b52f6b4..691e1d8 100644 --- a/src/store/SelectWalletStore.ts +++ b/src/store/SelectWalletStore.ts @@ -3,6 +3,7 @@ import { atom } from 'recoil' export enum SelectWalletModalType { selectWallet, terraExtInstall, + xdefiExtInstall, bscInstall, keplrInstall, } diff --git a/src/types/common.ts b/src/types/common.ts index 8fa41dc..363dc38 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -1 +1,7 @@ export type NominalType = { __type: T } + +declare global { + interface Window { + xfi: any + } +} diff --git a/src/types/wallet.ts b/src/types/wallet.ts index 832b043..8b2e8e5 100644 --- a/src/types/wallet.ts +++ b/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 = { 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,