Merge pull request #76 from TalismanSociety/fix/threshold-regressions

Fix: Regressions, bugs, error and type improvements

apps/multisig/src/App.tsx

@@ -7,7 +7,6 @@ import './index.css'
 
 import { BalancesWatcher } from '@domains/balances'
 import { ExtensionWatcher } from '@domains/extension'
-import { BalancesProvider } from '@talismn/balances-react'
 import { ToastBar } from '@talismn/ui'
 import { Analytics } from '@vercel/analytics/react'
 import React, { Suspense } from 'react'
@@ -17,7 +16,6 @@ import { RecoilRoot } from 'recoil'
 
 import ThemeProvider from './App.Theme'
 import router from './routes'
-import { supportedChains } from '@domains/chains'
 import { AccountWatcher } from '@domains/auth'
 import { OffchainDataWatcher } from '@domains/offchain-data/offchain-watcher'
 import { ActiveMultisigWatcher } from './domains/multisig'
@@ -31,20 +29,18 @@ import { WalletConnectProvider } from '@domains/wallet-connect'
 import { SkeletonLayout } from './layouts/SkeletonLayout'
 import { Helmet } from 'react-helmet'
 import { CONFIG } from '@lib/config'
+import SelectedChainBalancesProvider from './providers/SelectedChainBalancesProvider'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const App: React.FC = () => {
   const queryClient = new QueryClient()
+
   return (
     <ThemeProvider>
       <RecoilRoot>
-        <BalancesProvider
-          withTestnets
-          enabledChains={supportedChains.map(chain => chain.genesisHash)}
-          coingeckoApiUrl="https://coingecko.talismn.workers.dev"
-        >
+        <SelectedChainBalancesProvider>
           <HasuraProvider>
             <AzeroIDResolverProvider>
               <Suspense fallback={<SkeletonLayout />}>
@@ -74,7 +70,7 @@ const App: React.FC = () => {
               </Suspense>
             </AzeroIDResolverProvider>
           </HasuraProvider>
-        </BalancesProvider>
+        </SelectedChainBalancesProvider>
       </RecoilRoot>
     </ThemeProvider>
   )

apps/multisig/src/components/AccountMenu/AccountsList.tsx

@@ -73,7 +73,7 @@ export const AccountsList: React.FC<{ onBack?: () => void; hideHeader?: boolean;
 
   if (accountToSignIn) {
     return (
-      <div className="flex flex-col gap-[4px] h-[210px] items-center justify-center bg-gray-700 rounded-[8px]">
+      <div className="flex flex-col gap-[4px] h-[260px] items-center justify-center rounded-[8px]">
         <div className="flex items-center gap-[8px] mb-[24px]">
           <CircularProgressIndicator />
           <p className="text-offWhite font-bold">Signing In</p>
@@ -88,7 +88,7 @@ export const AccountsList: React.FC<{ onBack?: () => void; hideHeader?: boolean;
   }
 
   return (
-    <div className="flex flex-col gap-[12px] h-[210px] flex-1">
+    <div className="flex flex-col gap-[12px] h-[260px] flex-1">
       {!hideHeader && (
         <div className="flex items-center justify-between ">
           <Button size="icon" className="items-center" variant="ghost" onClick={onBack}>
@@ -100,16 +100,16 @@ export const AccountsList: React.FC<{ onBack?: () => void; hideHeader?: boolean;
       )}
       <Input
         placeholder="Search by name or address..."
-        className="text-[14px] px-[12px] py-[9px] rounded-[8px]"
+        className="text-[14px] px-[12px] py-[9px] rounded-[8px] h-max"
         value={query}
         onChange={e => setQuery(e.target.value)}
       />
-      <div className="flex flex-col flex-1 items-start justify-start overflow-y-auto bg-gray-800 gap-[8px] p-[8px] rounded-[8px]">
+      <div className="flex flex-col flex-1 items-start justify-start overflow-y-auto bg-gray-800 gap-[4px] p-[4px] rounded-[12px]">
         {filteredAccounts.map(acc => (
           <Button
             variant="ghost"
             size="lg"
-            className="h-max w-full py-[8px] bg-gray-700"
+            className="h-max w-full py-[8px] bg-gray-700 hover:bg-gray-500"
             key={acc.address.toSs58()}
             onClick={() => selectAccount(acc)}
           >

apps/multisig/src/components/AccountMenu/index.tsx

@@ -42,7 +42,7 @@ export const AccountMenu: React.FC = () => {
           <ChevronVertical />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="bg-gray-900 border border-gray-700 w-[240px] p-[4px]">
+      <PopoverContent align="end" className="bg-gray-900 border border-gray-700 w-[260px] p-[4px]">
         {showAccounts ? (
           <AccountsList onBack={() => setShowAccounts(false)} />
         ) : showCustomRpcs ? (

apps/multisig/src/components/AddMemberInput.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { Plus } from '@talismn/icons'
 import { Chain } from '@domains/chains'
 import { Button } from './ui/button'
+import { useSelectedMultisig } from '@domains/multisig'
 
 type Props = {
   onNewAddress: (a: Address) => void
@@ -18,7 +19,11 @@ export const AddMemberInput: React.FC<Props> = ({ chain, validateAddress, onNewA
   const [addressInput, setAddressInput] = useState('')
   const [address, setAddress] = useState<Address | undefined>()
   const [error, setError] = useState<boolean>(false)
-  const isChainAccountEth = chain?.account === 'secp256k1'
+  const [multisig] = useSelectedMultisig()
+
+  const isSelectedChainAccountEth = chain?.account === 'secp256k1'
+  // // handles the case where a user is creating/importing a multisig, or is changing the settings of an existing one
+  const isChainAccountEth = !!chain ? isSelectedChainAccountEth : multisig.isEthereumAccount
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -32,36 +37,30 @@ export const AddMemberInput: React.FC<Props> = ({ chain, validateAddress, onNewA
       setAddress(undefined)
     }
   }
+
   const handleAddressChange = (address: Address | undefined, input: string) => {
-    if (isChainAccountEth !== address?.isEthereum) {
-      setError(true)
-    }
-    if (!address) {
-      setError(false)
-    }
-    setAddressInput(input)
+    const isAddressMismatch = address && isChainAccountEth !== address.isEthereum
+
+    setError(!!isAddressMismatch)
     setAddress(address)
+    setAddressInput(input)
   }
 
   return (
-    <div className="relative">
-      <form onSubmit={handleSubmit} className="flex items-center gap-[8px]">
-        <AddressInput
-          addresses={addresses}
-          value={addressInput}
-          compact={compactInput}
-          chain={chain}
-          onChange={handleAddressChange}
-        />
+    <form onSubmit={handleSubmit} className="flex items-center gap-[8px]">
+      <AddressInput
+        addresses={addresses}
+        value={addressInput}
+        compact={compactInput}
+        chain={chain || multisig.chain}
+        onChange={handleAddressChange}
+        hasError={error}
+      />
 
-        <Button disabled={!address || error} variant="outline" type="submit" className="px-[12px] gap-[4px]">
-          <Plus size={24} />
-          <p css={{ marginTop: 4, marginLeft: 8 }}>Add</p>
-        </Button>
-      </form>
-      {error && (
-        <div className="absolute mt-[4px] text-orange-400 text-[14px]">{`Address format not compatible with ${chain?.chainName} chain`}</div>
-      )}
-    </div>
+      <Button disabled={!address || error} variant="outline" type="submit" className="px-[12px] gap-[4px]">
+        <Plus size={24} />
+        <p css={{ marginTop: 4, marginLeft: 8 }}>Add</p>
+      </Button>
+    </form>
   )
 }

apps/multisig/src/components/AddressInput/AccountDetails.tsx

@@ -5,12 +5,14 @@ import { NameAndAddress } from './NameAndAddress'
 import { Check, Copy } from '@talismn/icons'
 import AddressTooltip from '../AddressTooltip'
 import useCopied from '@hooks/useCopied'
+import { cn } from '@util/tailwindcss'
 
 type Props = {
   chain?: Chain
   address: Address
   name?: string
   disableCopy?: boolean
+  disabled?: boolean
   nameOrAddressOnly?: boolean
   withAddressTooltip?: boolean
   hideIdenticon?: boolean
@@ -24,6 +26,7 @@ export const AccountDetails: React.FC<Props> = ({
   address,
   name,
   disableCopy,
+  disabled,
   nameOrAddressOnly,
   identiconSize = 24,
   withAddressTooltip,
@@ -34,7 +37,11 @@ export const AccountDetails: React.FC<Props> = ({
   const { copy, copied } = useCopied()
 
   const accountDetailsUI = (
-    <div className="flex items-center gap-[8px] w-full overflow-hidden cursor-pointer">
+    <div
+      className={cn('flex items-center gap-[8px] w-full overflow-hidden cursor-pointer', {
+        'cursor-not-allowed': disabled,
+      })}
+    >
       {!hideIdenticon && (
         <div css={{ minheight: identiconSize, minWidth: identiconSize }}>
           <Identicon size={identiconSize} value={address.toSs58(chain)} />

apps/multisig/src/components/AddressInput/index.tsx

@@ -6,13 +6,15 @@ import { SelectedAddress } from './SelectedAddressPill'
 import { AccountDetails } from './AccountDetails'
 import { Input } from '@components/ui/input'
 import { useAzeroIDPromise } from '@domains/azeroid/AzeroIDResolver'
+import { AlertTriangle } from '@talismn/icons'
+
+export type AddressType = 'Extension' | 'Contacts' | 'Vault' | 'Smart Contract' | undefined
 
 export type AddressWithName = {
   address: Address
   name: string
-  type: string
+  type: AddressType
   chain?: Chain
-
   extensionName?: string
   addressBookName?: string
 }
@@ -23,6 +25,7 @@ type Props = {
   onChange: (address: Address | undefined, input: string) => void
   addresses?: AddressWithName[]
   chain?: Chain
+  hasError?: boolean
   leadingLabel?: string
   compact?: boolean
 }
@@ -37,6 +40,7 @@ const AddressInput: React.FC<Props> = ({
   defaultAddress,
   addresses = [],
   chain,
+  hasError,
   leadingLabel,
   compact,
 }) => {
@@ -86,6 +90,7 @@ const AddressInput: React.FC<Props> = ({
   )
 
   const handleSelectFromList = (address: Address, contact?: AddressWithName) => {
+    if (hasError) return
     handleQueryChange(address.toSs58(chain))
     setAddress(address)
     setContact(contact)
@@ -172,7 +177,14 @@ const AddressInput: React.FC<Props> = ({
         onFocus={() => setExpanded(addresses.length > 0 || validRawInputAddress !== undefined)}
         onClear={handleClearInput}
         showClearButton={!!controlledSelectedInput}
+        hasError={hasError}
       />
+      {hasError && (
+        <div className="absolute flex items-center gap-2">
+          <AlertTriangle size={12} className="text-red-400" />
+          <div className="mt-[4px] text-red-400 text-[12px]">{`Invalid ${chain?.chainName} address`}</div>
+        </div>
+      )}
       <div
         className={'bg-gray-800 shadow-lg'}
         css={{
@@ -203,7 +215,7 @@ const AddressInput: React.FC<Props> = ({
                   'alignItems': 'center',
                   'justifyContent': 'space-between',
                   'padding': '8px 12px',
-                  'cursor': 'pointer',
+                  'cursor': hasError ? 'not-allowed' : 'pointer',
                   ':hover': { filter: 'brightness(1.2)' },
                 }}
               >
@@ -214,6 +226,7 @@ const AddressInput: React.FC<Props> = ({
                   disableCopy
                   breakLine={compact}
                   identiconSize={compact ? 32 : 24}
+                  disabled={hasError}
                 />
                 <p className="whitespace-nowrap text-[14px] font-bold text-right text-gray-200">{contact.type}</p>
               </div>
@@ -223,7 +236,7 @@ const AddressInput: React.FC<Props> = ({
             <div
               css={{
                 'padding': '8px 12px',
-                'cursor': 'pointer',
+                'cursor': hasError ? 'not-allowed' : 'pointer',
                 ':hover': {
                   filter: 'brightness(1.2)',
                 },
@@ -236,6 +249,7 @@ const AddressInput: React.FC<Props> = ({
                 disableCopy
                 breakLine={compact}
                 identiconSize={compact ? 32 : 24}
+                disabled={hasError}
               />
             </div>
           ) : (

apps/multisig/src/components/AddressTooltip.tsx

@@ -6,7 +6,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { cn } from '../util/tailwindcss'
 import { useAzeroID } from '@domains/azeroid/AzeroIDResolver'
 import { AzeroIDLogo } from './OtherLogos/AzeroID'
-import { useSelectedMultisig, DUMMY_MULTISIG_ID } from '@domains/multisig'
+import { useSelectedMultisig } from '@domains/multisig'
+import { DUMMY_MULTISIG_ID } from '@util/constants'
 import { useApi } from '@domains/chains/pjs-api'
 import { formatUnits } from '@util/numbers'
 import { Skeleton } from '@talismn/ui'

apps/multisig/src/components/ui/input.tsx

@@ -15,6 +15,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   externalSuffix?: React.ReactNode
   onClear?: () => void
   showClearButton?: boolean
+  hasError?: boolean
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -31,6 +32,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       suffix,
       supportingLabel,
       showClearButton,
+      hasError,
       ...props
     },
     ref
@@ -56,7 +58,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               type={type}
               className={cn(
                 'flex h-[56px] w-full rounded-[12px] bg-gray-800 pl-[24px] pt-[16px] pb-[14px] text-[16px] text-offWhite border border-gray-800 file:border-0 file:bg-transparent file:text-[14px] file:text-gray-200 file:cursor-pointer file:font-medium placeholder:text-gray-400/90 focus-visible:border-gray-400 disabled:cursor-not-allowed disabled:opacity-50',
-                className
+                className,
+                { 'border border-red-400': hasError }
               )}
               css={{ paddingRight: suffixWidth || 24 }}
               ref={ref}

apps/multisig/src/domains/chains/tokens.ts

@@ -1,4 +1,5 @@
-import { activeMultisigsState, DUMMY_MULTISIG_ID, useSelectedMultisig } from '@domains/multisig'
+import { activeMultisigsState, useSelectedMultisig } from '@domains/multisig'
+import { DUMMY_MULTISIG_ID } from '@util/constants'
 import { selector, selectorFamily } from 'recoil'
 import { ApiPromise } from '@polkadot/api'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -191,7 +192,7 @@ export type Rpc = {
   url: string
 }
 
-type Account = '*25519' | 'secp256k1'
+export type Account = '*25519' | 'secp256k1'
 
 export type Chain<ChainIds = string> = {
   id: ChainIds

apps/multisig/src/domains/identity/useOnchainIdentity.ts

@@ -27,7 +27,6 @@ export const useOnchainIdentity = (address: Address, chain?: Chain) => {
     if (identity.state === 'hasValue' && identity.contents && identity.contents.identity.isSome) {
       const [registration] = identity.contents.identity.value
       const verified = registration.judgements?.some(judgement => judgement[1].isReasonable || judgement[1].isKnownGood)
-      console.log(identity.contents, verified)
       const superIdentity = registration.info?.display
       const subIdentity = identity.contents.subIdentity
       if (superIdentity?.isRaw) {

apps/multisig/src/domains/multisig/index.ts

@@ -40,11 +40,11 @@ import { activeTeamsState } from '@domains/offchain-data'
 import { Abi } from '@polkadot/api-contract'
 import { FrameSystemEventRecord } from '@polkadot/types/lookup'
 import { ExtrinsicErrorsFromEvents } from '@util/errors'
+import { DUMMY_MULTISIG_ID } from '@util/constants'
 
 export * from './types.d'
 export * from './useSelectedMultisig'
 
-export const DUMMY_MULTISIG_ID = 'DUMMY_MULTISIG'
 // create a new atom for deciding whether to show all balances and txns or just for the selected
 // multisig
 export const combinedViewState = atom<boolean>({

apps/multisig/src/domains/multisig/useSelectedMultisig.ts

@@ -1,6 +1,7 @@
 import { Multisig, MultisigWithExtraData, ProxyDefinition } from './types'
 import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { DUMMY_MULTISIG_ID, selectedMultisigIdState, selectedMultisigState } from '.'
+import { selectedMultisigIdState, selectedMultisigState } from '.'
+import { DUMMY_MULTISIG_ID } from '@util/constants'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useProxies } from '../proxy/useProxies'
 import { isEqual } from 'lodash'