creation process

packages/ui/package.json

@@ -69,7 +69,8 @@
     "generate:type-from-defs": "dlx ts-node --skip-project node_modules/.bin/polkadot-types-from-defs --endpoint ./node-metadata.json --package src/interfaces --input ./src/interfaces",
     "generate:types-from-chain": "dlx ts-node --skip-project node_modules/.bin/polkadot-types-from-chain --endpoint wss://rpc.ibp.network/polkadot --output ./src/interfaces",
     "test": "cypress open",
-    "test:ci": "cypress run --browser chrome --headless"
+    "test:ci": "cypress run --browser chrome --headless",
+    "postinstall": "yarn papi"
   },
   "browserslist": {
     "production": [

packages/ui/src/hooks/useCheckBalance.tsx

@@ -1,9 +1,8 @@
-import BN from 'bn.js'
 import { useMemo } from 'react'
 import { useGetBalance } from './useGetBalance'
 
 export interface Props {
-  min?: BN
+  min?: bigint
   address?: string
 }
 
@@ -12,7 +11,7 @@ export const useCheckBalance = ({ min, address }: Props) => {
 
   const hasEnoughFreeBalance = useMemo(() => {
     if (!address || !min || !balance) return false
-    return balance.gt(min)
+    return balance > min
   }, [address, min, balance])
 
   return { hasEnoughFreeBalance }

packages/ui/src/hooks/useGetBalance.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useApi } from '../contexts/ApiContext'
 import { formatBnBalance } from '../utils/formatBnBalance'
-import BN from 'bn.js'
-import { FrameSystemAccountInfo } from '@polkadot/types/lookup'
 
 interface useGetBalanceProps {
   address?: string
@@ -11,17 +9,15 @@ interface useGetBalanceProps {
 
 export const useGetBalance = ({ address, numberAfterComma = 4 }: useGetBalanceProps) => {
   const { api, chainInfo } = useApi()
-  const [balance, setBalance] = useState<BN | null>(null)
+  const [balance, setBalance] = useState<bigint | null>(null)
   const [balanceFormatted, setFormattedBalance] = useState<string | null>(null)
 
   useEffect(() => {
     if (!api || !address) return
 
-    let unsubscribe: () => void
-
-    api.query.system
-      .account(address, ({ data: { free, frozen } }: FrameSystemAccountInfo) => {
-        const transferable = free.sub(frozen)
+    const unsub = api.query.System.Account.watchValue(address).subscribe(
+      ({ data: { free, frozen } }) => {
+        const transferable = free - frozen
 
         setBalance(transferable)
         setFormattedBalance(
@@ -30,13 +26,10 @@ export const useGetBalance = ({ address, numberAfterComma = 4 }: useGetBalancePr
             tokenSymbol: chainInfo?.tokenSymbol
           })
         )
-      })
-      .then((unsub) => {
-        unsubscribe = unsub as unknown as () => void
-      })
-      .catch(console.error)
+      }
+    )
 
-    return () => unsubscribe && unsubscribe()
+    return () => unsub && unsub.unsubscribe()
   }, [address, api, chainInfo?.tokenDecimals, chainInfo?.tokenSymbol, numberAfterComma])
 
   return { balance, balanceFormatted }

packages/ui/src/hooks/useMultisigProposalNeededFunds.tsx

@@ -1,19 +1,31 @@
 import { useEffect, useState } from 'react'
 import { useApi } from '../contexts/ApiContext'
-import BN from 'bn.js'
-import { SubmittableExtrinsic } from '@polkadot/api/types'
-import { ISubmittableResult } from '@polkadot/types/types'
+import { Transaction } from 'polkadot-api'
 
 interface Props {
   threshold?: number | null
   signatories?: string[]
-  call?: SubmittableExtrinsic<'promise', ISubmittableResult>
+  call?: Transaction<any, any, any, any>
 }
 
 export const useMultisigProposalNeededFunds = ({ threshold, signatories, call }: Props) => {
   const { api, chainInfo } = useApi()
-  const [min, setMin] = useState(new BN(0))
-  const [reserved, setReserved] = useState(new BN(0))
+  const [min, setMin] = useState(0n)
+  const [reserved, setReserved] = useState(0n)
+  const [multisigDepositFactor, setMultisigDepositFactor] = useState<bigint | undefined>(undefined)
+  const [multisigDepositBase, setMultisigDepositBase] = useState<bigint | undefined>(undefined)
+
+  useEffect(() => {
+    if (!api) return
+
+    api.constants.Multisig.DepositBase().then(setMultisigDepositBase).catch(console.error)
+  }, [api])
+
+  useEffect(() => {
+    if (!api) return
+
+    api.constants.Multisig.DepositFactor().then(setMultisigDepositFactor).catch(console.error)
+  }, [api])
 
   useEffect(() => {
     if (!api || !signatories || signatories.length < 2) return
@@ -24,31 +36,17 @@ export const useMultisigProposalNeededFunds = ({ threshold, signatories, call }:
 
     if (!call) return
 
-    if (!api.consts.multisig.depositFactor || !api.consts.multisig.depositBase) return
-
-    try {
-      const genericCall = api.createType('Call', call)
-
-      // get the fees for this call
-      api
-        .tx(genericCall)
-        .paymentInfo('5CXQZrh1MSgnGGCdJu3tqvRfCv7t5iQXGGV9UKotrbfhkavs')
-        .then((info) => {
-          // add the funds reserved for a multisig call
-          const reservedTemp = (api.consts.multisig.depositFactor as unknown as BN)
-            .muln(threshold)
-            .add(api.consts.multisig.depositBase as unknown as BN)
-
-          // console.log('reservedTemp', formatBnBalance(reservedTemp, chainInfo.tokenDecimals, { tokenSymbol: chainInfo?.tokenSymbol, numberAfterComma: 3 }))
-          setMin(reservedTemp.add(info.partialFee))
-          setReserved(reservedTemp)
-        })
-        .catch(console.error)
-    } catch (e) {
-      console.error('Error in useMultisigProposalNeededFunds')
-      console.error(e)
-    }
-  }, [api, call, chainInfo, signatories, threshold])
+    if (!multisigDepositFactor || !multisigDepositBase) return
+
+    call
+      .getEstimatedFees('5CXQZrh1MSgnGGCdJu3tqvRfCv7t5iQXGGV9UKotrbfhkavs')
+      .then((info) => {
+        const reservedTemp = multisigDepositFactor * BigInt(threshold) + multisigDepositBase
+        setMin(reservedTemp + info)
+        setReserved(reservedTemp)
+      })
+      .catch(console.error)
+  }, [api, call, chainInfo, multisigDepositBase, multisigDepositFactor, signatories, threshold])
 
   return { multisigProposalNeededFunds: min, reserved }
 }

packages/ui/src/hooks/usePureProxyCreationNeededFunds.tsx

@@ -1,37 +1,53 @@
 import { useEffect, useState } from 'react'
 import { useApi } from '../contexts/ApiContext'
-import BN from 'bn.js'
+import { TypedApi } from 'polkadot-api'
+import { dot } from '@polkadot-api/descriptors'
 
 export const usePureProxyCreationNeededFunds = () => {
   const { api, chainInfo } = useApi()
-  const [min, setMin] = useState(new BN(0))
-  const [reserved, setReserved] = useState(new BN(0))
+  const [min, setMin] = useState(0n)
+  const [reserved, setReserved] = useState(0n)
+  const [depositFactor, setDepositFactor] = useState<bigint | undefined>(undefined)
+  const [depositBase, setDepositBase] = useState<bigint | undefined>(undefined)
+  const [existentialDeposit, setExistentialDeposit] = useState<bigint | undefined>(undefined)
 
   useEffect(() => {
-    if (!api) return
+    if (!(api as TypedApi<typeof dot>).constants?.Proxy?.ProxyDepositFactor) return
+    ;(api as TypedApi<typeof dot>).constants.Proxy.ProxyDepositFactor()
+      .then(setDepositFactor)
+      .catch(console.error)
+  }, [api])
 
-    if (!chainInfo?.tokenDecimals) return
+  useEffect(() => {
+    if (!(api as TypedApi<typeof dot>).constants?.Proxy?.ProxyDepositBase) return
+    ;(api as TypedApi<typeof dot>).constants.Proxy.ProxyDepositBase()
+      .then(setDepositBase)
+      .catch(console.error)
+  }, [api])
+
+  useEffect(() => {
+    if (!(api as TypedApi<typeof dot>).constants?.Balances.ExistentialDeposit) return
+    ;(api as TypedApi<typeof dot>).constants.Balances.ExistentialDeposit()
+      .then(setExistentialDeposit)
+      .catch(console.error)
+  }, [api])
+
+  useEffect(() => {
+    if (!api || !existentialDeposit || !depositBase || !depositFactor) return
 
-    if (
-      !api.consts?.proxy?.proxyDepositFactor ||
-      !api.consts?.proxy?.proxyDepositBase ||
-      !api.consts?.balances?.existentialDeposit
-    )
-      return
+    // if (!chainInfo?.tokenDecimals) return
 
-    const reserved = (api.consts?.proxy?.proxyDepositFactor as unknown as BN)
-      // we only create one proxy here
-      .muln(1)
-      .iadd(api.consts?.proxy?.proxyDepositBase as unknown as BN)
+    // we only create one proxy here
+    const reserved = depositFactor * 1n + depositBase
 
-    // the signer should survive and have at lease the existential deposit
+    // the signer should survive and have at least the existential deposit
     // play safe and add the existential deposit twice which should suffice
-    const survive = (api.consts.balances.existentialDeposit as unknown as BN).muln(2)
+    const survive = existentialDeposit * 2n
 
     setReserved(reserved)
-    setMin(reserved.add(survive))
+    setMin(reserved + survive)
     // console.log('reserved Pure Creation', formatBnBalance(reserved.add(survive), chainInfo.tokenDecimals, { tokenSymbol: chainInfo?.tokenSymbol, numberAfterComma: 3 }))
-  }, [api, chainInfo])
+  }, [api, chainInfo, depositBase, depositFactor, existentialDeposit])
 
   return { pureProxyCreationNeededFunds: min, reserved }
 }

packages/ui/src/pages/Creation/Summary.tsx

@@ -7,7 +7,6 @@ import { MultiProxy } from '../../contexts/MultiProxyContext'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { getIntersection } from '../../utils'
 import { AccountBadge } from '../../types'
-import BN from 'bn.js'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useApi } from '../../contexts/ApiContext'
 import { getErrorMessageReservedFunds } from '../../utils/getErrorMessageReservedFunds'
@@ -19,8 +18,8 @@ interface Props {
   name?: string
   proxyAddress?: string
   isCreationSummary?: boolean
-  balanceMin?: BN
-  reservedBalance: BN
+  balanceMin?: bigint
+  reservedBalance: bigint
   isBalanceError?: boolean
   selectedMultisig?: MultiProxy['multisigs'][0] // this is only relevant for swaps
   withProxy?: boolean
@@ -52,16 +51,18 @@ const Summary = ({
     }
 
     const requiredBalanceString =
-      balanceMin &&
-      formatBnBalance(balanceMin, chainInfo?.tokenDecimals, {
-        tokenSymbol: chainInfo?.tokenSymbol
-      })
-
-    const reservedString = reservedBalance.isZero()
-      ? ''
-      : formatBnBalance(reservedBalance, chainInfo?.tokenDecimals, {
+      (balanceMin !== undefined &&
+        formatBnBalance(balanceMin, chainInfo?.tokenDecimals, {
           tokenSymbol: chainInfo?.tokenSymbol
-        })
+        })) ||
+      ''
+
+    const reservedString =
+      reservedBalance === 0n
+        ? ''
+        : formatBnBalance(reservedBalance, chainInfo?.tokenDecimals, {
+            tokenSymbol: chainInfo?.tokenSymbol
+          })
 
     const errorWithReservedFunds = getErrorMessageReservedFunds(
       'selected signer',