Skip to content

Commit

Permalink
feature(wallet-mobile): NFTs traits (#3274)
Browse files Browse the repository at this point in the history
  • Loading branch information
@stackchain
stackchain authored May 28, 2024
1 parent de64286 commit 541b2ab
Show file tree
Hide file tree
Showing 18 changed files with 630 additions and 68 deletions.
40 changes: 32 additions & 8 deletions apps/wallet-mobile/src/features/Portfolio/common/MediaDetails/MediaDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import {RouteProp, useRoute} from '@react-navigation/native'
import {isString} from '@yoroi/common'
import {useExplorers} from '@yoroi/explorers'
import {usePorfolioTokenDiscovery} from '@yoroi/portfolio'
import {usePorfolioTokenDiscovery, usePorfolioTokenTraits} from '@yoroi/portfolio'
import {useTheme} from '@yoroi/theme'
import {Chain, Portfolio} from '@yoroi/types'
import React, {ReactNode, useState} from 'react'
import {defineMessages, useIntl} from 'react-intl'
import {Linking, SafeAreaView, ScrollView, StyleSheet, TouchableOpacity, useWindowDimensions, View} from 'react-native'

import {CopyButton, FadeIn, Spacer, Text} from '../../../../components'
import {Boundary, CopyButton, FadeIn, Spacer, Text} from '../../../../components'
import {Tab, TabPanel, TabPanels, Tabs} from '../../../../components/Tabs'
import {time} from '../../../../kernel/constants'
import {useMetrics} from '../../../../kernel/metrics/metricsManager'
import {NftRoutes} from '../../../../kernel/navigation'
import {useNavigateTo} from '../../../Nfts/common/navigation'
Expand Down Expand Up @@ -65,7 +66,9 @@ export const MediaDetails = () => {
/>
</Tabs>

<Details info={amount.info} activeTab={activeTab} network={network} />
<Boundary>
<Details info={amount.info} activeTab={activeTab} network={network} />
</Boundary>
</ScrollView>
</SafeAreaView>
</FadeIn>
Expand All @@ -88,7 +91,17 @@ const Details = ({activeTab, info, network}: DetailsProps) => {
getTokenDiscovery: api.tokenDiscovery,
},
{
staleTime: Infinity,
staleTime: time.session,
},
)
const {tokenTraits} = usePorfolioTokenTraits(
{
id: info.id,
network,
getTokenTraits: api.tokenTraits,
},
{
staleTime: time.oneDay,
},
)

Expand All @@ -98,7 +111,7 @@ const Details = ({activeTab, info, network}: DetailsProps) => {
return (
<TabPanels>
<TabPanel active={activeTab === 'overview'}>
<NftOverview info={info} network={network} />
<NftOverview info={info} network={network} traits={tokenTraits} />
</TabPanel>

<TabPanel active={activeTab === 'metadata'}>
Expand Down Expand Up @@ -129,7 +142,7 @@ const MetadataRow = ({title, copyText, children}: {title: string; children: Reac
const styles = useStyles()
return (
<View style={styles.rowContainer}>
<View style={styles.rowTitleContainer}>
<View style={styles.rowBetween}>
<Text style={styles.title}>{title}</Text>

{copyText !== undefined ? <CopyButton value={copyText} /> : null}
Expand All @@ -144,9 +157,10 @@ const MetadataRow = ({title, copyText, children}: {title: string; children: Reac

type NftOverviewProps = {
info: Portfolio.Token.Info
traits: Portfolio.Token.Traits | undefined
network: Chain.SupportedNetworks
}
const NftOverview = ({info, network}: NftOverviewProps) => {
const NftOverview = ({info, network, traits}: NftOverviewProps) => {
const styles = useStyles()
const strings = useStrings()
const explorers = useExplorers(network)
Expand All @@ -171,6 +185,16 @@ const NftOverview = ({info, network}: NftOverviewProps) => {
<Text style={styles.name}>{policyId}</Text>
</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>
))}

<MetadataRow title={strings.detailsLinks}>
<View
style={{
Expand Down Expand Up @@ -283,7 +307,7 @@ const useStyles = () => {
rowContainer: {
paddingVertical: imagePadding,
},
rowTitleContainer: {
rowBetween: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
Expand Down
20 changes: 16 additions & 4 deletions apps/wallet-mobile/src/kernel/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
export const supportedThemes = Object.freeze({
import {freeze} from 'immer'

export const supportedThemes = freeze({
system: 'system',
'default-light': 'default-light',
'default-dark': 'default-dark',
})

// NOTE: to be moved into pairing module once it's implemented
export const supportedCurrencies = Object.freeze({
export const supportedCurrencies = freeze({
ADA: 'ADA',
BRL: 'BRL',
BTC: 'BTC',
Expand All @@ -17,7 +19,7 @@ export const supportedCurrencies = Object.freeze({
USD: 'USD',
})

export const configCurrencies = {
export const configCurrencies = freeze({
[supportedCurrencies.ADA]: {
decimals: 6,
nativeName: 'Cardano',
Expand Down Expand Up @@ -54,4 +56,14 @@ export const configCurrencies = {
decimals: 2,
nativeName: 'US Dollar',
},
}
})

export const time = freeze({
oneMinute: 60 * 1e3,
fiveMinutes: 5 * 60 * 1e3,
halfHour: 30 * 60 * 1e3,
oneHour: 60 * 60 * 1e3,
oneDay: 24 * 60 * 60 * 1e3,
// session here means while the wallet is open
session: Infinity,
})
88 changes: 44 additions & 44 deletions ...mobile/translations/messages/src/features/Portfolio/common/MediaDetails/MediaDetails.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,164 +4,164 @@
"defaultMessage": "!!!NFT Details",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 315,
"line": 339,
"column": 9,
"index": 8864
"index": 9572
},
"end": {
"line": 318,
"line": 342,
"column": 3,
"index": 8935
"index": 9643
}
},
{
"id": "nft.detail.overview",
"defaultMessage": "!!!Overview",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 319,
"line": 343,
"column": 12,
"index": 8949
"index": 9657
},
"end": {
"line": 322,
"line": 346,
"column": 3,
"index": 9020
"index": 9728
}
},
{
"id": "nft.detail.metadata",
"defaultMessage": "!!!Metadata",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 323,
"line": 347,
"column": 12,
"index": 9034
"index": 9742
},
"end": {
"line": 326,
"line": 350,
"column": 3,
"index": 9105
"index": 9813
}
},
{
"id": "nft.detail.nftName",
"defaultMessage": "!!!NFT Name",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 327,
"line": 351,
"column": 11,
"index": 9118
"index": 9826
},
"end": {
"line": 330,
"line": 354,
"column": 3,
"index": 9188
"index": 9896
}
},
{
"id": "nft.detail.createdAt",
"defaultMessage": "!!!Created",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 331,
"line": 355,
"column": 13,
"index": 9203
"index": 9911
},
"end": {
"line": 334,
"line": 358,
"column": 3,
"index": 9274
"index": 9982
}
},
{
"id": "nft.detail.description",
"defaultMessage": "!!!Description",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 335,
"line": 359,
"column": 15,
"index": 9291
"index": 9999
},
"end": {
"line": 338,
"line": 362,
"column": 3,
"index": 9368
"index": 10076
}
},
{
"id": "nft.detail.author",
"defaultMessage": "!!!Author",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 339,
"line": 363,
"column": 10,
"index": 9380
"index": 10088
},
"end": {
"line": 342,
"line": 366,
"column": 3,
"index": 9447
"index": 10155
}
},
{
"id": "nft.detail.fingerprint",
"defaultMessage": "!!!Fingerprint",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 343,
"line": 367,
"column": 15,
"index": 9464
"index": 10172
},
"end": {
"line": 346,
"line": 370,
"column": 3,
"index": 9541
"index": 10249
}
},
{
"id": "nft.detail.policyId",
"defaultMessage": "!!!Policy id",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 347,
"line": 371,
"column": 12,
"index": 9555
"index": 10263
},
"end": {
"line": 350,
"line": 374,
"column": 3,
"index": 9627
"index": 10335
}
},
{
"id": "nft.detail.detailsLinks",
"defaultMessage": "!!!Details on",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 351,
"line": 375,
"column": 16,
"index": 9645
"index": 10353
},
"end": {
"line": 354,
"line": 378,
"column": 3,
"index": 9722
"index": 10430
}
},
{
"id": "nft.detail.copyMetadata",
"defaultMessage": "!!!Copy metadata",
"file": "src/features/Portfolio/common/MediaDetails/MediaDetails.tsx",
"start": {
"line": 355,
"line": 379,
"column": 16,
"index": 9740
"index": 10448
},
"end": {
"line": 358,
"line": 382,
"column": 3,
"index": 9820
"index": 10528
}
}
]
Loading

0 comments on commit 541b2ab

Please sign in to comment.