Support Moonbeam/river (#334)

packages/ui/src/components/MultixIdenticon.tsx

@@ -1,29 +1,24 @@
 import { useCallback, useState } from 'react'
 import Tooltip from '@mui/material/Tooltip'
-import { ICON_SIZE_MEDIUM, ICON_THEME } from '../constants'
+import { ICON_SIZE_MEDIUM, DEFAULT_ICON_THEME } from '../constants'
 import Identicon from '@polkadot/react-identicon'
-import { IconTheme } from '@polkadot/react-identicon/types'
 import { styled } from '@mui/material/styles'
+import { useApi } from '../contexts/ApiContext'
 
 const DEFAULT_PLACEMENT = 'top'
 const DEFAULT_TITLE = 'Address copied!'
 const DEFAULT_AUTO_HIDE_DURATION = 2000
 
 interface Props {
   value?: string
-  theme?: IconTheme
   size?: number
   className?: string
 }
-const MultixIdenticon = ({
-  value,
-  theme = ICON_THEME,
-  size = ICON_SIZE_MEDIUM,
-  className
-}: Props) => {
+const MultixIdenticon = ({ value, size = ICON_SIZE_MEDIUM, className }: Props) => {
   const [open, setOpen] = useState(false)
   const handleTooltipClose = useCallback(() => setOpen(false), [])
   const handleTooltipOpen = useCallback(() => setOpen(true), [])
+  const { chainInfo } = useApi()
 
   return (
     <Tooltip
@@ -37,7 +32,7 @@ const MultixIdenticon = ({
         <Identicon
           onCopy={handleTooltipOpen}
           value={value}
-          theme={theme}
+          theme={chainInfo?.isEthereum || value?.length === 42 ? 'ethereum' : DEFAULT_ICON_THEME}
           size={size}
           className={className}
         />
@@ -49,6 +44,10 @@ const MultixIdenticon = ({
 const TooltipIconStyled = styled('div')`
   display: inherit;
   line-height: 0;
+
+  img {
+    border-radius: 50%;
+  }
 `
 
 export default MultixIdenticon

packages/ui/src/components/Transactions/TransactionList.tsx

@@ -197,7 +197,7 @@ const TransactionList = ({ className }: Props) => {
           <CircularProgress />
         </Box>
       )}
-      {!pendingTxData.length && !isLoadingPendingTxs && (
+      {Object.entries(aggregatedData).length === 0 && !isLoadingPendingTxs && (
         <Paper className="noCall">
           <FlareIcon
             size={24}
@@ -206,7 +206,7 @@ const TransactionList = ({ className }: Props) => {
           <div className="noCallText">You're all set!</div>
         </Paper>
       )}
-      {!!pendingTxData.length &&
+      {Object.entries(aggregatedData).length !== 0 &&
         Object.entries(aggregatedData).map(([date, aggregatedData]) => {
           return (
             <TransactionWrapper key={date}>

packages/ui/src/components/modals/ChangeMultisig.tsx

@@ -16,7 +16,6 @@ import SignatorySelection from '../select/SignatorySelection'
 import Summary from '../../pages/Creation/Summary'
 import { useApi } from '../../contexts/ApiContext'
 import { useAccounts } from '../../contexts/AccountsContext'
-import { createKeyMulti, sortAddresses } from '@polkadot/util-crypto'
 import { useSigningCallback } from '../../hooks/useSigningCallback'
 import { useToasts } from '../../contexts/ToastContext'
 import { AccountBadge } from '../../types'
@@ -30,7 +29,8 @@ import { MdErrorOutline as ErrorOutlineIcon } from 'react-icons/md'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import { Button } from '../library'
 import { ModalCloseButton } from '../library/ModalCloseButton'
-import { useGetEncodedAddress } from '../../hooks/useGetEncodedAddress'
+import { useGetSortAddress } from '../../hooks/useGetSortAddress'
+import { useGetMultisigAddress } from '../../contexts/useGetMultisigAddress'
 
 interface Props {
   onClose: () => void
@@ -45,11 +45,11 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
   const { api, chainInfo } = useApi()
   const { selectedMultiProxy, getMultisigAsAccountBaseInfo, getMultisigByAddress } = useMultiProxy()
   const { addToast } = useToasts()
-  const getEncodedAddress = useGetEncodedAddress()
   const signCallBack2 = useSigningCallback({
     onSuccess: onClose,
     onError: onClose
   })
+  const { getSortAddress } = useGetSortAddress()
   const { selectedAccount, selectedSigner, ownAddressList } = useAccounts()
   const [selectedMultisig, setSelectedMultisig] = useState(selectedMultiProxy?.multisigs[0])
   const oldThreshold = useMemo(() => selectedMultisig?.threshold, [selectedMultisig])
@@ -67,14 +67,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
       ).length > 0,
     [ownAddressList, newSignatories, selectedMultisig?.signatories]
   )
-  const newMultisigPubKey = useMemo(() => {
-    if (!newThreshold) return
-    return createKeyMulti(newSignatories, newThreshold)
-  }, [newSignatories, newThreshold])
-  const newMultisigAddress = useMemo(
-    () => getEncodedAddress(newMultisigPubKey),
-    [getEncodedAddress, newMultisigPubKey]
-  )
+  const newMultisigAddress = useGetMultisigAddress(newSignatories, newThreshold)
   const canGoNext = useMemo(
     () => newMultisigAddress !== selectedMultisig?.address,
     [newMultisigAddress, selectedMultisig]
@@ -121,7 +114,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
       return
     }
 
-    const otherOldSignatories = sortAddresses(
+    const otherOldSignatories = getSortAddress(
       selectedMultisig.signatories.filter((sig) => sig !== selectedAccount.address)
     )
 
@@ -135,6 +128,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
   }, [
     api,
     chainInfo,
+    getSortAddress,
     newMultisigAddress,
     newThreshold,
     oldThreshold,
@@ -169,7 +163,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
       return
     }
 
-    const otherNewSignatories = sortAddresses(
+    const otherNewSignatories = getSortAddress(
       newSignatories.filter((sig) => sig !== selectedAccount.address)
     )
     const removeProxyTx = api.tx.proxy.removeProxy(selectedMultisig?.address, 'Any', 0)
@@ -181,6 +175,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => {
   }, [
     api,
     chainInfo,
+    getSortAddress,
     newSignatories,
     newThreshold,
     selectedAccount,

packages/ui/src/components/modals/ProposalSigning.tsx

@@ -11,12 +11,12 @@ import SignerSelection from '../select/SignerSelection'
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { useToasts } from '../../contexts/ToastContext'
 import { useSigningCallback } from '../../hooks/useSigningCallback'
-import { sortAddresses } from '@polkadot/util-crypto'
 import { HexString, MultisigStorageInfo } from '../../types'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import { getDisplayArgs, getExtrinsicName } from '../../utils'
 import { useCallInfoFromCallData } from '../../hooks/useCallInfoFromCallData'
 import { ModalCloseButton } from '../library/ModalCloseButton'
+import { useGetSortAddress } from '../../hooks/useGetSortAddress'
 
 export interface SigningModalProps {
   onClose: () => void
@@ -70,7 +70,7 @@ const ProposalSigning = ({
   }, [onClose])
 
   const signCallback = useSigningCallback({ onSuccess, onSubmitting })
-
+  const { getSortAddress } = useGetSortAddress()
   useEffect(() => {
     if (isProposerSelected) {
       setAddedCallData(undefined)
@@ -87,7 +87,7 @@ const ProposalSigning = ({
 
   const onSign = useCallback(
     async (isApproving: boolean) => {
-      const otherSigners = sortAddresses(
+      const otherSigners = getSortAddress(
         signatories.filter((signer) => signer !== selectedAccount?.address)
       )
 
@@ -209,17 +209,18 @@ const ProposalSigning = ({
       )
     },
     [
+      getSortAddress,
       signatories,
       threshold,
       proposalData,
       api,
       selectedAccount,
       multisig,
       mustSubmitCallData,
-      addedCallData,
       callInfo,
       selectedSigner,
       signCallback,
+      addedCallData,
       addToast,
       getSubscanExtrinsicLink
     ]

packages/ui/src/components/select/AccountSelection.tsx

@@ -9,6 +9,7 @@ import GenericAccountSelection, { AccountBaseInfo } from './GenericAccountSelect
 import { useAccountBaseFromAccountList } from '../../hooks/useAccountBaseFromAccountList'
 import { getOptionLabel } from '../../utils/getOptionLabel'
 import { getPubKeyFromAddress } from '../../utils/getPubKeyFromAddress'
+import { useApi } from '../../contexts/ApiContext'
 
 interface Props {
   className?: string
@@ -36,6 +37,7 @@ const AccountSelection = ({
   withPreselection = true
 }: Props) => {
   const { getAccountByAddress } = useAccounts()
+  const { chainInfo } = useApi()
   const [errorMessage, setErrorMessage] = useState('')
   const { accountNames, addName } = useAccountNames()
   const [name, setName] = useState('')
@@ -74,6 +76,28 @@ const AccountSelection = ({
       return
     }
 
+    // if we are connected to a non eth network
+    // and adding eth accounts
+    if (
+      !chainInfo?.isEthereum &&
+      selected.address.length === 42 &&
+      selected.address.startsWith('0x')
+    ) {
+      setErrorMessage('Ethereum addresses are not compatible with this network')
+      return
+    }
+
+    // if we are connected to an eth network
+    // all addresses must be compatible
+    if (
+      chainInfo?.isEthereum &&
+      selected.address.length !== 42 &&
+      !selected.address.startsWith('0x')
+    ) {
+      setErrorMessage('Non Ethereum address detected')
+      return
+    }
+
     const pubkey = getPubKeyFromAddress(selected.address)
     if (pubkey && (currentSelectionPubKeys as string[]).includes(pubkey)) {
       setErrorMessage('Account already added')
@@ -86,7 +110,7 @@ const AccountSelection = ({
       setSelected(undefined)
       setName('')
     }
-  }, [selected, currentSelectionPubKeys, addAccount, name, addName])
+  }, [selected, chainInfo, currentSelectionPubKeys, addAccount, name, addName])
 
   const handleSpecialKeys = useCallback(
     (e: any) => {