feat: avail nompool staking (#1153)

* feat: added avail to nompool config

* fix: remove serif fallback font

* fix: broken searchbar on portfolio

* fix: use avail extensions in apipromise

* fix: show coming soon instead of apr for avail

* fix: more coming soon text for avail

apps/portal/package.json

@@ -49,6 +49,7 @@
     "@talismn/web-icons": "workspace:^",
     "@tanstack/react-query": "^5.32.0",
     "@visx/visx": "^3.1.2",
+    "avail-js-sdk": "^0.2.13",
     "bignumber.js": "^9.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

apps/portal/src/components/widgets/staking/substrate/NominationPoolsStakeSideSheet.tsx

@@ -1,4 +1,4 @@
-import { ChainProvider } from '../../../../domains/chains'
+import { ChainProvider, useChainState } from '../../../../domains/chains'
 import { nominationPoolsEnabledChainsState, type ChainInfo } from '../../../../domains/chains/recoils'
 import { useEraEtaFormatter } from '../../../../domains/common/hooks'
 import { useApr } from '../../../../domains/staking/substrate/nominationPools'
@@ -7,13 +7,18 @@ import StakeForm from '../../../recipes/StakeForm/StakeForm'
 import ErrorBoundary from '../../ErrorBoundary'
 import { AssetSelect, ControlledStakeForm } from './StakeForm'
 import { CircularProgressIndicator } from '@talismn/ui'
+import { Text } from '@talismn/ui'
 import BN from 'bn.js'
 import { Suspense, useState, useTransition } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 
 const Rewards = () => {
-  return <>{useApr().toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 2 })}</>
+  const chain = useRecoilValue(useChainState())
+  const apr = useApr()
+
+  if (chain.id === 'avail') return <Text.Body>Coming Soon</Text.Body>
+  return <>{apr.toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 2 })}</>
 }
 
 const EraEta = () => {

apps/portal/src/components/widgets/staking/substrate/NominationPoolsStatisticsSideSheet.tsx

@@ -305,7 +305,13 @@ const ExistingPool = (props: NominationPoolsStatisticsSideSheetProps & { pool: D
       poolStatus={props.pool.status}
       balance={<RedactableBalance>{balance.decimalAmount.toLocaleString()}</RedactableBalance>}
       rewards={<RedactableBalance>{last15DaysTotalPayouts.toLocaleString()}</RedactableBalance>}
-      apr={stakedReturn.toLocaleString(undefined, { style: 'percent' })}
+      apr={
+        chain.id === 'avail' ? (
+          <Text.Body>Coming Soon</Text.Body>
+        ) : (
+          stakedReturn.toLocaleString(undefined, { style: 'percent' })
+        )
+      }
       nextEraEta={useEraEtaFormatter()(1)}
       unbondings={useMemo(
         () =>

apps/portal/src/components/widgets/staking/substrate/StakeCalculatorDialog.tsx

@@ -4,13 +4,15 @@ import { useApr } from '../../../../domains/staking/substrate/nominationPools'
 import StakeCalculatorDialogComponent from '../../../recipes/StakeCalculatorDialog'
 import ErrorBoundary from '../../ErrorBoundary'
 import { AssetSelect } from './StakeForm'
+import { Text } from '@talismn/ui'
 import BN from 'bn.js'
 import { Suspense, useDeferredValue, useMemo, useState, useTransition } from 'react'
 import { useRecoilValue } from 'recoil'
 
 type StakeCalculatorDialogProps = { open?: boolean; onRequestDismiss: () => unknown }
 
 const EstimatedYield = (props: { amount: string }) => {
+  const chain = useRecoilValue(useChainState())
   const stakedReturn = useApr()
 
   const amount = useTokenAmount(props.amount)
@@ -28,6 +30,16 @@ const EstimatedYield = (props: { amount: string }) => {
 
   const dailyYield = useTokenAmountFromPlanck(useMemo(() => bnPlanck?.divn(365), [bnPlanck]))
 
+  if (chain.id === 'avail')
+    return (
+      <StakeCalculatorDialogComponent.EstimatedYield
+        annualYield={<Text.Body>Coming Soon</Text.Body>}
+        monthlyYield={monthlyYield.decimalAmount?.toLocaleString()}
+        weeklyYield={weeklyYield.decimalAmount?.toLocaleString()}
+        dailyYield={dailyYield.decimalAmount?.toLocaleString()}
+      />
+    )
+
   return (
     <StakeCalculatorDialogComponent.EstimatedYield
       annualYield={annualYield.decimalAmount?.toLocaleString()}

apps/portal/src/components/widgets/staking/substrate/StakeForm.tsx

@@ -2,6 +2,7 @@ import { writeableSubstrateAccountsState, type Account } from '../../../../domai
 import {
   ChainProvider,
   assertChain,
+  useChainState as Chains_useChainState,
   nominationPoolsEnabledChainsState,
   useChainState as useChainRecoilState,
   useNativeTokenDecimalState,
@@ -36,7 +37,7 @@ import PoolClaimPermissionDialog, {
 import UnstakeDialog from './UnstakeDialog'
 import type { ApiPromise } from '@polkadot/api'
 import { type Decimal } from '@talismn/math'
-import { CircularProgressIndicator, Select } from '@talismn/ui'
+import { Text, CircularProgressIndicator, Select } from '@talismn/ui'
 import BN from 'bn.js'
 import {
   Suspense,
@@ -188,9 +189,7 @@ const PoolSelector = (props: {
           talismanRecommended={index === 0}
           name={pool.name ?? ''}
           detailUrl={
-            chain.subscanUrl === null
-              ? undefined
-              : new URL(`nomination_pool/${pool.poolId}`, chain.subscanUrl).toString()
+            chain?.subscanUrl ? new URL(`nomination_pool/${pool.poolId}`, chain.subscanUrl).toString() : undefined
           }
           balance={`${nativeTokenDecimal.fromPlanck(pool.bondedPool.points.toBigInt()).toLocaleString()} staked`}
           rating={3}
@@ -248,13 +247,17 @@ export const AssetSelect = <T extends ChainInfo>(props: {
 
 const EstimatedYield = memo(
   (props: { amount: Decimal }) => {
+    const chain = useRecoilValue(Chains_useChainState())
     const stakedReturn = useApr()
     const annualReturn = useMemo(
       () => new BN(props.amount.planck.toString()).muln(stakedReturn),
       [props.amount.planck, stakedReturn]
     )
     const parsedAnnualReturn = useTokenAmountFromPlanck(annualReturn)
 
+    if (chain.id === 'avail')
+      return <StakeFormComponent.EstimatedYield amount={<Text.Body>Coming Soon</Text.Body>} fiatAmount={null} />
+
     return (
       <StakeFormComponent.EstimatedYield
         amount={`${parsedAnnualReturn.decimalAmount.toLocaleString()} / Year`}

apps/portal/src/components/widgets/staking/substrate/StakeProviders.tsx

@@ -9,13 +9,18 @@ import RedactableBalance from '../../RedactableBalance'
 import ErrorBoundaryFallback from '../ErrorBoundaryFallback'
 import { Decimal } from '@talismn/math'
 import { usePolkadotApiId, useQueryState } from '@talismn/react-polkadot-api'
+import { Text } from '@talismn/ui'
 import BigNumber from 'bignumber.js'
 import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { useRecoilValue, waitForAll } from 'recoil'
 
 const Apr = () => {
-  return <>{useApr().toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 2 })}</>
+  const chain = useRecoilValue(useChainState())
+  const apr = useApr()
+
+  if (chain.id === 'avail') return <Text.BodySmall>Coming Soon</Text.BodySmall>
+  return <>{apr.toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 2 })}</>
 }
 
 const useAvailableBalance = () => {

apps/portal/src/domains/chains/config.ts

@@ -57,6 +57,13 @@ export const chainConfigs: ChainConfig[] = [
     talismanPools: [8],
     novaIndexerUrl: 'https://api.subquery.network/sq/nova-wallet/nova-wallet---vara',
   },
+  // Avail
+  {
+    genesisHash: '0xb91746b45e0346cc2f815a520b9c6cb4d5c0902af848db0a80f85932d2e8276a',
+    hasNominationPools: true,
+    priorityPool: 2,
+    talismanPools: [2],
+  },
   // Westend
   {
     genesisHash: '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e',

apps/portal/src/domains/common/recoils/api.ts

@@ -1,10 +1,26 @@
 import { useSubstrateApiEndpoint } from '..'
+import { chainsState } from '@/domains/chains'
 import { ApiPromise, WsProvider } from '@polkadot/api'
+import * as AvailJsSdk from 'avail-js-sdk'
 import { selectorFamily } from 'recoil'
 
 export const substrateApiState = selectorFamily<ApiPromise, string | undefined>({
   key: 'SubstrateApiState',
-  get: endpoint => async () => await ApiPromise.create({ provider: new WsProvider(endpoint) }),
+  get:
+    endpoint =>
+    async ({ get }) => {
+      const availEndpoints = (get(chainsState).find(chain => chain.id === 'avail')?.rpcs ?? []).map(({ url }) => url)
+      const isAvail = endpoint && availEndpoints.includes(endpoint)
+      if (isAvail)
+        return await ApiPromise.create({
+          provider: new WsProvider(endpoint),
+          types: AvailJsSdk.spec.types,
+          rpc: AvailJsSdk.spec.rpc,
+          signedExtensions: AvailJsSdk.spec.signedExtensions,
+        })
+
+      return await ApiPromise.create({ provider: new WsProvider(endpoint) })
+    },
   dangerouslyAllowMutability: true,
   cachePolicy_UNSTABLE: { eviction: 'most-recent' },
 })

apps/portal/src/routes/portfolio/assets/main.tsx

@@ -39,7 +39,7 @@ const Assets = () => {
               onChangeText={setSearch}
               placeholder="Search for an Asset"
               containerClassName={css({ flex: 1, maxWidth: '37rem' })}
-              css={{ width: 0 }}
+              css={{ width: '100%' }}
             />
           )}
         </ClassNames>

apps/portal/src/routes/portfolio/overview.tsx

@@ -85,7 +85,7 @@ const SuspendableAssetsOverview = () => {
               onChangeText={setSearch}
               css={{
                 '@media (min-width: 1024px)': {
-                  width: 0,
+                  width: 'auto',
                 },
               }}
             />

packages/ui/src/theme.tsx

@@ -143,7 +143,7 @@ export const ThemeProvider = ({ theme: propsTheme = greenDark, merge = false, ch
           styles={css`
             :root {
               color: ${theme.color.onBackground};
-              font-family: ${theme.typography.body.fontFamily};
+              font-family: ${theme.typography.body.fontFamily}, sans-serif;
               font-size: 10px;
               font-weight: ${theme.typography.body.fontWeight ?? 'revert'};
               background-color: ${theme.color.background};

yarn.lock

@@ -5328,7 +5328,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^10.11.1, @polkadot/api@npm:^10.7.3, @polkadot/api@npm:^10.9.1":
+"@polkadot/api@npm:^10.11.1, @polkadot/api@npm:^10.11.3, @polkadot/api@npm:^10.7.3, @polkadot/api@npm:^10.9.1":
   version: 10.13.1
   resolution: "@polkadot/api@npm:10.13.1"
   dependencies:
@@ -9861,6 +9861,7 @@ __metadata:
     "@types/react-router-dom": "npm:^5.3.3"
     "@visx/visx": "npm:^3.1.2"
     "@vitejs/plugin-react": "npm:^4.2.1"
+    avail-js-sdk: "npm:^0.2.13"
     bignumber.js: "npm:^9.1.1"
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.1"
@@ -12962,6 +12963,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"avail-js-sdk@npm:^0.2.13":
+  version: 0.2.13
+  resolution: "avail-js-sdk@npm:0.2.13"
+  dependencies:
+    "@polkadot/api": "npm:^10.11.3"
+  checksum: 10c0/0f85b816f4858e0e132aab786280ce9500d5d69382f939203088c39e815f0aab27f6f6863535221119d9a2f19fb837b1aa304f80adf63925650f8d10788282fe
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"