Skip to content

Commit

Permalink
chore(portfolio): dropped bigint on discovery
Browse files Browse the repository at this point in the history
  • Loading branch information
@stackchain
stackchain committed May 8, 2024
1 parent 2127af7 commit ba60237
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 141 deletions.
89 changes: 58 additions & 31 deletions apps/wallet-mobile/src/NftDetails/NftDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
import {RouteProp, useRoute} from '@react-navigation/native'
import {isString} from '@yoroi/common'
import {usePorfolioTokenDiscovery} from '@yoroi/portfolio'
import {useTheme} from '@yoroi/theme'
import {Portfolio} from '@yoroi/types'
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 {Tab, TabPanel, TabPanels, Tabs} from '../components/Tabs'
import {useExplorers} from '../features/Explorer/common/useExplorers'
import {MediaPreview} from '../features/Portfolio/common/MediaGallery/MediaPreview'
import {useSelectedWallet} from '../features/WalletManager/Context'
import {useMetrics} from '../metrics/metricsManager'
import {NftRoutes} from '../navigation'
import {useNavigateTo} from '../Nfts/navigation'
import {getNetworkConfigById} from '../yoroi-wallets/cardano/networks'
import {useWalletManager} from '../wallet-manager/WalletManagerContext'

export const NftDetails = () => {
const styles = useStyles()
const strings = useStrings()
const {track} = useMetrics()

const [activeTab, setActiveTab] = useState<'overview' | 'metadata'>('overview')
const [activeTab, setActiveTab] = useState<ActiveTab>('overview')

const {id} = useRoute<RouteProp<NftRoutes, 'nft-details'>>().params
const wallet = useSelectedWallet()
const {network, balances} = useSelectedWallet()

// reading from the getter, there is no need to subscribe to changes
const amount = wallet.balances.records.get(id)
const amount = balances.records.get(id)

// record can be gone when arriving here, need a state
// TODO: revisit + product definition (missing is gone state)
if (!amount) return null

Expand Down Expand Up @@ -64,21 +65,45 @@ export const NftDetails = () => {
/>
</Tabs>

<TabPanels>
<TabPanel active={activeTab === 'overview'}>
<NftOverview info={amount.info} />
</TabPanel>

<TabPanel active={activeTab === 'metadata'}>
<NftMetadata info={amount.info} />
</TabPanel>
</TabPanels>
<Details info={amount.info} activeTab={activeTab} network={network} />
</ScrollView>
</SafeAreaView>
</FadeIn>
)
}

type DetailsProps = {
info: Portfolio.Token.Info
activeTab: ActiveTab
network: Chain.SupportedNetworks
}
const Details = ({activeTab, info, network}: DetailsProps) => {
const walletManager = useWalletManager()
const {api} = walletManager.getTokenManager(network)

const {tokenDiscovery} = usePorfolioTokenDiscovery({
id: info.id,
network,
getTokenDiscovery: api.tokenDiscovery,
})

console.log(tokenDiscovery)
// TODO: revisit + product definition (missing is gone state, error state, loading state)
if (!tokenDiscovery) return null

return (
<TabPanels>
<TabPanel active={activeTab === 'overview'}>
<NftOverview info={info} network={network} />
</TabPanel>

<TabPanel active={activeTab === 'metadata'}>
<NftMetadata discovery={tokenDiscovery} />
</TabPanel>
</TabPanels>
)
}

const imageHeight = 380
const imagePadding = 16
const horizontalPadding = imagePadding * 2 // left and right
Expand Down Expand Up @@ -113,12 +138,14 @@ const MetadataRow = ({title, copyText, children}: {title: string; children: Reac
)
}

// TODO: revisit (missing hit the discovery and product screen)
const NftOverview = ({info}: {info: Portfolio.Token.Info}) => {
type NftOverviewProps = {
info: Portfolio.Token.Info
network: Chain.SupportedNetworks
}
const NftOverview = ({info, network}: NftOverviewProps) => {
const styles = useStyles()
const strings = useStrings()
const wallet = useSelectedWallet()
const config = getNetworkConfigById(wallet.networkId)
const explorers = useExplorers(network)

const [policyId] = info.id.split('.')

Expand All @@ -132,12 +159,6 @@ const NftOverview = ({info}: {info: Portfolio.Token.Info}) => {
<Text style={styles.name}>{normalizeMetadataString(info.description)}</Text>
</MetadataRow>

{/* {isRecord(info.metadatas.mintNft) && (
<MetadataRow title={strings.author}>
<Text style={styles.name}>{normalizeMetadataString(info.metadatas.mintNft.author)}</Text>
</MetadataRow>
)} */}

<MetadataRow title={strings.fingerprint} copyText={info.fingerprint}>
<Text style={styles.name}>{info.fingerprint}</Text>
</MetadataRow>
Expand All @@ -153,15 +174,21 @@ const NftOverview = ({info}: {info: Portfolio.Token.Info}) => {
flexDirection: 'row',
}}
>
<TouchableOpacity onPress={() => Linking.openURL(config.EXPLORER_URL_FOR_TOKEN(info.id))} style={{flex: 2}}>
<TouchableOpacity
onPress={() => Linking.openURL(explorers.cardanoscan.token(info.fingerprint))}
style={{flex: 2}}
>
<View style={styles.linkContent}>
<Spacer width={2} />

<Text style={styles.linkText}>Cardanoscan</Text>
</View>
</TouchableOpacity>

<TouchableOpacity onPress={() => Linking.openURL(config.CEXPLORER_URL_FOR_TOKEN(info.id))} style={{flex: 4}}>
<TouchableOpacity
onPress={() => Linking.openURL(explorers.cexplorer.token(info.fingerprint))}
style={{flex: 4}}
>
<View style={styles.linkContent}>
<Spacer width={2} />

Expand Down Expand Up @@ -191,12 +218,10 @@ const HR = () => (
/>
)

// TODO: revisit (missing hit the discovery and product screen)
const NftMetadata = ({info}: {info: Portfolio.Token.Info}) => {
const NftMetadata = ({discovery}: {discovery: Portfolio.Token.Discovery}) => {
const styles = useStyles()
const strings = useStrings()
// const stringifiedMetadata = JSON.stringify(info.metadatas.mintNft, undefined, 2)
const stringifiedMetadata = info.name
const stringifiedMetadata = JSON.stringify(discovery.originalMetadata, null, 2)

return (
<View>
Expand All @@ -213,6 +238,8 @@ const NftMetadata = ({info}: {info: Portfolio.Token.Info}) => {
)
}

type ActiveTab = 'overview' | 'metadata'

const useStyles = () => {
const {atoms, color} = useTheme()
const styles = StyleSheet.create({
Expand Down
88 changes: 44 additions & 44 deletions apps/wallet-mobile/translations/messages/src/NftDetails/NftDetails.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,164 +4,164 @@
"defaultMessage": "!!!NFT Details",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 282,
"line": 309,
"column": 9,
"index": 8232
"index": 8713
},
"end": {
"line": 285,
"line": 312,
"column": 3,
"index": 8303
"index": 8784
}
},
{
"id": "nft.detail.overview",
"defaultMessage": "!!!Overview",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 286,
"line": 313,
"column": 12,
"index": 8317
"index": 8798
},
"end": {
"line": 289,
"line": 316,
"column": 3,
"index": 8388
"index": 8869
}
},
{
"id": "nft.detail.metadata",
"defaultMessage": "!!!Metadata",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 290,
"line": 317,
"column": 12,
"index": 8402
"index": 8883
},
"end": {
"line": 293,
"line": 320,
"column": 3,
"index": 8473
"index": 8954
}
},
{
"id": "nft.detail.nftName",
"defaultMessage": "!!!NFT Name",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 294,
"line": 321,
"column": 11,
"index": 8486
"index": 8967
},
"end": {
"line": 297,
"line": 324,
"column": 3,
"index": 8556
"index": 9037
}
},
{
"id": "nft.detail.createdAt",
"defaultMessage": "!!!Created",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 298,
"line": 325,
"column": 13,
"index": 8571
"index": 9052
},
"end": {
"line": 301,
"line": 328,
"column": 3,
"index": 8642
"index": 9123
}
},
{
"id": "nft.detail.description",
"defaultMessage": "!!!Description",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 302,
"line": 329,
"column": 15,
"index": 8659
"index": 9140
},
"end": {
"line": 305,
"line": 332,
"column": 3,
"index": 8736
"index": 9217
}
},
{
"id": "nft.detail.author",
"defaultMessage": "!!!Author",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 306,
"line": 333,
"column": 10,
"index": 8748
"index": 9229
},
"end": {
"line": 309,
"line": 336,
"column": 3,
"index": 8815
"index": 9296
}
},
{
"id": "nft.detail.fingerprint",
"defaultMessage": "!!!Fingerprint",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 310,
"line": 337,
"column": 15,
"index": 8832
"index": 9313
},
"end": {
"line": 313,
"line": 340,
"column": 3,
"index": 8909
"index": 9390
}
},
{
"id": "nft.detail.policyId",
"defaultMessage": "!!!Policy id",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 314,
"line": 341,
"column": 12,
"index": 8923
"index": 9404
},
"end": {
"line": 317,
"line": 344,
"column": 3,
"index": 8995
"index": 9476
}
},
{
"id": "nft.detail.detailsLinks",
"defaultMessage": "!!!Details on",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 318,
"line": 345,
"column": 16,
"index": 9013
"index": 9494
},
"end": {
"line": 321,
"line": 348,
"column": 3,
"index": 9090
"index": 9571
}
},
{
"id": "nft.detail.copyMetadata",
"defaultMessage": "!!!Copy metadata",
"file": "src/NftDetails/NftDetails.tsx",
"start": {
"line": 322,
"line": 349,
"column": 16,
"index": 9108
"index": 9589
},
"end": {
"line": 325,
"line": 352,
"column": 3,
"index": 9188
"index": 9669
}
}
]

0 comments on commit ba60237

Please sign in to comment.