fix: more xcm fixes (#1237)

* fix: don't filter xcm destination accounts by substrate/ethereum wallet api * fix: don't show calculating fees until destination account has been selected * fix: always show max amount * fix: weird search results * fix: incorrect newlining * fix: remove old hand logo in two places * fix: show active state in accountpicker * fix: weird scrolling on xcm token select dialog * fix: add networkInfo to portfolio * fix: extra text spacing in site logo * fix: scrollbars on mobile nav * fix: spinny hand aspect ratio * fix: added more top-margin to footer * fix: incorrect cursor
TalismanSociety · Jan 6, 2025 · 847827a · 847827a
1 parent bc3aed7
commit 847827a
Show file tree

Hide file tree

Showing 38 changed files with 276 additions and 287 deletions.
diff --git 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
@@ -4,5 +4,5 @@ import SpinnyHandFast from '@/assets/spinnyhand-fast.gif'
 
 /** @deprecated */
 export const TalismanHandLoader = (props: ImgHTMLAttributes<HTMLImageElement>) => {
-  return <img src={SpinnyHandFast} alt="Loading..." width="128px" height="128px" {...props} />
+  return <img src={SpinnyHandFast} alt="Loading..." width="128px" {...props} />
 }
diff --git 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
diff --git 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) => {
                 }}
               >
                 <div css={{ width: '1em', height: '1em' }}>
-                  <Tooltip content={token.tokenDetails.chain?.name ?? undefined}>
+                  <Tooltip
+                    content={`${token.tokenDetails.networkInfo?.label} (${token.tokenDetails.networkInfo?.type})`}
+                  >
                     <img
                       src={token.tokenDetails.chain?.logo ?? githubUnknownChainLogoUrl}
                       css={{ width: '100%', height: '100%', borderRadius: '50%' }}
@@ -259,7 +261,9 @@ export const Asset = Object.assign((props: AssetProps) => {
                 </div>
                 {token.nonNativeTokens.map((token, index: number) => (
                   <div key={index} css={{ width: '1em', height: '1em' }}>
-                    <Tooltip content={token.tokenDetails.chain?.name}>
+                    <Tooltip
+                      content={`${token.tokenDetails.networkInfo?.label} (${token.tokenDetails.networkInfo?.type})`}
+                    >
                       <img
                         src={token.tokenDetails.chain?.logo ?? undefined}
                         css={{ width: '100%', height: '100%', borderRadius: '50%' }}
@@ -272,7 +276,7 @@ export const Asset = Object.assign((props: AssetProps) => {
             </div>
             {token.rate !== undefined && (
               <Text.Body>
-                <AnimatedFiatNumber end={token.rate} />
+                <AnimatedFiatNumber end={token.rate.price} />
               </Text.Body>
             )}
           </div>

diff --git 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 (
     <AssetRow>
       <div
@@ -48,23 +55,9 @@ export const AssetBreakdownRowHeader = ({ token }: { token: PortfolioToken }) =>
               }}
             />
           </Tooltip>
-          <div
-            css={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.4rem',
-              justifyContent: 'center',
-            }}
-          >
-            <Text.Body
-              css={{
-                fontSize: '1.6rem',
-                color: 'var(--color-text)',
-                fontWeight: 'bold',
-              }}
-            >
-              {token.tokenDetails.chain?.name}
-            </Text.Body>
+          <div className="flex flex-col gap-1">
+            <div className="text-2xl font-bold text-white">{networkInfo.label}</div>
+            <div className="text-xl text-white/60">{networkInfo.type}</div>
           </div>
         </td>
         <td align="right">

diff --git a/apps/portal/src/components/recipes/DappStakingForm.tsx b/apps/portal/src/components/recipes/DappStakingForm.tsx
@@ -167,9 +167,10 @@ export const DappStakingSideSheet = ({
     <SideSheet
       {...props}
       title={
-        <>
-          <Zap /> Stake
-        </>
+        <div className="flex items-center gap-2">
+          <Zap />
+          Stake
+        </div>
       }
       subtitle="Astar DApp staking"
     >

diff --git 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(
       ]}
     >
       <figure css={{ margin: 0 }}>
-        <TalismanHand
-          width={props.orientation === 'horizontal' ? '6rem' : '10rem'}
-          height={props.orientation === 'horizontal' ? '6rem' : '10rem'}
+        <TalismanDeadHandIcon
+          className={cn(
+            'text-[20rem] text-red-500',
+            props.orientation === 'horizontal' ? 'text-[6rem]' : 'text-[10rem]'
+          )}
         />
       </figure>
       <div
@@ -48,3 +50,16 @@ export const ErrorMessage = Object.assign(
     ),
   }
 )
+
+function TalismanDeadHandIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="1em" height="1em" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        stroke="none"
+        d="M 25.349728 54.346054 C 27.378103 55.318001 29.407148 56.290253 31.502325 57.005775 L 35.786789 58.469055 C 43.06493 60.762207 50.24847 59.834999 57.299564 57.639862 C 60.966396 55.80056 64.752762 56.091606 68.504379 57.639862 C 75.92411 60.702103 82.388115 60.694855 90.248535 58.5233 L 90.257065 58.469055 L 94.541412 57.005775 C 96.636337 56.290253 98.665443 55.318001 100.693939 54.346054 C 106.28389 51.667564 114.987282 52.49865 120.865524 59.200912 C 123.559616 62.273216 121.475052 66.718475 117.596642 68.004562 C 115.726631 68.625061 114.032761 69.675278 112.449219 70.848602 C 112.27002 70.981483 112.087776 71.114365 111.903091 71.246628 C 107.018356 74.751999 103.875046 80.002434 103.562363 86.006248 L 103.4179 88.776535 C 103.428268 89.745064 103.409363 90.717865 103.35878 91.691879 C 101.930061 105.361069 93.111465 117.141937 80.398628 122.364952 C 69.295547 126.926628 56.841137 126.926628 45.737751 122.364952 C 33.02528 117.141937 24.206812 105.361069 22.777721 91.691879 L 22.481615 86.006248 C 22.168869 80.002434 19.025616 74.751999 14.141013 71.246628 C 13.956144 71.114365 13.773714 70.981483 13.594332 70.848602 C 12.011093 69.675278 10.317348 68.625061 8.447146 68.004562 C 4.568655 66.718475 2.483895 62.273216 5.178228 59.200912 C 11.056335 52.49865 19.759726 51.667564 25.349728 54.346054 Z M 91.664459 91.440155 C 91.664459 91.440155 78.840073 109.872757 63.020496 109.872757 C 47.201092 109.872757 34.3769 91.440155 34.3769 91.440155 C 34.3769 91.440155 47.201092 73.007538 63.020496 73.007538 C 78.840073 73.007538 91.664459 91.440155 91.664459 91.440155 Z M 63.143021 95.726746 L 70.559158 103.142853 L 74 99.701828 L 66.584114 92.285721 L 74 84.869598 L 70.559158 81.428574 L 63.143021 88.844681 L 55.726807 81.428574 L 52.285713 84.869598 L 59.701946 92.285721 L 52.285713 99.701828 L 55.726807 103.142853 L 63.143021 95.726746 Z M 27.99049 51.479645 L 28.580633 28.829681 C 28.580633 16.54509 35.76844 10.459549 46.165638 13.541481 C 47.079861 13.812477 48.393139 15.04348 48.393139 16.135857 L 48.604465 38.283516 C 48.615376 39.430885 49.548618 40.355225 50.695988 40.355225 C 51.851154 40.355225 52.787624 39.418755 52.787624 38.263588 L 52.787624 11.044266 C 52.787624 5.277542 57.46249 0.602676 63.228947 0.602676 C 68.995659 0.602676 73.670708 5.277527 73.670708 11.044266 L 73.670708 38.263588 C 73.670708 39.418755 74.606934 40.355225 75.762589 40.355225 C 76.909714 40.355225 77.842896 39.430885 77.853867 38.283577 L 78.065369 16.148048 C 78.065369 15.045853 79.444115 13.810951 80.366318 13.541481 C 89.377525 10.908279 97.657295 15.82061 97.657295 28.590141 L 98.229645 51.269608 C 88.521141 56.225098 79.180191 57.245316 68.469032 53.916214 C 64.382172 51.912163 61.437565 52.265503 57.225811 53.913963 C 46.604252 56.300064 37.572994 56.407524 27.99049 51.479645 Z"
+      />
+    </svg>
+  )
+}
diff --git 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 }) => (
   <ListItem
-    css={{ padding: 0, cursor: 'copy' }}
+    css={{ padding: 0, cursor: 'pointer' }}
     leadingContent={<AccountIcon account={props.account} size="3.2rem" />}
     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)
         <DescriptionList.Description>
           <DescriptionList.Term>Extrinsic hash</DescriptionList.Term>
           <DescriptionList.Details
-            css={{ cursor: 'copy' }}
+            css={{ cursor: 'pointer' }}
             onClick={() => {
               void copyExtrinsicHashToClipboard(props.hash)
             }}
@@ -112,7 +112,7 @@ export const ExtrinsicDetailsSideSheet = (props: ExtrinsicDetailsSideSheetProps)
           <DescriptionList.Description>
             <DescriptionList.Term>Signer</DescriptionList.Term>
             <DescriptionList.Details
-              css={{ cursor: 'copy' }}
+              css={{ cursor: 'pointer' }}
               onClick={() => {
                 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
@@ -70,14 +70,14 @@ export const PoolClaimPermissionForm = (props: PoolClaimPermissionFormProps) =>
 
   return (
     <div>
-      <div css={{ marginBottom: '1.6rem' }}>
-        <label>
+      <div className="flex items-center gap-2" css={{ marginBottom: '1.6rem' }}>
+        <label className="flex items-center gap-2">
           <Switch
             checked={props.permission !== undefined}
             onChange={event => props.onChangePermission(event.target.checked ? 'compound' : undefined)}
-          />{' '}
+          />
           {props.isTalismanPool ? 'Enable auto claiming' : 'Enable permissionless claiming'}
-        </label>{' '}
+        </label>
         <Tooltip
           content={
             <>
@@ -154,9 +154,10 @@ type PoolClaimPermissionDialogProps = PropsWithChildren<{
 export const PoolClaimPermissionDialog = (props: PoolClaimPermissionDialogProps) => (
   <AlertDialog
     title={
-      <>
-        <Calculate css={{ verticalAlign: 'bottom' }} /> Claim method
-      </>
+      <div className="flex items-center gap-2">
+        <Calculate />
+        Claim method
+      </div>
     }
     targetWidth="77rem"
     {...props}

diff --git a/apps/portal/src/components/recipes/StakeDialog.tsx b/apps/portal/src/components/recipes/StakeDialog.tsx
@@ -22,8 +22,9 @@ export const StakeDialog = Object.assign(
     <SideSheet
       {...props}
       title={
-        <div>
-          <Zap /> Stake
+        <div className="flex items-center gap-2">
+          <Zap />
+          Stake
         </div>
       }
       subtitle="Nomination pool staking"

diff --git a/apps/portal/src/components/recipes/StakeTargetSelectorItem.tsx b/apps/portal/src/components/recipes/StakeTargetSelectorItem.tsx
@@ -3,7 +3,9 @@ import { Button } from '@talismn/ui/atoms/Button'
 import { useSurfaceColor, useSurfaceColorAtElevation } from '@talismn/ui/atoms/Surface'
 import { Text } from '@talismn/ui/atoms/Text'
 import { Tooltip } from '@talismn/ui/atoms/Tooltip'
-import { ExternalLink, TalismanHand, User } from '@talismn/web-icons'
+import { ExternalLink, User } from '@talismn/web-icons'
+
+import Logo from '@/assets/logo.svg?react'
 
 export type StakeTargetSelectorItemProps = {
   selected?: boolean
@@ -118,7 +120,7 @@ export const StakeTargetSelectorItem = (props: StakeTargetSelectorItemProps) =>
         </Tooltip>
         {props.talismanRecommended && (
           <Tooltip content={props.talismanRecommendedDescription}>
-            <TalismanHand size="1.4rem" />
+            <Logo className="h-[1em] w-[1em]" />
           </Tooltip>
         )}
       </Text.Body>