From 87854ddacbf803eb3e54c50aa431565499b3b7b8 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 30 Oct 2023 13:13:08 +0100
Subject: [PATCH 01/15] happy path

---
 .../src/components/ConnectCreateOrWatch.tsx   | 23 ++++-
 packages/ui/src/components/Header/Header.tsx  |  2 +
 .../ui/src/contexts/MultiProxyContext.tsx     | 90 ++++++++++++-------
 packages/ui/src/contexts/NetworkContext.tsx   |  5 +-
 packages/ui/src/hooks/useSwitchAddress.tsx    | 56 ++++++++++++
 packages/ui/src/pages/Creation/index.tsx      | 13 ++-
 packages/ui/src/pages/Home/HeaderView.tsx     | 13 ++-
 packages/ui/src/pages/Home/Home.tsx           |  5 +-
 packages/ui/src/utils/getMultiProxyAddress.ts | 10 +++
 9 files changed, 175 insertions(+), 42 deletions(-)
 create mode 100644 packages/ui/src/hooks/useSwitchAddress.tsx
 create mode 100644 packages/ui/src/utils/getMultiProxyAddress.ts

diff --git a/packages/ui/src/components/ConnectCreateOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx
index e8950c62..73169e2e 100644
--- a/packages/ui/src/components/ConnectCreateOrWatch.tsx
+++ b/packages/ui/src/components/ConnectCreateOrWatch.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material'
 import { useAccounts } from '../contexts/AccountsContext'
-import { useNavigate } from 'react-router-dom'
+import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { Button } from './library'
 import { WATCH_ACCOUNT_ANCHOR } from '../pages/Settings/Settings'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
@@ -9,6 +9,7 @@ export const ConnectOrWatch = () => {
   const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
 
   return (
     <WrapperStyled>
@@ -30,7 +31,15 @@ export const ConnectOrWatch = () => {
         {isAllowedToConnectToExtension ? (
           <Button
             variant="primary"
-            onClick={() => navigate('/create')}
+            onClick={() => {
+              navigate({
+                pathname: '/create',
+                search: createSearchParams({
+                  ...searchParams,
+                  creationInProgress: 'true'
+                }).toString()
+              })
+            }}
             data-cy="button-create-one"
           >
             Create one
@@ -46,7 +55,15 @@ export const ConnectOrWatch = () => {
         )}
         or
         <Button
-          onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}
+          onClick={() => {
+            navigate({
+              pathname: `/settings${WATCH_ACCOUNT_ANCHOR}`,
+              search: createSearchParams({
+                ...searchParams,
+                creationInProgress: 'true'
+              }).toString()
+            })
+          }}
           data-cy="button-watch-account"
         >
           Watch account
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index abcdb324..20d149a3 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -12,6 +12,7 @@ import NetworkSelection from '../select/NetworkSelection'
 import multixLogo from '../../logos/multix-logo.svg'
 import useWalletConnectEventsManager from '../../hooks/useWalletConnectEventsManager'
 import { Link } from 'react-router-dom'
+import { useSwtichAddress } from '../../hooks/useSwitchAddress'
 
 interface Props {
   handleDrawerOpen: () => void
@@ -23,6 +24,7 @@ const Header = ({ handleDrawerOpen }: Props) => {
   const { isAllowedToConnectToExtension, allowConnectionToExtension, isAccountLoading } =
     useAccounts()
   useWalletConnectEventsManager()
+  useSwtichAddress()
 
   return (
     <MuiAppBarStyled position="sticky">
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index e95e3f31..72419921 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -10,8 +10,8 @@ import { useAccounts } from './AccountsContext'
 import { useWatchedAddresses } from './WatchedAddressesContext'
 import { useAccountId } from '../hooks/useAccountId'
 import { usePureByIdsSubscription } from '../hooks/usePureByIdSubscription'
-
-const LOCALSTORAGE_KEY = 'multix.selectedMultiProxy'
+import { getMultiProxyAddress } from '../utils/getMultiProxyAddress'
+import { useSearchParams } from 'react-router-dom'
 
 interface MultisigContextProps {
   children: React.ReactNode | React.ReactNode[]
@@ -36,13 +36,15 @@ export interface IMultisigContext {
   selectedMultiProxy?: MultiProxy
   multiProxyList: MultiProxy[]
   isLoading: boolean
-  selectMultiProxy: (multi: MultiProxy) => void
+  selectMultiProxy: (multi: MultiProxy | string) => void
   selectedHasProxy: boolean
   error: Error | null
   getMultisigByAddress: (address: string) => MultisigAggregated | undefined
   getMultisigAsAccountBaseInfo: () => AccountBaseInfo[]
   selectedIsWatched: boolean
   refetch: () => void
+  defaultAddress?: string
+  selectedMultiProxyAddress?: string
 }
 
 const MultisigContext = createContext<IMultisigContext | undefined>(undefined)
@@ -63,6 +65,15 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     () => [...pureProxyList, ...multisigList],
     [multisigList, pureProxyList]
   )
+  const defaultAddress = useMemo(() => {
+    if (multiProxyList.length === 0) return
+
+    return multiProxyList[0].proxy || multiProxyList[0].multisigs[0].address
+  }, [multiProxyList])
+  const selectedMultiProxyAddress = useMemo(
+    () => getMultiProxyAddress(selectedMultiProxy),
+    [selectedMultiProxy]
+  )
   const { ownAddressList } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const selectedHasProxy = useMemo(() => !!selectedMultiProxy?.proxy, [selectedMultiProxy])
@@ -77,6 +88,19 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     [selectedMultiProxy, ownAddressList]
   )
   const [isRefreshingMultiProxyList, setIsRefreshingMultiProxyList] = useState(false)
+  const [, setSearchParams] = useSearchParams({
+    address: ''
+  })
+
+  const setAddress = useCallback(
+    (address: string) => {
+      setSearchParams((prev) => {
+        prev.set('address', address)
+        return prev
+      })
+    },
+    [setSearchParams]
+  )
 
   const refreshPureToQueryAndMultisigList = useCallback(
     (data: MultisigsBySignatoriesOrWatchedSubscription | null) => {
@@ -219,15 +243,15 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   )
 
   // effect to update selectedMultiproxy when the multiproxyList is updated
-  useEffect(() => {
-    if (!!multiProxyList.length && !!selectedMultiProxy) {
-      const newlySelected = selectedMultiProxy.proxy
-        ? getMultiProxyByAddress(selectedMultiProxy.proxy) // select the new proxy by pure proxy address
-        : getMultiProxyByAddress(selectedMultiProxy.multisigs[0].address)
+  // useEffect(() => {
+  //   if (!!multiProxyList.length && !!selectedMultiProxy) {
+  //     const newlySelected = selectedMultiProxy.proxy
+  //       ? getMultiProxyByAddress(selectedMultiProxy.proxy) // select the new proxy by pure proxy address
+  //       : getMultiProxyByAddress(selectedMultiProxy.multisigs[0].address)
 
-      setSelectedMultiProxy(newlySelected)
-    }
-  }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
+  //     setSelectedMultiProxy(newlySelected)
+  //   }
+  // }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
 
   const getMultisigByAddress = useCallback(
     (address: string) => {
@@ -249,41 +273,39 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
 
   const selectMultiProxy = useCallback(
     (newMulti: typeof selectedMultiProxy | string) => {
-      let _multi: MultiProxy | undefined
+      let multi: MultiProxy | undefined
 
       if (typeof newMulti === 'string') {
-        _multi = getMultiProxyByAddress(newMulti)
+        multi = getMultiProxyByAddress(newMulti)
       } else {
-        _multi = newMulti
-      }
-
-      // for MultiProxy without a pure, we only support one multisig
-      const addressToUse = _multi?.proxy || _multi?.multisigs[0].address
-
-      if (!addressToUse) {
-        return
+        multi = newMulti
       }
 
-      localStorage.setItem(LOCALSTORAGE_KEY, addressToUse)
-      const multi = getMultiProxyByAddress(addressToUse)
-
       if (!multi) {
         return
       }
 
+      // // for MultiProxy without a pure, we only support one multisig
+      // const addressToUse = multi.proxy || multi.multisigs[0]?.address
+
+      // if (!addressToUse) {
+      //   return
+      // }
+      const addressInUrl = getMultiProxyAddress(multi)
+      setAddress(addressInUrl)
       setSelectedMultiProxy(multi)
     },
-    [getMultiProxyByAddress]
+    [getMultiProxyByAddress, setAddress]
   )
 
-  useEffect(() => {
-    if (multiProxyList.length > 0 && !selectedMultiProxy) {
-      const multiAddress = localStorage.getItem(LOCALSTORAGE_KEY)
-      const previouslySelected = multiAddress && getMultiProxyByAddress(multiAddress)
+  // useEffect(() => {
+  //   if (multiProxyList.length > 0 && !selectedMultiProxy) {
+  //     const multiAddress = localStorage.getItem(LOCALSTORAGE_KEY)
+  //     const previouslySelected = multiAddress && getMultiProxyByAddress(multiAddress)
 
-      setSelectedMultiProxy(previouslySelected || multiProxyList[0])
-    }
-  }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
+  //     setSelectedMultiProxy(previouslySelected || multiProxyList[0])
+  //   }
+  // }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
 
   const refetch = useCallback(() => {
     refetchMultisigSub()
@@ -293,6 +315,8 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   return (
     <MultisigContext.Provider
       value={{
+        selectedMultiProxyAddress,
+        defaultAddress,
         selectedMultiProxy,
         multiProxyList,
         selectMultiProxy,
@@ -313,7 +337,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
 const useMultiProxy = () => {
   const context = useContext(MultisigContext)
   if (context === undefined) {
-    throw new Error('useMultisigList must be used within a MultisigContextProvider')
+    throw new Error('useMultiProxy must be used within a MultiProxyContextProvider')
   }
   return context
 }
diff --git a/packages/ui/src/contexts/NetworkContext.tsx b/packages/ui/src/contexts/NetworkContext.tsx
index 927f9c35..c84dfc85 100644
--- a/packages/ui/src/contexts/NetworkContext.tsx
+++ b/packages/ui/src/contexts/NetworkContext.tsx
@@ -34,7 +34,10 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
 
       setSelectedNetworkInfo(networkList[network])
       setSelectedNetwork(network)
-      setSearchParams({ network })
+      setSearchParams((prev) => {
+        prev.set('network', network)
+        return prev
+      })
       localStorage.setItem(LOCALSTORAGE_SELECTED_NETWORK, network)
     },
     [setSearchParams]
diff --git a/packages/ui/src/hooks/useSwitchAddress.tsx b/packages/ui/src/hooks/useSwitchAddress.tsx
new file mode 100644
index 00000000..e795d809
--- /dev/null
+++ b/packages/ui/src/hooks/useSwitchAddress.tsx
@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { useMultiProxy } from '../contexts/MultiProxyContext'
+
+export const useSwtichAddress = () => {
+  const [searchParams, setSearchParams] = useSearchParams({
+    address: '',
+    network: ''
+  })
+  const urlAddress = useMemo(() => {
+    return searchParams.get('address') || ''
+  }, [searchParams])
+  const {
+    multiProxyList,
+    isLoading: isMultiproxyLoading,
+    selectMultiProxy,
+    defaultAddress,
+    selectedMultiProxyAddress
+  } = useMultiProxy()
+
+  console.log('urlAddress && multiProxyList.length > 0', urlAddress, multiProxyList.length > 0)
+
+  const setAddress = useCallback(
+    (address: string) => {
+      setSearchParams((prev) => {
+        prev.set('address', address)
+        return prev
+      })
+    },
+    [setSearchParams]
+  )
+
+  useEffect(() => {
+    if (isMultiproxyLoading || multiProxyList.length === 0) {
+      // we're not yet initialized
+      return
+    }
+
+    // no address in the url, init with the first multiProxy from the list
+    if (!urlAddress && !!defaultAddress) {
+      console.log('selecting multi', defaultAddress)
+      setAddress(defaultAddress)
+    }
+  }, [defaultAddress, isMultiproxyLoading, multiProxyList.length, setAddress, urlAddress])
+
+  // the url address is driving the UI if there's a mismatch
+  // force the url address to match
+  useEffect(() => {
+    if (!!urlAddress && urlAddress !== selectedMultiProxyAddress) {
+      console.log('missmatch use last', selectedMultiProxyAddress, urlAddress)
+      selectMultiProxy(urlAddress)
+    }
+  }, [urlAddress, multiProxyList, selectMultiProxy, defaultAddress, selectedMultiProxyAddress])
+
+  return { currentAddress: urlAddress, setAddress }
+}
diff --git a/packages/ui/src/pages/Creation/index.tsx b/packages/ui/src/pages/Creation/index.tsx
index 9bf27709..d844f3ed 100644
--- a/packages/ui/src/pages/Creation/index.tsx
+++ b/packages/ui/src/pages/Creation/index.tsx
@@ -9,7 +9,7 @@ import ThresholdSelection from './ThresholdSelection'
 import NameSelection from './NameSelection'
 import Summary from './Summary'
 import { useSigningCallback } from '../../hooks/useSigningCallback'
-import { useNavigate } from 'react-router-dom'
+import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { useToasts } from '../../contexts/ToastContext'
 import { useAccountNames } from '../../contexts/AccountNamesContext'
 import { useCheckBalance } from '../../hooks/useCheckBalance'
@@ -35,8 +35,17 @@ const MultisigCreation = ({ className }: Props) => {
   const [threshold, setThreshold] = useState<number | undefined>()
   const { selectedSigner, selectedAccount, ownAddressList } = useAccounts()
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams({ creationInProgress: 'false' })
   const signCallBack = useSigningCallback({
-    onSuccess: () => navigate('/?creationInProgress=true')
+    onSuccess: () => {
+      navigate({
+        pathname: '/',
+        search: createSearchParams({
+          ...searchParams,
+          creationInProgress: 'true'
+        }).toString()
+      })
+    }
   })
   const { getSortAddress } = useGetSortAddress()
   const { addToast } = useToasts()
diff --git a/packages/ui/src/pages/Home/HeaderView.tsx b/packages/ui/src/pages/Home/HeaderView.tsx
index 0c9a9800..08be789f 100644
--- a/packages/ui/src/pages/Home/HeaderView.tsx
+++ b/packages/ui/src/pages/Home/HeaderView.tsx
@@ -5,11 +5,12 @@ import { styled } from '@mui/material/styles'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { Balance, ButtonWithIcon } from '../../components/library'
 import { HiOutlineArrowLongRight } from 'react-icons/hi2'
-import { useNavigate } from 'react-router-dom'
+import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'
 import { useMemo } from 'react'
 
 const HeaderView = () => {
   const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
   const { selectedMultiProxy, selectedHasProxy, selectedIsWatched } = useMultiProxy()
 
   const selectedAddress = useMemo((): string => {
@@ -22,7 +23,15 @@ const HeaderView = () => {
     <PureProxyWrapper data-cy="header-account">
       <OverviewWrapper>
         <ButtonWithIcon
-          onClick={() => navigate('/overview')}
+          onClick={() => {
+            navigate({
+              pathname: '/overview',
+              search: createSearchParams({
+                ...searchParams,
+                creationInProgress: 'true'
+              }).toString()
+            })
+          }}
           variant="link"
           data-cy="button-see-overview"
         >
diff --git a/packages/ui/src/pages/Home/Home.tsx b/packages/ui/src/pages/Home/Home.tsx
index 3e1f7ec6..c43b7aa1 100644
--- a/packages/ui/src/pages/Home/Home.tsx
+++ b/packages/ui/src/pages/Home/Home.tsx
@@ -28,7 +28,10 @@ const Home = ({ className }: HomeProps) => {
 
   const onClosenewMultisigAlert = useCallback(() => {
     setShowNewMultisigAlert(false)
-    setSearchParams({ creationInProgress: 'false' })
+    setSearchParams((prev) => {
+      prev.set('creationInProgress', 'false')
+      return prev
+    })
   }, [setSearchParams])
 
   useEffect(() => {
diff --git a/packages/ui/src/utils/getMultiProxyAddress.ts b/packages/ui/src/utils/getMultiProxyAddress.ts
new file mode 100644
index 00000000..a0cf06e4
--- /dev/null
+++ b/packages/ui/src/utils/getMultiProxyAddress.ts
@@ -0,0 +1,10 @@
+import { MultiProxy } from '../contexts/MultiProxyContext'
+
+export function getMultiProxyAddress(multi: undefined): undefined
+export function getMultiProxyAddress(multi: MultiProxy): string
+export function getMultiProxyAddress(multi?: MultiProxy): string | undefined
+export function getMultiProxyAddress(multi?: MultiProxy) {
+  if (!multi) return
+
+  return multi.proxy || multi.multisigs[0].address
+}

From a8974f81806042a4c99b34558424cc3b3473c945 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 30 Oct 2023 15:43:55 +0100
Subject: [PATCH 02/15] keep params on menu change

---
 packages/ui/src/components/Drawer/DrawerMenu.tsx  | 14 +++++++++-----
 packages/ui/src/components/Header/Header.tsx      | 15 +++++++++------
 .../ui/src/components/select/NetworkSelection.tsx |  2 +-
 packages/ui/src/contexts/NetworkContext.tsx       |  9 +++++----
 .../src/utils/getQuertStringFromSearchParams.ts   |  5 +++++
 packages/ui/src/utils/index.ts                    |  1 +
 6 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 packages/ui/src/utils/getQuertStringFromSearchParams.ts

diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
index 3d491c00..96b31cd5 100644
--- a/packages/ui/src/components/Drawer/DrawerMenu.tsx
+++ b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -8,9 +8,10 @@ import { styled } from '@mui/material/styles'
 import NetworkSelection from '../select/NetworkSelection'
 import MultiProxySelection from '../select/MultiProxySelection'
 import { ROUTES } from '../../pages/routes'
-import { isEmptyArray } from '../../utils'
+import { isEmptyArray, getQuertStringFromSearchParams } from '../../utils'
 import { useMemo } from 'react'
 import { Button, NavLink } from '../library'
+import { useSearchParams } from 'react-router-dom'
 
 interface DrawerMenuProps {
   handleDrawerClose: () => void
@@ -20,6 +21,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
   const { ownAccountList } = useAccounts()
   const isAccountConnected = useMemo(() => !isEmptyArray(ownAccountList), [ownAccountList])
   const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
+  const [params] = useSearchParams()
 
   return (
     <>
@@ -45,21 +47,23 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
         <ListItemStyled>
           <NetworkSelection />
         </ListItemStyled>
-        {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) =>
-          isAccountConnected || isDisplayWhenNoWallet ? (
+        {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) => {
+          const paramsString = getQuertStringFromSearchParams(params)
+
+          return isAccountConnected || isDisplayWhenNoWallet ? (
             <ListItemStyled
               key={name}
               disablePadding
             >
               <NavLink
                 onClick={handleDrawerClose}
-                to={path}
+                to={`${path}?${paramsString}`}
               >
                 <ListItemText primary={name} />
               </NavLink>
             </ListItemStyled>
           ) : null
-        )}
+        })}
       </List>
     </>
   )
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 20d149a3..5752d942 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -7,11 +7,11 @@ import MultiProxySelection from '../select/MultiProxySelection'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { HiOutlineBars3 as MenuIcon } from 'react-icons/hi2'
 import { ROUTES } from '../../pages/routes'
-import { isEmptyArray } from '../../utils'
+import { isEmptyArray, getQuertStringFromSearchParams } from '../../utils'
 import NetworkSelection from '../select/NetworkSelection'
 import multixLogo from '../../logos/multix-logo.svg'
 import useWalletConnectEventsManager from '../../hooks/useWalletConnectEventsManager'
-import { Link } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { useSwtichAddress } from '../../hooks/useSwitchAddress'
 
 interface Props {
@@ -21,6 +21,7 @@ interface Props {
 const Header = ({ handleDrawerOpen }: Props) => {
   const { ownAccountList } = useAccounts()
   const isAccountConnected = useMemo(() => !isEmptyArray(ownAccountList), [ownAccountList])
+  const [params] = useSearchParams()
   const { isAllowedToConnectToExtension, allowConnectionToExtension, isAccountLoading } =
     useAccounts()
   useWalletConnectEventsManager()
@@ -39,17 +40,19 @@ const Header = ({ handleDrawerOpen }: Props) => {
         </LogoWrapperStyled>
         <DesktopMenuStyled data-cy="menu-desktop">
           <MenuWrapperStyled>
-            {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) =>
-              isAccountConnected || isDisplayWhenNoWallet ? (
+            {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) => {
+              const paramsString = getQuertStringFromSearchParams(params)
+
+              return isAccountConnected || isDisplayWhenNoWallet ? (
                 <NavLink
                   key={name}
-                  to={path}
+                  to={`${path}?${paramsString}`}
                   data-cy={`button-navigate-${name.toLowerCase().replace(/ /g, '-')}`}
                 >
                   {name}
                 </NavLink>
               ) : null
-            )}
+            })}
           </MenuWrapperStyled>
           <RightButtonsWrapperStyled>
             {!isAllowedToConnectToExtension && (
diff --git a/packages/ui/src/components/select/NetworkSelection.tsx b/packages/ui/src/components/select/NetworkSelection.tsx
index 5d179218..84ff08d6 100644
--- a/packages/ui/src/components/select/NetworkSelection.tsx
+++ b/packages/ui/src/components/select/NetworkSelection.tsx
@@ -28,7 +28,7 @@ const NetworkSelection = () => {
         return
       }
 
-      selectNetwork(value)
+      selectNetwork(value, true)
     },
     [selectNetwork]
   )
diff --git a/packages/ui/src/contexts/NetworkContext.tsx b/packages/ui/src/contexts/NetworkContext.tsx
index c84dfc85..83330c50 100644
--- a/packages/ui/src/contexts/NetworkContext.tsx
+++ b/packages/ui/src/contexts/NetworkContext.tsx
@@ -9,7 +9,7 @@ type NetworkContextProps = {
 }
 
 export interface INetworkContext {
-  selectNetwork: (network: string) => void
+  selectNetwork: (network: string, shouldResetAddress: boolean) => void
   selectedNetworkInfo?: NetworkInfo
   selectedNetwork?: SupportedNetworks
 }
@@ -24,10 +24,10 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
   const [searchParams, setSearchParams] = useSearchParams({ network: '' })
 
   const selectNetwork = useCallback(
-    (network: string) => {
-      const newSelectedNetwork = isSupportedNetwork(network)
+    (network: string, shouldResetAddress = false) => {
+      const isNewSelectedNetworkSupported = isSupportedNetwork(network)
 
-      if (!newSelectedNetwork) {
+      if (!isNewSelectedNetworkSupported) {
         console.error('This network is not supported', network)
         return
       }
@@ -35,6 +35,7 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
       setSelectedNetworkInfo(networkList[network])
       setSelectedNetwork(network)
       setSearchParams((prev) => {
+        shouldResetAddress && prev.delete('address')
         prev.set('network', network)
         return prev
       })
diff --git a/packages/ui/src/utils/getQuertStringFromSearchParams.ts b/packages/ui/src/utils/getQuertStringFromSearchParams.ts
new file mode 100644
index 00000000..240aa3ba
--- /dev/null
+++ b/packages/ui/src/utils/getQuertStringFromSearchParams.ts
@@ -0,0 +1,5 @@
+export const getQuertStringFromSearchParams = (param: URLSearchParams) => {
+  return Array.from(param.entries()).reduce((prev, [key, value]) => {
+    return `${prev}${prev ? '&' : ''}${key}=${value}`
+  }, '')
+}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index cc5e4969..ce302d50 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -8,3 +8,4 @@ export * from './getSubscanExtrinsicLink'
 export * from './getSubscanAccountLink'
 export * from './getExtrinsicName'
 export * from './getDisplayArgs'
+export * from './getQuertStringFromSearchParams'

From 1c285114645412bf14ea98a3ebbf605c07e43cc1 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 30 Oct 2023 16:02:41 +0100
Subject: [PATCH 03/15] clean up

---
 .../src/components/ConnectCreateOrWatch.tsx   | 10 ++--------
 .../ui/src/components/Drawer/DrawerMenu.tsx   |  6 +++---
 packages/ui/src/components/Header/Header.tsx  |  6 +++---
 .../ui/src/contexts/MultiProxyContext.tsx     | 19 +------------------
 packages/ui/src/hooks/useSwitchAddress.tsx    |  3 ---
 packages/ui/src/pages/Creation/index.tsx      |  7 +++++++
 packages/ui/src/pages/Home/HeaderView.tsx     |  5 +----
 .../utils/getQuertStringFromSearchParams.ts   |  5 -----
 packages/ui/src/utils/index.ts                |  1 -
 9 files changed, 17 insertions(+), 45 deletions(-)
 delete mode 100644 packages/ui/src/utils/getQuertStringFromSearchParams.ts

diff --git a/packages/ui/src/components/ConnectCreateOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx
index 73169e2e..3ba4a7bc 100644
--- a/packages/ui/src/components/ConnectCreateOrWatch.tsx
+++ b/packages/ui/src/components/ConnectCreateOrWatch.tsx
@@ -34,10 +34,7 @@ export const ConnectOrWatch = () => {
             onClick={() => {
               navigate({
                 pathname: '/create',
-                search: createSearchParams({
-                  ...searchParams,
-                  creationInProgress: 'true'
-                }).toString()
+                search: createSearchParams(searchParams).toString()
               })
             }}
             data-cy="button-create-one"
@@ -58,10 +55,7 @@ export const ConnectOrWatch = () => {
           onClick={() => {
             navigate({
               pathname: `/settings${WATCH_ACCOUNT_ANCHOR}`,
-              search: createSearchParams({
-                ...searchParams,
-                creationInProgress: 'true'
-              }).toString()
+              search: createSearchParams(searchParams).toString()
             })
           }}
           data-cy="button-watch-account"
diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
index 96b31cd5..58d775da 100644
--- a/packages/ui/src/components/Drawer/DrawerMenu.tsx
+++ b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -8,10 +8,10 @@ import { styled } from '@mui/material/styles'
 import NetworkSelection from '../select/NetworkSelection'
 import MultiProxySelection from '../select/MultiProxySelection'
 import { ROUTES } from '../../pages/routes'
-import { isEmptyArray, getQuertStringFromSearchParams } from '../../utils'
+import { isEmptyArray } from '../../utils'
 import { useMemo } from 'react'
 import { Button, NavLink } from '../library'
-import { useSearchParams } from 'react-router-dom'
+import { createSearchParams, useSearchParams } from 'react-router-dom'
 
 interface DrawerMenuProps {
   handleDrawerClose: () => void
@@ -48,7 +48,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
           <NetworkSelection />
         </ListItemStyled>
         {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) => {
-          const paramsString = getQuertStringFromSearchParams(params)
+          const paramsString = createSearchParams(params).toString()
 
           return isAccountConnected || isDisplayWhenNoWallet ? (
             <ListItemStyled
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 5752d942..78bce4ac 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -7,11 +7,11 @@ import MultiProxySelection from '../select/MultiProxySelection'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { HiOutlineBars3 as MenuIcon } from 'react-icons/hi2'
 import { ROUTES } from '../../pages/routes'
-import { isEmptyArray, getQuertStringFromSearchParams } from '../../utils'
+import { isEmptyArray } from '../../utils'
 import NetworkSelection from '../select/NetworkSelection'
 import multixLogo from '../../logos/multix-logo.svg'
 import useWalletConnectEventsManager from '../../hooks/useWalletConnectEventsManager'
-import { Link, useSearchParams } from 'react-router-dom'
+import { Link, createSearchParams, useSearchParams } from 'react-router-dom'
 import { useSwtichAddress } from '../../hooks/useSwitchAddress'
 
 interface Props {
@@ -41,7 +41,7 @@ const Header = ({ handleDrawerOpen }: Props) => {
         <DesktopMenuStyled data-cy="menu-desktop">
           <MenuWrapperStyled>
             {ROUTES.map(({ path, name, isDisplayWhenNoWallet }) => {
-              const paramsString = getQuertStringFromSearchParams(params)
+              const paramsString = createSearchParams(params).toString()
 
               return isAccountConnected || isDisplayWhenNoWallet ? (
                 <NavLink
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index 72419921..2fef3dab 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
 import {
   MultisigsBySignatoriesOrWatchedSubscription,
   ProxyType,
@@ -242,17 +242,6 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     [multiProxyList]
   )
 
-  // effect to update selectedMultiproxy when the multiproxyList is updated
-  // useEffect(() => {
-  //   if (!!multiProxyList.length && !!selectedMultiProxy) {
-  //     const newlySelected = selectedMultiProxy.proxy
-  //       ? getMultiProxyByAddress(selectedMultiProxy.proxy) // select the new proxy by pure proxy address
-  //       : getMultiProxyByAddress(selectedMultiProxy.multisigs[0].address)
-
-  //     setSelectedMultiProxy(newlySelected)
-  //   }
-  // }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
-
   const getMultisigByAddress = useCallback(
     (address: string) => {
       return selectedMultiProxy?.multisigs.find((multisig) => multisig.address === address)
@@ -285,12 +274,6 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
         return
       }
 
-      // // for MultiProxy without a pure, we only support one multisig
-      // const addressToUse = multi.proxy || multi.multisigs[0]?.address
-
-      // if (!addressToUse) {
-      //   return
-      // }
       const addressInUrl = getMultiProxyAddress(multi)
       setAddress(addressInUrl)
       setSelectedMultiProxy(multi)
diff --git a/packages/ui/src/hooks/useSwitchAddress.tsx b/packages/ui/src/hooks/useSwitchAddress.tsx
index e795d809..b94dcdb2 100644
--- a/packages/ui/src/hooks/useSwitchAddress.tsx
+++ b/packages/ui/src/hooks/useSwitchAddress.tsx
@@ -18,8 +18,6 @@ export const useSwtichAddress = () => {
     selectedMultiProxyAddress
   } = useMultiProxy()
 
-  console.log('urlAddress && multiProxyList.length > 0', urlAddress, multiProxyList.length > 0)
-
   const setAddress = useCallback(
     (address: string) => {
       setSearchParams((prev) => {
@@ -38,7 +36,6 @@ export const useSwtichAddress = () => {
 
     // no address in the url, init with the first multiProxy from the list
     if (!urlAddress && !!defaultAddress) {
-      console.log('selecting multi', defaultAddress)
       setAddress(defaultAddress)
     }
   }, [defaultAddress, isMultiproxyLoading, multiProxyList.length, setAddress, urlAddress])
diff --git a/packages/ui/src/pages/Creation/index.tsx b/packages/ui/src/pages/Creation/index.tsx
index d844f3ed..527cb7b7 100644
--- a/packages/ui/src/pages/Creation/index.tsx
+++ b/packages/ui/src/pages/Creation/index.tsx
@@ -47,6 +47,13 @@ const MultisigCreation = ({ className }: Props) => {
       })
     }
   })
+  console.log(
+    'createSearchParam',
+    createSearchParams({
+      ...searchParams,
+      creationInProgress: 'true'
+    }).toString()
+  )
   const { getSortAddress } = useGetSortAddress()
   const { addToast } = useToasts()
   const [name, setName] = useState('')
diff --git a/packages/ui/src/pages/Home/HeaderView.tsx b/packages/ui/src/pages/Home/HeaderView.tsx
index 08be789f..3b3fcae2 100644
--- a/packages/ui/src/pages/Home/HeaderView.tsx
+++ b/packages/ui/src/pages/Home/HeaderView.tsx
@@ -26,10 +26,7 @@ const HeaderView = () => {
           onClick={() => {
             navigate({
               pathname: '/overview',
-              search: createSearchParams({
-                ...searchParams,
-                creationInProgress: 'true'
-              }).toString()
+              search: createSearchParams(searchParams).toString()
             })
           }}
           variant="link"
diff --git a/packages/ui/src/utils/getQuertStringFromSearchParams.ts b/packages/ui/src/utils/getQuertStringFromSearchParams.ts
deleted file mode 100644
index 240aa3ba..00000000
--- a/packages/ui/src/utils/getQuertStringFromSearchParams.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const getQuertStringFromSearchParams = (param: URLSearchParams) => {
-  return Array.from(param.entries()).reduce((prev, [key, value]) => {
-    return `${prev}${prev ? '&' : ''}${key}=${value}`
-  }, '')
-}
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index ce302d50..cc5e4969 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -8,4 +8,3 @@ export * from './getSubscanExtrinsicLink'
 export * from './getSubscanAccountLink'
 export * from './getExtrinsicName'
 export * from './getDisplayArgs'
-export * from './getQuertStringFromSearchParams'

From 1919f4379bfeed2e7886c83e480921cfb8c7e3d3 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 31 Oct 2023 11:02:24 +0100
Subject: [PATCH 04/15] fix tests

---
 packages/ui/cypress/fixtures/landingData.ts         | 4 ++--
 packages/ui/src/components/ConnectCreateOrWatch.tsx | 5 +++--
 packages/ui/src/pages/Settings/Settings.tsx         | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/ui/cypress/fixtures/landingData.ts b/packages/ui/cypress/fixtures/landingData.ts
index 44387239..43c566d6 100644
--- a/packages/ui/cypress/fixtures/landingData.ts
+++ b/packages/ui/cypress/fixtures/landingData.ts
@@ -2,5 +2,5 @@ export const baseUrl = 'http://localhost:3333'
 export const networkParams = 'network=rococo'
 export const landingPageUrl = `${baseUrl}?${networkParams}`
 export const settingsPageUrl = `${baseUrl}/settings?${networkParams}`
-const WATCH_ACCOUNT_ANCHOR = '#watched-accounts'
-export const settingsPageWatchAccountUrl = `${settingsPageUrl}${WATCH_ACCOUNT_ANCHOR}`
+const WATCH_ACCOUNT_ANCHOR = 'watched-accounts'
+export const settingsPageWatchAccountUrl = `${settingsPageUrl}#${WATCH_ACCOUNT_ANCHOR}`
diff --git a/packages/ui/src/components/ConnectCreateOrWatch.tsx b/packages/ui/src/components/ConnectCreateOrWatch.tsx
index 3ba4a7bc..bc3254c1 100644
--- a/packages/ui/src/components/ConnectCreateOrWatch.tsx
+++ b/packages/ui/src/components/ConnectCreateOrWatch.tsx
@@ -54,8 +54,9 @@ export const ConnectOrWatch = () => {
         <Button
           onClick={() => {
             navigate({
-              pathname: `/settings${WATCH_ACCOUNT_ANCHOR}`,
-              search: createSearchParams(searchParams).toString()
+              pathname: '/settings',
+              search: createSearchParams(searchParams).toString(),
+              hash: WATCH_ACCOUNT_ANCHOR
             })
           }}
           data-cy="button-watch-account"
diff --git a/packages/ui/src/pages/Settings/Settings.tsx b/packages/ui/src/pages/Settings/Settings.tsx
index a5a62990..fe0554cc 100644
--- a/packages/ui/src/pages/Settings/Settings.tsx
+++ b/packages/ui/src/pages/Settings/Settings.tsx
@@ -11,7 +11,7 @@ import WalletConnectSVG from '../../logos/walletConnectSVG.svg?react'
 
 const ACCORDION_WATCHED_ACCOUNTS = 'panel-watched-accounts'
 const ACCORDION_WALLET_CONNECT = 'panel-wallet-connect'
-export const WATCH_ACCOUNT_ANCHOR = '#watched-accounts'
+export const WATCH_ACCOUNT_ANCHOR = 'watched-accounts'
 
 type AccordionNames = typeof ACCORDION_WATCHED_ACCOUNTS | typeof ACCORDION_WALLET_CONNECT
 
@@ -26,7 +26,7 @@ const Settings = () => {
   }, [])
 
   useEffect(() => {
-    if (hash === WATCH_ACCOUNT_ANCHOR) {
+    if (hash === `#${WATCH_ACCOUNT_ANCHOR}`) {
       onToggle(ACCORDION_WATCHED_ACCOUNTS, true)
     }
   }, [hash, onToggle])

From 2fadcb3c96a524b1df671feee9d57f46c5f2a02f Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 2 Nov 2023 21:37:02 +0000
Subject: [PATCH 05/15] with error message

---
 .../components/select/MultiProxySelection.tsx | 12 +++-
 .../ui/src/contexts/MultiProxyContext.tsx     | 70 +++++++++++++++----
 packages/ui/src/contexts/NetworkContext.tsx   |  4 +-
 packages/ui/src/hooks/useDisplayError.tsx     | 27 ++++++-
 ...sigsBySignatoriesOrWatchedSubscription.tsx |  1 +
 .../ui/src/hooks/usePureByIdSubscription.tsx  |  1 +
 packages/ui/src/hooks/useSwitchAddress.tsx    | 42 ++++++++---
 7 files changed, 127 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/components/select/MultiProxySelection.tsx b/packages/ui/src/components/select/MultiProxySelection.tsx
index b4ba0403..d4dc26d6 100644
--- a/packages/ui/src/components/select/MultiProxySelection.tsx
+++ b/packages/ui/src/components/select/MultiProxySelection.tsx
@@ -29,7 +29,13 @@ const isOptionEqualToValue = (option?: MultiProxy, value?: MultiProxy) => {
 
 const MultiProxySelection = ({ className }: Props) => {
   const ref = useRef<HTMLInputElement>(null)
-  const { multiProxyList, selectedMultiProxy, selectMultiProxy, isLoading } = useMultiProxy()
+  const {
+    multiProxyList,
+    selectedMultiProxy,
+    selectMultiProxy,
+    isLoading,
+    canFindMultiProxyFromUrl
+  } = useMultiProxy()
   const isSelectedProxy = useMemo(() => !!selectedMultiProxy?.proxy, [selectedMultiProxy])
   // We only support one multisigs if they have no proxy
   const addressToShow = useMemo(
@@ -106,7 +112,7 @@ const MultiProxySelection = ({ className }: Props) => {
       label=""
       InputProps={{
         ...params.InputProps,
-        startAdornment: (
+        startAdornment: addressToShow && (
           <InputAdornment position="start">
             <IdenticonBadge
               address={addressToShow}
@@ -142,7 +148,7 @@ const MultiProxySelection = ({ className }: Props) => {
       renderInput={renderInput}
       getOptionLabel={getOptionLabel}
       onChange={onChange}
-      value={selectedMultiProxy || multiProxyList[0]}
+      value={canFindMultiProxyFromUrl ? selectedMultiProxy || multiProxyList[0] : ''}
       data-cy="select-multiproxy"
     />
   )
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index 2fef3dab..e798209d 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -36,7 +36,7 @@ export interface IMultisigContext {
   selectedMultiProxy?: MultiProxy
   multiProxyList: MultiProxy[]
   isLoading: boolean
-  selectMultiProxy: (multi: MultiProxy | string) => void
+  selectMultiProxy: (multi: MultiProxy | string) => boolean
   selectedHasProxy: boolean
   error: Error | null
   getMultisigByAddress: (address: string) => MultisigAggregated | undefined
@@ -45,6 +45,8 @@ export interface IMultisigContext {
   refetch: () => void
   defaultAddress?: string
   selectedMultiProxyAddress?: string
+  setCanFindMultiProxyFromUrl: React.Dispatch<React.SetStateAction<boolean>>
+  canFindMultiProxyFromUrl: boolean
 }
 
 const MultisigContext = createContext<IMultisigContext | undefined>(undefined)
@@ -56,20 +58,18 @@ const getSignatoriesFromAccount = (
 }
 
 const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
+  const [canFindMultiProxyFromUrl, setCanFindMultiProxyFromUrl] = useState(false)
   const [selectedMultiProxy, setSelectedMultiProxy] =
     useState<IMultisigContext['selectedMultiProxy']>(undefined)
-  const [pureProxyList, setPureProxyList] = useState<IMultisigContext['multiProxyList']>([])
-  const [multisigList, setMultisigList] = useState<IMultisigContext['multiProxyList']>([])
-  const [pureToQuery, setPureToQuery] = useState<string[]>([])
-  const multiProxyList = useMemo(
-    () => [...pureProxyList, ...multisigList],
-    [multisigList, pureProxyList]
+  const [pureProxyList, setPureProxyList] = useState<IMultisigContext['multiProxyList'] | null>(
+    null
   )
-  const defaultAddress = useMemo(() => {
-    if (multiProxyList.length === 0) return
+  const [multisigList, setMultisigList] = useState<IMultisigContext['multiProxyList'] | null>(null)
+  const [pureToQuery, setPureToQuery] = useState<string[]>([])
+  const multiProxyList = useMemo(() => {
+    return [...(pureProxyList || []), ...(multisigList || [])]
+  }, [multisigList, pureProxyList])
 
-    return multiProxyList[0].proxy || multiProxyList[0].multisigs[0].address
-  }, [multiProxyList])
   const selectedMultiProxyAddress = useMemo(
     () => getMultiProxyAddress(selectedMultiProxy),
     [selectedMultiProxy]
@@ -105,6 +105,12 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   const refreshPureToQueryAndMultisigList = useCallback(
     (data: MultisigsBySignatoriesOrWatchedSubscription | null) => {
       setIsRefreshingMultiProxyList(true)
+      // Data is only null when it is fetching
+      if (!data) {
+        setPureToQuery([])
+        setMultisigList(null)
+        setPureProxyList(null)
+      }
       // we do have an answer, but there is no multisig
       if (!!data?.accountMultisigs && data.accountMultisigs.length === 0) {
         setPureToQuery([])
@@ -234,7 +240,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
       return multiProxyList.find(
         (multiProxy) =>
           // either by proxy address
-          multiProxy?.proxy === address ||
+          multiProxy.proxy === address ||
           // or by multisig address
           multiProxy.multisigs.some((multisig) => multisig.address === address)
       )
@@ -271,12 +277,13 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
       }
 
       if (!multi) {
-        return
+        return false
       }
 
       const addressInUrl = getMultiProxyAddress(multi)
       setAddress(addressInUrl)
       setSelectedMultiProxy(multi)
+      return true
     },
     [getMultiProxyByAddress, setAddress]
   )
@@ -295,6 +302,37 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     refetchPureSub()
   }, [refetchMultisigSub, refetchPureSub])
 
+  const isDoneFetchingIndexerInfo = useMemo(() => {
+    if (ownAddressList.length === 0 && watchedAddresses.length === 0) {
+      // nothing to fetch
+      return true
+    }
+
+    if (!multisigList || !pureProxyList) {
+      // if any is null, we're still fetching
+      return false
+    }
+
+    return true
+  }, [multisigList, ownAddressList.length, pureProxyList, watchedAddresses.length])
+
+  const isLoading = useMemo(
+    () =>
+      isMultisigsubLoading ||
+      isPureSubLoading ||
+      isRefreshingMultiProxyList ||
+      !isDoneFetchingIndexerInfo,
+    [isDoneFetchingIndexerInfo, isMultisigsubLoading, isPureSubLoading, isRefreshingMultiProxyList]
+  )
+
+  const defaultAddress = useMemo(() => {
+    if (multiProxyList?.length === 0 || isLoading) {
+      return undefined
+    }
+
+    return multiProxyList?.[0].proxy || multiProxyList?.[0].multisigs[0].address
+  }, [isLoading, multiProxyList])
+
   return (
     <MultisigContext.Provider
       value={{
@@ -303,13 +341,15 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
         selectedMultiProxy,
         multiProxyList,
         selectMultiProxy,
-        isLoading: isMultisigsubLoading || isPureSubLoading || isRefreshingMultiProxyList,
+        isLoading,
         selectedHasProxy,
         error: isMultisigSubError || isPureSubError,
         getMultisigByAddress,
         getMultisigAsAccountBaseInfo,
         selectedIsWatched,
-        refetch
+        refetch,
+        canFindMultiProxyFromUrl,
+        setCanFindMultiProxyFromUrl
       }}
     >
       {children}
diff --git a/packages/ui/src/contexts/NetworkContext.tsx b/packages/ui/src/contexts/NetworkContext.tsx
index 83330c50..88999439 100644
--- a/packages/ui/src/contexts/NetworkContext.tsx
+++ b/packages/ui/src/contexts/NetworkContext.tsx
@@ -24,7 +24,7 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
   const [searchParams, setSearchParams] = useSearchParams({ network: '' })
 
   const selectNetwork = useCallback(
-    (network: string, shouldResetAddress = false) => {
+    (network: string, shouldResetAccountAddress = false) => {
       const isNewSelectedNetworkSupported = isSupportedNetwork(network)
 
       if (!isNewSelectedNetworkSupported) {
@@ -35,7 +35,7 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
       setSelectedNetworkInfo(networkList[network])
       setSelectedNetwork(network)
       setSearchParams((prev) => {
-        shouldResetAddress && prev.delete('address')
+        shouldResetAccountAddress && prev.delete('address')
         prev.set('network', network)
         return prev
       })
diff --git a/packages/ui/src/hooks/useDisplayError.tsx b/packages/ui/src/hooks/useDisplayError.tsx
index 99a87493..6db13993 100644
--- a/packages/ui/src/hooks/useDisplayError.tsx
+++ b/packages/ui/src/hooks/useDisplayError.tsx
@@ -9,11 +9,13 @@ import { Button, Link } from '../components/library'
 import { Center } from '../components/layout/Center'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
 import { useMultiProxy } from '../contexts/MultiProxyContext'
+import { useSearchParams } from 'react-router-dom'
 
 export const useDisplayError = () => {
   const { isExtensionError, isAccountLoading } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
-  const { error: multisigQueryError, refetch } = useMultiProxy()
+  const { error: multisigQueryError, refetch, canFindMultiProxyFromUrl } = useMultiProxy()
+  const [, setSearchParams] = useSearchParams()
 
   if (isExtensionError && watchedAddresses.length === 0 && !isAccountLoading) {
     return (
@@ -49,6 +51,29 @@ export const useDisplayError = () => {
     )
   }
 
+  if (!canFindMultiProxyFromUrl) {
+    return (
+      <CenterStyled>
+        <ErrorMessageStyled>
+          <ErrorOutlineIcon size={64} />
+          <div data-cy="label-linked-address-not-found">
+            The linked address can't be found in your accounts or watched accounts.
+          </div>
+          <Button
+            onClick={() =>
+              setSearchParams((prev) => {
+                prev.delete('address')
+                return prev
+              })
+            }
+          >
+            Reset
+          </Button>
+        </ErrorMessageStyled>
+      </CenterStyled>
+    )
+  }
+
   return null
 }
 
diff --git a/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx b/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx
index 5609556c..4d02bb0e 100644
--- a/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx
+++ b/packages/ui/src/hooks/useMultisigsBySignatoriesOrWatchedSubscription.tsx
@@ -57,6 +57,7 @@ export const useMultisigsBySignatoriesOrWatchedSubscription = ({
   const { error, data, isLoading, refetch } = useSubscription(
     [`KeyMultisigsBySignatoriesOrWatched-${accountIds}-${watchedAccountIds}-${selectedNetwork}`],
     () => {
+      onUpdate(null)
       if (!client) return new Observable<null>()
 
       return fromWsClientSubscription<{
diff --git a/packages/ui/src/hooks/usePureByIdSubscription.tsx b/packages/ui/src/hooks/usePureByIdSubscription.tsx
index 728fba8c..b71e45f2 100644
--- a/packages/ui/src/hooks/usePureByIdSubscription.tsx
+++ b/packages/ui/src/hooks/usePureByIdSubscription.tsx
@@ -46,6 +46,7 @@ export const usePureByIdsSubscription = ({ onUpdate, pureIds }: Args) => {
   const { error, data, isLoading, refetch } = useSubscription(
     [`KeyWatchedPureById-${pureIds}-${selectedNetwork}`],
     () => {
+      onUpdate(null)
       if (!client) return new Observable<null>()
 
       return fromWsClientSubscription<{
diff --git a/packages/ui/src/hooks/useSwitchAddress.tsx b/packages/ui/src/hooks/useSwitchAddress.tsx
index b94dcdb2..6c2c6e06 100644
--- a/packages/ui/src/hooks/useSwitchAddress.tsx
+++ b/packages/ui/src/hooks/useSwitchAddress.tsx
@@ -15,7 +15,8 @@ export const useSwtichAddress = () => {
     isLoading: isMultiproxyLoading,
     selectMultiProxy,
     defaultAddress,
-    selectedMultiProxyAddress
+    selectedMultiProxyAddress,
+    setCanFindMultiProxyFromUrl
   } = useMultiProxy()
 
   const setAddress = useCallback(
@@ -29,25 +30,48 @@ export const useSwtichAddress = () => {
   )
 
   useEffect(() => {
-    if (isMultiproxyLoading || multiProxyList.length === 0) {
+    if (isMultiproxyLoading) {
       // we're not yet initialized
       return
     }
 
-    // no address in the url, init with the first multiProxy from the list
     if (!urlAddress && !!defaultAddress) {
+      // no address in the url, init with the first multiProxy from the list
       setAddress(defaultAddress)
+      return
     }
-  }, [defaultAddress, isMultiproxyLoading, multiProxyList.length, setAddress, urlAddress])
+  }, [
+    defaultAddress,
+    isMultiproxyLoading,
+    multiProxyList,
+    setAddress,
+    setCanFindMultiProxyFromUrl,
+    urlAddress
+  ])
 
   // the url address is driving the UI if there's a mismatch
   // force the url address to match
   useEffect(() => {
-    if (!!urlAddress && urlAddress !== selectedMultiProxyAddress) {
-      console.log('missmatch use last', selectedMultiProxyAddress, urlAddress)
-      selectMultiProxy(urlAddress)
+    if (isMultiproxyLoading) {
+      // we're not yet initialized
+      return
     }
-  }, [urlAddress, multiProxyList, selectMultiProxy, defaultAddress, selectedMultiProxyAddress])
 
-  return { currentAddress: urlAddress, setAddress }
+    if (!urlAddress || urlAddress === selectedMultiProxyAddress) {
+      setCanFindMultiProxyFromUrl(true)
+    }
+
+    if (!!urlAddress && urlAddress !== selectedMultiProxyAddress) {
+      const isSuccess = selectMultiProxy(urlAddress)
+      setCanFindMultiProxyFromUrl(isSuccess)
+    }
+  }, [
+    urlAddress,
+    multiProxyList,
+    selectMultiProxy,
+    defaultAddress,
+    selectedMultiProxyAddress,
+    isMultiproxyLoading,
+    setCanFindMultiProxyFromUrl
+  ])
 }

From f976561a827876e77cd8227ea318090d2919fef2 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Nov 2023 00:19:16 +0000
Subject: [PATCH 06/15] fix tests

---
 packages/ui/src/contexts/MultiProxyContext.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index e798209d..4d0c1638 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -115,6 +115,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
       if (!!data?.accountMultisigs && data.accountMultisigs.length === 0) {
         setPureToQuery([])
         setMultisigList([])
+        setPureProxyList([])
       }
 
       if (!!data?.accountMultisigs && data.accountMultisigs.length > 0) {
@@ -155,6 +156,9 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
 
         // add the selection to the pure to query
         setPureToQuery(Array.from(pureToQuerySet))
+        // if there is nothing to query set the list to empty
+        // to signify that the pure proxies are done loading
+        pureToQuerySet.size === 0 && setPureProxyList([])
       }
 
       setIsRefreshingMultiProxyList(false)
@@ -314,7 +318,7 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     }
 
     return true
-  }, [multisigList, ownAddressList.length, pureProxyList, watchedAddresses.length])
+  }, [multisigList, ownAddressList, pureProxyList, watchedAddresses])
 
   const isLoading = useMemo(
     () =>

From e33ebd2a584314cc0883c17f54675f9e517bd071 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 3 Nov 2023 11:46:22 +0000
Subject: [PATCH 07/15] fix tests bis

---
 packages/ui/cypress/tests/watched-accounts.cy.ts |  4 +---
 packages/ui/src/contexts/MultiProxyContext.tsx   | 12 +++++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/ui/cypress/tests/watched-accounts.cy.ts b/packages/ui/cypress/tests/watched-accounts.cy.ts
index 4c2399c3..345ab260 100644
--- a/packages/ui/cypress/tests/watched-accounts.cy.ts
+++ b/packages/ui/cypress/tests/watched-accounts.cy.ts
@@ -142,14 +142,12 @@ describe('Watched Accounts', () => {
     const { name: pureName, purePublicKey } = watchMultisigs['multisig-with-pure']
 
     cy.visitWithLocalStorage({
-      url: settingsPageWatchAccountUrl,
+      url: landingPageUrl,
       accountNames: {
         [purePublicKey]: pureName
       },
       watchedAccounts: [purePublicKey]
     })
-    // navigate to the home page and edit the name
-    topMenuItems.homeButton().click()
     multisigPage.optionsMenuButton().click()
     multisigPage.editNamesMenuOption().click()
     editNamesModal.body().should('be.visible')
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index 4d0c1638..34c500d5 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -69,7 +69,6 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   const multiProxyList = useMemo(() => {
     return [...(pureProxyList || []), ...(multisigList || [])]
   }, [multisigList, pureProxyList])
-
   const selectedMultiProxyAddress = useMemo(
     () => getMultiProxyAddress(selectedMultiProxy),
     [selectedMultiProxy]
@@ -115,7 +114,9 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
       if (!!data?.accountMultisigs && data.accountMultisigs.length === 0) {
         setPureToQuery([])
         setMultisigList([])
-        setPureProxyList([])
+        // watched addresses are part of the pure to query
+        // only signal we're done querying if there are no watched addresses
+        watchedAddresses.length === 0 && setPureProxyList([])
       }
 
       if (!!data?.accountMultisigs && data.accountMultisigs.length > 0) {
@@ -156,14 +157,15 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
 
         // add the selection to the pure to query
         setPureToQuery(Array.from(pureToQuerySet))
-        // if there is nothing to query set the list to empty
+
+        // if there is no pure to query set the PureProxyList to empty array
         // to signify that the pure proxies are done loading
-        pureToQuerySet.size === 0 && setPureProxyList([])
+        pureToQuerySet.size === 0 && watchedAddresses.length === 0 && setPureProxyList([])
       }
 
       setIsRefreshingMultiProxyList(false)
     },
-    []
+    [watchedAddresses]
   )
 
   const refreshWatchedPureList = useCallback((data: PureByIdsSubscription | null) => {

From a3e44d8a9bb0f2299d42ab970a832cfce0dfbe26 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 6 Nov 2023 12:28:55 +0000
Subject: [PATCH 08/15] lots of tests

---
 .../ui/cypress/fixtures/knownMultisigs.ts     |   5 +-
 packages/ui/cypress/fixtures/landingData.ts   |   2 +
 .../fixtures/setIdentity/addressBar.ts        |   0
 packages/ui/cypress/fixtures/testAccounts.ts  |  15 +-
 .../watchAccounts/watchSignatories.ts         |   3 +-
 packages/ui/cypress/support/Extension.ts      |  84 +++---
 packages/ui/cypress/support/commands.ts       |   2 +-
 .../support/page-objects/landingPage.ts       |   2 +
 .../support/page-objects/topMenuItems.ts      |   6 +-
 packages/ui/cypress/tests/address-bar.cy.ts   | 260 ++++++++++++++++++
 .../ui/cypress/tests/landing-messaging.cy.ts  |   2 +-
 packages/ui/cypress/tests/login.cy.ts         |   4 +-
 packages/ui/cypress/tests/transactions.cy.ts  |   8 +-
 .../ui/cypress/tests/watched-accounts.cy.ts   |   3 +-
 .../components/select/MultiProxySelection.tsx |   1 +
 .../components/select/NetworkSelection.tsx    |   2 +
 packages/ui/src/hooks/useDisplayError.tsx     |   1 +
 17 files changed, 351 insertions(+), 49 deletions(-)
 create mode 100644 packages/ui/cypress/fixtures/setIdentity/addressBar.ts
 create mode 100644 packages/ui/cypress/tests/address-bar.cy.ts

diff --git a/packages/ui/cypress/fixtures/knownMultisigs.ts b/packages/ui/cypress/fixtures/knownMultisigs.ts
index 95877cfc..c07b2c22 100644
--- a/packages/ui/cypress/fixtures/knownMultisigs.ts
+++ b/packages/ui/cypress/fixtures/knownMultisigs.ts
@@ -4,6 +4,9 @@ export const knownMultisigs = {
   'test-multisig-1': {
     address: '5CmwqwwLEkEtsmB9gFaTJdCfurz33xyggHnvwHaGKtvmQNxq',
     threshold: 2,
-    signatories: [testAccounts['Test Account 1'].address, testAccounts['Test Account 2'].address]
+    signatories: [
+      testAccounts['Multisig Member Account 1'].address,
+      testAccounts['Multisig Member Account 2'].address
+    ]
   }
 }
diff --git a/packages/ui/cypress/fixtures/landingData.ts b/packages/ui/cypress/fixtures/landingData.ts
index 43c566d6..fae9f141 100644
--- a/packages/ui/cypress/fixtures/landingData.ts
+++ b/packages/ui/cypress/fixtures/landingData.ts
@@ -4,3 +4,5 @@ export const landingPageUrl = `${baseUrl}?${networkParams}`
 export const settingsPageUrl = `${baseUrl}/settings?${networkParams}`
 const WATCH_ACCOUNT_ANCHOR = 'watched-accounts'
 export const settingsPageWatchAccountUrl = `${settingsPageUrl}#${WATCH_ACCOUNT_ANCHOR}`
+export const landingPageAddressUrl = (address: string) =>
+  `${baseUrl}?${networkParams}&address=${address}`
diff --git a/packages/ui/cypress/fixtures/setIdentity/addressBar.ts b/packages/ui/cypress/fixtures/setIdentity/addressBar.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ui/cypress/fixtures/testAccounts.ts b/packages/ui/cypress/fixtures/testAccounts.ts
index 58eea27a..7f46ab3b 100644
--- a/packages/ui/cypress/fixtures/testAccounts.ts
+++ b/packages/ui/cypress/fixtures/testAccounts.ts
@@ -6,17 +6,17 @@ export interface InjectedAccountWitMnemonic extends InjectedAccount {
 }
 
 export const testAccounts = {
-  'Test Account 1': {
+  'Multisig Member Account 1': {
     address: '5H679cx9tkuHqyReUgBxeTqXKjVikVwLySDH1buiYuoqhi2w',
     publicKey: '0xde3ed24acdfe71c13b4d42539c5390ddee147ba6b29b0593ce842e77ff034445',
-    name: 'Test Account 1',
+    name: 'Multisig Member Account 1',
     type: 'sr25519',
     mnemonic: 'climb worth pioneer mushroom cloth expose tube high half final curtain toward'
   } as InjectedAccountWitMnemonic,
-  'Test Account 2': {
+  'Multisig Member Account 2': {
     address: '5GCXBrumiRDQ8KQsgbG39HdBNLQKt6XCQbeHZJccGdZbYTgt',
     publicKey: '0xb6e6fb4f2a2268bf6e8a211d958cbf602881418bcc533216cadfae3e24785f28',
-    name: 'Test Account 2',
+    name: 'Multisig Member Account 2',
     type: 'sr25519',
     mnemonic: 'divorce lottery slender again adapt process slow pigeon suit chase news begin'
   } as InjectedAccountWitMnemonic,
@@ -33,5 +33,12 @@ export const testAccounts = {
     name: 'Non Multisig Member 2',
     type: 'sr25519',
     mnemonic: 'erosion never fee pill vocal fetch enforce soap betray zero answer hollow'
+  } as InjectedAccountWitMnemonic,
+  'Many Multisig And Pure Member 1': {
+    address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+    publicKey: '0xd43593c715fdd31c61141abd04a99fd6822c8558854ccde39a5684e7a56da27d',
+    name: 'Many Multisig And Pure Member 1',
+    type: 'sr25519',
+    mnemonic: 'bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice'
   } as InjectedAccountWitMnemonic
 }
diff --git a/packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts b/packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts
index 8db4d0f8..2983720e 100644
--- a/packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts
+++ b/packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts
@@ -4,7 +4,8 @@ export const watchSignatories = [
     address: '5GGjPYsz8B8mxAzNScFNDPkZ1g97VWFCPCMexPSkPnibPBez',
     name: 'Pure Signatory 1',
     type: 'sr25519',
-    mnemonic: 'citizen heavy warrior cattle enter chef label split differ seek turtle gorilla'
+    mnemonic: 'citizen heavy warrior cattle enter chef label split differ seek turtle gorilla',
+    publickey: '0xba1d098e50bdca49f03b9f0c702a65762a04dfc5868ae1c3788a2bc1939dbf4b'
   },
   {
     address: '5E9XHcUfeDCL2HEvH8c8rcfroNDSzbLwhV5A1fq7J7RUwAkd',
diff --git a/packages/ui/cypress/support/Extension.ts b/packages/ui/cypress/support/Extension.ts
index 452f64a0..96f7fbce 100644
--- a/packages/ui/cypress/support/Extension.ts
+++ b/packages/ui/cypress/support/Extension.ts
@@ -4,6 +4,7 @@ import { InjectedAccountWitMnemonic } from '../fixtures/testAccounts'
 import { TypeRegistry } from '@polkadot/types'
 import { SignerPayloadJSON } from '@polkadot/types/types'
 import { cryptoWaitReady } from '@polkadot/util-crypto'
+import { SignerResult } from '@polkadot/api/types'
 
 export interface AuthRequest {
   id: number
@@ -29,6 +30,7 @@ export class Extension {
   accounts: InjectedAccountWitMnemonic[] = []
   txRequests: TxRequests = {}
   keyring: Keyring | undefined
+  allowedOrigins: Record<string, string[]> = {}
 
   reset = () => {
     this.authRequests = {}
@@ -51,6 +53,49 @@ export class Extension {
     return {
       'polkadot-js': {
         enable: (origin: string) => {
+          const resolvedObject = (selectedAccounts: InjectedAccountWitMnemonic[]) => ({
+            accounts: {
+              get: () => selectedAccounts,
+              subscribe: (cb: (accounts: InjectedAccountWitMnemonic[]) => void) =>
+                cb(selectedAccounts)
+            } as unknown as InjectedAccounts,
+            signer: {
+              signPayload: (payload: SignerPayloadJSON): Promise<SignerResult> => {
+                return new Promise<SignerResult>((resolve, reject) => {
+                  const id = Date.now()
+                  const res = () => {
+                    const registry = new TypeRegistry()
+                    registry.setSignedExtensions(payload.signedExtensions)
+                    const pair = this.keyring?.getPair(this.accounts[0].address)
+                    if (!pair) {
+                      console.error('Pair not found')
+                      return
+                    }
+                    const signature = registry
+                      .createType('ExtrinsicPayload', payload, {
+                        version: payload.version
+                      })
+                      .sign(pair)
+                    resolve({ id, signature: signature.signature })
+                  }
+
+                  const rej = (reason: string) => reject(new Error(reason))
+
+                  this.txRequests[id] = { id, payload, resolve: res, reject: rej }
+                })
+              }
+            }
+          })
+
+          // this app has already allowed some accounts
+          if (this.allowedOrigins[origin]?.length) {
+            console.log('Previously allowed origin', origin)
+            const res = resolvedObject(
+              this.accounts.filter(({ address }) => this.allowedOrigins[origin].includes(address))
+            )
+            return Promise.resolve(res)
+          }
+
           return new Promise<Injected>((resolve, reject) => {
             const timestamp = Date.now()
             const res = (accountAddresses: string[]) => {
@@ -58,39 +103,12 @@ export class Extension {
                 accountAddresses.includes(address)
               )
 
-              resolve({
-                accounts: {
-                  get: () => selectedAccounts,
-                  subscribe: (cb: (accounts: InjectedAccountWitMnemonic[]) => void) =>
-                    cb(selectedAccounts)
-                } as unknown as InjectedAccounts,
-                signer: {
-                  signPayload: (payload: SignerPayloadJSON) => {
-                    return new Promise((resolve, reject) => {
-                      const id = Date.now()
-                      const res = () => {
-                        const registry = new TypeRegistry()
-                        registry.setSignedExtensions(payload.signedExtensions)
-                        const pair = this.keyring?.getPair(this.accounts[0].address)
-                        if (!pair) {
-                          console.error('Pair not found')
-                          return
-                        }
-                        const signature = registry
-                          .createType('ExtrinsicPayload', payload, {
-                            version: payload.version
-                          })
-                          .sign(pair)
-                        resolve({ id, signature: signature.signature })
-                      }
-
-                      const rej = (reason: string) => reject(new Error(reason))
-
-                      this.txRequests[id] = { id, payload, resolve: res, reject: rej }
-                    })
-                  }
-                }
-              })
+              // store the allowed accounts for this orgin
+              this.allowedOrigins[origin] = accountAddresses
+              console.log('storing for future', origin, accountAddresses)
+
+              const res = resolvedObject(selectedAccounts)
+              resolve(res)
             }
 
             const rej = (reason: string) => reject(new Error(reason))
diff --git a/packages/ui/cypress/support/commands.ts b/packages/ui/cypress/support/commands.ts
index bd0db879..c764f0ea 100644
--- a/packages/ui/cypress/support/commands.ts
+++ b/packages/ui/cypress/support/commands.ts
@@ -45,7 +45,7 @@ const LOCALSTORAGE_WATCHED_ACCOUNTS_KEY = 'multix.watchedAccount'
 // }
 
 const extension = new Extension()
-const Account1 = testAccounts['Test Account 1'].address
+const Account1 = testAccounts['Multisig Member Account 1'].address
 
 Cypress.Commands.add('initExtension', (accounts: InjectedAccountWitMnemonic[]) => {
   cy.log('Initializing extension')
diff --git a/packages/ui/cypress/support/page-objects/landingPage.ts b/packages/ui/cypress/support/page-objects/landingPage.ts
index 32a880d1..e31d0762 100644
--- a/packages/ui/cypress/support/page-objects/landingPage.ts
+++ b/packages/ui/cypress/support/page-objects/landingPage.ts
@@ -11,6 +11,8 @@ export const landingPage = {
   rpcLoader: () => cy.get('[data-cy=loader-rpc-connection]'),
   polkadotWikiLink: () => cy.get('[data-cy=link-polkadot-wiki]'),
   noAccountFoundError: () => cy.get('[data-cy=label-no-account-found]', { timeout: 10000 }),
+  linkedAddressNotFound: () => cy.get('[data-cy=label-linked-address-not-found]'),
+  resetLinkedAddressButton: () => cy.get('[data-cy=button-reset-linked-address]'),
 
   // page specific assertion
   shouldHaveNoAccountErrorAndWikiLink() {
diff --git a/packages/ui/cypress/support/page-objects/topMenuItems.ts b/packages/ui/cypress/support/page-objects/topMenuItems.ts
index d8dbfa9c..ca893399 100644
--- a/packages/ui/cypress/support/page-objects/topMenuItems.ts
+++ b/packages/ui/cypress/support/page-objects/topMenuItems.ts
@@ -7,5 +7,9 @@ export const topMenuItems = {
   aboutButton: () => cy.get('[data-cy=button-navigate-about]'),
   connectButton: () => cy.get('[data-cy=button-menu-connect]'),
   multiproxySelector: () => cy.get('[data-cy=select-multiproxy]', { timeout: 20000 }),
-  multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]')
+  multiproxySelectorInput: () => cy.get('[data-cy=input-select-multiproxy]'),
+  multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]'),
+  networkSelector: () => cy.get('[data-cy=select-networks]'),
+  networkSelectorOption: (networkName: string) =>
+    cy.get(`[data-cy=select-network-option-${networkName}]`)
 }
diff --git a/packages/ui/cypress/tests/address-bar.cy.ts b/packages/ui/cypress/tests/address-bar.cy.ts
new file mode 100644
index 00000000..30714df6
--- /dev/null
+++ b/packages/ui/cypress/tests/address-bar.cy.ts
@@ -0,0 +1,260 @@
+import { knownMultisigs } from '../fixtures/knownMultisigs'
+import { landingPageAddressUrl, landingPageUrl } from '../fixtures/landingData'
+import { InjectedAccountWitMnemonic, testAccounts } from '../fixtures/testAccounts'
+import { watchMultisigs } from '../fixtures/watchAccounts/watchMultisigs'
+import { watchSignatories } from '../fixtures/watchAccounts/watchSignatories'
+import { accountDisplay } from '../support/page-objects/components/accountDisplay'
+import { landingPage } from '../support/page-objects/landingPage'
+import { multisigPage } from '../support/page-objects/multisigPage'
+import { topMenuItems } from '../support/page-objects/topMenuItems'
+import { clickOnConnect } from '../utils/clickOnConnect'
+
+const initConnectAndRefreshWithAddress = (
+  initAccounts: InjectedAccountWitMnemonic[],
+  connectedAddresses: string[],
+  addressUrl?: string
+) => {
+  cy.visit(landingPageUrl)
+  cy.initExtension(Object.values(initAccounts))
+  clickOnConnect()
+  cy.connectAccounts(connectedAddresses)
+
+  //refresh the page now that the extension is allowed to connect
+  cy.visit(addressUrl ? landingPageAddressUrl(addressUrl) : landingPageUrl)
+  // inject the extension
+  cy.initExtension(initAccounts)
+}
+
+describe('Account address in the address bar', () => {
+  it('shows multi and update address with 1 watched (multi), 0 connected account, no linked address', () => {
+    const { address, publicKey } = watchMultisigs['multisig-without-pure']
+
+    // we have a watched account that is a multisig
+    cy.visitWithLocalStorage({
+      // any account
+      url: landingPageUrl,
+      watchedAccounts: [publicKey]
+    })
+
+    cy.url().should('include', address)
+    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+    })
+  })
+
+  it('shows multi and update address with 0 watched, 1 connected account (multi), no linked address', () => {
+    const { address } = knownMultisigs['test-multisig-1']
+
+    initConnectAndRefreshWithAddress(
+      [testAccounts['Multisig Member Account 1']],
+      [testAccounts['Multisig Member Account 1'].address],
+      undefined
+    )
+
+    cy.url().should('include', address)
+    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+    })
+  })
+
+  it('shows an error with 0 watched, 0 connected account, unknown linked address', () => {
+    cy.visit(landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address))
+    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    topMenuItems.multiproxySelector().should('not.exist')
+  })
+
+  it('shows an error and can reset with 1 watched (multi), 0 connected account, unknown linked address', () => {
+    const { publicKey, address: multisigAddress } = watchMultisigs['multisig-without-pure']
+
+    // we have a watched account that is a multisig
+    cy.visitWithLocalStorage({
+      // any account
+      url: landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address),
+      watchedAccounts: [publicKey]
+    })
+
+    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
+    topMenuItems.multiproxySelector().should('be.visible')
+    topMenuItems.multiproxySelectorInput().should('have.value', '')
+
+    // click reset leads to the multisig
+    landingPage.resetLinkedAddressButton().click()
+    cy.url().should('not.include', testAccounts['Non Multisig Member 1'].address)
+    cy.url().should('include', multisigAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', multisigAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', multisigAddress.slice(0, 6))
+    })
+  })
+
+  it('shows an error and can reset  with 1 watched (pure), 0 connected account, unknown linked address', () => {
+    const { purePublicKey, pureAddress } = watchMultisigs['multisig-with-pure']
+
+    // we have a watched account that is a pure
+    cy.visitWithLocalStorage({
+      // unknown account in the url
+      url: landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address),
+      watchedAccounts: [purePublicKey]
+    })
+    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
+    topMenuItems.multiproxySelector().should('be.visible')
+    topMenuItems.multiproxySelectorInput().should('have.value', '')
+
+    // click reset leads to the pure
+    landingPage.resetLinkedAddressButton().click()
+    cy.url().should('not.include', testAccounts['Non Multisig Member 1'].address)
+    cy.url().should('include', pureAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
+    })
+  })
+
+  it('shows an error and can reset  with 0 watched, 1 connected account (multi), unknown linked address', () => {
+    const { address } = knownMultisigs['test-multisig-1']
+    const nonMulitisigAccountAddress = testAccounts['Non Multisig Member 1'].address
+
+    initConnectAndRefreshWithAddress(
+      [testAccounts['Multisig Member Account 1']],
+      [testAccounts['Multisig Member Account 1'].address],
+      nonMulitisigAccountAddress
+    )
+    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    cy.url().should('include', nonMulitisigAccountAddress)
+    topMenuItems.multiproxySelector().should('be.visible')
+    topMenuItems.multiproxySelectorInput().should('have.value', '')
+
+    // click reset leads to the multi
+    landingPage.resetLinkedAddressButton().click()
+    cy.url().should('not.include', nonMulitisigAccountAddress)
+    cy.url().should('include', address)
+    topMenuItems.multiproxySelectorInput().should('have.value', address)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+    })
+  })
+
+  it('shows the pure with 1 watched (pure), 0 connected account, pure linked address', () => {
+    const { purePublicKey, pureAddress } = watchMultisigs['multisig-with-pure']
+
+    // we have a watched account that is a pure
+    cy.visitWithLocalStorage({
+      url: landingPageAddressUrl(pureAddress),
+      watchedAccounts: [purePublicKey]
+    })
+
+    cy.url().should('include', pureAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
+    })
+  })
+
+  it('shows the pure with 1 watched (multi), 0 connected account, pure linked address', () => {
+    const { publicKey, pureAddress } = watchMultisigs['multisig-with-pure']
+
+    // we have a watched account that is a pure
+    cy.visitWithLocalStorage({
+      url: landingPageAddressUrl(pureAddress),
+      // here is the difference compared to previous test
+      watchedAccounts: [publicKey]
+    })
+
+    cy.url().should('include', pureAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
+    })
+  })
+
+  it('shows the pure with 1 watched (signatory pure), 0 connected account, pure linked address', () => {
+    const { pureAddress } = watchMultisigs['multisig-with-pure']
+    const { publickey: signatoryPublicKey } = watchSignatories[0]
+
+    // we have a watched account that is a pure
+    cy.visitWithLocalStorage({
+      url: landingPageAddressUrl(pureAddress),
+      // here is the difference compared to previous test
+      watchedAccounts: [signatoryPublicKey!]
+    })
+
+    cy.url().should('include', pureAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', pureAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', pureAddress.slice(0, 6))
+    })
+  })
+
+  it('shows a pure with 0 watched, 1 connected account (many multi & pure), pure linked address', () => {
+    const expectedPureAddress = '5EXePPDNnucmLgrirMPQatFfu4WjncVbVoDZXx1gq75e3JcF'
+    initConnectAndRefreshWithAddress(
+      [testAccounts['Many Multisig And Pure Member 1']],
+      [testAccounts['Many Multisig And Pure Member 1'].address],
+      expectedPureAddress
+    )
+    cy.url().should('include', expectedPureAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', expectedPureAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', expectedPureAddress.slice(0, 6))
+    })
+  })
+
+  it('shows a multi with 0 watched, 1 connected account (many multi & pure), multi linked address', () => {
+    const expectedMultiAddress = '5DxNgjvfJLfDTAAgFD1kWtJAh2KVNTTkwytr7S37dZwVpXd7'
+    initConnectAndRefreshWithAddress(
+      [testAccounts['Many Multisig And Pure Member 1']],
+      [testAccounts['Many Multisig And Pure Member 1'].address],
+      expectedMultiAddress
+    )
+    cy.url().should('include', expectedMultiAddress)
+    topMenuItems.multiproxySelectorInput().should('have.value', expectedMultiAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', expectedMultiAddress.slice(0, 6))
+    })
+  })
+
+  it('switching accounts changes the address in the address bar', () => {
+    const expectedPureAddress = '5EXePPDNnucmLgrirMPQatFfu4WjncVbVoDZXx1gq75e3JcF'
+    const multiAddress = '5DxNgjvfJLfDTAAgFD1kWtJAh2KVNTTkwytr7S37dZwVpXd7'
+    const first6Letters = multiAddress.slice(0, 6)
+
+    cy.visitWithLocalStorage({
+      url: landingPageAddressUrl(expectedPureAddress),
+      watchedAccounts: [testAccounts['Many Multisig And Pure Member 1'].publicKey!]
+    })
+
+    // check that there is the pure address in the address bar
+    cy.url().should('include', expectedPureAddress)
+    topMenuItems
+      .desktopMenu()
+      .within(() =>
+        topMenuItems.multiproxySelector().click().type(`${first6Letters}{downArrow}{enter}`)
+      )
+    cy.url().should('include', multiAddress)
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', multiAddress.slice(0, 6))
+    })
+  })
+
+  it('switching networks resets address in the address bar', () => {
+    const { address, publicKey } = watchMultisigs['multisig-without-pure']
+
+    // we have a watched account that is a multisig
+    cy.visitWithLocalStorage({
+      // any account
+      url: landingPageUrl,
+      watchedAccounts: [publicKey]
+    })
+
+    // check that there is an address in the address bar
+    cy.url().should('include', address)
+
+    topMenuItems.desktopMenu().within(() => topMenuItems.networkSelector().click())
+    topMenuItems.networkSelectorOption('kusama').click()
+    cy.url().should('not.include', 'address=')
+  })
+})
diff --git a/packages/ui/cypress/tests/landing-messaging.cy.ts b/packages/ui/cypress/tests/landing-messaging.cy.ts
index 45d75ff6..bd911874 100644
--- a/packages/ui/cypress/tests/landing-messaging.cy.ts
+++ b/packages/ui/cypress/tests/landing-messaging.cy.ts
@@ -23,7 +23,7 @@ describe('Landing Page Messaging', () => {
 
   it('can see an error when extension is connected but no account is shared', () => {
     cy.visit(landingPageUrl)
-    cy.initExtension([testAccounts['Test Account 1']])
+    cy.initExtension([testAccounts['Multisig Member Account 1']])
     clickOnConnect()
     // don't connect any of the initialized accounts
     cy.connectAccounts([])
diff --git a/packages/ui/cypress/tests/login.cy.ts b/packages/ui/cypress/tests/login.cy.ts
index 922f436d..f1d4bc30 100644
--- a/packages/ui/cypress/tests/login.cy.ts
+++ b/packages/ui/cypress/tests/login.cy.ts
@@ -33,8 +33,8 @@ describe('Connect Account', () => {
   })
 
   it('Connect Accounts', () => {
-    const address1 = testAccounts['Test Account 1'].address
-    const address2 = testAccounts['Test Account 2'].address
+    const address1 = testAccounts['Multisig Member Account 1'].address
+    const address2 = testAccounts['Multisig Member Account 2'].address
 
     cy.connectAccounts([address1, address2])
 
diff --git a/packages/ui/cypress/tests/transactions.cy.ts b/packages/ui/cypress/tests/transactions.cy.ts
index 39eb13db..726c1104 100644
--- a/packages/ui/cypress/tests/transactions.cy.ts
+++ b/packages/ui/cypress/tests/transactions.cy.ts
@@ -7,7 +7,7 @@ import { sendTxModal } from '../support/page-objects/sendTxModal'
 import { clickOnConnect } from '../utils/clickOnConnect'
 import { waitForTxRequest } from '../utils/waitForTxRequests'
 
-const testAccount1Address = testAccounts['Test Account 1'].address
+const testAccount1Address = testAccounts['Multisig Member Account 1'].address
 
 const fillAndSubmitTransactionForm = () => {
   sendTxModal.sendTokensFieldTo().click().type(`${testAccount1Address}{enter}`)
@@ -23,7 +23,7 @@ describe('Perform transactions', () => {
     cy.connectAccounts([testAccount1Address])
   })
 
-  it('Abort a tx with Alice', () => {
+  it('Abort a multisig tx', () => {
     multisigPage.newTransactionButton().click()
     sendTxModal.sendTxTitle().should('be.visible')
     fillAndSubmitTransactionForm()
@@ -41,9 +41,9 @@ describe('Perform transactions', () => {
     })
   })
 
-  it('Makes a balance transfer with Alice', () => {
+  it('Makes a balance transfer multisig tx', () => {
     cy.rejectCurrentMultisigTx({
-      account: testAccounts['Test Account 1'],
+      account: testAccounts['Multisig Member Account 1'],
       multisigInfo: {
         address: knownMultisigs['test-multisig-1'].address,
         threshold: knownMultisigs['test-multisig-1'].threshold,
diff --git a/packages/ui/cypress/tests/watched-accounts.cy.ts b/packages/ui/cypress/tests/watched-accounts.cy.ts
index 345ab260..72be1eef 100644
--- a/packages/ui/cypress/tests/watched-accounts.cy.ts
+++ b/packages/ui/cypress/tests/watched-accounts.cy.ts
@@ -22,7 +22,8 @@ const addWatchAccount = (address: string, name?: string) => {
   settingsPage.addButton().click()
 }
 
-const { name: testAccountName, address: testAccountAddress } = testAccounts['Test Account 1']
+const { name: testAccountName, address: testAccountAddress } =
+  testAccounts['Multisig Member Account 1']
 
 describe('Watched Accounts', () => {
   it('can add an account to the watch list', () => {
diff --git a/packages/ui/src/components/select/MultiProxySelection.tsx b/packages/ui/src/components/select/MultiProxySelection.tsx
index d4dc26d6..bb0c7e63 100644
--- a/packages/ui/src/components/select/MultiProxySelection.tsx
+++ b/packages/ui/src/components/select/MultiProxySelection.tsx
@@ -121,6 +121,7 @@ const MultiProxySelection = ({ className }: Props) => {
           </InputAdornment>
         )
       }}
+      inputProps={{ ...params.inputProps, 'data-cy': 'input-select-multiproxy' }}
       onKeyDown={handleSpecialKeys}
     />
   )
diff --git a/packages/ui/src/components/select/NetworkSelection.tsx b/packages/ui/src/components/select/NetworkSelection.tsx
index 84ff08d6..27ef87cd 100644
--- a/packages/ui/src/components/select/NetworkSelection.tsx
+++ b/packages/ui/src/components/select/NetworkSelection.tsx
@@ -41,6 +41,7 @@ const NetworkSelection = () => {
           <MenuItemStyled
             key={networkName}
             value={networkName}
+            data-cy={`select-network-option-${networkName}`}
           >
             <ImgStyled
               alt={`network-logo-${networkName}`}
@@ -63,6 +64,7 @@ const NetworkSelection = () => {
       autoWidth={true}
       onChange={handleNetworkSelection}
       MenuProps={MenuPropsStyles}
+      data-cy={`select-networks`}
     >
       <ListSubheader>Polkadot & Parachains</ListSubheader>
       {renderNetworks(polkadotNetworksAndParachains)}
diff --git a/packages/ui/src/hooks/useDisplayError.tsx b/packages/ui/src/hooks/useDisplayError.tsx
index 6db13993..24267fae 100644
--- a/packages/ui/src/hooks/useDisplayError.tsx
+++ b/packages/ui/src/hooks/useDisplayError.tsx
@@ -60,6 +60,7 @@ export const useDisplayError = () => {
             The linked address can't be found in your accounts or watched accounts.
           </div>
           <Button
+            data-cy="button-reset-linked-address"
             onClick={() =>
               setSearchParams((prev) => {
                 prev.delete('address')

From 4480658b52198b881d4f40e9a887abd10f2d06d6 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 6 Nov 2023 14:44:09 +0000
Subject: [PATCH 09/15] some more with fixed

---
 .../fixtures/setIdentity/addressBar.ts        |  0
 packages/ui/cypress/support/Extension.ts      |  1 +
 packages/ui/cypress/support/commands.ts       | 26 ++++++++++++++--
 packages/ui/cypress/tests/address-bar.cy.ts   | 31 ++++++++++++++++---
 4 files changed, 50 insertions(+), 8 deletions(-)
 delete mode 100644 packages/ui/cypress/fixtures/setIdentity/addressBar.ts

diff --git a/packages/ui/cypress/fixtures/setIdentity/addressBar.ts b/packages/ui/cypress/fixtures/setIdentity/addressBar.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/ui/cypress/support/Extension.ts b/packages/ui/cypress/support/Extension.ts
index 96f7fbce..f92a64d7 100644
--- a/packages/ui/cypress/support/Extension.ts
+++ b/packages/ui/cypress/support/Extension.ts
@@ -37,6 +37,7 @@ export class Extension {
     this.accounts = []
     this.txRequests = {}
     this.keyring = undefined
+    this.allowedOrigins = {}
   }
 
   init = async (accounts: InjectedAccountWitMnemonic[]) => {
diff --git a/packages/ui/cypress/support/commands.ts b/packages/ui/cypress/support/commands.ts
index c764f0ea..1f4ae392 100644
--- a/packages/ui/cypress/support/commands.ts
+++ b/packages/ui/cypress/support/commands.ts
@@ -47,14 +47,27 @@ const LOCALSTORAGE_WATCHED_ACCOUNTS_KEY = 'multix.watchedAccount'
 const extension = new Extension()
 const Account1 = testAccounts['Multisig Member Account 1'].address
 
+const injectExtension = (win: Cypress.AUTWindow, extension: Extension) => {
+  Object.defineProperty(win, 'injectedWeb3', {
+    get: () => extension.getInjectedEnable()
+  })
+}
 Cypress.Commands.add('initExtension', (accounts: InjectedAccountWitMnemonic[]) => {
   cy.log('Initializing extension')
   cy.wrap(extension.init(accounts))
 
   return cy.window().then((win) => {
-    Object.defineProperty(win, 'injectedWeb3', {
-      get: () => extension.getInjectedEnable()
-    })
+    injectExtension(win, extension)
+  })
+})
+
+Cypress.Commands.add('visitWithInjectedExtension', (url: string) => {
+  cy.log('Extension enabled')
+
+  return cy.visit(url, {
+    onLoad(win) {
+      injectExtension(win, extension)
+    }
   })
 })
 
@@ -129,6 +142,13 @@ declare global {
        */
       initExtension: (accounts: InjectedAccountWitMnemonic[]) => Chainable<AUTWindow>
 
+      /**
+       * Visit a page with extension injected. It needs to be initialized first.
+       * @param {string} url - Page to visit.
+       * @example cy.visitWithInjectedExtension('http://localhost:3333')
+       */
+      visitWithInjectedExtension: (url: string) => Chainable<AUTWindow>
+
       /**
        * Read the authentication request queue.
        * @example cy.getAuthRequests().then((authQueue) => { cy.wrap(Object.values(authQueue).length).should("eq", 1) })
diff --git a/packages/ui/cypress/tests/address-bar.cy.ts b/packages/ui/cypress/tests/address-bar.cy.ts
index 30714df6..6ee7513a 100644
--- a/packages/ui/cypress/tests/address-bar.cy.ts
+++ b/packages/ui/cypress/tests/address-bar.cy.ts
@@ -20,9 +20,7 @@ const initConnectAndRefreshWithAddress = (
   cy.connectAccounts(connectedAddresses)
 
   //refresh the page now that the extension is allowed to connect
-  cy.visit(addressUrl ? landingPageAddressUrl(addressUrl) : landingPageUrl)
-  // inject the extension
-  cy.initExtension(initAccounts)
+  cy.visitWithInjectedExtension(addressUrl ? landingPageAddressUrl(addressUrl) : landingPageUrl)
 }
 
 describe('Account address in the address bar', () => {
@@ -90,7 +88,7 @@ describe('Account address in the address bar', () => {
     })
   })
 
-  it('shows an error and can reset  with 1 watched (pure), 0 connected account, unknown linked address', () => {
+  it('shows an error and can reset with 1 watched (pure), 0 connected account, unknown linked address', () => {
     const { purePublicKey, pureAddress } = watchMultisigs['multisig-with-pure']
 
     // we have a watched account that is a pure
@@ -114,7 +112,7 @@ describe('Account address in the address bar', () => {
     })
   })
 
-  it('shows an error and can reset  with 0 watched, 1 connected account (multi), unknown linked address', () => {
+  it('shows an error and can reset with 0 watched, 1 connected account (multi), unknown linked address', () => {
     const { address } = knownMultisigs['test-multisig-1']
     const nonMulitisigAccountAddress = testAccounts['Non Multisig Member 1'].address
 
@@ -257,4 +255,27 @@ describe('Account address in the address bar', () => {
     topMenuItems.networkSelectorOption('kusama').click()
     cy.url().should('not.include', 'address=')
   })
+
+  it('navigating to home, settings, about, overview does not change the address bar', () => {
+    const { address, publicKey } = watchMultisigs['multisig-without-pure']
+
+    // we have a watched account that is a multisig
+    cy.visitWithLocalStorage({
+      // any account
+      url: landingPageUrl,
+      watchedAccounts: [publicKey]
+    })
+
+    // check that there is an address in the address bar
+    cy.url().should('include', address)
+
+    topMenuItems.homeButton().click()
+    cy.url().should('include', address)
+    topMenuItems.settingsButton().click()
+    cy.url().should('include', address)
+    topMenuItems.overviewButton().click()
+    cy.url().should('include', address)
+    topMenuItems.aboutButton().click()
+    cy.url().should('include', address)
+  })
 })

From 5f4ba739e83c25f0f19cabdee7c0b3bda4ceaebc Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 6 Nov 2023 15:05:19 +0000
Subject: [PATCH 10/15] cleanup

---
 packages/ui/cypress/support/Extension.ts       |  5 ++---
 packages/ui/src/contexts/MultiProxyContext.tsx | 11 ++---------
 packages/ui/src/pages/Creation/index.tsx       |  7 -------
 3 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/ui/cypress/support/Extension.ts b/packages/ui/cypress/support/Extension.ts
index f92a64d7..a3299168 100644
--- a/packages/ui/cypress/support/Extension.ts
+++ b/packages/ui/cypress/support/Extension.ts
@@ -88,9 +88,9 @@ export class Extension {
             }
           })
 
-          // this app has already allowed some accounts
+          // this origin has already allowed some accounts
           if (this.allowedOrigins[origin]?.length) {
-            console.log('Previously allowed origin', origin)
+            // return the list of accounts
             const res = resolvedObject(
               this.accounts.filter(({ address }) => this.allowedOrigins[origin].includes(address))
             )
@@ -106,7 +106,6 @@ export class Extension {
 
               // store the allowed accounts for this orgin
               this.allowedOrigins[origin] = accountAddresses
-              console.log('storing for future', origin, accountAddresses)
 
               const res = resolvedObject(selectedAccounts)
               resolve(res)
diff --git a/packages/ui/src/contexts/MultiProxyContext.tsx b/packages/ui/src/contexts/MultiProxyContext.tsx
index 34c500d5..5c6581ed 100644
--- a/packages/ui/src/contexts/MultiProxyContext.tsx
+++ b/packages/ui/src/contexts/MultiProxyContext.tsx
@@ -61,9 +61,11 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
   const [canFindMultiProxyFromUrl, setCanFindMultiProxyFromUrl] = useState(false)
   const [selectedMultiProxy, setSelectedMultiProxy] =
     useState<IMultisigContext['selectedMultiProxy']>(undefined)
+  // if set to null, it means that is hasn't been initialized yet
   const [pureProxyList, setPureProxyList] = useState<IMultisigContext['multiProxyList'] | null>(
     null
   )
+  // if set to null, it means that is hasn't been initialized yet
   const [multisigList, setMultisigList] = useState<IMultisigContext['multiProxyList'] | null>(null)
   const [pureToQuery, setPureToQuery] = useState<string[]>([])
   const multiProxyList = useMemo(() => {
@@ -294,15 +296,6 @@ const MultiProxyContextProvider = ({ children }: MultisigContextProps) => {
     [getMultiProxyByAddress, setAddress]
   )
 
-  // useEffect(() => {
-  //   if (multiProxyList.length > 0 && !selectedMultiProxy) {
-  //     const multiAddress = localStorage.getItem(LOCALSTORAGE_KEY)
-  //     const previouslySelected = multiAddress && getMultiProxyByAddress(multiAddress)
-
-  //     setSelectedMultiProxy(previouslySelected || multiProxyList[0])
-  //   }
-  // }, [getMultiProxyByAddress, multiProxyList, selectedMultiProxy])
-
   const refetch = useCallback(() => {
     refetchMultisigSub()
     refetchPureSub()
diff --git a/packages/ui/src/pages/Creation/index.tsx b/packages/ui/src/pages/Creation/index.tsx
index 527cb7b7..d844f3ed 100644
--- a/packages/ui/src/pages/Creation/index.tsx
+++ b/packages/ui/src/pages/Creation/index.tsx
@@ -47,13 +47,6 @@ const MultisigCreation = ({ className }: Props) => {
       })
     }
   })
-  console.log(
-    'createSearchParam',
-    createSearchParams({
-      ...searchParams,
-      creationInProgress: 'true'
-    }).toString()
-  )
   const { getSortAddress } = useGetSortAddress()
   const { addToast } = useToasts()
   const [name, setName] = useState('')

From 232d6fed11fb04784a3d50ef7f8acc1d11ca2c3f Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 6 Nov 2023 15:27:22 +0000
Subject: [PATCH 11/15] take your time

---
 packages/ui/cypress/support/page-objects/topMenuItems.ts | 2 +-
 packages/ui/cypress/tests/address-bar.cy.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/cypress/support/page-objects/topMenuItems.ts b/packages/ui/cypress/support/page-objects/topMenuItems.ts
index ca893399..8576b3a8 100644
--- a/packages/ui/cypress/support/page-objects/topMenuItems.ts
+++ b/packages/ui/cypress/support/page-objects/topMenuItems.ts
@@ -7,7 +7,7 @@ export const topMenuItems = {
   aboutButton: () => cy.get('[data-cy=button-navigate-about]'),
   connectButton: () => cy.get('[data-cy=button-menu-connect]'),
   multiproxySelector: () => cy.get('[data-cy=select-multiproxy]', { timeout: 20000 }),
-  multiproxySelectorInput: () => cy.get('[data-cy=input-select-multiproxy]'),
+  multiproxySelectorInput: () => cy.get('[data-cy=input-select-multiproxy]', { timeout: 10000 }),
   multiproxySelectorOption: () => cy.get('[data-cy=select-multiproxy-option]'),
   networkSelector: () => cy.get('[data-cy=select-networks]'),
   networkSelectorOption: (networkName: string) =>
diff --git a/packages/ui/cypress/tests/address-bar.cy.ts b/packages/ui/cypress/tests/address-bar.cy.ts
index 6ee7513a..806767d0 100644
--- a/packages/ui/cypress/tests/address-bar.cy.ts
+++ b/packages/ui/cypress/tests/address-bar.cy.ts
@@ -209,10 +209,10 @@ describe('Account address in the address bar', () => {
       expectedMultiAddress
     )
     cy.url().should('include', expectedMultiAddress)
-    topMenuItems.multiproxySelectorInput().should('have.value', expectedMultiAddress)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', expectedMultiAddress.slice(0, 6))
     })
+    topMenuItems.multiproxySelectorInput().should('have.value', expectedMultiAddress)
   })
 
   it('switching accounts changes the address in the address bar', () => {

From 0e288c38b0ee6335b89bf466d00e1b4e5caa90e4 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 6 Nov 2023 18:35:46 +0000
Subject: [PATCH 12/15] take your time bis

---
 packages/ui/cypress/tests/address-bar.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/cypress/tests/address-bar.cy.ts b/packages/ui/cypress/tests/address-bar.cy.ts
index 806767d0..48e295c3 100644
--- a/packages/ui/cypress/tests/address-bar.cy.ts
+++ b/packages/ui/cypress/tests/address-bar.cy.ts
@@ -34,7 +34,7 @@ describe('Account address in the address bar', () => {
       watchedAccounts: [publicKey]
     })
 
-    cy.url().should('include', address)
+    cy.url({ timeout: 10000 }).should('include', address)
     topMenuItems.multiproxySelectorInput().should('have.value', address)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
@@ -50,7 +50,7 @@ describe('Account address in the address bar', () => {
       undefined
     )
 
-    cy.url().should('include', address)
+    cy.url({ timeout: 10000 }).should('include', address)
     topMenuItems.multiproxySelectorInput().should('have.value', address)
     multisigPage.accountHeader().within(() => {
       accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))

From 4750fa8281a3de53fedf61e4b74d90222a365f61 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 9 Nov 2023 13:07:06 +0000
Subject: [PATCH 13/15] consolidate usePendinTx hook

---
 .../Transactions/TransactionList.tsx          | 194 +---------------
 packages/ui/src/hooks/usePendingTx.tsx        | 207 ++++++++++++++++--
 2 files changed, 198 insertions(+), 203 deletions(-)

diff --git a/packages/ui/src/components/Transactions/TransactionList.tsx b/packages/ui/src/components/Transactions/TransactionList.tsx
index e5f412e2..f39b2feb 100644
--- a/packages/ui/src/components/Transactions/TransactionList.tsx
+++ b/packages/ui/src/components/Transactions/TransactionList.tsx
@@ -1,195 +1,21 @@
 import { Box, CircularProgress, Paper } from '@mui/material'
-import { useEffect, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { PendingTx, usePendingTx } from '../../hooks/usePendingTx'
+import { usePendingTx } from '../../hooks/usePendingTx'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
-import { ApiPromise } from '@polkadot/api'
-import { useApi } from '../../contexts/ApiContext'
-import { getDifference, getDisplayArgs, getIntersection, isProxyCall } from '../../utils'
+import { getDifference, getIntersection } from '../../utils'
 import { useAccounts } from '../../contexts/AccountsContext'
-import { ISanitizedCall, parseGenericCall } from '../../utils'
-import { GenericCall } from '@polkadot/types'
-import { AnyJson, AnyTuple } from '@polkadot/types/types'
 import { MdOutlineFlare as FlareIcon } from 'react-icons/md'
 import Transaction from './Transaction'
-import { HexString } from '../../types'
-import dayjs from 'dayjs'
-import localizedFormat from 'dayjs/plugin/localizedFormat'
-dayjs.extend(localizedFormat)
-
-export interface AggregatedData {
-  callData?: HexString
-  hash?: string
-  name?: string
-  args?: AnyJson
-  info?: PendingTx['info']
-  from: string
-  timestamp: Date | undefined
-}
-
-type AggGroupedByDate = { [index: string]: AggregatedData[] }
-
-const sortByLatest = (a: AggregatedData, b: AggregatedData) => {
-  if (!a.timestamp || !b.timestamp) return 0
-
-  return b.timestamp.valueOf() - a.timestamp.valueOf()
-}
 
 interface Props {
   className?: string
 }
 
-export const getMultisigInfo = (c: ISanitizedCall): Partial<AggregatedData>[] => {
-  const result: Partial<AggregatedData>[] = []
-
-  const getCallResult = (c: ISanitizedCall) => {
-    if (typeof c.method !== 'string' && c.method.pallet === 'multisig') {
-      if (c.method.method === 'asMulti' && typeof c.args.call?.method !== 'string') {
-        result.push({
-          name: `${c.args.call?.method?.pallet}.${c.args.call?.method.method}`,
-          hash: c.args.call?.hash,
-          callData: c.args.callData as AggregatedData['callData']
-        })
-      } else {
-        result.push({
-          name: 'Unknown call',
-          hash: (c.args?.call_hash as Uint8Array).toString() || undefined,
-          callData: undefined
-        })
-      }
-      // this is not a multisig call
-      // try to dig deeper
-    } else {
-      if (c.args.calls) {
-        for (const call of c.args.calls) {
-          getCallResult(call)
-        }
-      } else if (c.args.call) {
-        getCallResult(c.args.call)
-      }
-    }
-  }
-
-  getCallResult(c)
-  return result
-}
-
-const getAgregatedDataPromise = (pendingTxData: PendingTx[], api: ApiPromise) =>
-  pendingTxData.map(async (pendingTx) => {
-    const blockHash = await api.rpc.chain.getBlockHash(pendingTx.info.when.height)
-    const signedBlock = await api.rpc.chain.getBlock(blockHash)
-
-    let date: Date | undefined
-
-    // get the timestamp which is an unsigned extrinsic set by the validator in each block
-    // the information for each of the contained extrinsics
-    signedBlock.block.extrinsics.some(({ method: { args, method, section } }) => {
-      // check for timestamp.set
-      if (section === 'timestamp' && method === 'set') {
-        // extract the Option<Moment> as Moment
-        const moment = args.toString()
-
-        // convert to date (unix ms since epoch in Moment - exactly as per the Rust code)
-        date = new Date(Number(moment))
-        return true
-      }
-
-      return false
-    })
-
-    const ext = signedBlock.block.extrinsics[pendingTx.info.when.index]
-
-    const decoded = parseGenericCall(ext.method as GenericCall, ext.registry)
-    // console.log('pendingTxData', pendingTxData)
-    // console.log('decoded', decoded)
-    const multisigInfos = getMultisigInfo(decoded) || {}
-
-    const info = multisigInfos.find(({ name, hash, callData }) => {
-      if (!!hash && hash === pendingTx.hash) {
-        return { name, hash, callData }
-      }
-
-      return false
-    })
-
-    if (!info) {
-      console.log('oops we didnot find the right extrinsic', multisigInfos, pendingTx.hash)
-      return
-    }
-
-    const { name, hash, callData } = info
-
-    let call: false | GenericCall<AnyTuple> = false
-    try {
-      call = !!callData && !!hash && ext.registry.createType('Call', callData)
-    } catch (error) {
-      console.error('Error in TransactionList')
-      console.error(error)
-    }
-
-    return {
-      callData,
-      hash: hash || pendingTx.hash,
-      name,
-      args: getDisplayArgs(call),
-      info: pendingTx.info,
-      from: pendingTx.from,
-      timestamp: date
-    } as AggregatedData
-  })
-
 const TransactionList = ({ className }: Props) => {
-  const [aggregatedData, setAggregatedData] = useState<AggGroupedByDate>({})
-  const { selectedMultiProxy, getMultisigByAddress } = useMultiProxy()
-  const {
-    data: pendingTxData,
-    isLoading: isLoadingPendingTxs,
-    refresh
-  } = usePendingTx(selectedMultiProxy)
-  const { api } = useApi()
+  const { getMultisigByAddress } = useMultiProxy()
+  const { txWithCallDataByDate, isLoading: isLoadingPendingTxs, refresh } = usePendingTx()
   const { ownAddressList } = useAccounts()
 
-  useEffect(() => {
-    if (!api) {
-      return
-    }
-
-    if (!pendingTxData || !pendingTxData.length) {
-      setAggregatedData({})
-      return
-    }
-
-    const agregatedDataPromise = getAgregatedDataPromise(pendingTxData, api)
-
-    Promise.all(agregatedDataPromise)
-      .then((res) => {
-        const definedTxs = res.filter((agg) => agg !== undefined) as AggregatedData[]
-        const timestampObj: AggGroupedByDate = {}
-
-        // remove the proxy transaction that aren't for the selected proxy
-        const relevantTxs = definedTxs.filter((agg) => {
-          if (!isProxyCall(agg.name) || !agg?.args || !(agg.args as any).real.Id) {
-            return true
-          }
-
-          return (agg.args as any).real.Id === selectedMultiProxy?.proxy
-        })
-
-        // sort by date, the newest first
-        const sorted = relevantTxs.sort(sortByLatest)
-
-        // populate the object
-        sorted.forEach((data) => {
-          const date = dayjs(data.timestamp).format('LL')
-          const previousData = timestampObj[date] || []
-          timestampObj[date] = [...previousData, data]
-        })
-
-        setAggregatedData(timestampObj)
-      })
-      .catch(console.error)
-  }, [aggregatedData.args, api, pendingTxData, selectedMultiProxy])
-
   return (
     <Box className={className}>
       {isLoadingPendingTxs && (
@@ -197,7 +23,7 @@ const TransactionList = ({ className }: Props) => {
           <CircularProgress />
         </Box>
       )}
-      {Object.entries(aggregatedData).length === 0 && !isLoadingPendingTxs && (
+      {Object.entries(txWithCallDataByDate).length === 0 && !isLoadingPendingTxs && (
         <Paper className="noCall">
           <FlareIcon
             size={24}
@@ -206,8 +32,8 @@ const TransactionList = ({ className }: Props) => {
           <div className="noCallText">You're all set!</div>
         </Paper>
       )}
-      {Object.entries(aggregatedData).length !== 0 &&
-        Object.entries(aggregatedData).map(([date, aggregatedData]) => {
+      {Object.entries(txWithCallDataByDate).length !== 0 &&
+        Object.entries(txWithCallDataByDate).map(([date, aggregatedData]) => {
           return (
             <TransactionWrapper key={date}>
               <DateContainerStyled>{date}</DateContainerStyled>
@@ -215,7 +41,11 @@ const TransactionList = ({ className }: Props) => {
                 const { callData, info, from } = agg
                 const multisig = getMultisigByAddress(from)
 
-                if (!info || !multisig?.threshold) return null
+                // if the "from"  is not a multisig from the
+                // currently selected multiProxy or we have no info
+                if (!info || !multisig?.threshold) {
+                  return null
+                }
 
                 const multisigSignatories = multisig?.signatories || []
                 // if the threshold is met, but the transaction is still not executed
diff --git a/packages/ui/src/hooks/usePendingTx.tsx b/packages/ui/src/hooks/usePendingTx.tsx
index 54185fca..ca59fd84 100644
--- a/packages/ui/src/hooks/usePendingTx.tsx
+++ b/packages/ui/src/hooks/usePendingTx.tsx
@@ -1,39 +1,169 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useApi } from '../contexts/ApiContext'
-import { MultiProxy } from '../contexts/MultiProxyContext'
-import { MultisigStorageInfo } from '../types'
+import { useMultiProxy } from '../contexts/MultiProxyContext'
+import { HexString, MultisigStorageInfo } from '../types'
 import { useMultisigCallSubscription } from './useMultisigCallsSubscription'
 import { isEmptyArray } from '../utils'
 import { useAccountId } from './useAccountId'
+import { ApiPromise } from '@polkadot/api'
+import { useApi } from '../contexts/ApiContext'
+import { ISanitizedCall, getDisplayArgs, isProxyCall, parseGenericCall } from '../utils'
+import { GenericCall } from '@polkadot/types'
+import { AnyJson, AnyTuple } from '@polkadot/types/types'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+dayjs.extend(localizedFormat)
 
 export interface PendingTx {
   from: string
   hash: string
   info: MultisigStorageInfo
 }
-export const usePendingTx = (multiProxy?: MultiProxy) => {
+
+export interface CallDataInfoFromChain {
+  callData?: HexString
+  hash?: string
+  name?: string
+  args?: AnyJson
+  info?: PendingTx['info']
+  from: string
+  timestamp?: Date
+  multiProxyAddress?: string
+}
+
+type AggGroupedByDate = { [index: string]: CallDataInfoFromChain[] }
+
+export const getMultisigInfo = (c: ISanitizedCall): Partial<CallDataInfoFromChain>[] => {
+  const result: Partial<CallDataInfoFromChain>[] = []
+
+  const getCallResult = (c: ISanitizedCall) => {
+    if (typeof c.method !== 'string' && c.method.pallet === 'multisig') {
+      if (c.method.method === 'asMulti' && typeof c.args.call?.method !== 'string') {
+        result.push({
+          name: `${c.args.call?.method?.pallet}.${c.args.call?.method.method}`,
+          hash: c.args.call?.hash,
+          callData: c.args.callData as CallDataInfoFromChain['callData']
+        })
+      } else {
+        result.push({
+          name: 'Unknown call',
+          hash: (c.args?.call_hash as Uint8Array).toString() || undefined,
+          callData: undefined
+        })
+      }
+      // this is not a multisig call
+      // try to dig deeper
+    } else {
+      if (c.args.calls) {
+        for (const call of c.args.calls) {
+          getCallResult(call)
+        }
+      } else if (c.args.call) {
+        getCallResult(c.args.call)
+      }
+    }
+  }
+
+  getCallResult(c)
+  return result
+}
+
+const getCallDataFromChainPromise = (pendingTxData: PendingTx[], api: ApiPromise) =>
+  pendingTxData.map(async (pendingTx) => {
+    const blockHash = await api.rpc.chain.getBlockHash(pendingTx.info.when.height)
+    const signedBlock = await api.rpc.chain.getBlock(blockHash)
+
+    let date: Date | undefined
+
+    // get the timestamp which is an unsigned extrinsic set by the validator in each block
+    // the information for each of the contained extrinsics
+    signedBlock.block.extrinsics.some(({ method: { args, method, section } }) => {
+      // check for timestamp.set
+      if (section === 'timestamp' && method === 'set') {
+        // extract the Option<Moment> as Moment
+        const moment = args.toString()
+
+        // convert to date (unix ms since epoch in Moment - exactly as per the Rust code)
+        date = new Date(Number(moment))
+        return true
+      }
+
+      return false
+    })
+
+    const ext = signedBlock.block.extrinsics[pendingTx.info.when.index]
+
+    const decoded = parseGenericCall(ext.method as GenericCall, ext.registry)
+    // console.log('pendingTxData', pendingTxData)
+    // console.log('decoded', decoded)
+    const multisigInfos = getMultisigInfo(decoded) || {}
+
+    const info = multisigInfos.find(({ name, hash, callData }) => {
+      if (!!hash && hash === pendingTx.hash) {
+        return { name, hash, callData }
+      }
+
+      return false
+    })
+
+    if (!info) {
+      console.log('oops we did not find the right extrinsic', multisigInfos, pendingTx.hash)
+      return
+    }
+
+    const { name, hash, callData } = info
+
+    let call: false | GenericCall<AnyTuple> = false
+    try {
+      call = !!callData && !!hash && ext.registry.createType('Call', callData)
+    } catch (error) {
+      console.error('Error in getCallDataFromChainPromise', error)
+    }
+
+    return {
+      callData,
+      hash: hash || pendingTx.hash,
+      name,
+      args: getDisplayArgs(call),
+      info: pendingTx.info,
+      from: pendingTx.from,
+      timestamp: date
+    } as CallDataInfoFromChain
+  })
+
+const sortByLatest = (a: CallDataInfoFromChain, b: CallDataInfoFromChain) => {
+  if (!a.timestamp || !b.timestamp) return 0
+
+  return b.timestamp.valueOf() - a.timestamp.valueOf()
+}
+
+export const usePendingTx = () => {
   const [isLoading, setIsLoading] = useState(true)
   const { api, chainInfo } = useApi()
-  const [data, setData] = useState<PendingTx[]>([])
-  const multisigs = useMemo(
-    () => multiProxy?.multisigs.map(({ address }) => address) || [],
-    [multiProxy]
+  const [txWithCallDataByDate, setTxWithCallDataByDate] = useState<AggGroupedByDate>({})
+  const { selectedMultiProxy } = useMultiProxy()
+  const multisigAddresses = useMemo(
+    () => selectedMultiProxy?.multisigs.map(({ address }) => address) || [],
+    [selectedMultiProxy?.multisigs]
   )
 
-  const refresh = useCallback(() => {
+  const refresh = useCallback(async () => {
+    setTxWithCallDataByDate({})
+
     if (!api) return
 
-    if (isEmptyArray(multisigs)) return
+    if (isEmptyArray(multisigAddresses)) return
 
     if (!api?.query?.multisig?.multisigs) return
 
     setIsLoading(true)
 
-    const newData: typeof data = []
+    const pendingMultisigTxs: PendingTx[] = []
 
-    const callsPromises = multisigs.map((address) => api.query.multisig.multisigs.entries(address))
+    const callsPromises = multisigAddresses.map((address) =>
+      api.query.multisig.multisigs.entries(address)
+    )
 
-    Promise.all(callsPromises)
+    await Promise.all(callsPromises)
       .then((res1) => {
         res1.forEach((res, index) => {
           res.forEach((storage) => {
@@ -47,38 +177,73 @@ export const usePendingTx = (multiProxy?: MultiProxy) => {
 
             // Fix for ghost proposals for https://github.com/polkadot-js/apps/issues/9103
             // These 2 should be the same
-            if (multisigFromChain.toLowerCase() !== multisigs[index].toLowerCase()) {
+            if (multisigFromChain.toLowerCase() !== multisigAddresses[index].toLowerCase()) {
               console.error(
                 'The onchain call and the one found in the block donot correspond',
                 multisigFromChain,
-                multisigs[index]
+                multisigAddresses[index]
               )
               return
             }
 
-            newData.push({
+            pendingMultisigTxs.push({
               hash,
               info,
-              from: multisigs[index]
+              from: multisigAddresses[index]
             })
           })
         })
       })
+      .catch(console.error)
+
+    if (pendingMultisigTxs.length === 0) {
+      setTxWithCallDataByDate({})
+      setIsLoading(false)
+      return
+    }
+
+    const callDataInfoFromChainPromises = getCallDataFromChainPromise(pendingMultisigTxs, api)
+
+    await Promise.all(callDataInfoFromChainPromises)
+      .then((res) => {
+        const definedTxs = res.filter((agg) => agg !== undefined) as CallDataInfoFromChain[]
+        const timestampObj: AggGroupedByDate = {}
+
+        // remove the proxy transaction that aren't for the selected proxy
+        const relevantTxs = definedTxs.filter((agg) => {
+          if (!isProxyCall(agg.name) || !agg?.args || !(agg.args as any).real.Id) {
+            return true
+          }
+
+          return (agg.args as any).real.Id === selectedMultiProxy?.proxy
+        })
+
+        // sort by date, the newest first
+        const sorted = relevantTxs.sort(sortByLatest)
+
+        // populate the object and sort by data
+        sorted.forEach((data) => {
+          const date = dayjs(data.timestamp).format('LL')
+          const previousData = timestampObj[date] || []
+          timestampObj[date] = [...previousData, data]
+        })
+
+        setTxWithCallDataByDate(timestampObj)
+      })
       .finally(() => {
-        setData(newData)
         setIsLoading(false)
       })
       .catch(console.error)
-  }, [api, chainInfo, multisigs])
+  }, [api, chainInfo?.isEthereum, multisigAddresses, selectedMultiProxy?.proxy])
 
   useEffect(() => {
     refresh()
   }, [refresh])
 
-  const multisigIds = useAccountId(multisigs)
+  const multisigIds = useAccountId(multisigAddresses)
   // re-fetch the on-chain if some new event appeared for any of the
   // multisig we are watching
   useMultisigCallSubscription({ onUpdate: refresh, multisigIds })
 
-  return { isLoading, data, refresh }
+  return { isLoading, txWithCallDataByDate, refresh }
 }

From ba46c8beee86176649937f1325d491d441e6c693 Mon Sep 17 00:00:00 2001
From: Anton Lykhoyda <lykhoyda@gmail.com>
Date: Wed, 15 Nov 2023 13:53:42 +0300
Subject: [PATCH 14/15] replace AggregatedData interface

---
 packages/ui/src/components/CallInfo.tsx                 | 7 +++----
 packages/ui/src/components/Transactions/Transaction.tsx | 4 ++--
 packages/ui/src/components/modals/ProposalSigning.tsx   | 4 ++--
 packages/ui/src/utils/index.ts                          | 2 ++
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/CallInfo.tsx b/packages/ui/src/components/CallInfo.tsx
index 788b5fe9..eb3c8aa0 100644
--- a/packages/ui/src/components/CallInfo.tsx
+++ b/packages/ui/src/components/CallInfo.tsx
@@ -1,6 +1,5 @@
 import Expander from './Expander'
 import { styled } from '@mui/material/styles'
-import { AggregatedData } from './Transactions/TransactionList'
 import { AnyJson } from '@polkadot/types/types'
 import { ReactNode, useMemo } from 'react'
 import { useApi } from '../contexts/ApiContext'
@@ -12,11 +11,11 @@ import { Link } from './library'
 import { usePjsLinks } from '../hooks/usePjsLinks'
 import { Alert } from '@mui/material'
 import { ApiPromise } from '@polkadot/api'
-import { isTypeBalance } from '../utils/isTypeBalance'
-import { isTypeAccount } from '../utils/isTypeAccount'
+import { isTypeBalance, isTypeAccount } from '../utils'
+import { CallDataInfoFromChain } from '../hooks/usePendingTx'
 
 interface Props {
-  aggregatedData: Omit<AggregatedData, 'from' | 'timestamp'>
+  aggregatedData: Omit<CallDataInfoFromChain, 'from' | 'timestamp'>
   expanded?: boolean
   children?: ReactNode
   className?: string
diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx
index 61bc6e77..e6f16f8a 100644
--- a/packages/ui/src/components/Transactions/Transaction.tsx
+++ b/packages/ui/src/components/Transactions/Transaction.tsx
@@ -4,16 +4,16 @@ import { styled } from '@mui/material/styles'
 import CallInfo from '../CallInfo'
 import { MdOutlineGesture as GestureIcon } from 'react-icons/md'
 import { HiOutlineQuestionMarkCircle as QuestionMarkIcon } from 'react-icons/hi2'
-import { AggregatedData } from './TransactionList'
 import { useCallback, useMemo } from 'react'
 import { isProxyCall } from '../../utils'
 import { AccountBadge } from '../../types'
 import TransactionProgress from './TransactionProgress'
 import { useModals } from '../../contexts/ModalsContext'
+import { CallDataInfoFromChain } from '../../hooks/usePendingTx'
 
 interface Props {
   className?: string
-  aggregatedData: AggregatedData
+  aggregatedData: CallDataInfoFromChain
   isProposer: boolean
   possibleSigners: string[]
   multisigSignatories: string[]
diff --git a/packages/ui/src/components/modals/ProposalSigning.tsx b/packages/ui/src/components/modals/ProposalSigning.tsx
index bc0a485f..b8fb8e91 100644
--- a/packages/ui/src/components/modals/ProposalSigning.tsx
+++ b/packages/ui/src/components/modals/ProposalSigning.tsx
@@ -6,7 +6,6 @@ import { useAccounts } from '../../contexts/AccountsContext'
 import { useApi } from '../../contexts/ApiContext'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import CallInfo from '../CallInfo'
-import { AggregatedData } from '../Transactions/TransactionList'
 import SignerSelection from '../select/SignerSelection'
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { useToasts } from '../../contexts/ToastContext'
@@ -19,12 +18,13 @@ import { ModalCloseButton } from '../library/ModalCloseButton'
 import { useGetSortAddress } from '../../hooks/useGetSortAddress'
 import { useCheckBalance } from '../../hooks/useCheckBalance'
 import BN from 'bn.js'
+import { CallDataInfoFromChain } from '../../hooks/usePendingTx'
 
 export interface SigningModalProps {
   onClose: () => void
   className?: string
   possibleSigners: string[]
-  proposalData: AggregatedData
+  proposalData: CallDataInfoFromChain
   onSuccess?: () => void
 }
 
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index cc5e4969..38476e04 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,6 +1,8 @@
 export * from './isValidAddress'
 export * from './arrayUtils'
 export * from './isProxyCall'
+export * from './isTypeBalance'
+export * from './isTypeAccount'
 export * from './decode'
 export * from './getDisplayAddress'
 export * from './bnUtils'

From ee33cfd0fa73946114ee94ba7ee4b5a04283526f Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Wed, 15 Nov 2023 19:12:13 +0300
Subject: [PATCH 15/15] better args

---
 packages/ui/src/hooks/usePendingTx.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/hooks/usePendingTx.tsx b/packages/ui/src/hooks/usePendingTx.tsx
index ca59fd84..04a1cdf4 100644
--- a/packages/ui/src/hooks/usePendingTx.tsx
+++ b/packages/ui/src/hooks/usePendingTx.tsx
@@ -32,38 +32,38 @@ export interface CallDataInfoFromChain {
 
 type AggGroupedByDate = { [index: string]: CallDataInfoFromChain[] }
 
-export const getMultisigInfo = (c: ISanitizedCall): Partial<CallDataInfoFromChain>[] => {
+export const getMultisigInfo = (call: ISanitizedCall): Partial<CallDataInfoFromChain>[] => {
   const result: Partial<CallDataInfoFromChain>[] = []
 
-  const getCallResult = (c: ISanitizedCall) => {
-    if (typeof c.method !== 'string' && c.method.pallet === 'multisig') {
-      if (c.method.method === 'asMulti' && typeof c.args.call?.method !== 'string') {
+  const getCallResult = ({ args, method }: ISanitizedCall) => {
+    if (typeof method !== 'string' && method.pallet === 'multisig') {
+      if (method.method === 'asMulti' && typeof args.call?.method !== 'string') {
         result.push({
-          name: `${c.args.call?.method?.pallet}.${c.args.call?.method.method}`,
-          hash: c.args.call?.hash,
-          callData: c.args.callData as CallDataInfoFromChain['callData']
+          name: `${args.call?.method?.pallet}.${args.call?.method.method}`,
+          hash: args.call?.hash,
+          callData: args.callData as CallDataInfoFromChain['callData']
         })
       } else {
         result.push({
           name: 'Unknown call',
-          hash: (c.args?.call_hash as Uint8Array).toString() || undefined,
+          hash: (args?.call_hash as Uint8Array).toString() || undefined,
           callData: undefined
         })
       }
       // this is not a multisig call
       // try to dig deeper
     } else {
-      if (c.args.calls) {
-        for (const call of c.args.calls) {
+      if (args.calls) {
+        for (const call of args.calls) {
           getCallResult(call)
         }
-      } else if (c.args.call) {
-        getCallResult(c.args.call)
+      } else if (args.call) {
+        getCallResult(args.call)
       }
     }
   }
 
-  getCallResult(c)
+  getCallResult(call)
   return result
 }