Update wallet linking (helium#43)

* Use @helium/wallet-link in place of @helium/react-native-sdk

* update @helium libraries

Co-authored-by: Tyler Whitman <twhit093@gmail.com>

ios/Podfile.lock

@@ -51,7 +51,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.66.3)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - helium-react-native-sdk (0.3.0):
+  - helium-react-native-sdk (1.0.0):
     - React-Core
   - Mapbox-iOS-SDK (5.9.0):
     - MapboxMobileEvents (= 0.10.2)
@@ -635,7 +635,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 6192956c9e346013d5f1809ba049af720b11c6a4
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 43737235ae6a21de4f45297f4f73b6420fc2ecb2
-  helium-react-native-sdk: 1850589e66df3224f30cc2c39b72fd31de8fe168
+  helium-react-native-sdk: 32c0a7e3abc733a7f3d291013b2db31475fc6980
   Mapbox-iOS-SDK: a5915700ec84bc1a7f8b3e746d474789e35b7956
   MapboxMobileEvents: 2bc0ca2eedb627b73cf403258dce2b2fa98074a6
   MultiplatformBleAdapter: 5a6a897b006764392f9cef785e4360f54fb9477d

package.json

@@ -38,13 +38,14 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.0.3",
-    "@helium/crypto-react-native": "^3.60.0",
-    "@helium/currency": "^3.52.0",
-    "@helium/http": "^4.3.1",
-    "@helium/onboarding": "^3.59.0",
-    "@helium/proto-ble": "^3.37.0",
-    "@helium/react-native-sdk": "0.3.0",
-    "@helium/transactions": "^3.62.0",
+    "@helium/crypto-react-native": "^4.5.0",
+    "@helium/currency": "^4.2.0",
+    "@helium/http": "^4.4.0",
+    "@helium/onboarding": "^4.5.0",
+    "@helium/proto-ble": "^4.0.0",
+    "@helium/react-native-sdk": "^1.0.0",
+    "@helium/transactions": "^4.3.1",
+    "@helium/wallet-link": "^4.5.0",
     "@react-native-community/blur": "^3.6.0",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-mapbox-gl/maps": "^8.2.0-beta2",

patches/@helium+wallet-link+4.5.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@helium/wallet-link/build/walletLink.js b/node_modules/@helium/wallet-link/build/walletLink.js
+index 8583f31..43d8b37 100644
+--- a/node_modules/@helium/wallet-link/build/walletLink.js
++++ b/node_modules/@helium/wallet-link/build/walletLink.js
+@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.createUpdateHotspotUrl = exports.createSignHotspotCallbackUrl = exports.createLinkWalletCallbackUrl = exports.createWalletLinkUrl = exports.parseWalletLinkToken = exports.verifyWalletLinkToken = exports.makeAppLinkAuthToken = void 0;
+ /* eslint-disable object-curly-newline */
+ const address_1 = __importDefault(require("@helium/address"));
+-const crypto_1 = require("@helium/crypto");
++const crypto_1 = require("@helium/crypto-react-native");
+ const query_string_1 = __importDefault(require("query-string"));
+ const date_fns_1 = require("date-fns");
+ const types_1 = require("./types");

src/features/hotspots/setup/HotspotTxnsProgressScreen.tsx

@@ -5,11 +5,15 @@ import { isString } from 'lodash'
 import {
   useHotspotBle,
   HotspotErrorCode,
-  WalletLink,
   Location,
   useOnboarding,
 } from '@helium/react-native-sdk'
-import { ActivityIndicator, Linking } from 'react-native'
+import { ActivityIndicator, Linking, Platform } from 'react-native'
+import {
+  createUpdateHotspotUrl,
+  parseWalletLinkToken,
+  SignHotspotRequest,
+} from '@helium/wallet-link'
 import Box from '../../../components/Box'
 import Text from '../../../components/Text'
 import { RootNavigationProp } from '../../../navigation/main/tabTypes'
@@ -56,7 +60,7 @@ const HotspotTxnsProgressScreen = () => {
     const token = await getSecureItem('walletLinkToken')
     if (!token) throw new Error('Token Not found')
 
-    const parsed = WalletLink.parseWalletLinkToken(token)
+    const parsed = parseWalletLinkToken(token)
     if (!parsed?.address) throw new Error('Invalid Token')
 
     const { address: ownerAddress } = parsed
@@ -73,7 +77,8 @@ const HotspotTxnsProgressScreen = () => {
 
     const updateParams = {
       token,
-    } as WalletLink.SignHotspotRequest
+      platform: Platform.OS,
+    } as SignHotspotRequest
 
     // check if add gateway needed
     const isOnChain = await hotspotOnChain(hotspotAddress)
@@ -113,7 +118,7 @@ const HotspotTxnsProgressScreen = () => {
       updateParams.assertLocationTxn = assertLocationTxn.toString()
     }
 
-    const url = WalletLink.createUpdateHotspotUrl(updateParams)
+    const url = createUpdateHotspotUrl(updateParams)
     if (!url) {
       // eslint-disable-next-line no-console
       console.error('Link could not be created')

src/features/moreTab/more/MoreScreen.tsx

@@ -12,8 +12,8 @@ import { useSelector } from 'react-redux'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { isEqual } from 'lodash'
 import { Edge } from 'react-native-safe-area-context'
-import { WalletLink } from '@helium/react-native-sdk'
 import { useAsync } from 'react-async-hook'
+import { parseWalletLinkToken } from '@helium/wallet-link'
 import SafeAreaBox from '../../../components/SafeAreaBox'
 import Text from '../../../components/Text'
 import { RootState } from '../../../store/rootReducer'
@@ -47,7 +47,7 @@ const MoreScreen = () => {
   useAsync(async () => {
     const token = await getSecureItem('walletLinkToken')
     if (!token) return ''
-    const parsedToken = WalletLink.parseWalletLinkToken(token)
+    const parsedToken = parseWalletLinkToken(token)
 
     const truncatedAddress = [
       parsedToken.address.slice(0, 8),

src/features/onboarding/CreateAccount.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { WalletLink } from '@helium/react-native-sdk'
 import { Linking, Platform } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
+import { DelegateApp, DELEGATE_APPS } from '@helium/wallet-link'
 import SafeAreaBox from '../../components/SafeAreaBox'
 import Text from '../../components/Text'
 import Box from '../../components/Box'
@@ -11,11 +11,10 @@ import { locale } from '../../utils/i18n'
 
 const CreateAccount = () => {
   const { t } = useTranslation()
-  const { delegateApps } = WalletLink
   const nav = useNavigation()
 
   const handleAppSelection = useCallback(
-    (app: WalletLink.DelegateApp) => async () => {
+    (app: DelegateApp) => async () => {
       if (Platform.OS === 'android') {
         Linking.openURL(`market://details?id=${app.androidPackage}`)
       } else if (Platform.OS === 'ios') {
@@ -35,7 +34,7 @@ const CreateAccount = () => {
       </Text>
 
       <Box flexDirection="row" marginBottom="l">
-        {delegateApps.map((app) => (
+        {DELEGATE_APPS.map((app) => (
           <TouchableOpacityBox
             key={app.name}
             backgroundColor="surface"

src/features/onboarding/LinkAccount.tsx

@@ -1,21 +1,24 @@
 import React, { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { WalletLink } from '@helium/react-native-sdk'
 import { Linking, Platform } from 'react-native'
 import { getBundleId } from 'react-native-device-info'
+import {
+  createWalletLinkUrl,
+  DelegateApp,
+  DELEGATE_APPS,
+} from '@helium/wallet-link'
 import SafeAreaBox from '../../components/SafeAreaBox'
 import Text from '../../components/Text'
 import Box from '../../components/Box'
 import TouchableOpacityBox from '../../components/TouchableOpacityBox'
 
 const LinkAccount = () => {
   const { t } = useTranslation()
-  const { delegateApps } = WalletLink
 
   const handleAppSelection = useCallback(
-    (app: WalletLink.DelegateApp) => async () => {
+    (app: DelegateApp) => async () => {
       try {
-        const url = WalletLink.createWalletLinkUrl({
+        const url = createWalletLinkUrl({
           universalLink: app.universalLink,
           requestAppId: getBundleId(),
           callbackUrl: 'makerappscheme://',
@@ -38,7 +41,7 @@ const LinkAccount = () => {
       </Text>
 
       <Box flexDirection="column" marginBottom="l">
-        {delegateApps.map((app) => (
+        {DELEGATE_APPS.map((app) => (
           <TouchableOpacityBox
             key={
               Platform.OS === 'android' ? app.androidPackage : app.iosBundleId

src/features/transferHotspot/TransferHotspot.tsx

@@ -1,9 +1,13 @@
 import React, { useState, useCallback } from 'react'
-import { Transfer, WalletLink } from '@helium/react-native-sdk'
+import { Transfer } from '@helium/react-native-sdk'
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import { ActivityIndicator, Linking } from 'react-native'
+import { ActivityIndicator, Linking, Platform } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import { useAsync } from 'react-async-hook'
+import {
+  createUpdateHotspotUrl,
+  parseWalletLinkToken,
+} from '@helium/wallet-link'
 import Text from '../../components/Text'
 import BackButton from '../../components/BackButton'
 import SafeAreaBox from '../../components/SafeAreaBox'
@@ -49,7 +53,7 @@ const TransferHotspot = () => {
     const token = await getSecureItem('walletLinkToken')
     if (!token) throw new Error('Token Not found')
 
-    const parsed = WalletLink.parseWalletLinkToken(token)
+    const parsed = parseWalletLinkToken(token)
     if (!parsed?.address) throw new Error('Invalid Token')
 
     try {
@@ -90,7 +94,8 @@ const TransferHotspot = () => {
       )
 
       // create wallet link url to sent transfer v2
-      const url = WalletLink.createUpdateHotspotUrl({
+      const url = createUpdateHotspotUrl({
+        platform: Platform.OS,
         token,
         transferHotspotTxn: transferHotspotV2Txn.toString(),
       })

src/providers/AppLinkProvider.tsx

@@ -10,6 +10,10 @@ import { Linking } from 'react-native'
 import queryString from 'query-string'
 import { BarCodeScannerResult } from 'expo-barcode-scanner'
 import { useSelector } from 'react-redux'
+import {
+  parseWalletLinkToken,
+  verifyWalletLinkToken,
+} from '@helium/wallet-link'
 import useMount from '../utils/useMount'
 import { RootState } from '../store/rootReducer'
 import navigator from '../navigation/navigator'
@@ -79,7 +83,18 @@ const useAppLink = () => {
         }
         case 'link_wallet': {
           const walletLink = record as WalletLink
+          if (typeof record.token !== 'string') {
+            throw new Error('Invalid wallet link')
+          }
+
+          const parsedToken = parseWalletLinkToken(record.token)
           if (walletLink.status === 'success' && walletLink.token) {
+            const verified = verifyWalletLinkToken(parsedToken, {
+              maxAgeInSeconds: 60,
+            })
+
+            if (!verified) throw new Error('Invalid wallet link')
+
             dispatch(appSlice.actions.storeWalletLinkToken(walletLink.token))
           } else {
             // TODO: handle error

src/providers/appLinkTypes.ts

@@ -1,4 +1,4 @@
-import { WalletLink as HeliumWalletLink } from '@helium/react-native-sdk'
+import { LinkWalletResponse, SignHotspotResponse } from '@helium/wallet-link'
 
 export const AppLinkCategories = [
   'add_gateway',
@@ -16,6 +16,6 @@ export type AppLink = {
   [key: string]: string | number | undefined
 }
 
-export type WalletLink = AppLink & HeliumWalletLink.LinkWalletResponse
+export type WalletLink = AppLink & LinkWalletResponse
 
-export type HotspotLink = AppLink & HeliumWalletLink.SignHotspotResponse
+export type HotspotLink = AppLink & SignHotspotResponse

src/utils/secureAccount.ts

@@ -1,4 +1,4 @@
-import { WalletLink } from '@helium/react-native-sdk'
+import { parseWalletLinkToken } from '@helium/wallet-link'
 import * as SecureStore from 'expo-secure-store'
 
 type AccountStoreKey = BooleanKey | StringKey
@@ -32,7 +32,7 @@ export async function getSecureItem(key: AccountStoreKey) {
 export const getAddress = async () => {
   const token = await getSecureItem('walletLinkToken')
   if (!token) return
-  const parsed = WalletLink.parseWalletLinkToken(token)
+  const parsed = parseWalletLinkToken(token)
   if (!parsed?.address) return
   const { address } = parsed
   return address