feat: phantom wire-up

.env.base

@@ -42,6 +42,7 @@ REACT_APP_FEATURE_USDT_APPROVAL_RESET=true
 REACT_APP_FEATURE_PORTALS_SWAPPER=true
 REACT_APP_FEATURE_RUNEPOOL=true
 REACT_APP_FEATURE_MARKETS=false
+REACT_APP_FEATURE_PHANTOM_WALLET=false
 
 # absolute URL prefix
 REACT_APP_ABSOLUTE_URL_PREFIX=https://app.shapeshift.com

.env.dev

@@ -55,3 +55,4 @@ REACT_APP_THORCHAIN_NODE_URL=https://dev-daemon.thorchain.shapeshift.com
 REACT_APP_MIDGARD_URL=https://dev-indexer.thorchain.shapeshift.com/v2
 
 REACT_APP_FEATURE_MARKETS=true
+REACT_APP_FEATURE_PHANTOM_WALLET=true

.env.develop

@@ -52,3 +52,4 @@ REACT_APP_THORCHAIN_NODE_URL=https://dev-daemon.thorchain.shapeshift.com
 REACT_APP_MIDGARD_URL=https://dev-indexer.thorchain.shapeshift.com/v2
 
 REACT_APP_FEATURE_MARKETS=true
+REACT_APP_FEATURE_PHANTOM_WALLET=true

package.json

@@ -92,19 +92,20 @@
     "@shapeshiftoss/caip": "workspace:^",
     "@shapeshiftoss/chain-adapters": "workspace:^",
     "@shapeshiftoss/errors": "workspace:^",
-    "@shapeshiftoss/hdwallet-coinbase": "1.55.5",
-    "@shapeshiftoss/hdwallet-core": "1.55.5",
-    "@shapeshiftoss/hdwallet-keepkey": "1.55.5",
-    "@shapeshiftoss/hdwallet-keepkey-webusb": "1.55.5",
-    "@shapeshiftoss/hdwallet-keplr": "1.55.5",
-    "@shapeshiftoss/hdwallet-ledger": "1.55.5",
-    "@shapeshiftoss/hdwallet-ledger-webusb": "1.55.5",
-    "@shapeshiftoss/hdwallet-metamask": "1.55.5",
-    "@shapeshiftoss/hdwallet-native": "1.55.5",
-    "@shapeshiftoss/hdwallet-native-vault": "1.55.5",
-    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.55.5",
-    "@shapeshiftoss/hdwallet-walletconnectv2": "1.55.5",
-    "@shapeshiftoss/hdwallet-xdefi": "1.55.5",
+    "@shapeshiftoss/hdwallet-coinbase": "1.55.6",
+    "@shapeshiftoss/hdwallet-core": "1.55.6",
+    "@shapeshiftoss/hdwallet-keepkey": "1.55.6",
+    "@shapeshiftoss/hdwallet-keepkey-webusb": "1.55.6",
+    "@shapeshiftoss/hdwallet-keplr": "1.55.6",
+    "@shapeshiftoss/hdwallet-ledger": "1.55.6",
+    "@shapeshiftoss/hdwallet-ledger-webusb": "1.55.6",
+    "@shapeshiftoss/hdwallet-metamask": "1.55.6",
+    "@shapeshiftoss/hdwallet-native": "1.55.6",
+    "@shapeshiftoss/hdwallet-native-vault": "1.55.6",
+    "@shapeshiftoss/hdwallet-phantom": "1.55.6",
+    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.55.6",
+    "@shapeshiftoss/hdwallet-walletconnectv2": "1.55.6",
+    "@shapeshiftoss/hdwallet-xdefi": "1.55.6",
     "@shapeshiftoss/swapper": "workspace:^",
     "@shapeshiftoss/types": "workspace:^",
     "@shapeshiftoss/unchained-client": "workspace:^",

packages/chain-adapters/src/utxo/UtxoBaseAdapter.ts

@@ -10,6 +10,7 @@ import {
   BTCOutputAddressType,
   supportsBTC,
 } from '@shapeshiftoss/hdwallet-core'
+import { PhantomHDWallet } from '@shapeshiftoss/hdwallet-phantom'
 import type { BIP44Params, UtxoChainId } from '@shapeshiftoss/types'
 import { KnownChainIds, UtxoAccountType } from '@shapeshiftoss/types'
 import type * as unchained from '@shapeshiftoss/unchained-client'
@@ -323,12 +324,15 @@ export abstract class UtxoBaseAdapter<T extends UtxoChainId> implements IChainAd
 
       const signTxInputs: BTCSignTxInput[] = []
       for (const input of inputs) {
-        if (!input.path) continue
+        // TOOD(gomes): v. dangerous, narrow this monkey patch for Phantom only
+        // if (!input.path) continue
 
         const data = await this.providers.http.getTransaction({ txid: input.txid })
 
         signTxInputs.push({
-          addressNList: bip32ToAddressNList(input.path),
+          // TODO(gomes): v. dangerous, should only be used for phantom since no derivation happens, and assume account 0 address 0 yadi yada
+          // @ts-ignore
+          addressNList: input.path ? bip32ToAddressNList(input.path) : undefined,
           scriptType: accountTypeToScriptType[accountType],
           amount: String(input.value),
           vout: input.vout,
@@ -514,7 +518,12 @@ export abstract class UtxoBaseAdapter<T extends UtxoChainId> implements IChainAd
     const account = await this.getAccount(
       input.pubKey ?? (await this.getPublicKey(wallet, accountNumber, accountType)).xpub,
     )
-    const addresses = (account.chainSpecific.addresses ?? []).map(address => address.pubkey)
+    const addresses = (() => {
+      // This means the account isn't an xpub account, pub a pubkey as account i.e Phantom, which doesn't expose an xpub
+      if (wallet instanceof PhantomHDWallet && !account.chainSpecific.addresses && account.pubkey)
+        return [account.pubkey]
+      return (account.chainSpecific.addresses ?? []).map(address => address.pubkey)
+    })()
     const subscriptionId = `${toRootDerivationPath(bip44Params)}/${accountType}`
 
     await this.providers.ws.subscribeTxs(

packages/chain-adapters/src/utxo/utxoSelect/index.ts

@@ -33,7 +33,13 @@ export const utxoSelect = (input: UTXOSelectInput) => {
     // If input contains a `from` param, the intent is to only keep the UTXOs from that address
     // so we can ensure the send address is the one we want
     // This doesn't do any further checks, so error-handling should be done by the caller e.g `buildSendTransaction` callsites
-    if (!input.from || (input.from && utxo.address === input.from)) {
+    if (
+      !input.from ||
+      // Accommodate for pubkey (not xpub) UTXOs which don't have an address
+      // Can there ever be a case where a pubkey UTXO also doesn't contain an address and this is a danger for fundus?
+      (input.from && !utxo.address) ||
+      (input.from && utxo.address === input.from)
+    ) {
       acc.push(sanitizedUtxo)
     }
     return acc

src/assets/translations/en/main.json

@@ -1528,6 +1528,22 @@
         "button": "Open"
       }
     },
+    "phantom": {
+      "errors": {
+        "unknown": "An unexpected error occurred communicating with Phantom",
+        "connectFailure": "Unable to connect Phantom wallet",
+        "multipleWallets": "Detected Ethereum provider is not Phantom. Do you have multiple wallets installed?"
+      },
+      "connect": {
+        "header": "Pair Phantom",
+        "body": "Click Pair and login to Phantom from the popup window",
+        "button": "Pair"
+      },
+      "failure": {
+        "header": "Error",
+        "body": "Unable to connect Phantom wallet"
+      }
+    },
     "metaMaskSnap": {
       "title": "Multichain support is now available for MetaMask!",
       "subtitle": "Add the Multichain Snap on Metamask to send, receive, track, trade, and earn with the following chains:",

src/components/Icons/PhantomIcon.tsx

@@ -0,0 +1,20 @@
+import { createIcon } from '@chakra-ui/react'
+
+export const PhantomIcon = createIcon({
+  displayName: 'PhantomIcon',
+  path: (
+    <svg
+      width='593'
+      height='493'
+      viewBox='0 0 593 493'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M70.0546 493C145.604 493 202.38 427.297 236.263 375.378C232.142 386.865 229.852 398.351 229.852 409.378C229.852 439.703 247.252 461.297 281.592 461.297C328.753 461.297 379.119 419.946 405.218 375.378C403.386 381.811 402.471 387.784 402.471 393.297C402.471 414.432 414.375 427.757 438.643 427.757C515.108 427.757 592.03 292.216 592.03 173.676C592.03 81.3243 545.327 0 428.112 0C222.069 0 0 251.784 0 414.432C0 478.297 34.3405 493 70.0546 493ZM357.141 163.568C357.141 140.595 369.962 124.514 388.734 124.514C407.049 124.514 419.87 140.595 419.87 163.568C419.87 186.541 407.049 203.081 388.734 203.081C369.962 203.081 357.141 186.541 357.141 163.568ZM455.126 163.568C455.126 140.595 467.947 124.514 486.719 124.514C505.034 124.514 517.855 140.595 517.855 163.568C517.855 186.541 505.034 203.081 486.719 203.081C467.947 203.081 455.126 186.541 455.126 163.568Z'
+        fill='#AB9FF2'
+      />
+    </svg>
+  ),
+  viewBox: '0 0 593 493',
+})

src/config.ts

@@ -172,6 +172,7 @@ const validators = {
   REACT_APP_FEATURE_MARKETS: bool({ default: false }),
   REACT_APP_PORTALS_BASE_URL: url(),
   REACT_APP_ZERION_BASE_URL: url(),
+  REACT_APP_FEATURE_PHANTOM_WALLET: bool({ default: false }),
 }
 
 function reporter<T>({ errors }: envalid.ReporterOptions<T>) {

src/context/WalletProvider/KeyManager.ts

@@ -3,6 +3,7 @@ export enum KeyManager {
   Native = 'native',
   KeepKey = 'keepkey',
   MetaMask = 'metamask',
+  Phantom = 'phantom',
   Demo = 'demo',
   XDefi = 'xdefi',
   Keplr = 'keplr',

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

@@ -0,0 +1,83 @@
+import React, { useCallback, useState } from 'react'
+import type { RouteComponentProps } from 'react-router-dom'
+import type { ActionTypes } from 'context/WalletProvider/actions'
+import { WalletActions } from 'context/WalletProvider/actions'
+import { KeyManager } from 'context/WalletProvider/KeyManager'
+import { useLocalWallet } from 'context/WalletProvider/local-wallet'
+import { removeAccountsAndChainListeners } from 'context/WalletProvider/WalletProvider'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+import { ConnectModal } from '../../components/ConnectModal'
+import type { LocationState } from '../../NativeWallet/types'
+import { PhantomConfig } from '../config'
+
+export interface PhantomSetupProps
+  extends RouteComponentProps<
+    {},
+    any, // history
+    LocationState
+  > {
+  dispatch: React.Dispatch<ActionTypes>
+}
+
+export const PhantomConnect = ({ history }: PhantomSetupProps) => {
+  const { dispatch, getAdapter, onProviderChange } = useWallet()
+  const localWallet = useLocalWallet()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const setErrorLoading = useCallback((e: string | null) => {
+    setError(e)
+    setLoading(false)
+  }, [])
+
+  const pairDevice = useCallback(async () => {
+    setError(null)
+    setLoading(true)
+
+    const adapter = await getAdapter(KeyManager.Phantom)
+    if (adapter) {
+      try {
+        // Remove all provider event listeners from previously connected wallets
+        await removeAccountsAndChainListeners()
+
+        const wallet = await adapter.pairDevice()
+        if (!wallet) {
+          setErrorLoading('walletProvider.errors.walletNotFound')
+          throw new Error('Call to hdwallet-phantom::pairDevice returned null or undefined')
+        }
+
+        await onProviderChange(KeyManager.Phantom, wallet)
+
+        const { name, icon } = PhantomConfig
+        const deviceId = await wallet.getDeviceID()
+        const isLocked = await wallet.isLocked()
+        await wallet.initialize()
+        dispatch({
+          type: WalletActions.SET_WALLET,
+          payload: { wallet, name, icon, deviceId, connectedType: KeyManager.Phantom },
+        })
+        dispatch({ type: WalletActions.SET_IS_CONNECTED, payload: true })
+        dispatch({ type: WalletActions.SET_IS_LOCKED, payload: isLocked })
+        localWallet.setLocalWalletTypeAndDeviceId(KeyManager.Phantom, deviceId)
+        dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+      } catch (e: any) {
+        console.error(e, 'Phantom Connect: There was an error initializing the wallet')
+        setErrorLoading(e.message)
+        history.push('/phantom/failure')
+      }
+    }
+    setLoading(false)
+  }, [dispatch, getAdapter, history, localWallet, onProviderChange, setErrorLoading])
+
+  return (
+    <ConnectModal
+      headerText={'walletProvider.phantom.connect.header'}
+      bodyText={'walletProvider.phantom.connect.body'}
+      buttonText={'walletProvider.phantom.connect.button'}
+      onPairDeviceClick={pairDevice}
+      loading={loading}
+      error={error}
+    />
+  )
+}

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

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

src/context/WalletProvider/Phantom/components/SnapInstall.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { SnapContent } from 'components/Modals/Snaps/SnapContent'
+import { WalletActions } from 'context/WalletProvider/actions'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+export const SnapInstall = () => {
+  const { dispatch } = useWallet()
+
+  const handleClose = useCallback(() => {
+    dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+  }, [dispatch])
+
+  return (
+    <SnapContent
+      onClose={handleClose}
+      // If we land here, we don't care about versioning, the user does *not* have the snap installed yet
+      isCorrectVersion
+      isSnapInstalled={false}
+    />
+  )
+}

src/context/WalletProvider/Phantom/components/SnapUpdate.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { SnapContent } from 'components/Modals/Snaps/SnapContent'
+import { WalletActions } from 'context/WalletProvider/actions'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+export const SnapUpdate = () => {
+  const { dispatch } = useWallet()
+
+  const handleClose = useCallback(() => {
+    dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: false })
+  }, [dispatch])
+
+  return (
+    // If we land here, we know the version is incorrect
+    <SnapContent onClose={handleClose} isCorrectVersion={false} isSnapInstalled={true} />
+  )
+}

src/context/WalletProvider/Phantom/config.ts

@@ -0,0 +1,16 @@
+import type { PhantomAdapter } from '@shapeshiftoss/hdwallet-phantom'
+import { PhantomIcon } from 'components/Icons/PhantomIcon'
+import type { SupportedWalletInfo } from 'context/WalletProvider/config'
+
+type PhantomConfigType = Omit<SupportedWalletInfo<typeof PhantomAdapter>, 'routes'>
+
+export const PhantomConfig: PhantomConfigType = {
+  adapters: [
+    {
+      loadAdapter: () => import('@shapeshiftoss/hdwallet-phantom').then(m => m.PhantomAdapter),
+    },
+  ],
+  supportsMobile: 'browser',
+  icon: PhantomIcon,
+  name: 'Phantom',
+}

src/context/WalletProvider/SelectModal.tsx

@@ -64,6 +64,9 @@ const WalletSelectItem = ({
   const isCoinbaseEnabled = getConfig().REACT_APP_FEATURE_COINBASE_WALLET
   if (walletType === KeyManager.Coinbase && !isCoinbaseEnabled) return null
 
+  const isPhantomEnabled = getConfig().REACT_APP_FEATURE_PHANTOM_WALLET
+  if (walletType === KeyManager.Phantom && !isPhantomEnabled) return null
+
   const isWalletConnectV2Enabled = getConfig().REACT_APP_FEATURE_WALLET_CONNECT_V2
   if (walletType === KeyManager.WalletConnectV2 && !isWalletConnectV2Enabled) return null
 

src/context/WalletProvider/WalletProvider.tsx

@@ -80,6 +80,7 @@ export type MetaMaskLikeProvider = BrowserProvider
 export type KeyManagerWithProvider =
   | KeyManager.XDefi
   | KeyManager.MetaMask
+  | KeyManager.Phantom
   | KeyManager.WalletConnectV2
   | KeyManager.Coinbase
 

src/context/WalletProvider/config.ts

@@ -6,6 +6,7 @@ import type { KeplrAdapter } from '@shapeshiftoss/hdwallet-keplr'
 import type { WebUSBLedgerAdapter as LedgerAdapter } from '@shapeshiftoss/hdwallet-ledger-webusb'
 import type { MetaMaskAdapter } from '@shapeshiftoss/hdwallet-metamask'
 import type { NativeAdapter } from '@shapeshiftoss/hdwallet-native'
+import type { PhantomAdapter } from '@shapeshiftoss/hdwallet-phantom'
 import type { MetaMaskAdapter as MetaMaskMultiChainAdapter } from '@shapeshiftoss/hdwallet-shapeshift-multichain'
 import type { WalletConnectV2Adapter } from '@shapeshiftoss/hdwallet-walletconnectv2'
 import type { XDEFIAdapter } from '@shapeshiftoss/hdwallet-xdefi'
@@ -26,6 +27,7 @@ import { LedgerConfig } from './Ledger/config'
 import { MetaMaskConfig } from './MetaMask/config'
 import { MobileConfig } from './MobileWallet/config'
 import { NativeConfig } from './NativeWallet/config'
+import { PhantomConfig } from './Phantom/config'
 import { KeepKeyRoutes } from './routes'
 import { NativeWalletRoutes } from './types'
 import { WalletConnectV2Config } from './WalletConnectV2/config'
@@ -238,6 +240,18 @@ const MetaMaskFailure = lazy(() =>
     default: MetaMaskFailure,
   })),
 )
+
+const PhantomConnect = lazy(() =>
+  import('./Phantom/components/Connect').then(({ PhantomConnect }) => ({
+    default: PhantomConnect,
+  })),
+)
+const PhantomFailure = lazy(() =>
+  import('./Phantom/components/Failure').then(({ PhantomFailure }) => ({
+    default: PhantomFailure,
+  })),
+)
+
 const MetaMaskMenu = lazy(() =>
   import('./MetaMask/components/MetaMaskMenu').then(({ MetaMaskMenu }) => ({
     default: MetaMaskMenu,
@@ -325,6 +339,7 @@ export type SupportedWalletInfoByKeyManager = {
   [KeyManager.KeepKey]: SupportedWalletInfo<typeof WebUSBKeepKeyAdapter | typeof KkRestAdapter>
   [KeyManager.Keplr]: SupportedWalletInfo<typeof KeplrAdapter>
   [KeyManager.Ledger]: SupportedWalletInfo<typeof LedgerAdapter>
+  [KeyManager.Phantom]: SupportedWalletInfo<typeof PhantomAdapter>
   [KeyManager.MetaMask]: SupportedWalletInfo<
     typeof MetaMaskAdapter | typeof MetaMaskMultiChainAdapter
   >
@@ -404,6 +419,14 @@ export const SUPPORTED_WALLETS: SupportedWalletInfoByKeyManager = {
     ],
     connectedMenuComponent: MetaMaskMenu,
   },
+  [KeyManager.Phantom]: {
+    ...PhantomConfig,
+    routes: [
+      { path: '/phantom/connect', component: PhantomConnect },
+      { path: '/phantom/failure', component: PhantomFailure },
+    ],
+  },
+
   [KeyManager.XDefi]: {
     ...XDEFIConfig,
     routes: [