[C-1554] Add phantom connect + sign message flow (#2328)

packages/common/src/store/pages/token-dashboard/selectors.ts

@@ -47,3 +47,5 @@ export const getCanRecipientReceiveWAudio = (state: CommonState) => {
   }
   return 'false'
 }
+export const getConfirmingWallet = (state: CommonState) =>
+  state.pages.tokenDashboard.associatedWallets.confirmingWallet

packages/common/src/store/pages/token-dashboard/types.ts

@@ -78,6 +78,7 @@ export type AssociatedWalletsState = {
     chain: Nullable<Chain>
     balance: Nullable<any> // TODO(nkang) `any` should be `BNWei`
     collectibleCount: Nullable<number>
+    signature: Nullable<string>
   }
   errorMessage: Nullable<string>
   removeWallet: {

packages/mobile/src/components/navigation-container/NavigationContainer.tsx

@@ -61,7 +61,8 @@ const NavigationContainer = (props: NavigationContainerProps) => {
                       initialRouteName: 'Wallets',
                       screens: {
                         Wallets: 'wallets',
-                        ConfirmWalletConnection: 'wallet-connect'
+                        ConfirmWalletConnection: 'wallet-connect',
+                        ConfirmSignMessage: 'wallet-sign-message'
                       }
                     },
                     Feed: 'feed',
@@ -141,8 +142,24 @@ const NavigationContainer = (props: NavigationContainerProps) => {
       // Add leading slash if it is missing
       if (path[0] !== '/') path = `/${path}`
 
-      // Remove the app-redirect prefix if present
+      const walletConnectPath = /^\/(wallet-connect)/
+      if (path.match(walletConnectPath)) {
+        path = `${path.replace(
+          walletConnectPath,
+          '/wallets'
+        )}&path=wallet-connect`
+      }
+
+      const walletSignPath = /^\/(wallet-sign-message)/
+      if (path.match(walletSignPath)) {
+        path = `${path.replace(
+          walletSignPath,
+          '/wallets'
+        )}&path=wallet-sign-message`
+      }
+
       if (path.match(`^/app-redirect`)) {
+        // Remove the app-redirect prefix if present
         path = path.replace(`/app-redirect`, '')
       }
 

packages/mobile/src/screens/wallet-connect/WalletConnectScreen.tsx

@@ -1,18 +1,21 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
+import { useRoute } from '@react-navigation/native'
 import { useWalletConnect } from '@walletconnect/react-native-dapp'
 import { View } from 'react-native'
+import { useDispatch } from 'react-redux'
 
 import IconLink from 'app/assets/images/iconLink.svg'
 import IconRemove from 'app/assets/images/iconRemove.svg'
 import { Button, Text, Screen } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
+import { connectNewWallet, signMessage } from 'app/store/wallet-connect/slice'
 import { makeStyles } from 'app/styles'
 
 import { TopBarIconButton } from '../app-screen'
 
 import { LinkedWallets } from './components'
-import type { WalletConnectParamList } from './types'
+import type { WalletConnectParamList, WalletConnectRoute } from './types'
 
 const messages = {
   title: 'Connect Wallets',
@@ -26,9 +29,7 @@ const messages = {
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
   root: {
     paddingVertical: spacing(4),
-    paddingHorizontal: spacing(4),
-    height: '100%',
-    backgroundColor: 'white'
+    paddingHorizontal: spacing(4)
   },
   subtitle: {
     textAlign: 'center',
@@ -53,6 +54,17 @@ export const WalletConnectScreen = () => {
   const styles = useStyles()
   const navigation = useNavigation<WalletConnectParamList>()
   const connector = useWalletConnect()
+  const dispatch = useDispatch()
+  const { params } = useRoute<WalletConnectRoute<'Wallets'>>()
+
+  useEffect(() => {
+    if (!params) return
+    if (params.path === 'wallet-connect') {
+      dispatch(connectNewWallet(params))
+    } else if (params.path === 'wallet-sign-message') {
+      dispatch(signMessage(params))
+    }
+  }, [params?.path, params, dispatch])
 
   const handleConnectWallet = useCallback(() => {
     connector.connect()
@@ -62,7 +74,7 @@ export const WalletConnectScreen = () => {
     <Screen
       title={messages.title}
       icon={IconLink}
-      variant='secondary'
+      variant='white'
       topbarLeft={
         <TopBarIconButton icon={IconRemove} onPress={navigation.goBack} />
       }

packages/mobile/src/screens/wallet-connect/WalletConnectStack.tsx

@@ -7,7 +7,6 @@ import { ToastContextProvider } from 'app/components/toast/ToastContext'
 
 import { useAppScreenOptions } from '../app-screen/useAppScreenOptions'
 
-import { ConfirmWalletConnectionScreen } from './ConfirmWalletConnectionScreen'
 import { WalletConnectScreen } from './WalletConnectScreen'
 import { WalletConnectProviderRenderModal, WalletsDrawer } from './components'
 
@@ -30,10 +29,6 @@ export const WalletConnectStack = () => {
       >
         <Stack.Navigator screenOptions={screenOptions}>
           <Stack.Screen name='Wallets' component={WalletConnectScreen} />
-          <Stack.Screen
-            name='ConfirmWalletConnection'
-            component={ConfirmWalletConnectionScreen}
-          />
         </Stack.Navigator>
         <NativeDrawer drawerName='ConnectWallets' drawer={WalletsDrawer} />
       </WalletConnectProvider>

packages/mobile/src/screens/wallet-connect/components/LinkedWallets.tsx

@@ -67,6 +67,9 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   linkedWalletLogo: {
     marginRight: spacing(2)
   },
+  linkedWalletActions: {
+    width: spacing(7)
+  },
   chainIcon: {
     borderWidth: 1,
     borderColor: palette.neutralLight7,
@@ -260,6 +263,7 @@ export const LinkedWallets = () => {
         >
           {messages.audio}
         </Text>
+        <View />
       </View>
       <FlatList
         renderItem={({ item }) => (

packages/mobile/src/screens/wallet-connect/components/PhantomWalletConnectOption.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'react'
+
+import bs58 from 'bs58'
+import { Linking } from 'react-native'
+import { useDispatch } from 'react-redux'
+import nacl from 'tweetnacl'
+
+import IconPhantom from 'app/assets/images/iconPhantom.svg'
+import { setDappKeyPair } from 'app/store/wallet-connect/slice'
+import { buildUrl, serializeKeyPair } from 'app/store/wallet-connect/utils'
+
+import { WalletConnectOption } from './WalletConnectOption'
+
+export const PhantomWalletConnectOption = () => {
+  const dispatch = useDispatch()
+
+  const handleConnectWallet = useCallback(() => {
+    const dappKeyPair = nacl.box.keyPair()
+    dispatch(setDappKeyPair({ dappKeyPair: serializeKeyPair(dappKeyPair) }))
+
+    const params = new URLSearchParams({
+      dapp_encryption_public_key: bs58.encode(dappKeyPair.publicKey),
+      cluster: 'mainnet-beta',
+      app_url: 'https://audius.co',
+      redirect_link: 'audius://wallet-connect'
+    })
+
+    const url = buildUrl('connect', params)
+
+    Linking.openURL(url)
+  }, [dispatch])
+
+  return (
+    <WalletConnectOption
+      name='Phantom'
+      icon={<IconPhantom height={50} width={50} />}
+      onPress={handleConnectWallet}
+    />
+  )
+}