feat: walletconnect wallet

headers.js

@@ -37,6 +37,11 @@ const cspMeta = Object.entries({
     'https://api.coincap.io/v2/assets',
     // @shapeshiftoss/[email protected]: https://github.com/shapeshift/lib/blob/9123527ebbcf0fd62a619ab2824d970123bd5ac2/packages/market-service/src/coincap/coincap.ts#L21
     'https://api.coincap.io/v2/assets/',
+    'https://registry.walletconnect.com/api/v2/wallets',
+    // WalletConnect Image CDN - Needed for icons inside WalletConnect
+    'https://imagedelivery.net/',
+    // Subdomain can change between loads
+    'wss://*.bridge.walletconnect.org',
     // https://github.com/shapeshift/web/blob/70111acd6236759675cf81ddcd196c31472989a6/src/components/Modals/FiatRamps/utils.ts#L40
     process.env.REACT_APP_GEM_COINIFY_SUPPORTED_COINS,
     // https://github.com/shapeshift/web/blob/70111acd6236759675cf81ddcd196c31472989a6/src/components/Modals/FiatRamps/utils.ts#L50

package.json

@@ -24,6 +24,7 @@
     "@shapeshiftoss/hdwallet-native": "^1.21.1",
     "@shapeshiftoss/hdwallet-native-vault": "^1.21.1",
     "@shapeshiftoss/hdwallet-portis": "^1.21.1",
+    "@shapeshiftoss/hdwallet-walletconnect": "/Users/gmsteuart/Workspace/shapeshift/hdwallet/packages/hdwallet-walletconnect",
     "@shapeshiftoss/investor-foxy": "^1.4.1",
     "@shapeshiftoss/investor-yearn": "^1.4.5",
     "@shapeshiftoss/logger": "^1.1.2",
@@ -37,6 +38,7 @@
     "@visx/responsive": "^2.8.0",
     "@visx/shape": "^2.4.0",
     "@visx/tooltip": "^2.8.0",
+    "@walletconnect/web3-provider": "^1.7.8",
     "allsettled-polyfill": "^1.0.4",
     "axios": "^0.26.1",
     "bignumber.js": "^9.0.2",

sample.env

@@ -27,6 +27,7 @@ REACT_APP_FEATURE_KEEPKEY_SETTINGS=false
 REACT_APP_FOXY_APY=0.15
 REACT_APP_FEATURE_WALLET_MIGRATION=false
 REACT_APP_FEATURE_DEMO_WALLET=false
+REACT_APP_FEATURE_WALLETCONNECT_WALLET=false
 
 REACT_APP_GEM_COINIFY_SUPPORTED_COINS=https://api.gem.co/institutions/coinify/supported_currencies
 REACT_APP_GEM_WYRE_SUPPORTED_COINS=https://api.gem.co/institutions/wyre/supported_currencies

src/assets/translations/en/main.json

@@ -823,6 +823,21 @@
       "body": "By connecting a wallet, you agree to ShapeShift's Terms of Service and acknowledge that you have read and understand the ShapeShift disclaimer.",
       "footer": "Don't have a wallet?",
       "create": "Create one"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "An unexpected error occurred communicating with WalletConnect",
+        "connectFailure": "Unable to connect WalletConnect wallet"
+      },
+      "connect": {
+        "header": "Pair WalletConnect",
+        "body": "Click Pair then select WalletConnect from the popup window",
+        "button": "Pair"
+      },
+      "failure": {
+        "header": "Error",
+        "body": "Unable to connect WalletConnect wallet"
+      }
     }
   },
   "graph": {

src/assets/translations/es/main.json

@@ -764,6 +764,21 @@
       "body": "Al conectar una billetera, acepta los Términos de servicio de ShapeShift y reconoce que ha leído y comprende el descargo de responsabilidad de ShapeShift.",
       "footer": "¿No tienes billetera?",
       "create": "Crea una"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "Ocurrió un error inesperado al comunicarse con WalletConnect",
+        "connectFailure": "No se puede conectar la billetera WalletConnect"
+      },
+      "connect": {
+        "header": "Emparejar WalletConnect",
+        "body": "Haga clic en Emparejar y luego seleccione WalletConnect en la ventana emergente",
+        "button": "Emparejar"
+      },
+      "failure": {
+        "header": "Error",
+        "body": "No se puede conectar la billetera WalletConnect"
+      }
     }
   },
   "graph": {

src/assets/translations/fr/main.json

@@ -764,6 +764,21 @@
       "body": "En connectant un porte-monnaie, vous acceptez les conditions de service de ShapeShift et reconnaissez avoir lu et compris la clause de non-responsabilité de ShapeShift.",
       "footer": "Vous n'avez pas de porte-monnaie ?",
       "create": "Créez-en un"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "Une erreur inattendue s'est produite lors de la communication avec WalletConnect",
+        "connectFailure": "Impossible de connecter le porte-monnaie WalletConnect."
+      },
+      "connect": {
+        "header": "Appairer WalletConnect",
+        "body": "Cliquez sur Appairer et connectez-vous à WalletConnect à partir de la fenêtre popup",
+        "button": "Appairer"
+      },
+      "failure": {
+        "header": "Erreur",
+        "body": "Impossible de se connecter au porte-monnaie WalletConnect"
+      }
     }
   },
   "graph": {

src/assets/translations/id/main.json

@@ -470,6 +470,21 @@
       "body": "Dengan menghubungkan dompet, Anda menyetujui Persyaratan Layanan ShapeShift dan mengakui bahwa Anda telah membaca dan memahami penafian ShapeShift.",
       "footer": "Tidak punya dompet?",
       "create": "Buat Satu"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "Terjadi kesalahan tak terduga saat berkomunikasi dengan WalletConnect",
+        "connectFailure": "Tidak dapat menghubungkan dompet WalletConnect"
+      },
+      "connect": {
+        "header": "Pasangkan WalletConnect",
+        "body": "Klik Pasangkan lalu pilih WalletConnect dari jendela popup",
+        "button": "Pasangkan"
+      },
+      "failure": {
+        "header": "Kesalahan",
+        "body": "Tidak dapat menghubungkan dompet WalletConnect"
+      }
     }
   },
   "graph": {

src/assets/translations/ko/main.json

@@ -764,6 +764,21 @@
       "body": "지갑을 연결하는 것으로, 셰이프시프트의 서비스 약관에 동의하며 셰이프시프트의 면책 및 면피 조항을 읽고 이해했음을 확인합니다.",
       "footer": "지갑이 없으신가요?",
       "create": "지갑 만들기"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "WalletConnect와 연동하는 도중에 예기치 못한 오류가 발생했습니다.",
+        "connectFailure": "WalletConnect 지갑을 연결할 수 없습니다."
+      },
+      "connect": {
+        "header": "WalletConnect 지갑 연동하기",
+        "body": "연결하기 버튼을 누른 후 팝업창에서 WalletConnect를 선택하세요.",
+        "button": "연결하기"
+      },
+      "failure": {
+        "header": "오류 발생",
+        "body": "WalletConnect 지갑을 연결할 수 없습니다."
+      }
     }
   },
   "graph": {

src/assets/translations/pt/main.json

@@ -631,6 +631,21 @@
       "body": "Ao conectar sua carteira, você concorda com os Termos de Serviço da ShapeShift e reconhece que leu e entendeu o aviso legal da ShapeShift.",
       "footer": "Não tem carteira?",
       "create": "Crie um"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "Ocorreu um erro inesperado na comunicação com a WalletConnect",
+        "connectFailure": "Não foi possível conectar sua carteira WalletConnect"
+      },
+      "connect": {
+        "header": "Emparelhar WalletConnect",
+        "body": "Clique em Emparelhar e conecte sua carteira WalletConnect na janela pop-up",
+        "button": "Emparelhar"
+      },
+      "failure": {
+        "header": "Erro",
+        "body": "Não foi possível conectar sua carteira WalletConnect"
+      }
     }
   },
   "graph": {

src/assets/translations/ru/main.json

@@ -460,6 +460,21 @@
     "selectModal": {
       "header": "Подключить кошелек",
       "body": "Подключая кошелек, вы соглашаетесь с Условиями предоставления услуг ShapeShift и подтверждаете, что прочитали и поняли отказ от ответственности ShapeShift."
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "Возникла непредвиденная ошибка при соединении с WalletConnect",
+        "connectFailure": "Невозможно подключить кошелек WalletConnect"
+      },
+      "connect": {
+        "header": "Обьединить WalletConnect",
+        "body": "Нажмите обьединить, затем выберите WalletConnect во всплывающем окне",
+        "button": "Обьединить"
+      },
+      "failure": {
+        "header": "Ошибка",
+        "body": "Невозможно подключить кошелек WalletConnect"
+      }
     }
   },
   "graph": {

src/assets/translations/zh/main.json

@@ -667,6 +667,21 @@
       "body": "连接一个钱包代表您同意接受 ShapeShift 的服务条款并确认您已经阅读并理解 Shapeshift 的免责声明。",
       "footer": "还没有钱包？",
       "create": "创建一个"
+    },
+    "walletConnect": {
+      "errors": {
+        "unknown": "与您的 WalletConnect 通讯出现未知错误",
+        "connectFailure": "无法连接 WalletConnect"
+      },
+      "connect": {
+        "header": "与 WalletConnect 配对",
+        "body": "点击配对并在弹窗中选择 WalletConnect",
+        "button": "配对"
+      },
+      "failure": {
+        "header": "错误",
+        "body": "无法连接 WalletConnect"
+      }
     }
   },
   "graph": {

src/components/Icons/WalletConnectIcon.tsx

@@ -0,0 +1,19 @@
+import { createIcon } from '@chakra-ui/react'
+
+/**
+ * WalletConnect Icon
+ *
+ * @see https://github.com/WalletConnect/walletconnect-docs/blob/main/static/img/walletconnect-logo.svg
+ */
+export const WalletConnectIcon = createIcon({
+  displayName: 'WalletConnectIcon',
+  path: (
+    <svg>
+      <path
+        d='M61.4385429,36.2562612 C110.349767,-11.6319051 189.65053,-11.6319051 238.561752,36.2562612 L244.448297,42.0196786 C246.893858,44.4140867 246.893858,48.2961898 244.448297,50.690599 L224.311602,70.406102 C223.088821,71.6033071 221.106302,71.6033071 219.883521,70.406102 L211.782937,62.4749541 C177.661245,29.0669724 122.339051,29.0669724 88.2173582,62.4749541 L79.542302,70.9685592 C78.3195204,72.1657633 76.337001,72.1657633 75.1142214,70.9685592 L54.9775265,51.2530561 C52.5319653,48.8586469 52.5319653,44.9765439 54.9775265,42.5821357 L61.4385429,36.2562612 Z M280.206339,77.0300061 L298.128036,94.5769031 C300.573585,96.9713 300.573599,100.85338 298.128067,103.247793 L217.317896,182.368927 C214.872352,184.763353 210.907314,184.76338 208.461736,182.368989 C208.461726,182.368979 208.461714,182.368967 208.461704,182.368957 L151.107561,126.214385 C150.496171,125.615783 149.504911,125.615783 148.893521,126.214385 C148.893517,126.214389 148.893514,126.214393 148.89351,126.214396 L91.5405888,182.368927 C89.095052,184.763359 85.1300133,184.763399 82.6844276,182.369014 C82.6844133,182.369 82.684398,182.368986 82.6843827,182.36897 L1.87196327,103.246785 C-0.573596939,100.852377 -0.573596939,96.9702735 1.87196327,94.5758653 L19.7936929,77.028998 C22.2392531,74.6345898 26.2042918,74.6345898 28.6498531,77.028998 L86.0048306,133.184355 C86.6162214,133.782957 87.6074796,133.782957 88.2188704,133.184355 C88.2188796,133.184346 88.2188878,133.184338 88.2188969,133.184331 L145.571,77.028998 C148.016505,74.6345347 151.981544,74.6344449 154.427161,77.028798 C154.427195,77.0288316 154.427229,77.0288653 154.427262,77.028899 L211.782164,133.184331 C212.393554,133.782932 213.384814,133.782932 213.996204,133.184331 L271.350179,77.0300061 C273.79574,74.6355969 277.760778,74.6355969 280.206339,77.0300061 Z'
+        fill='#3B99FC'
+      ></path>
+    </svg>
+  ),
+  viewBox: '0 0 300 185',
+})

src/config.ts

@@ -37,6 +37,7 @@ const validators = {
   REACT_APP_FEATURE_KEEPKEY_SETTINGS: bool({ default: false }),
   REACT_APP_FEATURE_WALLET_MIGRATION: bool({ default: false }),
   REACT_APP_FEATURE_DEMO_WALLET: bool({ default: false }),
+  REACT_APP_FEATURE_WALLETCONNECT_WALLET: bool({ default: false }),
 }
 
 function reporter<T>({ errors }: envalid.ReporterOptions<T>) {

src/context/WalletProvider/KeyManager.ts

@@ -4,4 +4,5 @@ export enum KeyManager {
   MetaMask = 'metamask',
   Portis = 'portis',
   Demo = 'demo',
+  WalletConnect = 'walletconnect',
 }

src/context/WalletProvider/WalletConnect/components/Connect.tsx

@@ -0,0 +1,140 @@
+import WalletConnectProvider from '@walletconnect/web3-provider'
+import { getConfig } from 'config'
+import React, { useEffect, useState } from 'react'
+import { isMobile } from 'react-device-detect'
+import { RouteComponentProps } from 'react-router-dom'
+import { ActionTypes, WalletActions } from 'context/WalletProvider/actions'
+import { KeyManager } from 'context/WalletProvider/KeyManager'
+import { setLocalWalletTypeAndDeviceId } from 'context/WalletProvider/local-wallet'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+import { ConnectModal } from '../../components/ConnectModal'
+import { RedirectModal } from '../../components/RedirectModal'
+import { LocationState } from '../../NativeWallet/types'
+import { WalletConnectConfig } from '../config'
+import { WalletConnectHDWallet } from '@shapeshiftoss/hdwallet-walletconnect'
+
+export interface WalletConnectSetupProps
+  extends RouteComponentProps<
+    {},
+    any, // history
+    LocationState
+  > {
+  dispatch: React.Dispatch<ActionTypes>
+}
+
+/**
+ * WalletConnect Connect component
+ *
+ * Test WalletConnect Tool: https://test.walletconnect.org/
+ */
+export const WalletConnectConnect = ({ history }: WalletConnectSetupProps) => {
+  const { dispatch, state } = useWallet()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [provider, setProvider] = useState<WalletConnectProvider>()
+
+  const setErrorLoading = (e: string | null) => {
+    setError(e)
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const rpcUrl = getConfig().REACT_APP_ETHEREUM_NODE_URL
+        if (!rpcUrl) {
+          console.error('ConfigNotFound: ethereum node url not set')
+          return
+        }
+        const opts = {
+          rpc: {
+            1: rpcUrl,
+          },
+        }
+        setProvider(new WalletConnectProvider(opts))
+      } catch (e) {
+        if (!isMobile) console.error(e)
+      }
+    })()
+  }, [setProvider])
+
+  const pairDevice = async () => {
+    setError(null)
+    setLoading(true)
+
+    if (!provider) {
+      throw new Error('walletProvider.walletConnect.errors.connectFailure')
+    }
+
+    if (state.adapters && state.adapters?.has(KeyManager.WalletConnect)) {
+      const wallet = await state.adapters.get(KeyManager.WalletConnect)?.pairDevice() as WalletConnectHDWallet
+      if (!wallet) {
+        setErrorLoading('walletProvider.errors.walletNotFound')
+        throw new Error('Call to hdwallet-walletconnect::pairDevice returned null or undefined')
+      }
+
+      const { name, icon } = WalletConnectConfig
+      try {
+        const deviceId = await wallet.getDeviceID()
+
+        provider.onConnect(async () => {
+          const { connected } = await provider.getWalletConnector()
+          console.info(`connector connected: ${connected}`)
+        })
+
+        //  Enable session (triggers QR Code modal)
+        await provider.enable()
+
+        dispatch({
+          type: WalletActions.SET_WALLET,
+          payload: { wallet, name, icon, deviceId },
+        })
+        dispatch({ type: WalletActions.SET_IS_CONNECTED, payload: true })
+        setLocalWalletTypeAndDeviceId(KeyManager.WalletConnect, deviceId)
+        dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+      } catch (e: any) {
+        if (e?.message?.startsWith('walletProvider.')) {
+          console.error('WalletConnect Connect: There was an error initializing the wallet', e)
+          setErrorLoading(e?.message)
+        } else {
+          setErrorLoading('walletProvider.walletConnect.errors.unknown')
+          history.push('/walletconnect/failure')
+        }
+      }
+    }
+    setLoading(false)
+  }
+
+  // This constructs the WalletConnect deep-linking target from the currently-loaded
+  // window.location. The port will be blank if not specified, in which case it
+  // should be omitted.
+  const mmDeeplinkTarget = [window.location.hostname, window.location.port]
+    .filter(x => !!x)
+    .join(':')
+
+  // TODO: test native app
+  // The WalletConnect mobile app itself injects a provider, so we'll use pairDevice once
+  // we've reopened ourselves in that environment.
+  return !provider && isMobile ? (
+    <RedirectModal
+      headerText={'walletProvider.walletConnect.redirect.header'}
+      bodyText={'walletProvider.walletConnect.redirect.body'}
+      buttonText={'walletProvider.walletConnect.redirect.button'}
+      onClickAction={(): any => {
+        window.location.assign(`https://walletconnect.app.link/dapp/${mmDeeplinkTarget}`)
+      }}
+      loading={loading}
+      error={error}
+    ></RedirectModal>
+  ) : (
+    <ConnectModal
+      headerText={'walletProvider.walletConnect.connect.header'}
+      bodyText={'walletProvider.walletConnect.connect.body'}
+      buttonText={'walletProvider.walletConnect.connect.button'}
+      pairDevice={pairDevice}
+      loading={loading}
+      error={error}
+    ></ConnectModal>
+  )
+}

src/context/WalletProvider/WalletConnect/components/Failure.tsx

@@ -0,0 +1,10 @@
+import { FailureModal } from 'context/WalletProvider/components/FailureModal'
+
+export const WalletConnectFailure = () => {
+  return (
+    <FailureModal
+      headerText={'walletProvider.walletConnect.failure.header'}
+      bodyText={'walletProvider.walletConnect.failure.body'}
+    ></FailureModal>
+  )
+}