feat(dapp-connector): Add CIP-30 support (#3225)

apps/wallet-mobile/ios/Podfile.lock

@@ -821,7 +821,7 @@ SPEC CHECKSUMS:
   amplitude-react-native: 1ea3d5e1f80ccc357dd178c55c29e51c89f1cd11
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
   EXBarCodeScanner: 8e23fae8d267dbef9f04817833a494200f1fce35
   EXCamera: 0fbfa338a3776af2722d626a3437abe33f708aad
@@ -838,7 +838,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 12ea01e587c9594e7b144e1bfc86ac4d9ac28fde
   FBReactNativeSpec: faca7d16c37626ca5780a87adef703817722fe61
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: d7cc127932c89c53374452d6f93473f1970d8e88
   libaom: 144606b1da4b5915a1054383c3a4459ccdb3c661
   libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7

apps/wallet-mobile/package.json

@@ -99,7 +99,7 @@
     "@emurgo/csl-mobile-bridge": "6.0.0-alpha.9",
     "@emurgo/react-native-blockies-svg": "^0.0.2",
     "@emurgo/react-native-hid": "^5.15.6",
-    "@emurgo/yoroi-lib": "0.15.4-alpha.6",
+    "@emurgo/yoroi-lib": "0.15.4-alpha.7",
     "@formatjs/intl-datetimeformat": "^6.7.0",
     "@formatjs/intl-getcanonicallocales": "^2.1.0",
     "@formatjs/intl-locale": "^3.2.1",

apps/wallet-mobile/src/components/Icon/Connection.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Connection = ({size = 36, color = '#000000'}: Props) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 20" fill="none">
+      <Path
+        d="M16.207.293a1 1 0 10-1.414 1.414L17.086 4H7.5a1 1 0 000 2h9.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4zM6.207 10.293a1 1 0 010 1.414L3.914 14H13.5a1 1 0 110 2H3.914l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

apps/wallet-mobile/src/components/Icon/Icon.stories.tsx

@@ -272,6 +272,10 @@ storiesOf('Icon', module).add('Gallery', () => {
         <Item icon={<Icon.Square />} title="Square" />
 
         <Item icon={<Icon.Google />} title="Google" />
+
+        <Item icon={<Icon.Connection />} title="Connection" />
+
+        <Item icon={<Icon.YoroiApp />} title="YoroiApp" />
       </ScrollView>
     </FilterProvider>
   )

apps/wallet-mobile/src/components/Icon/YoroiApp.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Svg, {Defs, LinearGradient, Path, Rect, Stop} from 'react-native-svg'
+
+type Props = {
+  size?: number
+}
+
+export const YoroiApp = ({size = 36}: Props) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 49 48" fill="none">
+      <Rect x={0.5} width={48} height={48} rx={8} fill="url(#paint0_linear_16084_126466)" />
+
+      <Path
+        d="M23.702 21.15L10 11h4.304l10.16 7.293L34.674 11H39L25.23 21.15a1.318 1.318 0 01-1.527 0zM29.06 32.771L12.298 20.762v-3.44l19.465 13.834-2.703 1.615zM29.871 25.748l5.948-4.424v-3.3l-8.246 6.039 2.298 1.685zM35.143 29.54l.676-.561v-3.23l-2.974 2.106 2.298 1.686zM12.298 28.205L23.383 36l2.77-1.545-13.855-9.832v3.582z"
+        fill="#fff"
+      />
+
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_16084_126466"
+          x1={50.6518}
+          y1={77.0646}
+          x2={108.781}
+          y2={-23.2391}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#244ABF" />
+
+          <Stop offset={1} stopColor="#4760FF" />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

apps/wallet-mobile/src/components/Icon/index.ts

@@ -20,6 +20,7 @@ import {Clock} from './Clock'
 import {Close} from './Close'
 import {Coins} from './Coins'
 import {Collateral} from './Collateral'
+import {Connection} from './Connection'
 import {Copy} from './Copy'
 import {CopySuccess} from './CopySuccess'
 import {Cross} from './Cross'
@@ -120,6 +121,7 @@ import {Wallets} from './Wallets'
 import {WalletStack} from './WalletStack'
 import {Warning} from './Warning'
 import {WingRiders} from './WingRiders'
+import {YoroiApp} from './YoroiApp'
 import {YoroiNightly} from './YoroiNightly'
 import {YoroiWallet} from './YoroiWallet'
 
@@ -248,4 +250,6 @@ export const Icon = {
   Reload,
   Square,
   Google,
+  Connection,
+  YoroiApp,
 }

apps/wallet-mobile/src/components/Modal/ModalContext.tsx

@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native'
+import {NavigationProp, useNavigation} from '@react-navigation/native'
 import React from 'react'
 import {Keyboard} from 'react-native'
 
@@ -10,7 +10,12 @@ type ModalState = {
   isLoading: boolean
 }
 type ModalActions = {
-  openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => void
+  openModal: (
+    title: ModalState['title'],
+    content: ModalState['content'],
+    height?: ModalState['height'],
+    onClose?: () => void,
+  ) => void
   closeModal: () => void
   startLoading: () => void
   stopLoading: () => void
@@ -35,18 +40,25 @@ export const ModalProvider = ({
 }) => {
   const [state, dispatch] = React.useReducer(modalReducer, {...defaultState, ...initialState})
   const navigation = useNavigation()
+  const onCloseRef = React.useRef<() => void>()
   const actions = React.useRef<ModalActions>({
     closeModal: () => {
-      const lastRouteName = navigation.getState().routes.slice(-1)[0].name
-      if (lastRouteName === 'modal') {
+      if (getLastRouteName(navigation) === 'modal') {
         dispatch({type: 'close'})
         navigation.goBack()
+        onCloseRef.current?.()
       }
     },
-    openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => {
+    openModal: (
+      title: ModalState['title'],
+      content: ModalState['content'],
+      height?: ModalState['height'],
+      onClose?: () => void,
+    ) => {
       Keyboard.dismiss()
       dispatch({type: 'open', title, content, height})
       navigation.navigate('modal')
+      onCloseRef.current = onClose
     },
     startLoading: () => dispatch({type: 'startLoading'}),
     stopLoading: () => dispatch({type: 'stopLoading'}),
@@ -96,3 +108,7 @@ const defaultState: ModalState = Object.freeze({
   isOpen: false,
   isLoading: false,
 })
+
+const getLastRouteName = (navigation: NavigationProp<ReactNavigation.RootParamList>) => {
+  return navigation.getState().routes.slice(-1)[0].name
+}

apps/wallet-mobile/src/features/Discover/DiscoverNavigator.tsx

@@ -1,6 +1,6 @@
 import {createStackNavigator} from '@react-navigation/stack'
 import {useAsyncStorage} from '@yoroi/common'
-import {DappConnectorProvider} from '@yoroi/dapp-connector'
+import {DappConnector, DappConnectorProvider} from '@yoroi/dapp-connector'
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
 
@@ -9,7 +9,9 @@ import {defaultStackNavigationOptions, DiscoverRoutes} from '../../navigation'
 import {useSelectedWallet} from '../WalletManager/context/SelectedWalletContext'
 import {BrowserNavigator} from './BrowserNavigator'
 import {BrowserProvider} from './common/BrowserProvider'
+import {useOpenConfirmConnectionModal} from './common/ConfirmConnectionModal'
 import {createDappConnector} from './common/helpers'
+import {useConfirmRawTx} from './common/hooks'
 import {useStrings} from './common/useStrings'
 import {ListSkeleton} from './useCases/SelectDappFromList/ListSkeleton'
 import {SelectDappFromListScreen} from './useCases/SelectDappFromList/SelectDappFromListScreen'
@@ -20,9 +22,7 @@ export const DiscoverNavigator = () => {
   const {atoms, color} = useTheme()
   const strings = useStrings()
 
-  const appStorage = useAsyncStorage()
-  const wallet = useSelectedWallet()
-  const manager = React.useMemo(() => createDappConnector(appStorage, wallet), [appStorage, wallet])
+  const manager = useDappConnectorManager()
 
   return (
     <DappConnectorProvider manager={manager}>
@@ -50,3 +50,56 @@ export const DiscoverNavigator = () => {
     </DappConnectorProvider>
   )
 }
+
+const useDappConnectorManager = () => {
+  const appStorage = useAsyncStorage()
+  const wallet = useSelectedWallet()
+  const {openConfirmConnectionModal} = useOpenConfirmConnectionModal()
+  const confirmRawTx = useConfirmRawTx(wallet)
+
+  const confirmConnection = React.useCallback(
+    async (origin: string, manager: DappConnector) => {
+      const recommendedDApps = await manager.getDAppList()
+      const selectedDapp = recommendedDApps.dapps.find((dapp) => dapp.origins.includes(origin))
+      return new Promise<boolean>((resolve) => {
+        openConfirmConnectionModal({
+          name: selectedDapp?.name ?? origin,
+          website: origin,
+          logo: selectedDapp?.logo ?? '',
+          onConfirm: () => resolve(true),
+          onClose: () => resolve(false),
+        })
+      })
+    },
+    [openConfirmConnectionModal],
+  )
+
+  const signTx = React.useCallback(() => {
+    return new Promise<string>((resolve, reject) => {
+      confirmRawTx({
+        onConfirm: (rootKey) => {
+          resolve(rootKey)
+          return Promise.resolve()
+        },
+        onClose: () => reject(new Error('User rejected')),
+      })
+    })
+  }, [confirmRawTx])
+
+  const signData = React.useCallback(() => {
+    return new Promise<string>((resolve, reject) => {
+      confirmRawTx({
+        onConfirm: (rootKey) => {
+          resolve(rootKey)
+          return Promise.resolve()
+        },
+        onClose: () => reject(new Error('User rejected')),
+      })
+    })
+  }, [confirmRawTx])
+
+  return React.useMemo(
+    () => createDappConnector({appStorage, wallet, confirmConnection, signTx, signData}),
+    [appStorage, wallet, confirmConnection, signTx, signData],
+  )
+}

apps/wallet-mobile/src/features/Discover/common/ConfirmConnectionModal.stories.tsx

@@ -0,0 +1,39 @@
+import {action} from '@storybook/addon-actions'
+import {storiesOf} from '@storybook/react-native'
+import * as React from 'react'
+import {View} from 'react-native'
+
+import {Button} from '../../../components'
+import {ConfirmConnectionModal, useOpenConfirmConnectionModal} from './ConfirmConnectionModal'
+
+storiesOf('Discover ConfirmConnectionModal', module)
+  .addDecorator((story) => <View style={{padding: 20}}>{story()}</View>)
+  .add('initial', () => <Initial />)
+  .add('With Button', () => <WithButton />)
+
+const Initial = () => {
+  return (
+    <ConfirmConnectionModal
+      logo="https://daehx1qv45z7c.cloudfront.net/cardano-spot.png"
+      onConfirm={action('onConfirm')}
+      name="Example DApp"
+      website="example.com"
+    />
+  )
+}
+
+const WithButton = () => {
+  const {openConfirmConnectionModal} = useOpenConfirmConnectionModal()
+
+  const handleOnPress = () => {
+    openConfirmConnectionModal({
+      onConfirm: action('onConfirm'),
+      website: 'example.com',
+      name: 'Example DApp',
+      logo: 'https://daehx1qv45z7c.cloudfront.net/cardano-spot.png',
+      onClose: action('onClose'),
+    })
+  }
+
+  return <Button title="Open Modal" shelleyTheme onPress={handleOnPress} />
+}