Skip to content

Commit

Permalink
Feat: show balances in the Safe List (safe-global#3546)
Browse files Browse the repository at this point in the history
  • Loading branch information
katspaugh authored May 8, 2024
1 parent 9e0beef commit 77b9bda
Show file tree
Hide file tree
Showing 18 changed files with 260 additions and 186 deletions.
4 changes: 4 additions & 0 deletions public/images/transactions/transactions.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/components/common/EthHashInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const EthHashInfo = ({
const chain = useChain(props.chainId || currentChainId)
const addressBooks = useAllAddressBooks()
const link = chain && props.hasExplorer ? getBlockExplorerLink(chain, props.address) : undefined
const name = showName && chain ? addressBooks?.[chain.chainId]?.[props.address] || props.name : undefined
const addressBookName = chain ? addressBooks?.[chain.chainId]?.[props.address] : undefined
const name = showName ? addressBookName || props.name : undefined

return (
<SrcEthHashInfo
Expand Down
14 changes: 3 additions & 11 deletions src/components/dashboard/Overview/Overview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@ import QrCodeButton from '@/components/sidebar/QrCodeButton'
import { TxModalContext } from '@/components/tx-flow'
import { NewTxFlow } from '@/components/tx-flow/flows'
import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
import { useAppSelector } from '@/store'
import { selectCurrency } from '@/store/settingsSlice'
import { formatCurrency } from '@/utils/formatNumber'
import { useContext, useMemo, type ReactElement } from 'react'
import { useContext, type ReactElement } from 'react'
import { Button, Grid, Skeleton, Typography } from '@mui/material'
import { WidgetBody, WidgetContainer } from '../styled'
import useSafeInfo from '@/hooks/useSafeInfo'
import { useVisibleBalances } from '@/hooks/useVisibleBalances'
import ArrowIconNW from '@/public/images/common/arrow-top-right.svg'
import ArrowIconSE from '@/public/images/common/arrow-se.svg'
import BuyCryptoButton from '@/components/common/BuyCryptoButton'
import FiatValue from '@/components/common/FiatValue'

const SkeletonOverview = (
<>
Expand All @@ -35,16 +33,10 @@ const SkeletonOverview = (
)

const Overview = (): ReactElement => {
const currency = useAppSelector(selectCurrency)
const { safe, safeLoading, safeLoaded } = useSafeInfo()
const { balances, loading: balancesLoading } = useVisibleBalances()
const { setTxFlow } = useContext(TxModalContext)

const fiatTotal = useMemo(
() => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
[currency, balances.fiatTotal],
)

const isInitialState = !safeLoaded && !safeLoading
const isLoading = safeLoading || balancesLoading || isInitialState

Expand All @@ -67,7 +59,7 @@ const Overview = (): ReactElement => {
</Typography>
<Typography component="div" variant="h1" fontSize={44} lineHeight="40px">
{safe.deployed ? (
fiatTotal
<FiatValue value={balances.fiatTotal} />
) : (
<TokenAmount
value={balances.items[0].balance}
Expand Down
14 changes: 8 additions & 6 deletions src/components/new-safe/OwnerRow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,19 @@ export const OwnerRow = ({
[getValues],
)

const { ens, name, resolving } = useAddressResolver(owner.address)
const { name, ens, resolving } = useAddressResolver(owner.address)

useEffect(() => {
if (ens) {
setValue(`${fieldName}.ens`, ens)
}

if (name && !getValues(`${fieldName}.name`)) {
setValue(`${fieldName}.name`, name)
}
}, [ens, setValue, getValues, name, fieldName])
}, [setValue, getValues, name, fieldName])

useEffect(() => {
if (ens) {
setValue(`${fieldName}.ens`, ens)
}
}, [ens, setValue, fieldName])

const walletIsOwner = owner.address === wallet?.address

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
} = formMethods

const safeAddress = watch(Field.address)

const randomName = useMnemonicSafeName()
const { ens, name, resolving } = useAddressResolver(safeAddress)

Expand Down
89 changes: 0 additions & 89 deletions src/components/sidebar/PendingActions/index.tsx

This file was deleted.

38 changes: 0 additions & 38 deletions src/components/sidebar/PendingActions/styles.module.css

This file was deleted.

17 changes: 7 additions & 10 deletions src/components/sidebar/SidebarHeader/index.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import TokenAmount from '@/components/common/TokenAmount'
import CounterfactualStatusButton from '@/features/counterfactual/CounterfactualStatusButton'
import { type ReactElement, useMemo } from 'react'
import { type ReactElement } from 'react'
import Typography from '@mui/material/Typography'
import IconButton from '@mui/material/IconButton'
import Skeleton from '@mui/material/Skeleton'
import Tooltip from '@mui/material/Tooltip'

import { formatCurrency } from '@/utils/formatNumber'
import useSafeInfo from '@/hooks/useSafeInfo'
import SafeIcon from '@/components/common/SafeIcon'
import NewTxButton from '@/components/sidebar/NewTxButton'
import { useAppSelector } from '@/store'
import { selectCurrency } from '@/store/settingsSlice'

import css from './styles.module.css'
import QrIconBold from '@/public/images/sidebar/qr-bold.svg'
Expand All @@ -31,10 +29,10 @@ import EnvHintButton from '@/components/settings/EnvironmentVariables/EnvHintBut
import useSafeAddress from '@/hooks/useSafeAddress'
import ExplorerButton from '@/components/common/ExplorerButton'
import CopyTooltip from '@/components/common/CopyTooltip'
import FiatValue from '@/components/common/FiatValue'
import { useAddressResolver } from '@/hooks/useAddressResolver'

const SafeHeader = (): ReactElement => {
const currency = useAppSelector(selectCurrency)
const { balances } = useVisibleBalances()
const safeAddress = useSafeAddress()
const { safe } = useSafeInfo()
Expand All @@ -43,11 +41,6 @@ const SafeHeader = (): ReactElement => {
const settings = useAppSelector(selectSettings)
const { ens } = useAddressResolver(safeAddress)

const fiatTotal = useMemo(
() => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
[currency, balances.fiatTotal],
)

const addressCopyText = settings.shortName.copy && chain ? `${chain.shortName}:${safeAddress}` : safeAddress

const blockExplorerLink = chain ? getBlockExplorerLink(chain, safeAddress) : undefined
Expand Down Expand Up @@ -76,7 +69,11 @@ const SafeHeader = (): ReactElement => {

<Typography data-testid="currency-section" variant="body2" fontWeight={700}>
{safe.deployed ? (
fiatTotal || <Skeleton variant="text" width={60} />
balances.fiatTotal ? (
<FiatValue value={balances.fiatTotal} />
) : (
<Skeleton variant="text" width={60} />
)
) : (
<TokenAmount
value={balances.items[0]?.balance}
Expand Down
29 changes: 21 additions & 8 deletions src/components/welcome/MyAccounts/AccountItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
import type { ChainInfo, SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
import { useCallback, useMemo } from 'react'
import { ListItemButton, Box, Typography, Chip } from '@mui/material'
import Link from 'next/link'
Expand All @@ -21,16 +21,18 @@ import { sameAddress } from '@/utils/addresses'
import classnames from 'classnames'
import { useRouter } from 'next/router'
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
import type { SafeItem } from './useAllSafes'
import FiatValue from '@/components/common/FiatValue'
import QueueActions from './QueueActions'

type AccountItemProps = {
chainId: string
address: string
threshold?: number
owners?: number
safeItem: SafeItem
safeOverview?: SafeOverview
onLinkClick?: () => void
}

const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProps) => {
const AccountItem = ({ onLinkClick, safeItem, safeOverview }: AccountItemProps) => {
const { chainId, address } = safeItem
const chain = useAppSelector((state) => selectChainById(state, chainId))
const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, address))
const safeAddress = useSafeAddress()
Expand Down Expand Up @@ -73,7 +75,9 @@ const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProp
>
<Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
<Link onClick={onLinkClick} href={href} className={css.safeLink}>
<SafeIcon address={address} {...rest} />
<Box pr={2.5}>
<SafeIcon address={address} owners={safeOverview?.owners.length} threshold={safeOverview?.threshold} />
</Box>

<Typography variant="body2" component="div" className={css.safeAddress}>
{name && (
Expand Down Expand Up @@ -105,13 +109,22 @@ const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProp
)}
</Typography>

<Box flex={1} />
<Typography variant="body2" fontWeight="bold">
{safeOverview?.fiatTotal && <FiatValue value={safeOverview.fiatTotal} />}
</Typography>

<ChainIndicator chainId={chainId} responsive />
</Link>
</Track>

<SafeListContextMenu name={name} address={address} chainId={chainId} />

<QueueActions
queued={safeOverview?.queued || 0}
awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
safeAddress={address}
chainShortName={chain?.shortName || ''}
/>
</ListItemButton>
)
}
Expand Down
Loading

0 comments on commit 77b9bda

Please sign in to comment.