feat: TAO staking

.changeset/loud-maps-pay.md

@@ -0,0 +1,5 @@
+---
+"@talismn/util": patch
+---
+
+added formatTokenDecimals util fn

apps/extension/.env.sample

@@ -5,7 +5,7 @@
 # TEST_MNEMONIC=blarg blarg blarg blarg blarg blarg blarg blarg blarg blarg blarg blarg
 
 # for dev only, Coingecko api settings
-# # with a paid api key, use url https://pro-api.coingecko.com 
+# # with a paid api key, use url https://pro-api.coingecko.com
 # COINGECKO_API_URL=https://api.coingecko.com
 # # with a paid api key, use header name x-cg-pro-api-key
 # COINGECKO_API_KEY_NAME=x-cg-demo-api-key
@@ -25,3 +25,5 @@
 # Talisman core dev team setup for tx analysis :
 # BLOWFISH_API_KEY=<PASSWORD_FOR_DEVMODE>
 # BLOWFISH_QA_API_KEY=<PASSWORD_FOR_QA_BUILDS> # optional : only used for canary, ci & qa builds
+
+# TAOSTATS_API_KEY=<YOUR_OWN_API_KEY>

apps/extension/src/ui/apps/dashboard/layout/notifications/DashboardNotificationsAndModals.tsx

@@ -8,9 +8,9 @@ import { AccountRenameModal } from "@ui/domains/Account/AccountRenameModal"
 import { BuyTokensModal } from "@ui/domains/Asset/Buy/BuyTokensModal"
 import { CopyAddressModal } from "@ui/domains/CopyAddress"
 import { MigratePasswordModal } from "@ui/domains/Settings/MigratePassword/MigratePasswordModal"
-import { NomPoolBondModal } from "@ui/domains/Staking/NomPoolBond/NomPoolBondModal"
-import { NomPoolUnbondModal } from "@ui/domains/Staking/NomPoolUnbond/NomPoolUnbondModal"
+import { BondModal } from "@ui/domains/Staking/Bond/BondModal"
 import { NomPoolWithdrawModal } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawModal"
+import { UnbondModal } from "@ui/domains/Staking/Unbond/UnbondModal"
 import { ExplorerNetworkPickerModal } from "@ui/domains/ViewOnExplorer"
 
 import DashboardNotifications from "."
@@ -48,8 +48,8 @@ export const DashboardNotificationsAndModals = () => {
       <ExplorerNetworkPickerModal />
       <MigratePasswordModal />
       <OnboardingToast />
-      <NomPoolBondModal />
-      <NomPoolUnbondModal />
+      <BondModal />
+      <UnbondModal />
       <NomPoolWithdrawModal />
     </Suspense>
   )

apps/extension/src/ui/apps/popup/index.tsx

@@ -19,9 +19,9 @@ import { AccountRemoveModal } from "@ui/domains/Account/AccountRemoveModal"
 import { AccountRenameModal } from "@ui/domains/Account/AccountRenameModal"
 import { CopyAddressModal } from "@ui/domains/CopyAddress"
 import { DatabaseErrorAlert } from "@ui/domains/Settings/DatabaseErrorAlert"
-import { NomPoolBondModal } from "@ui/domains/Staking/NomPoolBond/NomPoolBondModal"
-import { NomPoolUnbondModal } from "@ui/domains/Staking/NomPoolUnbond/NomPoolUnbondModal"
+import { BondModal } from "@ui/domains/Staking/Bond/BondModal"
 import { NomPoolWithdrawModal } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawModal"
+import { UnbondModal } from "@ui/domains/Staking/Unbond/UnbondModal"
 import { ExplorerNetworkPickerModal } from "@ui/domains/ViewOnExplorer"
 import { useLoginCheck } from "@ui/hooks/useLoginCheck"
 
@@ -91,8 +91,8 @@ const Popup = () => {
         <ExplorerNetworkPickerModal />
         <BackupWarningDrawer />
         <LedgerPolkadotUpgradeAlertDrawer />
-        <NomPoolBondModal />
-        <NomPoolUnbondModal />
+        <BondModal />
+        <UnbondModal />
         <NomPoolWithdrawModal />
       </Suspense>
       {/* Render outside of suspense or it will never show in case of migration error */}

apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx

@@ -13,10 +13,10 @@ import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import Tokens from "@ui/domains/Asset/Tokens"
 import { AssetBalanceCellValue } from "@ui/domains/Portfolio/AssetBalanceCellValue"
 import { NoTokensMessage } from "@ui/domains/Portfolio/NoTokensMessage"
-import { NomPoolBondButton } from "@ui/domains/Staking/NomPoolBond/NomPoolBondButton"
-import { NomPoolUnbondButton } from "@ui/domains/Staking/NomPoolUnbond/NomPoolUnbondButton"
+import { BondButton } from "@ui/domains/Staking/Bond/BondButton"
+import { useNomPoolStakingStatus } from "@ui/domains/Staking/hooks/nomPools/useNomPoolStakingStatus"
 import { NomPoolWithdrawButton } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawButton"
-import { useNomPoolStakingStatus } from "@ui/domains/Staking/shared/useNomPoolStakingStatus"
+import { UnbondButton } from "@ui/domains/Staking/Unbond/UnbondButton"
 import { BalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useSelectedCurrency } from "@ui/state"
 
@@ -35,11 +35,15 @@ const AssetState = ({
   description,
   render,
   address,
+  isLoading,
+  locked,
 }: {
   title: string
   description?: string
   render: boolean
   address?: Address
+  isLoading?: boolean
+  locked?: boolean
 }) => {
   if (!render) return null
   return (
@@ -55,6 +59,9 @@ const AssetState = ({
         </div>
       )}
       {/* show description below title when address is not set */}
+      {isLoading && !description && locked && (
+        <div className="bg-grey-700 rounded-xs h-[1.6rem] w-80 animate-pulse" />
+      )}
       {description && !address && (
         <div className="flex-shrink-0 truncate text-sm">{description}</div>
       )}
@@ -123,7 +130,7 @@ const ChainTokenBalances = ({ chainId, balances }: AssetRowProps) => {
           />
         </div>
         <div className="flex items-center justify-end gap-2">
-          {tokenId && <NomPoolBondButton tokenId={tokenId} balances={balances} />}
+          {tokenId && <BondButton tokenId={tokenId} balances={balances} />}
           <AssetBalanceCellValue
             render
             tokens={summary.availableTokens}
@@ -252,7 +259,14 @@ const ChainTokenBalancesDetailRow = ({
     className={classNames("bg-grey-850 grid grid-cols-[40%_30%_30%]", isLastRow && "rounded-b")}
   >
     <div>
-      <AssetState title={row.title} description={row.description} render address={row.address} />
+      <AssetState
+        title={row.title}
+        description={row.description}
+        render
+        address={row.address}
+        isLoading={row.isLoading}
+        locked={row.locked}
+      />
     </div>
     {!row.locked && <div></div>}
     <div>
@@ -263,7 +277,9 @@ const ChainTokenBalancesDetailRow = ({
         symbol={symbol}
         locked={row.locked}
         balancesStatus={status}
-        className={classNames(status.status === "fetching" && "animate-pulse transition-opacity")}
+        className={classNames(
+          (status.status === "fetching" || row.isLoading) && "animate-pulse transition-opacity",
+        )}
       />
     </div>
     {!!row.locked && row.meta && tokenId && (
@@ -305,12 +321,12 @@ const LockedExtra: FC<{
     [accountStatus?.canWithdrawIn, rowMeta.unbonding],
   )
 
-  if (!rowAddress || !accountStatus) return null
+  if (!rowAddress) return null
 
   return (
     <div className="flex h-[6.6rem] flex-col items-end justify-center gap-2 whitespace-nowrap p-8 text-right">
       {rowMeta.unbonding ? (
-        accountStatus.canWithdraw ? (
+        accountStatus?.canWithdraw ? (
           <NomPoolWithdrawButton tokenId={tokenId} address={rowAddress} variant="large" />
         ) : (
           <>
@@ -327,8 +343,13 @@ const LockedExtra: FC<{
             )}
           </>
         )
-      ) : accountStatus.canUnstake ? (
-        <NomPoolUnbondButton tokenId={tokenId} address={rowAddress} variant="large" />
+      ) : accountStatus?.canUnstake || tokenId === "bittensor-substrate-native" ? (
+        <UnbondButton
+          tokenId={tokenId}
+          address={rowAddress}
+          variant="large"
+          poolId={rowMeta.poolId}
+        />
       ) : null}
     </div>
   )

apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx

@@ -15,16 +15,16 @@ import { Fiat } from "@ui/domains/Asset/Fiat"
 import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import Tokens from "@ui/domains/Asset/Tokens"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
-import { NomPoolBondButton } from "@ui/domains/Staking/NomPoolBond/NomPoolBondButton"
-import { NomPoolUnbondButton } from "@ui/domains/Staking/NomPoolUnbond/NomPoolUnbondButton"
+import { usePortfolioNavigation } from "@ui/domains/Portfolio/usePortfolioNavigation"
+import { BondButton } from "@ui/domains/Staking/Bond/BondButton"
+import { useNomPoolStakingStatus } from "@ui/domains/Staking/hooks/nomPools/useNomPoolStakingStatus"
 import { NomPoolWithdrawButton } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawButton"
-import { useNomPoolStakingStatus } from "@ui/domains/Staking/shared/useNomPoolStakingStatus"
+import { UnbondButton } from "@ui/domains/Staking/Unbond/UnbondButton"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { BalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useFeatureFlag, useSelectedCurrency } from "@ui/state"
 
 import { StaleBalancesIcon } from "../StaleBalancesIcon"
-import { usePortfolioNavigation } from "../usePortfolioNavigation"
 import { CopyAddressButton } from "./CopyAddressIconButton"
 import { PortfolioAccount } from "./PortfolioAccount"
 import { SendFundsButton } from "./SendFundsIconButton"
@@ -76,7 +76,7 @@ const ChainTokenBalances = ({ chainId, balances }: AssetRowProps) => {
         {tokenId && (
           <div className="size-[3.8rem] shrink-0 empty:hidden">
             <Suspense fallback={<SuspenseTracker name="StakeButton" />}>
-              <NomPoolBondButton tokenId={tokenId} balances={balances} />
+              <BondButton tokenId={tokenId} balances={balances} />
             </Suspense>
           </div>
         )}
@@ -211,7 +211,7 @@ const ChainTokenBalancesDetailRow = ({
             tokenId={tokenId}
             address={row.address}
             rowMeta={row.meta}
-            isLoading={status.status === "fetching"}
+            isLoading={status.status === "fetching" || !!row.isLoading}
           />
         )}
       </div>
@@ -220,6 +220,9 @@ const ChainTokenBalancesDetailRow = ({
           <PortfolioAccount address={row.address} />
         </div>
       )}
+      {row.isLoading && !row.description && row.locked && (
+        <div className="bg-grey-700 rounded-xs h-[1.6rem] max-w-48 animate-pulse" />
+      )}
       {!row.address && row.description && (
         <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs">
           {row.description}
@@ -279,12 +282,12 @@ const LockedExtra: FC<{
     [accountStatus?.canWithdrawIn, rowMeta.unbonding],
   )
 
-  if (!rowAddress || !accountStatus) return null
+  if (!rowAddress) return null
 
   return (
     <>
       {rowMeta.unbonding ? (
-        accountStatus.canWithdraw ? (
+        accountStatus?.canWithdraw ? (
           <NomPoolWithdrawButton tokenId={tokenId} address={rowAddress} variant="small" />
         ) : (
           <Tooltip>
@@ -305,8 +308,13 @@ const LockedExtra: FC<{
           </Tooltip>
         )
       ) : //eslint-disable-next-line @typescript-eslint/no-explicit-any
-      accountStatus.canUnstake ? (
-        <NomPoolUnbondButton tokenId={tokenId} address={rowAddress} variant="small" />
+      accountStatus?.canUnstake || tokenId === "bittensor-substrate-native" ? (
+        <UnbondButton
+          tokenId={tokenId}
+          address={rowAddress}
+          variant="small"
+          poolId={rowMeta.poolId}
+        />
       ) : null}
     </>
   )

apps/extension/src/ui/domains/Portfolio/AssetDetails/TokenContextMenu.tsx

@@ -14,8 +14,8 @@ import {
 import urlJoin from "url-join"
 
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
-import { useNomPoolBondModal } from "@ui/domains/Staking/NomPoolBond/useNomPoolBondModal"
-import { useNomPoolStakingStatus } from "@ui/domains/Staking/shared/useNomPoolStakingStatus"
+import { useBondModal } from "@ui/domains/Staking/Bond/useBondModal"
+import { useNomPoolStakingStatus } from "@ui/domains/Staking/hooks/nomPools/useNomPoolStakingStatus"
 import { useViewOnExplorer } from "@ui/domains/ViewOnExplorer"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useToken } from "@ui/state"
@@ -54,7 +54,7 @@ const StakeMenuItem: FC<{ tokenId: string }> = ({ tokenId }) => {
   const { t } = useTranslation()
   const { genericEvent } = useAnalytics()
 
-  const { open } = useNomPoolBondModal()
+  const { open } = useBondModal()
   const { data: stakingStatus } = useNomPoolStakingStatus(tokenId)
 
   const openArgs = useMemo<Parameters<typeof open>[0] | undefined>(() => {

apps/extension/src/ui/domains/Portfolio/AssetDetails/useChainTokenBalances.ts

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next"
 import { Address, Balances } from "@extension/core"
 import { sortBigBy } from "@talisman/util/bigHelper"
 import { cleanupNomPoolName } from "@ui/domains/Staking/helpers"
+import { useCombineBittensorStakeInfo } from "@ui/domains/Staking/hooks/bittensor/useCombineBittensorStakeInfo"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useNetworkCategory } from "@ui/hooks/useNetworkCategory"
 import { useChain, useSelectedCurrency } from "@ui/state"
@@ -23,6 +24,7 @@ export type DetailRow = {
   locked: boolean
   address?: Address
   meta?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  isLoading?: boolean
 }
 
 type ChainTokenBalancesParams = {
@@ -39,6 +41,11 @@ export const useChainTokenBalances = ({ chainId, balances }: ChainTokenBalancesP
 
   const currency = useSelectedCurrency()
 
+  const { combinedStakeInfo: subtensor } = useCombineBittensorStakeInfo({
+    address: account?.address,
+    balances: tokenBalances,
+  })
+
   const detailRows = useMemo((): DetailRow[] => {
     if (!summary) return []
 
@@ -123,26 +130,10 @@ export const useChainTokenBalances = ({ chainId, balances }: ChainTokenBalancesP
       })),
     )
 
-    // STAKED (SUBTENSOR)
-    const subtensor = tokenBalances.each.flatMap((b) =>
-      b.subtensor.map((subtensor, index) => ({
-        key: `${b.id}-subtensor-${index}`,
-        title: getLockTitle(subtensor, { balance: b }),
-
-        description: undefined,
-        tokens: BigNumber(subtensor.amount.tokens),
-        fiat: subtensor.amount.fiat(currency),
-        locked: true,
-        // only show address when we're viewing balances for all accounts
-        address: account ? undefined : b.address,
-        meta: subtensor.meta,
-      })),
-    )
-
     return [...available, ...locked, ...reserved, ...staked, ...crowdloans, ...subtensor]
       .filter((row) => row && row.tokens.gt(0))
       .sort(sortBigBy("tokens", true))
-  }, [summary, account, t, tokenBalances, currency])
+  }, [summary, account, t, tokenBalances.each, subtensor, currency])
 
   const { evmNetwork } = balances.sorted[0]
   const relay = useChain(chain?.relay?.id)

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

@@ -5,8 +5,8 @@ import { Trans, useTranslation } from "react-i18next"
 
 import { Balances } from "@extension/core"
 import { Fiat } from "@ui/domains/Asset/Fiat"
-import { NomPoolBondPillButton } from "@ui/domains/Staking/NomPoolBond/NomPoolBondPillButton"
-import { useNomPoolBondButton } from "@ui/domains/Staking/NomPoolBond/useNomPoolBondButton"
+import { BondPillButton } from "@ui/domains/Staking/Bond/BondPillButton"
+import { useBondButton } from "@ui/domains/Staking/Bond/useBondButton"
 import { useShowStakingBanner } from "@ui/domains/Staking/useShowStakingBanner"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
@@ -82,7 +82,7 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
   const isUniswapV2LpToken = token?.type === "evm-uniswapv2"
   const tvl = useUniswapV2LpTokenTotalValueLocked(token, rate, balances)
 
-  const { canBondNomPool } = useNomPoolBondButton({ tokenId: token?.id, balances })
+  const { canBondNomPool } = useBondButton({ tokenId: token?.id, balances })
 
   const stakingReminder = useShowStakingBanner(balances)
 
@@ -147,7 +147,7 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
         <div className="flex h-[6.6rem] flex-col items-end justify-center gap-2 text-right">
           {canBondNomPool && (
             <>
-              <NomPoolBondPillButton
+              <BondPillButton
                 tokenId={token.id}
                 balances={balances}
                 className="[>svg]:text-[2rem] mr-8 hidden text-base group-hover:block"

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

@@ -9,8 +9,8 @@ import { FadeIn } from "@talisman/components/FadeIn"
 import { useOpenClose } from "@talisman/hooks/useOpenClose"
 import { Fiat } from "@ui/domains/Asset/Fiat"
 import Tokens from "@ui/domains/Asset/Tokens"
-import { NomPoolBondPillButton } from "@ui/domains/Staking/NomPoolBond/NomPoolBondPillButton"
-import { useNomPoolBondButton } from "@ui/domains/Staking/NomPoolBond/useNomPoolBondButton"
+import { BondPillButton } from "@ui/domains/Staking/Bond/BondPillButton"
+import { useBondButton } from "@ui/domains/Staking/Bond/useBondButton"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useNavigateWithQuery } from "@ui/hooks/useNavigateWithQuery"
@@ -88,7 +88,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const isUniswapV2LpToken = token?.type === "evm-uniswapv2"
   const tvl = useUniswapV2LpTokenTotalValueLocked(token, rate, balances)
 
-  const { canBondNomPool } = useNomPoolBondButton({ tokenId: token?.id, balances })
+  const { canBondNomPool } = useBondButton({ tokenId: token?.id, balances })
   const showStakingButton = canBondNomPool && !locked
 
   if (!token || !summary) return null
@@ -164,7 +164,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
                 {fiat === null ? "-" : <Fiat amount={fiat} isBalance />}
               </div>
               {showStakingButton && (
-                <NomPoolBondPillButton
+                <BondPillButton
                   tokenId={token.id}
                   balances={balances}
                   className="hidden group-hover:block"