Merge branch 'dev' into refactor/distributed-metadata

.changeset/neat-kiwis-look.md

@@ -0,0 +1,28 @@
+---
+"@talismn/balances-substrate-equilibrium": patch
+"@talismn/chaindata-provider-extension": patch
+"@talismn/balances-substrate-assets": patch
+"@talismn/balances-substrate-native": patch
+"@talismn/balances-substrate-tokens": patch
+"@talismn/balances-default-modules": patch
+"@talismn/balances-substrate-psp22": patch
+"@talismn/balances-substrate-orml": patch
+"@talismn/balances-evm-native": patch
+"@talismn/chain-connector-evm": patch
+"@talismn/balances-evm-erc20": patch
+"@talismn/chaindata-provider": patch
+"@talismn/chain-connector": patch
+"@talismn/connection-meta": patch
+"@talismn/mutate-metadata": patch
+"@talismn/eslint-config": patch
+"@talismn/on-chain-id": patch
+"talisman-ui": patch
+"@talismn/token-rates": patch
+"@talismn/balances": patch
+"@talismn/icons": patch
+"@talismn/scale": patch
+"@talismn/util": patch
+"@talismn/orb": patch
+---
+
+bump typescript version

apps/extension/jest.config.js

@@ -1,4 +1,4 @@
-/* eslint-env es6 */
+/* eslint-env es2022 */
 /** @type {import('ts-jest').InitialOptionsTsJest} */
 const { defaults } = require("jest-config")
 const { pathsToModuleNameMapper } = require("ts-jest")
@@ -11,9 +11,12 @@ module.exports = {
   transform: {
     "^.+\\.(t|j)sx?$": ["@swc/jest"],
   },
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-    prefix: "<rootDir>/src",
-  }),
+  moduleNameMapper: {
+    "^rxjs/internal/(.*)$": "rxjs/dist/cjs/internal/$1",
+    ...pathsToModuleNameMapper(compilerOptions.paths, {
+      prefix: "<rootDir>/src",
+    }),
+  },
   extraGlobals: ["Math"],
   moduleFileExtensions: [...defaults.moduleFileExtensions, "ts", "tsx"],
   setupFiles: [

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "1.19.3",
+  "version": "1.19.4",
   "private": true,
   "license": "GPL-3.0-or-later",
   "dependencies": {
@@ -70,8 +70,6 @@
     "@types/react-highlight": "^0.12.5",
     "@types/uuid": "^8.3.4",
     "@types/webextension-polyfill": "0.9.1",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
     "anylogger": "^1.0.11",
     "anylogger-loglevel": "^1.0.0",
     "assert": "^2.0.0",
@@ -136,7 +134,7 @@
     "toml": "^3.0.0",
     "ts-loader": "9.4.4",
     "ts-results": "3.3.0",
-    "typescript": "4.9.4",
+    "typescript": "^5.2.2",
     "url-join": "^5.0.0",
     "uuid": "^8.3.2",
     "webextension-polyfill": "0.8.0",
@@ -162,14 +160,16 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/lz-string": "^1.3.34",
     "@types/semver": "^7.3.9",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "archiver": "5.3.1",
     "autoprefixer": "^10.4.12",
     "babel-jest": "27.5.1",
     "babel-plugin-module-extension-resolver": "^1.0.0",
     "browserify-zlib": "^0.2.0",
     "crypto-browserify": "3.12.0",
-    "eslint": "^8.15.0",
-    "eslint-webpack-plugin": "^3.1.1",
+    "eslint": "^8.52.0",
+    "eslint-webpack-plugin": "^4.0.1",
     "fake-indexeddb": "4.0.1",
     "html-webpack-plugin": "^5.5.3",
     "https-browserify": "^1.0.0",

apps/extension/src/@talisman/components/SearchInput.tsx

@@ -87,7 +87,7 @@ export const SearchInput: FC<SearchInputProps> = ({
       ref={ref}
       className={classNames("text-base", className)}
       containerProps={containerProps}
-      before={<SearchIcon className="text-body-disabled" />}
+      before={<SearchIcon className="text-body-disabled shrink-0" />}
       after={
         after ??
         (!!search && (

apps/extension/src/ui/apps/dashboard/routes/Portfolio/PortfolioAsset.tsx

@@ -1,6 +1,7 @@
 import { Balances } from "@core/domains/balances/types"
 import { ChevronLeftIcon, CopyIcon, SendIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
+import Fiat from "@ui/domains/Asset/Fiat"
 import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
 import { DashboardAssetDetails } from "@ui/domains/Portfolio/AssetDetails"
@@ -19,7 +20,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string }) => {
   const navigate = useNavigate()
   const balancesToDisplay = useDisplayBalances(balances)
-  const { token, summary } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate, summary } = useTokenBalancesSummary(balancesToDisplay)
   const { open: openCopyAddressModal } = useCopyAddressModal()
   const { genericEvent } = useAnalytics()
   const { account } = useSelectedAccount()
@@ -52,11 +53,14 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
             <ChevronLeftIcon />
             <span className="text-sm">{t("Asset")}</span>
           </button>
-          <div className="flex items-center gap-4">
-            <div className="w-12 shrink-0 text-lg">
-              <TokenLogo tokenId={token?.id} />
+          <div className="flex items-center gap-6">
+            <div className="text-3xl">
+              <TokenLogo tokenId={token?.id} className="text-3xl" />
+            </div>
+            <div>
+              <div className="text-md">{token?.symbol}</div>
+              {rate && <Fiat amount={rate} className="text-body-secondary" />}
             </div>
-            <div className="text-md">{token?.symbol}</div>
             <div className="flex flex-wrap">
               <Tooltip>
                 <TooltipTrigger

apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAsset.tsx

@@ -19,7 +19,7 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
   const navigate = useNavigate()
   const balancesToDisplay = useDisplayBalances(balances)
   const currency = useSelectedCurrency()
-  const { token } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate } = useTokenBalancesSummary(balancesToDisplay)
 
   const handleBackBtnClick = useCallback(() => navigate(-1), [navigate])
 
@@ -41,11 +41,11 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
         </div>
         <div className="flex grow flex-col gap-1 pl-2 text-sm">
           <div className="text-body-secondary flex justify-between">
-            <div>{t("Asset")}</div>
+            <div>{symbol}</div>
             <div>{t("Total")}</div>
           </div>
           <div className="text-md flex justify-between font-bold">
-            <div>{symbol}</div>
+            {rate && <Fiat amount={rate} />}
             <div>
               <Fiat amount={total} isBalance />
             </div>

apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx

@@ -2,6 +2,7 @@ import { TALISMAN_WEB_APP_STAKING_URL } from "@core/constants"
 import { Balances } from "@core/domains/balances/types"
 import { ExternalLinkIcon, XIcon, ZapIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
+import Fiat from "@ui/domains/Asset/Fiat"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { FC, useCallback } from "react"
@@ -56,7 +57,7 @@ const AssetRow = ({ balances }: AssetRowProps) => {
 
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const { token, rate, summary } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -130,19 +131,22 @@ const AssetRow = ({ balances }: AssetRowProps) => {
               <TokenLogo tokenId={token.id} />
             </div>
             <div className="flex grow flex-col justify-center gap-2">
-              <div className="text-body flex items-center gap-4 text-base font-bold">
-                {token.symbol}
-                {!!token.isTestnet && (
-                  <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
-                    {t("Testnet")}
-                  </span>
+              <div className="flex items-center gap-3">
+                <div className="text-body flex items-center gap-4 text-base font-bold">
+                  {token.symbol}
+                  {!!token.isTestnet && (
+                    <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
+                      {t("Testnet")}
+                    </span>
+                  )}
+                </div>
+                {!!networkIds.length && (
+                  <div>
+                    <NetworksLogoStack networkIds={networkIds} max={3} />
+                  </div>
                 )}
               </div>
-              {!!networkIds.length && (
-                <div>
-                  <NetworksLogoStack networkIds={networkIds} />
-                </div>
-              )}
+              {rate !== undefined && <Fiat amount={rate} className="text-body-secondary" />}
             </div>
           </div>
         </div>

apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx

@@ -88,7 +88,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const { account } = useSearchParamsSelectedAccount()
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const { token, summary, rate } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -152,19 +152,22 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
           <div className="relative grow">
             {/* we want content from this cell to be hidden if there are too many tokens to display on right cell */}
             <div className="absolute left-0 top-0 flex w-full flex-col gap-2 overflow-hidden text-left">
-              <div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
-                {token.symbol}
-                {!!token.isTestnet && (
-                  <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
-                    {t("Testnet")}
-                  </span>
+              <div className="flex items-center gap-3">
+                <div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
+                  {token.symbol}
+                  {!!token.isTestnet && (
+                    <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
+                      {t("Testnet")}
+                    </span>
+                  )}
+                </div>
+                {!!networkIds.length && (
+                  <div className="text-base">
+                    <NetworksLogoStack networkIds={networkIds} max={3} />
+                  </div>
                 )}
               </div>
-              {!!networkIds.length && (
-                <div className="text-base">
-                  <NetworksLogoStack networkIds={networkIds} />
-                </div>
-              )}
+              {rate !== undefined && <Fiat amount={rate} className="text-body-secondary text-xs" />}
             </div>
           </div>
           <div

apps/extension/src/ui/domains/Portfolio/useTokenBalancesSummary.ts

@@ -155,5 +155,11 @@ export const useTokenBalancesSummary = (balances: Balances) => {
     return summary
   }, [currency, tokenBalanceRates, tokenBalances.count, tokenBalances.each])
 
-  return { token, summary, tokenBalances, tokenBalanceRates }
+  return {
+    token,
+    rate: token?.id !== undefined ? tokenBalanceRates[token?.id]?.[currency] : undefined,
+    summary,
+    tokenBalances,
+    tokenBalanceRates,
+  }
 }

apps/extension/src/ui/domains/SendFunds/AddressDisplay.tsx

@@ -1,4 +1,5 @@
 import { convertAddress } from "@talisman/util/convertAddress"
+import { shortenAddress } from "@talisman/util/shortenAddress"
 import { Address as TAddress } from "@talismn/balances"
 import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
 import { CopyIcon, ExternalLinkIcon } from "@talismn/icons"
@@ -16,18 +17,18 @@ import urlJoin from "url-join"
 
 import { AccountIcon } from "../Account/AccountIcon"
 import { AccountTypeIcon } from "../Account/AccountTypeIcon"
-import { Address } from "../Account/Address"
 
 const useBlockExplorerUrl = (
   address?: TAddress | null,
   chainId?: ChainId | null,
-  evmNetworkId?: EvmNetworkId | null
+  evmNetworkId?: EvmNetworkId | null,
+  shouldFormatAddress = true
 ) => {
   const chain = useChain(chainId as string)
   const evmNetwork = useEvmNetwork(evmNetworkId as string)
   const resolvedAddress = useMemo(() => {
-    return chain && address ? convertAddress(address, chain.prefix) : address
-  }, [address, chain])
+    return shouldFormatAddress && chain && address ? convertAddress(address, chain.prefix) : address
+  }, [address, chain, shouldFormatAddress])
 
   return useMemo(() => {
     if (resolvedAddress && evmNetwork?.explorerUrl)
@@ -90,7 +91,12 @@ export const AddressDisplay: FC<AddressDisplayProps> = ({
   const account = useAccountByAddress(address)
   const contact = useContact(address)
   const chain = useChain(chainId as string)
-  const blockExplorerUrl = useBlockExplorerUrl(address, chainId, evmNetworkId)
+  const blockExplorerUrl = useBlockExplorerUrl(
+    address,
+    chainId,
+    evmNetworkId,
+    !!account || !!contact
+  )
 
   const resolvedAddress = useMemo(() => {
     return chain && address ? convertAddress(address, chain.prefix) : address
@@ -99,26 +105,21 @@ export const AddressDisplay: FC<AddressDisplayProps> = ({
   const [onChainId] = useOnChainId(resolvedAddress ?? undefined)
 
   const text = useMemo(
-    () =>
-      account?.name ??
-      contact?.name ??
-      (resolvedAddress ? (
-        <Address address={resolvedAddress} startCharCount={6} endCharCount={6} noTooltip />
-      ) : null),
-    [account?.name, contact?.name, resolvedAddress]
+    () => account?.name ?? contact?.name ?? (address ? shortenAddress(address, 6, 6) : null),
+    [account?.name, address, contact?.name]
   )
 
   const handleCopyAddress = useCallback(() => {
-    copyAddress(resolvedAddress as string)
-  }, [resolvedAddress])
+    copyAddress((!!account || !!contact ? resolvedAddress : address) as string)
+  }, [account, address, contact, resolvedAddress])
 
   if (!address || !resolvedAddress || !text) return null
 
   return (
     <Tooltip>
       <TooltipContent>
         <AddressTooltip
-          address={address}
+          address={account ? resolvedAddress : address} // don't show both formats for talisman accounts
           resolvedAddress={resolvedAddress}
           onChainId={onChainId ?? undefined}
           chainName={chain?.name}

apps/extension/src/ui/domains/SendFunds/SendFundsAccountPicker.tsx

@@ -49,13 +49,14 @@ export const SendFundsAccountPicker = () => {
     <div className="flex h-full min-h-full w-full flex-col overflow-hidden">
       <div className="flex min-h-fit w-full items-center gap-8 px-12 pb-8">
         <div className="font-bold">{"From"}</div>
-        <div className="grow">
+        <div className="mx-1 grow overflow-hidden px-1">
           <SearchInput onChange={setSearch} placeholder={t("Search by account name")} />
         </div>
       </div>
       <ScrollContainer className=" bg-black-secondary border-grey-700 scrollable h-full w-full grow overflow-x-hidden border-t">
         <SendFundsAccountsList
           accounts={accounts}
+          genesisHash={chain?.genesisHash}
           selected={from}
           onSelect={handleSelect}
           showBalances