-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
1 parent
48f90ca
commit a2e38c2
Showing
10 changed files
with
157 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 0 additions & 37 deletions
37
packages/web/src/components/address-tile/AddressTile.module.css
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,104 @@ | ||
| import { ReactNode, useCallback, useContext } from 'react' | ||
| import { useCallback, useContext } from 'react' | ||
|
|
||
| import { shortenSPLAddress } from '@audius/common' | ||
| import { Text, IconCopy, PlainButton } from '@audius/harmony' | ||
| import { | ||
| BNUSDC, | ||
| decimalIntegerToHumanReadable, | ||
| formatUSDCWeiToCeilingCentsNumber, | ||
| shortenSPLAddress, | ||
| useUSDCBalance | ||
| } from '@audius/common' | ||
| import { | ||
| Text, | ||
| IconCopy, | ||
| PlainButton, | ||
| IconComponent, | ||
| Flex, | ||
| Box, | ||
| useTheme | ||
| } from '@audius/harmony' | ||
| import { BN } from 'bn.js' | ||
|
|
||
| import { Icon } from 'components/Icon' | ||
| import { ToastContext } from 'components/toast/ToastContext' | ||
| import { isMobile } from 'utils/clientUtil' | ||
| import { copyToClipboard } from 'utils/clipboardUtil' | ||
|
|
||
| import styles from './AddressTile.module.css' | ||
|
|
||
| const messages = { | ||
| usdcBalance: 'USDC Balance', | ||
| copied: 'Copied to Clipboard!' | ||
| } | ||
|
|
||
| type AddressTileProps = { | ||
| address: string | ||
| left?: ReactNode | ||
| right?: ReactNode | ||
| iconLeft: IconComponent | ||
| iconRight?: IconComponent | ||
| } | ||
|
|
||
| export const AddressTile = ({ address, left, right }: AddressTileProps) => { | ||
| export const AddressTile = ({ | ||
| address, | ||
| iconLeft: IconLeft, | ||
| iconRight: IconRight | ||
| }: AddressTileProps) => { | ||
| const { color } = useTheme() | ||
| const { toast } = useContext(ToastContext) | ||
| const mobile = isMobile() | ||
|
|
||
| const { data: balance } = useUSDCBalance({ isPolling: true }) | ||
| const balanceNumber = formatUSDCWeiToCeilingCentsNumber( | ||
| (balance ?? new BN(0)) as BNUSDC | ||
| ) | ||
| const balanceFormatted = decimalIntegerToHumanReadable(balanceNumber) | ||
|
|
||
| const handleCopyPress = useCallback(() => { | ||
| copyToClipboard(address) | ||
| toast(messages.copied) | ||
| }, [address, toast]) | ||
|
|
||
| const defaultRight = ( | ||
| <PlainButton> | ||
| <Icon icon={IconCopy} onClick={handleCopyPress} /> | ||
| <PlainButton onClick={handleCopyPress}> | ||
| <IconCopy size='s' color='subdued' /> | ||
| </PlainButton> | ||
| ) | ||
|
|
||
| return ( | ||
| <div className={styles.addressContainer}> | ||
| <div className={styles.leftContainer}>{left}</div> | ||
| <div className={styles.middleContainer}> | ||
| <Text variant='body' className={styles.address}> | ||
| {shortenSPLAddress(address, mobile ? 6 : 12)} | ||
| <Flex direction='column' border='default' borderRadius='s'> | ||
| <Flex p='l' alignItems='center' justifyContent='space-between'> | ||
| <Flex alignItems='center'> | ||
| <IconLeft /> | ||
| <Box pl='s'> | ||
| <Text variant='title' size='m'> | ||
| {messages.usdcBalance} | ||
| </Text> | ||
| </Box> | ||
| </Flex> | ||
| <Text variant='title' size='l' strength='strong'> | ||
| {`$${balanceFormatted}`} | ||
| </Text> | ||
| </div> | ||
| <div className={styles.rightContainer}>{right ?? defaultRight}</div> | ||
| </div> | ||
| </Flex> | ||
| <Flex | ||
| css={{ backgroundColor: color.background.surface1 }} | ||
| alignItems='stretch' | ||
| justifyContent='space-between' | ||
| borderTop='default' | ||
| borderBottomLeftRadius='s' | ||
| borderBottomRightRadius='s' | ||
| > | ||
| <Box p='l' borderRadius='s'> | ||
| <Text | ||
| css={{ | ||
| userSelect: 'text', | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| lineHeight: '125%' | ||
| }} | ||
| variant='body' | ||
| > | ||
| {mobile ? shortenSPLAddress(address, 20) : address} | ||
| </Text> | ||
| </Box> | ||
| <Flex alignItems='center' borderLeft='default' pr='l' pl='l'> | ||
| {IconRight ? <IconRight /> : defaultRight} | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.