wip: inline staking

.changeset/wicked-pugs-tease.md

@@ -0,0 +1,5 @@
+---
+"@talismn/icons": minor
+---
+
+staking icons

apps/extension/src/ui/api/api.ts

@@ -1,3 +1,6 @@
+import { HexString } from "@polkadot/util/types"
+import { SignerPayloadJSON } from "extension-core"
+
 import PortMessageService from "@common/PortMessageService"
 
 import MessageTypes from "./types"
@@ -329,6 +332,11 @@ export const api: MessageTypes = {
       params,
       isCacheable,
     }) as Promise<T>,
+  subSubmit: (payload: SignerPayloadJSON, signature?: HexString) =>
+    messageService.sendMessage("pri(substrate.rpc.submit)", {
+      payload,
+      signature,
+    }),
   subChainMetadata: (genesisHash, specVersion, blockHash) =>
     messageService.sendMessage("pri(substrate.metadata.get)", {
       genesisHash,

apps/extension/src/ui/api/types.ts

@@ -316,6 +316,7 @@ export default interface MessageTypes {
     params: unknown[],
     isCacheable?: boolean
   ) => Promise<T>
+  subSubmit: (payload: SignerPayloadJSON, signature?: HexString) => Promise<{ hash: HexString }>
 
   // substrate chain metadata
   subChainMetadata: (

apps/extension/src/ui/apps/dashboard/layout/DashboardLayout.tsx

@@ -1,6 +1,9 @@
+import { classNames } from "@talismn/util"
+import { FC, Suspense, useEffect, useRef, useState } from "react"
+import { useLocation } from "react-router-dom"
+
 import { BackButton } from "@talisman/components/BackButton"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
-import { classNames } from "@talismn/util"
 import { AnalyticsPage } from "@ui/api/analytics"
 import { AccountExportModal } from "@ui/domains/Account/AccountExportModal"
 import { AccountExportPrivateKeyModal } from "@ui/domains/Account/AccountExportPrivateKeyModal"
@@ -9,9 +12,10 @@ 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 { NomPoolWithdrawModal } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawModal"
 import { ExplorerNetworkPickerModal } from "@ui/domains/ViewOnExplorer"
-import { FC, Suspense, useEffect, useRef, useState } from "react"
-import { useLocation } from "react-router-dom"
 
 import DashboardNotifications from "./DashboardNotifications"
 import { BackupWarningModal } from "./DashboardNotifications/BackupWarningModal"
@@ -58,6 +62,9 @@ const DashboardNotificationsAndModals = () => {
       <ExplorerNetworkPickerModal />
       <MigratePasswordModal />
       <OnboardingToast />
+      <NomPoolBondModal />
+      <NomPoolUnbondModal />
+      <NomPoolWithdrawModal />
     </Suspense>
   )
 }

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

@@ -1,8 +1,15 @@
-import { AUTH_PREFIX } from "@extension/core"
-import { SIGNING_TYPES } from "@extension/core"
-import { METADATA_PREFIX } from "@extension/core"
-import { ETH_NETWORK_ADD_PREFIX, WATCH_ASSET_PREFIX } from "@extension/core"
-import { ENCRYPT_DECRYPT_PREFIX, ENCRYPT_ENCRYPT_PREFIX } from "@extension/core"
+import { Suspense, useEffect } from "react"
+import { Navigate, Route, Routes } from "react-router-dom"
+
+import {
+  AUTH_PREFIX,
+  ENCRYPT_DECRYPT_PREFIX,
+  ENCRYPT_ENCRYPT_PREFIX,
+  ETH_NETWORK_ADD_PREFIX,
+  METADATA_PREFIX,
+  SIGNING_TYPES,
+  WATCH_ASSET_PREFIX,
+} from "@extension/core"
 import { FadeIn } from "@talisman/components/FadeIn"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { api } from "@ui/api"
@@ -12,10 +19,11 @@ 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 { NomPoolWithdrawModal } from "@ui/domains/Staking/NomPoolWithdraw/NomPoolWithdrawModal"
 import { ExplorerNetworkPickerModal } from "@ui/domains/ViewOnExplorer"
 import { useLoginCheck } from "@ui/hooks/useLoginCheck"
-import { Suspense, useEffect } from "react"
-import { Navigate, Route, Routes } from "react-router-dom"
 
 import { BackupWarningDrawer } from "./components/BackupWarningDrawer"
 import { LedgerPolkadotUpgradeAlertDrawer } from "./components/LedgerPolkadotUpgradeDrawer"
@@ -73,6 +81,9 @@ const Popup = () => {
         <ExplorerNetworkPickerModal />
         <BackupWarningDrawer />
         <LedgerPolkadotUpgradeAlertDrawer />
+        <NomPoolBondModal />
+        <NomPoolUnbondModal />
+        <NomPoolWithdrawModal />
       </Suspense>
       {/* Render outside of suspense or it will never show in case of migration error */}
       <DatabaseErrorAlert container="popup" />

apps/extension/src/ui/atoms/balances.ts

@@ -67,7 +67,7 @@ export const balancesHydrateAtom = atom(async (get) => {
   return { chains, evmNetworks, tokens, tokenRates } as HydrateDb
 })
 
-const allBalancesAtom = atom(async (get) => {
+export const allBalancesAtom = atom(async (get) => {
   const [rawBalances, hydrate] = await Promise.all([
     get(filteredRawBalancesAtom),
     get(balancesHydrateAtom),
@@ -77,6 +77,7 @@ const allBalancesAtom = atom(async (get) => {
 
 type BalanceQueryParams = { address?: Address; tokenId?: TokenId }
 
+/** @deprecated this suspenses for every new key, try to use another approach */
 export const balancesAtomFamily = atomFamily(
   ({ address, tokenId }: BalanceQueryParams) =>
     atom(async (get) => {

apps/extension/src/ui/atoms/chaindata.ts

@@ -1,9 +1,7 @@
 import { HexString } from "@polkadot/util/types"
 import {
-  Chain,
   ChainId,
   ChainList,
-  CustomChain,
   EvmNetworkId,
   EvmNetworkList,
   TokenId,
@@ -201,19 +199,12 @@ const activeChainsWithoutTestnetsMapAtom = atom(async (get) => {
   return Object.fromEntries(chains.map((network) => [network.id, network])) as ChainList
 })
 
-const chainsByGenesisHashMapAtom = atom(async (get) => {
-  const chains = await get(allChainsAtom)
-  return Object.fromEntries(chains.map((chain) => [chain.genesisHash, chain])) as Record<
-    HexString,
-    Chain | CustomChain
-  >
-})
-
+/** @deprecated this suspenses for every new key, try to use another approach */
 export const chainByGenesisHashAtomFamily = atomFamily(
   (genesisHash: HexString | null | undefined) =>
     atom(async (get) => {
       if (!genesisHash) return null
-      const chains = await get(chainsByGenesisHashMapAtom)
+      const chains = await get(allChainsMapByGenesisHashAtom)
       return chains[genesisHash] || null
     })
 )

apps/extension/src/ui/atoms/tokenRates.ts

@@ -35,6 +35,7 @@ export const tokenRatesMapAtom = atom(async (get) => {
   return Object.fromEntries(tokenRates.map(({ tokenId, rates }) => [tokenId, rates]))
 })
 
+/** @deprecated this suspenses for every new key, try to use another approach */
 export const tokenRatesByIdFamily = atomFamily((tokenId: TokenId | null | undefined) =>
   atom(async (get) => {
     if (!tokenId) return null

apps/extension/src/ui/domains/Asset/TokensAndFiat.tsx

@@ -1,8 +1,9 @@
 import { BalanceFormatter } from "@talismn/balances"
+import { FC, Suspense, useMemo } from "react"
+
 import { useSelectedCurrency } from "@ui/hooks/useCurrency"
 import useToken from "@ui/hooks/useToken"
 import { useTokenRates } from "@ui/hooks/useTokenRates"
-import { FC, Suspense, useMemo } from "react"
 
 import { Fiat } from "./Fiat"
 import Tokens from "./Tokens"
@@ -16,6 +17,8 @@ type TokensAndFiatProps = {
   noCountUp?: boolean
   isBalance?: boolean
   noFiat?: boolean
+  tokensClassName?: string
+  fiatClassName?: string
 }
 
 const TokensAndFiatInner: FC<TokensAndFiatProps> = ({
@@ -26,6 +29,8 @@ const TokensAndFiatInner: FC<TokensAndFiatProps> = ({
   noCountUp,
   isBalance,
   noFiat,
+  tokensClassName,
+  fiatClassName,
 }) => {
   const token = useToken(tokenId)
   const tokenRates = useTokenRates(tokenId)
@@ -50,13 +55,20 @@ const TokensAndFiatInner: FC<TokensAndFiatProps> = ({
         noCountUp={noCountUp}
         noTooltip={noTooltip}
         isBalance={isBalance}
+        className={tokensClassName}
       />
       {/* warning : some tokens (ex: EQ) have a fiatRates object, but with null values for all fiat currencies */}
       {balance.fiat(currency) !== null && !noFiat ? (
         <>
           {" "}
           (
-          <Fiat amount={balance} isBalance={isBalance} noCountUp={noCountUp} />)
+          <Fiat
+            amount={balance}
+            isBalance={isBalance}
+            noCountUp={noCountUp}
+            className={fiatClassName}
+          />
+          )
         </>
       ) : null}
     </span>