diff --git a/apps/portal/package.json b/apps/portal/package.json index c8080718a..be2346e3c 100644 --- a/apps/portal/package.json +++ b/apps/portal/package.json @@ -38,15 +38,15 @@ "@sentry/react": "^7.85.0", "@sentry/tracing": "^7.85.0", "@substrate/txwrapper-core": "^5.0.0", - "@talismn/balances-react": "0.0.0-pr1705-20241121024914", - "@talismn/chaindata-provider": "0.0.0-pr1705-20241121024914", + "@talismn/balances-react": "0.0.0-pr1772-20241231062738", + "@talismn/chaindata-provider": "0.0.0-pr1772-20241231062738", "@talismn/dot-pool-selector": "0.0.0-snapshot.940501", "@talismn/nft": "workspace:^", - "@talismn/on-chain-id": "0.0.0-pr1705-20241121024914", + "@talismn/on-chain-id": "0.0.0-pr1772-20241231062738", "@talismn/react-polkadot-api": "workspace:^", "@talismn/signet-apps-sdk": "0.0.7", "@talismn/ui": "workspace:^", - "@talismn/util": "0.0.0-pr1705-20241121024914", + "@talismn/util": "0.0.0-pr1772-20241231062738", "@talismn/web-icons": "workspace:^", "@tanstack/react-query": "^5.32.0", "@tanstack/react-table": "^8.20.5", diff --git a/apps/portal/src/components/legacy/TalismanHandLoader.tsx b/apps/portal/src/components/legacy/TalismanHandLoader.tsx index d82b3a418..164877db5 100644 --- a/apps/portal/src/components/legacy/TalismanHandLoader.tsx +++ b/apps/portal/src/components/legacy/TalismanHandLoader.tsx @@ -4,5 +4,5 @@ import SpinnyHandFast from '@/assets/spinnyhand-fast.gif' /** @deprecated */ export const TalismanHandLoader = (props: ImgHTMLAttributes) => { - return Loading... + return Loading... } diff --git a/apps/portal/src/components/legacy/widgets/useAssets.tsx b/apps/portal/src/components/legacy/widgets/useAssets.tsx index 81644a366..291f12520 100644 --- a/apps/portal/src/components/legacy/widgets/useAssets.tsx +++ b/apps/portal/src/components/legacy/widgets/useAssets.tsx @@ -3,10 +3,12 @@ import { useChains, useEvmNetworks, useTokenRates, useTokens } from '@talismn/ba import { formatDecimals } from '@talismn/util' import { compact, groupBy, isEmpty, isNil } from 'lodash' import { useMemo } from 'react' +import { useTranslation } from 'react-i18next' import { useRecoilValue } from 'recoil' import { selectedCurrencyState } from '@/domains/balances/currency' import { balancesState, selectedBalancesState } from '@/domains/balances/recoils' +import { getNetworkInfo } from '@/hooks/useNetworkInfo' const useFetchAssets = (address: string | undefined) => { const _balances = useRecoilValue(address === undefined ? selectedBalancesState : balancesState) @@ -81,6 +83,7 @@ const getFiatString = (value: any, currency: string) => { /** @deprecated */ export const useAssets = (customAddress?: string) => { + const { t } = useTranslation() const { assetBalances, fiatTotal, lockedTotal, value, balances, chains, evmNetworks, isLoading } = useFetchAssets(customAddress) const currency = useRecoilValue(selectedCurrencyState) @@ -115,6 +118,13 @@ export const useAssets = (customAddress?: string) => { const locked = lockedAmount > 0n + const networkInfo = (() => { + const chain = token.chain?.id ? chains[token.chain?.id] : undefined + const evmNetwork = token.evmNetwork?.id ? evmNetworks[token.evmNetwork?.id] : undefined + const relay = chain?.relay?.id ? chains[chain.relay.id] : undefined + return getNetworkInfo(t, { chain, evmNetwork, relay }) + })() + return { stale: tokenBalances.each.some(x => x.status === 'stale'), locked, @@ -138,12 +148,13 @@ export const useAssets = (customAddress?: string) => { : token.evmNetwork ? evmNetworks[token.evmNetwork.id] : undefined, + networkInfo, }, // if the token is substrate-native then make it an array else make it undefined nonNativeTokens: [], } }), - [assetBalances, balances, chains, currency, evmNetworks, rates] + [assetBalances, balances, chains, currency, evmNetworks, rates, t] ) const compressedTokens = useMemo(() => compact(tokens), [tokens]) diff --git a/apps/portal/src/components/molecules/TalismanHand.tsx b/apps/portal/src/components/molecules/TalismanHand.tsx deleted file mode 100644 index 73c4505c1..000000000 --- a/apps/portal/src/components/molecules/TalismanHand.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { SVGProps } from 'react' - -export const TalismanHand = (props: SVGProps) => ( - - - - - - - - - - - -) diff --git a/apps/portal/src/components/recipes/Asset.tsx b/apps/portal/src/components/recipes/Asset.tsx index dd0c61e9c..21922d598 100644 --- a/apps/portal/src/components/recipes/Asset.tsx +++ b/apps/portal/src/components/recipes/Asset.tsx @@ -249,7 +249,9 @@ export const Asset = Object.assign((props: AssetProps) => { }} >
- + {
{token.nonNativeTokens.map((token, index: number) => (
- + {
{token.rate !== undefined && ( - + )} diff --git a/apps/portal/src/components/recipes/AssetBreakdownRow.tsx b/apps/portal/src/components/recipes/AssetBreakdownRow.tsx index 0cf681e4e..7edb69cdb 100644 --- a/apps/portal/src/components/recipes/AssetBreakdownRow.tsx +++ b/apps/portal/src/components/recipes/AssetBreakdownRow.tsx @@ -1,5 +1,6 @@ import { keyframes } from '@emotion/react' import styled from '@emotion/styled' +import { useChain, useEvmNetwork } from '@talismn/balances-react' import { githubUnknownChainLogoUrl } from '@talismn/chaindata-provider' import { Text } from '@talismn/ui/atoms/Text' import { Tooltip } from '@talismn/ui/atoms/Tooltip' @@ -9,6 +10,7 @@ import type { PortfolioToken } from '@/components/legacy/widgets/useAssets' import { AccountIcon } from '@/components/molecules/AccountIcon' import { AssetBalance } from '@/components/recipes/Asset' import { type Account } from '@/domains/accounts/recoils' +import { useNetworkInfo } from '@/hooks/useNetworkInfo' const slideDown = keyframes` from { @@ -22,6 +24,11 @@ const slideDown = keyframes` ` export const AssetBreakdownRowHeader = ({ token }: { token: PortfolioToken }) => { + const chain = useChain(token.tokenDetails.chain?.id) + const relay = useChain(chain?.relay?.id) + const evmNetwork = useEvmNetwork(token.tokenDetails.evmNetwork?.id) + const networkInfo = useNetworkInfo({ evmNetwork, chain, relay }) + return (
}} /> -
- - {token.tokenDetails.chain?.name} - +
+
{networkInfo.label}
+
{networkInfo.type}
diff --git a/apps/portal/src/components/recipes/DappStakingForm.tsx b/apps/portal/src/components/recipes/DappStakingForm.tsx index b681b40ab..194984470 100644 --- a/apps/portal/src/components/recipes/DappStakingForm.tsx +++ b/apps/portal/src/components/recipes/DappStakingForm.tsx @@ -167,9 +167,10 @@ export const DappStakingSideSheet = ({ - Stake - +
+ + Stake +
} subtitle="Astar DApp staking" > diff --git a/apps/portal/src/components/recipes/ErrorMessage.tsx b/apps/portal/src/components/recipes/ErrorMessage.tsx index 017dc1add..b881f0634 100644 --- a/apps/portal/src/components/recipes/ErrorMessage.tsx +++ b/apps/portal/src/components/recipes/ErrorMessage.tsx @@ -1,7 +1,7 @@ import type { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react' import { Text } from '@talismn/ui/atoms/Text' -import { TalismanHand } from '@/components/molecules/TalismanHand' +import { cn } from '@/util/cn' export type ErrorMessageProps = { title: ReactNode @@ -19,9 +19,11 @@ export const ErrorMessage = Object.assign( ]} >
-
+ + + ) +} diff --git a/apps/portal/src/components/recipes/ExtrinsicDetailsSideSheet.tsx b/apps/portal/src/components/recipes/ExtrinsicDetailsSideSheet.tsx index 7cbe498ce..dea7569c9 100644 --- a/apps/portal/src/components/recipes/ExtrinsicDetailsSideSheet.tsx +++ b/apps/portal/src/components/recipes/ExtrinsicDetailsSideSheet.tsx @@ -49,7 +49,7 @@ const Table = (props: PropsWithChildren) => ( const AccountItem = (props: { account: Account }) => ( } headlineContent={props.account.name ?? truncateAddress(props.account.address)} supportingContent={props.account.name !== undefined && truncateAddress(props.account.address)} @@ -90,7 +90,7 @@ export const ExtrinsicDetailsSideSheet = (props: ExtrinsicDetailsSideSheetProps) Extrinsic hash { void copyExtrinsicHashToClipboard(props.hash) }} @@ -112,7 +112,7 @@ export const ExtrinsicDetailsSideSheet = (props: ExtrinsicDetailsSideSheetProps) Signer { if (props.signer !== undefined) { void copyAddressToClipboard(props.signer.address) diff --git a/apps/portal/src/components/recipes/PoolClaimPermissionForm.tsx b/apps/portal/src/components/recipes/PoolClaimPermissionForm.tsx index bf4bb0e29..f558022ea 100644 --- a/apps/portal/src/components/recipes/PoolClaimPermissionForm.tsx +++ b/apps/portal/src/components/recipes/PoolClaimPermissionForm.tsx @@ -70,14 +70,14 @@ export const PoolClaimPermissionForm = (props: PoolClaimPermissionFormProps) => return (
-
-