feature(wallet-mobile): cap to open secondary token link when NFT (#3676

)

Signed-off-by: Juliano Lazzarotto <[email protected]>
Co-authored-by: Michal S <[email protected]>

apps/wallet-mobile/src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx

@@ -1,6 +1,6 @@
 import {RouteProp, useRoute} from '@react-navigation/native'
 import {isString} from '@yoroi/common'
-import {usePortfolioTokenDiscovery, usePortfolioTokenTraits} from '@yoroi/portfolio'
+import {traitValueExpander, usePortfolioTokenDiscovery, usePortfolioTokenTraits} from '@yoroi/portfolio'
 import {useTheme} from '@yoroi/theme'
 import {Explorers, Network, Portfolio} from '@yoroi/types'
 import React, {ReactNode, useState} from 'react'
@@ -19,6 +19,7 @@ import {
 import {Boundary} from '../../../../components/Boundary/Boundary'
 import {CopyButton} from '../../../../components/CopyButton'
 import {FadeIn} from '../../../../components/FadeIn'
+import {Hr} from '../../../../components/Hr/Hr'
 import {Spacer} from '../../../../components/Spacer/Spacer'
 import {Tab, TabPanel, TabPanels, Tabs} from '../../../../components/Tabs/Tabs'
 import {Text} from '../../../../components/Text'
@@ -86,7 +87,7 @@ export const MediaDetailsScreen = () => {
             />
           </Tabs>
 
-          <Boundary>
+          <Boundary loading={{enabled: true}}>
             <Details info={amount.info} activeTab={activeTab} networkManager={networkManager} />
           </Boundary>
         </ScrollView>
@@ -204,13 +205,7 @@ const NftOverview = ({info, explorers, traits}: NftOverviewProps) => {
       </MetadataRow>
 
       {traits?.traits.map((trait) => (
-        <MetadataRow key={`${info.id}-trait-${trait.type}`} title={trait.type}>
-          <View style={styles.rowBetween}>
-            <Text style={styles.name}>{trait.value}</Text>
-
-            <Text style={styles.name}>{trait.rarity}</Text>
-          </View>
-        </MetadataRow>
+        <Trait key={`trait-${trait.type}`} trait={trait} />
       ))}
 
       <MetadataRow title={strings.detailsLinks}>
@@ -244,7 +239,7 @@ const NftOverview = ({info, explorers, traits}: NftOverviewProps) => {
         </View>
       </MetadataRow>
 
-      <HR />
+      <Hr />
 
       <Spacer height={24} />
     </View>
@@ -255,14 +250,29 @@ const normalizeMetadataString = (content?: unknown): string => {
   return !isString(content) || content.length === 0 ? '-' : content
 }
 
-const HR = () => (
-  <View
-    style={{
-      borderBottomWidth: 1,
-      borderColor: 'rgba(173, 174, 182, 0.3)',
-    }}
-  />
-)
+const Trait = ({trait}: {trait: Portfolio.Token.Trait}) => {
+  const styles = useStyles()
+  const expandedTraitValue = traitValueExpander(trait.value)
+  const isOpenableLink = expandedTraitValue.type === 'link' && isSupportedUrl(expandedTraitValue.transformedValue)
+
+  return (
+    <MetadataRow title={trait.type}>
+      <View style={styles.rowBetween}>
+        {isOpenableLink && expandedTraitValue.type === 'link' ? (
+          <View style={[styles.linkContent, styles.flex]}>
+            <TouchableOpacity onPress={() => Linking.openURL(expandedTraitValue.transformedValue)}>
+              <Text style={styles.linkText}>{trait.value}</Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <Text style={styles.name}>{trait.value}</Text>
+        )}
+
+        <Text style={styles.rarity}>{trait.rarity}</Text>
+      </View>
+    </MetadataRow>
+  )
+}
 
 const NftMetadata = ({discovery}: {discovery: Portfolio.Token.Discovery}) => {
   const styles = useStyles()
@@ -284,11 +294,16 @@ const NftMetadata = ({discovery}: {discovery: Portfolio.Token.Discovery}) => {
   )
 }
 
+const isSupportedUrl = (url: string) => url.toLocaleLowerCase().startsWith('https')
+
 type ActiveTab = 'overview' | 'metadata'
 
 const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
+    flex: {
+      ...atoms.flex_1,
+    },
     copyButton: {
       flex: 1,
       display: 'flex',
@@ -303,9 +318,8 @@ const useStyles = () => {
     },
     linkText: {
       color: color.primary_500,
-      ...atoms.body_1_lg_regular,
-      flex: 1,
-      textDecorationLine: 'underline',
+      ...atoms.link_1_lg_underline,
+      ...atoms.flex_1,
     },
     copyText: {
       color: color.gray_900,
@@ -327,11 +341,10 @@ const useStyles = () => {
       paddingVertical: imagePadding,
     },
     rowBetween: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      flexWrap: 'nowrap',
-      justifyContent: 'space-between',
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_between,
+      ...atoms.gap_lg,
     },
     copyMetadata: {
       display: 'flex',
@@ -349,6 +362,13 @@ const useStyles = () => {
     name: {
       color: color.gray_600,
       ...atoms.body_2_md_regular,
+      ...atoms.flex_1,
+    },
+    rarity: {
+      minWidth: 60,
+      color: color.gray_600,
+      ...atoms.body_2_md_regular,
+      ...atoms.text_right,
     },
   })
   return styles

apps/wallet-mobile/src/features/Portfolio/useCases/PortfolioTokenDetails/PortfolioTokenInfo/Overview/Overview.tsx

@@ -7,6 +7,7 @@ import {Accordion} from '../../../../../../components/Accordion/Accordion'
 import {CopyButton} from '../../../../../../components/CopyButton'
 import {Spacer} from '../../../../../../components/Spacer/Spacer'
 import {features} from '../../../../../../kernel/features'
+import {isEmptyString} from '../../../../../../kernel/utils'
 import {useSelectedWallet} from '../../../../../WalletManager/common/hooks/useSelectedWallet'
 import {usePortfolioTokenDetailParams} from '../../../../common/hooks/useNavigateTo'
 import {useStrings} from '../../../../common/hooks/useStrings'
@@ -46,7 +47,7 @@ export const Overview = () => {
         <View style={styles.tokenInfoContainer}>
           <TokenInfoIcon size="sm" info={tokenInfo.info} imageStyle={styles.tokenLogo} />
 
-          <Text style={styles?.tokenName}>{tokenSymbol}</Text>
+          <Text style={styles.tokenName}>{tokenSymbol}</Text>
         </View>
 
         <Text style={styles.textBody}>{tokenInfo.info?.description}</Text>
@@ -58,7 +59,13 @@ export const Overview = () => {
 
           <Spacer height={4} />
 
-          <Text style={styles.textBody}>{tokenInfo.info?.website ?? '-'}</Text>
+          {!isEmptyString(tokenInfo.info?.website) ? (
+            <TouchableOpacity onPress={() => Linking.openURL(tokenInfo.info.website)}>
+              <Text style={styles.linkText}>{tokenInfo.info.website}</Text>
+            </TouchableOpacity>
+          ) : (
+            <Text style={styles.textBody}>-</Text>
+          )}
         </View>
 
         <Spacer height={24} />
@@ -161,6 +168,11 @@ const useStyles = () => {
       ...atoms.flex_row,
       ...atoms.gap_lg,
     },
+    linkText: {
+      color: color.primary_500,
+      ...atoms.link_1_lg_underline,
+      ...atoms.flex_1,
+    },
     title: {
       ...atoms.body_1_lg_medium,
       ...atoms.font_semibold,

apps/wallet-mobile/translations/messages/src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.json

@@ -4,164 +4,164 @@
     "defaultMessage": "!!!NFT Details",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 358,
+      "line": 378,
       "column": 9,
-      "index": 10056
+      "index": 10888
     },
     "end": {
-      "line": 361,
+      "line": 381,
       "column": 3,
-      "index": 10127
+      "index": 10959
     }
   },
   {
     "id": "nft.detail.overview",
     "defaultMessage": "!!!Overview",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 362,
+      "line": 382,
       "column": 12,
-      "index": 10141
+      "index": 10973
     },
     "end": {
-      "line": 365,
+      "line": 385,
       "column": 3,
-      "index": 10212
+      "index": 11044
     }
   },
   {
     "id": "nft.detail.metadata",
     "defaultMessage": "!!!Metadata",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 366,
+      "line": 386,
       "column": 12,
-      "index": 10226
+      "index": 11058
     },
     "end": {
-      "line": 369,
+      "line": 389,
       "column": 3,
-      "index": 10297
+      "index": 11129
     }
   },
   {
     "id": "nft.detail.nftName",
     "defaultMessage": "!!!NFT Name",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 370,
+      "line": 390,
       "column": 11,
-      "index": 10310
+      "index": 11142
     },
     "end": {
-      "line": 373,
+      "line": 393,
       "column": 3,
-      "index": 10380
+      "index": 11212
     }
   },
   {
     "id": "nft.detail.createdAt",
     "defaultMessage": "!!!Created",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 374,
+      "line": 394,
       "column": 13,
-      "index": 10395
+      "index": 11227
     },
     "end": {
-      "line": 377,
+      "line": 397,
       "column": 3,
-      "index": 10466
+      "index": 11298
     }
   },
   {
     "id": "nft.detail.description",
     "defaultMessage": "!!!Description",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 378,
+      "line": 398,
       "column": 15,
-      "index": 10483
+      "index": 11315
     },
     "end": {
-      "line": 381,
+      "line": 401,
       "column": 3,
-      "index": 10560
+      "index": 11392
     }
   },
   {
     "id": "nft.detail.author",
     "defaultMessage": "!!!Author",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 382,
+      "line": 402,
       "column": 10,
-      "index": 10572
+      "index": 11404
     },
     "end": {
-      "line": 385,
+      "line": 405,
       "column": 3,
-      "index": 10639
+      "index": 11471
     }
   },
   {
     "id": "nft.detail.fingerprint",
     "defaultMessage": "!!!Fingerprint",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 386,
+      "line": 406,
       "column": 15,
-      "index": 10656
+      "index": 11488
     },
     "end": {
-      "line": 389,
+      "line": 409,
       "column": 3,
-      "index": 10733
+      "index": 11565
     }
   },
   {
     "id": "nft.detail.policyId",
     "defaultMessage": "!!!Policy id",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 390,
+      "line": 410,
       "column": 12,
-      "index": 10747
+      "index": 11579
     },
     "end": {
-      "line": 393,
+      "line": 413,
       "column": 3,
-      "index": 10819
+      "index": 11651
     }
   },
   {
     "id": "nft.detail.detailsLinks",
     "defaultMessage": "!!!Details on",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 394,
+      "line": 414,
       "column": 16,
-      "index": 10837
+      "index": 11669
     },
     "end": {
-      "line": 397,
+      "line": 417,
       "column": 3,
-      "index": 10914
+      "index": 11746
     }
   },
   {
     "id": "nft.detail.copyMetadata",
     "defaultMessage": "!!!Copy metadata",
     "file": "src/features/Portfolio/common/MediaDetailsScreen/MediaDetailsScreen.tsx",
     "start": {
-      "line": 398,
+      "line": 418,
       "column": 16,
-      "index": 10932
+      "index": 11764
     },
     "end": {
-      "line": 401,
+      "line": 421,
       "column": 3,
-      "index": 11012
+      "index": 11844
     }
   }
 ]