From 3bef51793e6301748474810bef97eecb34ec51ed Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Mon, 14 Oct 2024 08:28:27 +0200
Subject: [PATCH] 2 tx flow, first remove votes and undelegate then delegate
 (#186)

---
 .papi/polkadot-api.json                       |   4 +-
 src/assets/networks.json                      |   2 +-
 src/components/Alert.tsx                      |  11 +-
 src/components/LocksCard.tsx                  |  52 +------
 src/header.tsx                                |  19 +--
 src/hooks/useGetDelegateTx.tsx                |  12 +-
 src/hooks/useGetSubsquareRefUrl.tsx           |   8 ++
 src/pages/Delegate/MultiTransactionDialog.tsx |   5 +-
 src/pages/Delegate/index.tsx                  | 128 +++++++++++-------
 9 files changed, 110 insertions(+), 131 deletions(-)
 create mode 100644 src/hooks/useGetSubsquareRefUrl.tsx

diff --git a/.papi/polkadot-api.json b/.papi/polkadot-api.json
index dd4020e..2e3c365 100644
--- a/.papi/polkadot-api.json
+++ b/.papi/polkadot-api.json
@@ -11,7 +11,7 @@
       "metadata": ".papi/metadata/ksm.scale"
     },
     "fastWestend": {
-      "wsUrl": "wss://rpc-test-network-1.novasamatech.org",
+      "wsUrl": "wss://rpc-test-network-1.novasama-tech.org",
       "metadata": ".papi/metadata/fastWestend.scale"
     },
     "westend": {
@@ -31,4 +31,4 @@
       "metadata": ".papi/metadata/westendPeople.scale"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/networks.json b/src/assets/networks.json
index bb93c20..8ad5a8e 100644
--- a/src/assets/networks.json
+++ b/src/assets/networks.json
@@ -306,7 +306,7 @@
     "options": ["testnet"],
     "nodes": [
       {
-        "url": "wss://rpc-test-network-1.novasamatech.org",
+        "url": "wss://rpc-test-network-1.novasama-tech.org",
         "name": "Development node"
       }
     ],
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 7426e99..808420b 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -1,16 +1,17 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { AlertCircle } from 'lucide-react'
+import { AlertCircle, InfoIcon } from 'lucide-react'
 
 interface Props {
-  title: string
-  message: string
+  title?: string
+  message: string | React.ReactNode
   variant?: 'default' | 'destructive' | null
 }
 
 export const AlertNote = ({ title, message, variant = 'default' }: Props) => (
   <Alert variant={variant}>
-    <AlertCircle className="h-4 w-4" />
-    <AlertTitle>{title}</AlertTitle>
+    {variant === 'destructive' && <AlertCircle className="h-4 w-4" />}
+    {variant === 'default' && <InfoIcon className="h-4 w-4" />}
+    {title && <AlertTitle>{title}</AlertTitle>}
     <AlertDescription>{message}</AlertDescription>
   </Alert>
 )
diff --git a/src/components/LocksCard.tsx b/src/components/LocksCard.tsx
index c31bff1..48206f9 100644
--- a/src/components/LocksCard.tsx
+++ b/src/components/LocksCard.tsx
@@ -10,7 +10,7 @@ import { planckToUnit } from '@polkadot-ui/utils'
 import { Button } from './ui/button'
 import { Title } from './ui/title'
 import { ContentReveal } from './ui/content-reveal'
-import { BadgeCent, Clock2, Info, LockKeyholeOpen, Vote } from 'lucide-react'
+import { BadgeCent, Clock2, Info, LockKeyholeOpen } from 'lucide-react'
 import { Badge } from './ui/badge'
 import { useAccounts } from '@/contexts/AccountsContext'
 import {
@@ -30,7 +30,6 @@ export const LocksCard = () => {
   const [expectedBlockTime, setExpectedBlockTime] = useState(0)
   const { api, assetInfo } = useNetwork()
   const { voteLocks, delegationLocks } = useLocks()
-  const [ongoingVoteLocks, setOngoingVoteLocks] = useState<VoteLock[]>([])
   const [freeLocks, setFreeLocks] = useState<Array<VoteLock | DelegationLock>>(
     [],
   )
@@ -47,14 +46,11 @@ export const LocksCard = () => {
   useEffect(() => {
     if (!currentBlock) return
 
-    const tempOngoingLocks: VoteLock[] = []
     const tempFree: Array<VoteLock | DelegationLock> = []
     const tempCurrent: VoteLock[] = []
 
     voteLocks.forEach((voteLocks) => {
-      if (voteLocks.isOngoing) {
-        tempOngoingLocks.push(voteLocks)
-      } else if (voteLocks.endBlock <= currentBlock) {
+      if (voteLocks.endBlock <= currentBlock) {
         tempFree.push(voteLocks)
       } else {
         tempCurrent.push(voteLocks)
@@ -74,7 +70,6 @@ export const LocksCard = () => {
       }
     })
 
-    setOngoingVoteLocks(tempOngoingLocks)
     setFreeLocks(tempFree)
     setCurrentLocks(tempCurrent)
     setCurrentDelegationLocks(tempDelegationLocks)
@@ -273,49 +268,6 @@ export const LocksCard = () => {
               </>
             </ContentReveal>
           </Card>
-          <Card className="h-max border-2 p-2 px-4">
-            <div className="flex gap-x-2">
-              <Title variant="h4">Votes</Title>
-              <Popover>
-                <PopoverTrigger>
-                  <Info className="h-3 w-3 text-gray-500" />
-                </PopoverTrigger>
-                <PopoverContent>
-                  <p className="max-w-[15rem]">
-                    Votes casted on a referendum that is still in deciding
-                    phase.
-                  </p>
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="font-unbounded text-5xl font-bold">
-              {ongoingVoteLocks.length}
-              <Vote className="ml-1 inline-block h-8 w-8 text-gray-200" />
-            </div>
-            {
-              <ContentReveal hidden={!ongoingVoteLocks.length}>
-                {ongoingVoteLocks.map(({ amount, refId, trackId }) => {
-                  return (
-                    <div key={refId}>
-                      <ul>
-                        <li>
-                          <Badge>#{refId}</Badge>{' '}
-                          <span className="ml-2 border-l-2 pl-2 text-xs font-semibold text-slate-400">
-                            {trackId}
-                          </span>
-                          <div>
-                            <BadgeCent className="inline-block h-4 w-4 text-gray-500" />{' '}
-                            {planckToUnit(amount, assetInfo.precision)}{' '}
-                            {assetInfo.symbol}
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  )
-                })}
-              </ContentReveal>
-            }
-          </Card>
         </>
       )}
     </div>
diff --git a/src/header.tsx b/src/header.tsx
index 5b38bdf..0177972 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -122,24 +122,7 @@ export const Header = () => {
           </SheetContent>
         </Sheet>
         <div className="flex w-full justify-between">
-          <div>
-            {/* TODO: split submenu based on routes 
-          <Menubar>
-            <MenubarMenu>
-              <MenubarTrigger>File</MenubarTrigger>
-              <MenubarContent>
-                <MenubarItem>
-                  New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-                </MenubarItem>
-                <MenubarItem>New Window</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Share</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Print</MenubarItem>
-              </MenubarContent>
-            </MenubarMenu>
-          </Menubar>*/}
-          </div>
+          <div></div>
           <div className="flex">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
diff --git a/src/hooks/useGetDelegateTx.tsx b/src/hooks/useGetDelegateTx.tsx
index 21d0f34..0f2dbb2 100644
--- a/src/hooks/useGetDelegateTx.tsx
+++ b/src/hooks/useGetDelegateTx.tsx
@@ -47,11 +47,13 @@ export const useGetDelegateTx = () => {
       >[] = []
 
       Object.values(delegations || {}).forEach((delegation) => {
-        delegation.map(({ trackId }) => {
-          removeDelegationsTxs.push(
-            api.tx.ConvictionVoting.undelegate({ class: trackId }),
-          )
-        })
+        delegation
+          .filter(({ trackId }) => tracks.includes(trackId))
+          .map(({ trackId }) => {
+            removeDelegationsTxs.push(
+              api.tx.ConvictionVoting.undelegate({ class: trackId }),
+            )
+          })
       })
 
       const delegationTxs = tracks.map((trackId) =>
diff --git a/src/hooks/useGetSubsquareRefUrl.tsx b/src/hooks/useGetSubsquareRefUrl.tsx
new file mode 100644
index 0000000..bc5d977
--- /dev/null
+++ b/src/hooks/useGetSubsquareRefUrl.tsx
@@ -0,0 +1,8 @@
+import { useNetwork } from '@/contexts/NetworkContext'
+
+export const useGetSubsquareRefUrl = () => {
+  const { network } = useNetwork()
+
+  return (refId: number) =>
+    `https://${network}.subsquare.io/referenda/${refId.toString()}`
+}
diff --git a/src/pages/Delegate/MultiTransactionDialog.tsx b/src/pages/Delegate/MultiTransactionDialog.tsx
index 91aece6..00259d9 100644
--- a/src/pages/Delegate/MultiTransactionDialog.tsx
+++ b/src/pages/Delegate/MultiTransactionDialog.tsx
@@ -147,9 +147,8 @@ export const MultiTransactionDialog = ({
           <DialogDescription>
             <div className="my-4">
               {step === 1 &&
-                'The delegation process is in 2 parts. First, please sign a transaction to remove current votes and delegations.'}
-              {step === 2 &&
-                'Votes and delegation are removed. You are now ready to sign a transaction to delegate.'}
+                "First, let's clear previous votes or delegations."}
+              {step === 2 && 'Now, we are ready to delegate.'}
             </div>
             <div className="text-end">
               <Button
diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx
index 4dc5717..fad5699 100644
--- a/src/pages/Delegate/index.tsx
+++ b/src/pages/Delegate/index.tsx
@@ -17,17 +17,23 @@ import { Button } from '@/components/ui/button'
 import { useAccounts } from '@/contexts/AccountsContext'
 import { Slider } from '@/components/ui/slider'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { ArrowLeft, Loader2 } from 'lucide-react'
+import { ArrowLeft, Info, Loader2 } from 'lucide-react'
 import { msgs } from '@/lib/constants'
 import { evalUnits, planckToUnit } from '@polkadot-ui/utils'
-import { useLocks } from '@/contexts/LocksContext'
+import { useLocks, VoteLock } from '@/contexts/LocksContext'
 import { useGetDelegateTx } from '@/hooks/useGetDelegateTx'
 import { AlertNote } from '@/components/Alert'
-import { useTestTx } from '@/hooks/useTestTx'
 import { MultiTransactionDialog } from './MultiTransactionDialog'
-import { useGetSigningCallback } from '@/hooks/useGetSigningCallback'
 import { Title } from '@/components/ui/title'
 import { DelegateCard } from '@/components/DelegateCard'
+import { AnchorLink } from '@/components/ui/anchorLink'
+import { useGetSubsquareRefUrl } from '@/hooks/useGetSubsquareRefUrl'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@/components/ui/popover'
+import { TrackDisplay } from '@/components/TrackDisplay'
 
 export const Delegate = () => {
   const { api, assetInfo } = useNetwork()
@@ -35,12 +41,11 @@ export const Delegate = () => {
   const { selectedAccount } = useAccounts()
   const getDelegateTx = useGetDelegateTx()
   const { getConvictionLockTimeDisplay, refreshLocks } = useLocks()
-  const getSubscriptionCallBack = useGetSigningCallback()
   const navigate = useNavigate()
   const { search } = useLocation()
   const { getDelegateByAddress, isLoading: isLoadingDelegates } = useDelegates()
   const [delegate, setDelegate] = useState<DelegateType | undefined>()
-
+  const { voteLocks, delegations } = useLocks()
   const [isAmountDirty, setIsAmountDirty] = useState(false)
   const [amount, setAmount] = useState<bigint>(0n)
   const [amountVisible, setAmountVisible] = useState<string>('0')
@@ -50,13 +55,23 @@ export const Delegate = () => {
   )
   const [convictionNo, setConvictionNo] = useState(1)
   const [isTxInitiated, setIsTxInitiated] = useState(false)
-  const { isExhaustsResources } = useTestTx()
   const [isMultiTxDialogOpen, setIsMultiTxDialogOpen] = useState(false)
   const [noDelegateFound, setNoDelegateFound] = useState(false)
-  const [allTracks, setAllTracks] = useState<number[]>([])
-  const [isExhaustsResourcesError, setIsExhaustsResourcesError] = useState<
-    boolean | null
-  >(false)
+  const [tracksToDelegate, setTracksToDelegate] = useState<number[]>([])
+  const [onGoingVoteLocks, setOngoingVoteLocks] = useState<VoteLock[]>([])
+  const getSubsquareUrl = useGetSubsquareRefUrl()
+  const replacedDelegations = useMemo(() => {
+    if (!delegations) return []
+
+    const currentlyDelegatingTrackIds = Object.values(delegations)
+      .flat()
+      .map(({ trackId }) => trackId)
+
+    return currentlyDelegatingTrackIds.filter((trackId) =>
+      tracksToDelegate.includes(trackId),
+    )
+  }, [tracksToDelegate, delegations])
+
   const {
     delegationTxs = [],
     removeDelegationsTxs = [],
@@ -68,9 +83,9 @@ export const Delegate = () => {
       delegateAddress: delegate.address,
       conviction: conviction,
       amount,
-      tracks: allTracks || [],
+      tracks: tracksToDelegate || [],
     })
-  }, [allTracks, amount, conviction, delegate, getDelegateTx])
+  }, [tracksToDelegate, amount, conviction, delegate, getDelegateTx])
 
   const allTxs = useMemo(() => {
     if (!api) return
@@ -83,19 +98,9 @@ export const Delegate = () => {
   }, [api, delegationTxs, removeDelegationsTxs, removeVotesTxs])
 
   useEffect(() => {
-    if (!allTxs) return
-
-    // check if we have an exhausted limit on the whole tx
-    isExhaustsResources(allTxs)
-      .then(setIsExhaustsResourcesError)
-      .catch(console.error)
-  }, [
-    allTxs,
-    delegationTxs,
-    isExhaustsResources,
-    removeDelegationsTxs,
-    removeVotesTxs,
-  ])
+    const ongoing = voteLocks.filter((voteLocks) => voteLocks.isOngoing)
+    setOngoingVoteLocks(ongoing)
+  }, [voteLocks])
 
   useEffect(() => {
     // the delegate list may still be loading
@@ -160,7 +165,7 @@ export const Delegate = () => {
     api.constants.Referenda.Tracks()
       .then((tracks) => {
         const trackIds = tracks.map(([track]) => track)
-        setAllTracks(trackIds)
+        setTracksToDelegate(trackIds)
       })
       .catch(console.error)
   }, [api])
@@ -195,8 +200,6 @@ export const Delegate = () => {
   const onSign = useCallback(async () => {
     if (!delegate || !selectedAccount || !amount || !api) return
 
-    setIsTxInitiated(true)
-
     if (
       !removeDelegationsTxs.length &&
       !removeVotesTxs.length &&
@@ -210,28 +213,14 @@ export const Delegate = () => {
       return
     }
 
-    if (isExhaustsResourcesError) {
-      setIsMultiTxDialogOpen(true)
-      return
-    }
-
-    const subscriptionCallBack = getSubscriptionCallBack({
-      onError: () => setIsTxInitiated(false),
-      onInBlock: () => onProcessFinished(),
-    })
-
-    await allTxs
-      .signSubmitAndWatch(selectedAccount?.polkadotSigner, { at: 'best' })
-      .subscribe(subscriptionCallBack)
+    setIsTxInitiated(true)
+    setIsMultiTxDialogOpen(true)
   }, [
     allTxs,
     amount,
     api,
     delegate,
     delegationTxs.length,
-    getSubscriptionCallBack,
-    isExhaustsResourcesError,
-    onProcessFinished,
     removeDelegationsTxs.length,
     removeVotesTxs.length,
     selectedAccount,
@@ -311,8 +300,53 @@ export const Delegate = () => {
           }}
         />
         <AlertNote
-          title={'Note'}
-          message={`The ${convictionTimeDisplay} will start when you undelegate`}
+          message={
+            <>
+              {replacedDelegations.length > 0 && (
+                <p>
+                  You will replace delegation on {replacedDelegations.length}{' '}
+                  {replacedDelegations.length > 1 ? 'tracks' : 'track'}
+                  <Popover>
+                    <PopoverTrigger>
+                      <Info className="ml-2 h-3 w-3 text-gray-500" />
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto">
+                      <div className="max-w-[15rem]">
+                        {replacedDelegations.map((trackId) => (
+                          <div>
+                            <TrackDisplay trackId={trackId} />
+                          </div>
+                        ))}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </p>
+              )}
+              {onGoingVoteLocks.length > 0 && (
+                <p>
+                  You will remove {onGoingVoteLocks.length} ongoing{' '}
+                  {removeVotesTxs.length > 1 ? 'votes' : 'vote'}
+                  <Popover>
+                    <PopoverTrigger>
+                      <Info className="ml-2 h-3 w-3 text-gray-500" />
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto">
+                      <div className="max-w-[15rem]">
+                        {onGoingVoteLocks.map(({ refId }) => (
+                          <div>
+                            <AnchorLink href={getSubsquareUrl(refId)}>
+                              #{refId}
+                            </AnchorLink>
+                          </div>
+                        ))}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                </p>
+              )}
+              <p>The {convictionTimeDisplay} will start when you undelegate</p>
+            </>
+          }
           variant={'default'}
         />
         <Button