Skip to content

Commit

Permalink
Merge branch 'develop' into YV-47
Browse files Browse the repository at this point in the history
  • Loading branch information
jorbuedo authored Nov 7, 2024
2 parents 550d950 + 9642d40 commit 53e0afb
Show file tree
Hide file tree
Showing 5 changed files with 459 additions and 211 deletions.
172 changes: 172 additions & 0 deletions apps/wallet-mobile/src/features/ReviewTx/common/WalletBalance.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import {useTheme} from '@yoroi/theme'
import {PortfolioTokenBalances} from '@yoroi/types/lib/typescript/portfolio/balances'
import * as React from 'react'
import {FlatList, StyleSheet, Text, View} from 'react-native'

import {Icon} from '../../../components/Icon'
import {Space} from '../../../components/Space/Space'
import {usePortfolioBalances} from '../../Portfolio/common/hooks/usePortfolioBalances'
import {TokenInfoIcon} from '../../Portfolio/common/TokenAmountItem/TokenInfoIcon'
import {BalanceCard} from '../../Portfolio/useCases/PortfolioDashboard/BalanceCard/BalanceCard'
import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
import {useStrings} from './hooks/useStrings'

export const WalletBalance = ({image, plate, name}: {image: string; plate: string; name: string}) => {
const {styles} = useStyles()
const strings = useStrings()
const {wallet} = useSelectedWallet()
const balances = usePortfolioBalances({wallet})
const ftList = balances.fts ?? []
const nftsList = balances.nfts ?? []

return (
<View style={styles.root}>
<Container>
<Icon.WalletAvatar style={styles.walletChecksum} image={image} size={80} />
</Container>

<Space height="sm" />

<Container>
<Text style={styles.name}>{name}</Text>
</Container>

<Container>
<Text style={styles.plate}>{plate}</Text>
</Container>

<Space height="lg" />

<BalanceCard />

<Space height="lg" />

<TokenSquares>
<TokenSquare count={ftList.length} list={ftList} title={strings.walletBalanceTokensTitle} />

<Space width="lg" />

<TokenSquare count={nftsList.length} list={nftsList} title={strings.walletBalanceNFTsTitle} />
</TokenSquares>
</View>
)
}

const TokenSquare = ({
title,
count,
list,
}: {
title: string
count: number
list: PortfolioTokenBalances['fts'] | PortfolioTokenBalances['nfts']
}) => {
const {styles} = useStyles()

if (list.length == 0) {
return (
<View style={styles.square}>
<Text style={styles.squareTitle}>{title}</Text>

<Space fill />

<Text style={styles.squareTitle}>-</Text>
</View>
)
}

return (
<View style={styles.square}>
<Text style={styles.squareTitle}>{title}</Text>

<Space fill />

<Text style={styles.squareCount}>{count}</Text>

<TokenList assetList={list} />
</View>
)
}

const TokenSquares = ({children}: {children: React.ReactNode}) => {
const {styles} = useStyles()

return <View style={styles.squares}>{children}</View>
}

const Container = ({children}: {children: React.ReactNode}) => {
const {styles} = useStyles()
return <View style={styles.container}>{children}</View>
}

const TokenList = ({assetList}: {assetList: PortfolioTokenBalances['fts'] | PortfolioTokenBalances['nfts']}) => {
const {styles} = useStyles()

return (
<FlatList
horizontal
data={assetList}
style={styles.assetList}
ItemSeparatorComponent={() => <Space width="sm" />}
showsHorizontalScrollIndicator={false}
keyExtractor={(item) => item.info.id}
renderItem={({item}) => <TokenInfoIcon info={item.info} size="md" />}
/>
)
}

const useStyles = () => {
const {atoms, color} = useTheme()

const styles = StyleSheet.create({
root: {
...atoms.flex_1,
},
container: {
...atoms.align_center,
},
walletChecksum: {
height: 80,
width: 80,
},
name: {
...atoms.body_1_lg_medium,
color: color.text_gray_medium,
},
plate: {
...atoms.body_2_md_regular,
color: color.text_gray_low,
},
squares: {
...atoms.w_full,
...atoms.flex_1,
...atoms.flex_row,
...atoms.px_lg,
},
square: {
...atoms.rounded_sm,
...atoms.flex_1,
...atoms.border,
...atoms.p_lg,
borderColor: color.gray_200,
aspectRatio: 1,
},
squareTitle: {
...atoms.body_1_lg_medium,
color: color.text_gray_medium,
},
squareCount: {
...atoms.heading_1_medium,
color: color.text_gray_max,
},
assetList: {
maxHeight: 40,
},
})

const colors = {
copy: color.gray_900,
}

return {styles, colors} as const
}
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export const useStrings = () => {
description: intl.formatMessage(messages.description),
details: intl.formatMessage(messages.details),
tokenDetailsTitle: intl.formatMessage(messages.tokenDetailsTitle),
walletBalanceTitle: intl.formatMessage(messages.walletBalanceTitle),
walletBalanceTokensTitle: intl.formatMessage(messages.walletBalanceTokensTitle),
walletBalanceNFTsTitle: intl.formatMessage(messages.walletBalanceNFTsTitle),
poolDetailsTitle: intl.formatMessage(messages.poolDetailsTitle),
registerStakingKey: intl.formatMessage(messages.registerStakingKey),
selectAbstain: intl.formatMessage(messages.selectAbstain),
Expand Down Expand Up @@ -211,6 +214,18 @@ const messages = defineMessages({
id: 'txReview.tokenDetails.title',
defaultMessage: '!!!Asset Details',
},
walletBalanceTitle: {
id: 'txReview.walletBalance.title',
defaultMessage: '!!!Wallet balance',
},
walletBalanceTokensTitle: {
id: 'txReview.walletBalanceTokens.title',
defaultMessage: '!!!Tokens',
},
walletBalanceNFTsTitle: {
id: 'txReview.walletBalanceNFTs.title',
defaultMessage: '!!!NFTs',
},
poolDetailsTitle: {
id: 'txReview.poolDetails.title',
defaultMessage: '!!!Pool Details',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {CredKind} from '@emurgo/cross-csl-core'
import {Blockies} from '@yoroi/identicon'
import {useTheme} from '@yoroi/theme'
import * as React from 'react'
import {Linking, StyleSheet, Text, TouchableOpacity, 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'
Expand All @@ -21,6 +21,7 @@ import {useOperations} from '../../../common/operations'
import {ReviewTxState, useReviewTx} from '../../../common/ReviewTxProvider'
import {TokenItem} from '../../../common/TokenItem'
import {FormattedOutputs, FormattedTx} from '../../../common/types'
import {WalletBalance} from '../../../common/WalletBalance'

export const OverviewTab = ({
tx,
Expand Down Expand Up @@ -58,8 +59,18 @@ const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {
const strings = useStrings()
const {wallet, meta} = useSelectedWallet()
const {walletManager} = useWalletManager()
const {openModal} = useModal()
const {plate, seed} = walletManager.checksum(wallet.publicKeyHex)
const seedImage = new Blockies({seed}).asBase64()
const {height: windowHeight} = useWindowDimensions()

const handleShowWalletBalance = () => {
openModal(
strings.walletBalanceTitle,
<WalletBalance image={seedImage} plate={plate} name={meta.name} />,
windowHeight * 0.8,
)
}

return (
<>
Expand All @@ -71,7 +82,9 @@ const WalletInfoSection = ({tx}: {tx: FormattedTx}) => {

<Space width="xs" />

<Text style={styles.walletInfoText}>{`${plate} | ${meta.name}`}</Text>
<TouchableOpacity activeOpacity={0.5} onPress={handleShowWalletBalance}>
<Text style={styles.walletInfoText}>{`${plate} | ${meta.name}`}</Text>
</TouchableOpacity>
</View>
</View>

Expand Down
5 changes: 4 additions & 1 deletion apps/wallet-mobile/src/kernel/i18n/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -1256,6 +1256,7 @@
"txReview.tokenDetails.overViewTab.description.label": "Description",
"txReview.tokenDetails.overViewTab.details.label": "Details on",
"txReview.tokenDetails.title": "Asset Details",
"txReview.walletBalance.title": "Wallet balance",
"txReview.poolDetails.title": "Pool Details",
"txReview.operations.registerStakingKey": "Register staking key deposit",
"txReview.operations.deregisterStakingKey": "Deregister staking key",
Expand All @@ -1270,5 +1271,7 @@
"txReview.submittedTxButton": "Go to transactions",
"txReview.failedTxTitle": "Transaction failed",
"txReview.failedTxText": "Your transaction has not been processed properly due to technical issues",
"txReview.failedTxButton": "Go to transactions"
"txReview.failedTxButton": "Go to transactions",
"txReview.walletBalanceTokens.title": "Tokens",
"txReview.walletBalanceNFTs.title": "NFTs"
}
Loading

0 comments on commit 53e0afb

Please sign in to comment.