feature(wallet-mobile): new tx review dapp info

apps/wallet-mobile/src/features/Discover/common/BrowserProvider.tsx

@@ -3,19 +3,22 @@ import {produce} from 'immer'
 import * as React from 'react'
 
 import {useWalletManager} from '../../WalletManager/context/WalletManagerProvider'
+import {DAppItem} from './helpers'
 
 const defaultActions: BrowserActions = {
   addTab: () => invalid('missing init'),
   setTabActive: () => invalid('missing init'),
   updateTab: () => invalid('missing init'),
   removeTab: () => invalid('missing init'),
   openTabs: () => invalid('missing init'),
+  updateDApp: () => invalid('missing init'),
 } as const
 
 const defaultState: BrowserState = {
   tabs: [],
   tabActiveIndex: -1,
   tabsOpen: false,
+  dApp: null,
 } as const
 
 export type TabItem = {
@@ -27,6 +30,7 @@ type BrowserState = {
   tabs: TabItem[]
   tabActiveIndex: number
   tabsOpen: boolean
+  dApp: DAppItem | null
 }
 
 const BrowserContext = React.createContext<BrowserState & BrowserActions>({
@@ -83,6 +87,9 @@ export const BrowserProvider = ({
     openTabs: (isOpen) => {
       dispatch({type: BrowserActionType.OpenTabs, isOpen})
     },
+    updateDApp: (dApp) => {
+      dispatch({type: BrowserActionType.UpdateDApp, dApp})
+    },
   }).current
 
   const context = React.useMemo<BrowserState & BrowserActions>(
@@ -103,6 +110,7 @@ enum BrowserActionType {
   UpdateTab = 'updateTab',
   RemoveTab = 'removeTab',
   OpenTabs = 'openTabs',
+  UpdateDApp = 'updateDApp',
 }
 
 type BrowserContextAction =
@@ -133,13 +141,18 @@ type BrowserContextAction =
       type: BrowserActionType.OpenTabs
       isOpen: boolean
     }
+  | {
+      type: BrowserActionType.UpdateDApp
+      dApp: DAppItem | null
+    }
 
 type BrowserActions = Readonly<{
   addTab: (url: string, id: string) => void
   setTabActive: (index: number) => void
   updateTab: (tabIndex: number, tabInfo: Partial<Omit<TabItem, 'id'>>) => void
   removeTab: (index: number) => void
   openTabs: (isOpen: boolean) => void
+  updateDApp: (dApp: DAppItem | null) => void
 }>
 
 const browserReducer = (state: BrowserState, action: BrowserContextAction): BrowserState => {
@@ -171,6 +184,10 @@ const browserReducer = (state: BrowserState, action: BrowserContextAction): Brow
       case BrowserActionType.OpenTabs:
         draft.tabsOpen = action.isOpen
         break
+
+      case BrowserActionType.UpdateDApp:
+        draft.dApp = action.dApp
+        break
     }
   })
 }

apps/wallet-mobile/src/features/Discover/useCases/SelectDappFromList/DAppListItem/DAppListItem.tsx

@@ -39,7 +39,7 @@ type Props = {
 }
 export const DAppListItem = ({dApp, connected, onPress}: Props) => {
   const {styles, colors} = useStyles()
-  const {addTab, setTabActive, tabs} = useBrowser()
+  const {addTab, setTabActive, tabs, updateDApp} = useBrowser()
   const navigateTo = useNavigateTo()
   const {openModal, closeModal} = useModal()
   const insets = useSafeAreaInsets()
@@ -68,6 +68,7 @@ export const DAppListItem = ({dApp, connected, onPress}: Props) => {
     const id = uuid.v4()
     addTab(dApp.uri, id)
     setTabActive(tabs.length)
+    updateDApp(dApp)
 
     navigateTo.browseDapp()
   }

apps/wallet-mobile/src/features/Discover/useDappConnectorManager.ts → apps/wallet-mobile/src/features/Discover/useDappConnectorManager.tsx

@@ -9,7 +9,9 @@ import {logger} from '../../kernel/logger/logger'
 import {useWalletNavigation} from '../../kernel/navigation'
 import {cip30LedgerExtensionMaker} from '../../yoroi-wallets/cardano/cip30/cip30-ledger'
 import {useReviewTx} from '../ReviewTx/common/ReviewTxProvider'
+import {CreatedByInfoItem} from '../ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab'
 import {useSelectedWallet} from '../WalletManager/common/hooks/useSelectedWallet'
+import {useBrowser} from './common/BrowserProvider'
 import {useOpenConfirmConnectionModal} from './common/ConfirmConnectionModal'
 import {useConfirmHWConnectionModal} from './common/ConfirmHWConnectionModal'
 import {isUserRejectedError, userRejectedError} from './common/errors'
@@ -26,6 +28,7 @@ export const useDappConnectorManager = () => {
   const {wallet, meta} = useSelectedWallet()
   const {navigateToTxReview} = useWalletNavigation()
   const {cborChanged} = useReviewTx()
+  const {dApp} = useBrowser()
 
   const confirmConnection = useConfirmConnection()
 
@@ -46,6 +49,9 @@ export const useDappConnectorManager = () => {
             let shouldResolve = true
             cborChanged(cbor)
             navigateToTxReview({
+              createdBy: dApp?.uri != null && dApp?.logo != null && (
+                <CreatedByInfoItem logo={dApp.logo} url={dApp.uri} />
+              ),
               onConfirm: async () => {
                 if (!shouldResolve) return
                 shouldResolve = false
@@ -68,6 +74,9 @@ export const useDappConnectorManager = () => {
             let shouldResolve = true
             cborChanged(cbor)
             navigateToTxReview({
+              createdBy: dApp?.uri != null && dApp?.logo != null && (
+                <CreatedByInfoItem logo={dApp.logo} url={dApp.uri} />
+              ),
               onConfirm: () => {
                 if (!shouldResolve) return
                 shouldResolve = false
@@ -102,6 +111,8 @@ export const useDappConnectorManager = () => {
       signDataWithHW,
       cborChanged,
       navigateToTxReview,
+      dApp?.uri,
+      dApp?.logo,
       promptRootKey,
       navigateTo,
       signTxWithHW,

apps/wallet-mobile/src/features/ReviewTx/common/hooks/useStrings.tsx

@@ -72,6 +72,7 @@ export const useStrings = () => {
     receiveLabel: intl.formatMessage(messages.receiveLabel),
     operationsLabel: intl.formatMessage(messages.operationsLabel),
     policyIdLabel: intl.formatMessage(messages.policyIdLabel),
+    createdBy: intl.formatMessage(messages.createdBy),
   }
 }
 
@@ -337,4 +338,8 @@ const messages = defineMessages({
     id: 'txReview.policyIdLabel',
     defaultMessage: '!!!Policy ID',
   },
+  createdBy: {
+    id: 'txReview.createdBy',
+    defaultMessage: '!!!Created by',
+  },
 })

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/Overview/OverviewTab.tsx

@@ -2,8 +2,9 @@ import {CredKind} from '@emurgo/cross-csl-core'
 import {Blockies} from '@yoroi/identicon'
 import {useTheme} from '@yoroi/theme'
 import {Balance} from '@yoroi/types'
+import {Image} from 'expo-image'
 import * as React from 'react'
-import {StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'
+import {Linking, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View} from 'react-native'
 
 import {Divider} from '../../../../../../components/Divider/Divider'
 import {Icon} from '../../../../../../components/Icon'
@@ -27,11 +28,13 @@ export const OverviewTab = ({
   extraOperations,
   receiverCustomTitle,
   details,
+  createdBy,
 }: {
   tx: FormattedTx
   extraOperations?: Array<React.ReactNode>
   receiverCustomTitle?: React.ReactNode
   details?: {title: string; component: React.ReactNode}
+  createdBy: React.ReactNode | undefined
 }) => {
   const {styles} = useStyles()
   const operations = useOperations(tx.certificates)
@@ -43,7 +46,7 @@ export const OverviewTab = ({
     <View style={styles.root}>
       <Space height="lg" />
 
-      <WalletInfoSection tx={tx} />
+      <WalletInfoSection tx={tx} createdBy={createdBy} />
 
       <Divider verticalSpace="lg" />
 
@@ -68,7 +71,7 @@ export const OverviewTab = ({
   )
 }
 
-const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {
+const WalletInfoSection = ({tx, createdBy}: {tx: FormattedTx; createdBy: React.ReactNode}) => {
   const {styles} = useStyles()
   const strings = useStrings()
   const {wallet, meta} = useSelectedWallet()
@@ -104,6 +107,14 @@ const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {
 
       <Space height="sm" />
 
+      {createdBy != null && (
+        <>
+          {createdBy}
+
+          <Space height="sm" />
+        </>
+      )}
+
       <FeeInfoItem fee={tx.fee.label} />
     </>
   )
@@ -394,6 +405,27 @@ const Details = ({details}: {details?: {title: string; component: React.ReactNod
   )
 }
 
+export const CreatedByInfoItem = ({logo, url}: {logo?: string; url: string}) => {
+  const {styles} = useStyles()
+  const strings = useStrings()
+
+  return (
+    <View style={styles.infoItem}>
+      <Text style={styles.infoLabel}>{strings.createdBy}</Text>
+
+      <View style={styles.plate}>
+        {logo != null && <Image source={{uri: logo}} style={styles.logo} />}
+
+        <Space width="xs" />
+
+        <TouchableOpacity onPress={() => Linking.openURL(url)}>
+          <Text style={styles.link}>{url.replace(/^https?:\/\//, '').replace(/\/+$/, '')}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
@@ -475,6 +507,14 @@ const useStyles = () => {
       ...atoms.body_2_md_medium,
       color: color.text_primary_medium,
     },
+    link: {
+      color: color.text_primary_medium,
+      ...atoms.body_2_md_medium,
+    },
+    logo: {
+      width: 24,
+      height: 24,
+    },
   })
 
   const colors = {

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTx/ReviewTx.tsx

@@ -32,13 +32,15 @@ export const ReviewTx = ({
   operations,
   details,
   receiverCustomTitle,
+  createdBy,
   onConfirm,
 }: {
   formattedTx: FormattedTx
   formattedMetadata: FormattedMetadata | undefined
   operations: Array<React.ReactNode> | undefined
   details: {title: string; component: React.ReactNode} | undefined
   receiverCustomTitle: React.ReactNode | undefined
+  createdBy: React.ReactNode | undefined
   onConfirm: () => void
 }) => {
   const {styles} = useStyles()
@@ -67,6 +69,7 @@ export const ReviewTx = ({
                 tx={formattedTx}
                 extraOperations={operations}
                 details={details}
+                createdBy={createdBy}
                 receiverCustomTitle={receiverCustomTitle}
               />
             </ScrollView>

apps/wallet-mobile/src/features/ReviewTx/useCases/ReviewTxScreen/ReviewTxScreen.tsx

@@ -49,6 +49,7 @@ export const ReviewTxScreen = () => {
       operations={params?.operations}
       details={params?.details}
       receiverCustomTitle={params?.receiverCustomTitle}
+      createdBy={params?.createdBy}
       onConfirm={handleOnConfirm}
     />
   )

apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

@@ -1283,5 +1283,6 @@
   "txReview.receiveLabel": "Receive",
   "txReview.operationsLabel": "Operations",
   "txReview.policyIdLabel": "Policy ID",
-  "txReview.tabLabel.referenceInputs": "Reference inputs"
+  "txReview.tabLabel.referenceInputs": "Reference inputs",
+  "txReview.tabLabel.createdBy": "Created by"
 }

apps/wallet-mobile/src/kernel/navigation.tsx

@@ -278,6 +278,7 @@ export type ReviewTxRoutes = {
     operations?: Array<React.ReactNode>
     receiverCustomTitle?: React.ReactNode
     details?: {title: string; component: React.ReactNode}
+    createdBy?: React.ReactNode
     onConfirm?: () => void
     onCancel?: () => void
     onSuccess?: (signedTx: YoroiSignedTx) => void