From 64cce0abb8904157c2973d73eb5a5533c8d8c9ed Mon Sep 17 00:00:00 2001
From: Bayological <6872903+bayological@users.noreply.github.com>
Date: Fri, 22 Nov 2024 18:52:52 +0700
Subject: [PATCH] Release 2.3.1 (#160)

---
 .github/issue_template/bug_report_task.md | 35 +++++++++++++++++++++++
 .github/issue_template/common_task.md     | 19 ++++++++++++
 .gitignore                                |  2 ++
 package.json                              |  2 +-
 src/components/nav/ConnectButton.tsx      |  8 +++++-
 src/components/nav/NetworkModal.tsx       | 30 ++++++++++---------
 src/config/wallets.ts                     | 28 ++++++++++++++++++
 src/features/swap/SwapConfirm.tsx         |  4 +--
 src/features/swap/SwapForm.tsx            |  7 +++--
 src/features/swap/swapSlice.ts            |  8 +++++-
 src/pages/index.tsx                       |  8 ++++--
 11 files changed, 128 insertions(+), 23 deletions(-)
 create mode 100644 .github/issue_template/bug_report_task.md
 create mode 100644 .github/issue_template/common_task.md

diff --git a/.github/issue_template/bug_report_task.md b/.github/issue_template/bug_report_task.md
new file mode 100644
index 0000000..5fd500d
--- /dev/null
+++ b/.github/issue_template/bug_report_task.md
@@ -0,0 +1,35 @@
+---
+name: Bug report task
+about: Create a bug report task to help us fix an existing bug
+---
+
+#### **Description**
+
+<!-- A clear and concise description of what the bug is. -->
+
+#### **Steps To Reproduce**
+
+<!-- Steps that can be followed to reproduce the bug.
+
+1. Navigate to the '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+-->
+
+#### **Actual result**
+
+<!-- A clear and concise description of what actually happened. -->
+
+#### **Expected result**
+
+<!-- A clear and concise description of what you expected to happen. -->
+
+#### **Attachments**
+
+<!-- If applicable, add screenshots or video to help explain your problem. -->
+
+#### **Additional context**
+
+<!-- Add any other context about the problem here. -->
diff --git a/.github/issue_template/common_task.md b/.github/issue_template/common_task.md
new file mode 100644
index 0000000..6f52337
--- /dev/null
+++ b/.github/issue_template/common_task.md
@@ -0,0 +1,19 @@
+---
+name: Common task
+about: Create a common task to implement a feature, do refactor, or update docs
+---
+
+## Description
+
+<!-- A couple of sentences explaining the proposed task. -->
+
+## Acceptance Criteria
+- [ ] _Your acceptance criteria_
+
+#### **Attachments**
+
+<!-- If applicable, add screenshots, video, or documentation to help explain your task. -->
+
+## Additional context
+
+<!-- Add any other context feature request here. -->
diff --git a/.gitignore b/.gitignore
index 3ce6f93..0528449 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.idea
diff --git a/package.json b/package.json
index 3f3cbf3..b163f4b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",
diff --git a/src/components/nav/ConnectButton.tsx b/src/components/nav/ConnectButton.tsx
index 1f813eb..934dd4b 100644
--- a/src/components/nav/ConnectButton.tsx
+++ b/src/components/nav/ConnectButton.tsx
@@ -6,6 +6,7 @@ import { Identicon } from 'src/components/Identicon'
 import { SolidButton } from 'src/components/buttons/SolidButton'
 import { BalancesSummary } from 'src/components/nav/BalancesSummary'
 import { NetworkModal } from 'src/components/nav/NetworkModal'
+import { cleanupStaleWalletSessions } from 'src/config/wallets'
 import ClipboardDark from 'src/images/icons/clipboard-plus-dark.svg'
 import Clipboard from 'src/images/icons/clipboard-plus.svg'
 import CubeDark from 'src/images/icons/cube-dark.svg'
@@ -24,6 +25,11 @@ export function ConnectButton() {
   const { openConnectModal } = useConnectModal()
   const { disconnect } = useDisconnect()
 
+  const onClickConnect = () => {
+    cleanupStaleWalletSessions()
+    openConnectModal?.()
+  }
+
   const onClickCopy = async () => {
     if (!address) return
     await tryClipboardSet(address)
@@ -91,7 +97,7 @@ export function ConnectButton() {
               styles="sm:mr-3"
             />
           }
-          onClick={openConnectModal}
+          onClick={onClickConnect}
         >
           <div className="hidden sm:block">Connect</div>
         </SolidButton>
diff --git a/src/components/nav/NetworkModal.tsx b/src/components/nav/NetworkModal.tsx
index b4f9ae3..daf45c3 100644
--- a/src/components/nav/NetworkModal.tsx
+++ b/src/components/nav/NetworkModal.tsx
@@ -1,5 +1,6 @@
 import { toast } from 'react-toastify'
 import { ChainMetadata, allChains, chainIdToChain } from 'src/config/chains'
+import { cleanupStaleWalletSessions } from 'src/config/wallets'
 import { reset as accountReset } from 'src/features/accounts/accountSlice'
 import { reset as blockReset } from 'src/features/blocks/blockSlice'
 import { resetTokenPrices } from 'src/features/chart/tokenPriceSlice'
@@ -25,6 +26,7 @@ export function NetworkModal({ isOpen, close }: Props) {
     try {
       if (!switchNetworkAsync) throw new Error('switchNetworkAsync undefined')
       logger.debug('Resetting and switching to network', c.name)
+      cleanupStaleWalletSessions()
       await switchNetworkAsync(c.chainId)
       dispatch(blockReset())
       dispatch(accountReset())
@@ -38,9 +40,9 @@ export function NetworkModal({ isOpen, close }: Props) {
 
   return (
     <Modal isOpen={isOpen} close={close} title="Network details" width="max-w-md">
-      <div className="px-4 sm:px-6 w-full justify-between items-end inline-flex">
-        <div className="w-full py-3 sm:py-4 bg-gray-100 dark:bg-zinc-900 rounded-xl font-inter border border-gray-200 dark:border-zinc-800 flex-col justify-start items-center gap-4 inline-flex">
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+      <div className="inline-flex items-end justify-between w-full px-4 sm:px-6">
+        <div className="inline-flex flex-col items-center justify-start w-full gap-4 py-3 bg-gray-100 border border-gray-200 sm:py-4 dark:bg-zinc-900 rounded-xl font-inter dark:border-zinc-800">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Connected to:
             </div>
@@ -49,7 +51,7 @@ export function NetworkModal({ isOpen, close }: Props) {
             </div>
           </div>
           <div className="w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Block Number:
             </div>
@@ -58,7 +60,7 @@ export function NetworkModal({ isOpen, close }: Props) {
             </div>
           </div>
           <div className="w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-          <div className="px-3 sm:px-4 w-full justify-between items-end inline-flex">
+          <div className="inline-flex items-end justify-between w-full px-3 sm:px-4">
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Node Rpc Url:
             </div>
@@ -69,7 +71,7 @@ export function NetworkModal({ isOpen, close }: Props) {
         </div>
       </div>
       <div className="mt-4 sm:mt-6 w-full h-[0px] border-t border-gray-200 dark:border-zinc-800"></div>
-      <div className="py-4 sm:py-6 px-4 sm:px-6 w-full justify-start items-start gap-4 inline-flex font-inter">
+      <div className="inline-flex items-start justify-start w-full gap-4 px-4 py-4 sm:py-6 sm:px-6 font-inter">
         {allChains.map((c) => (
           <button
             onClick={() => switchToNetwork(c)}
@@ -97,27 +99,27 @@ export function NetworkModal({ isOpen, close }: Props) {
 }
 /*
         <div className="grow shrink basis-0 h-[50px] px-4 py-3 rounded-lg border border border border border-gray-950 justify-center items-center flex">
-          <div className="justify-start items-center gap-1 flex">
+          <div className="flex items-center justify-start gap-1">
             <div className="text-gray-950 text-[16px] font-semibold leading-relaxed">Baklava</div>
           </div>
         </div>
 
 
       <div className="relative flex flex-col items-center">
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Connected to:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Connected to:</div>
           <div className="w-48 ml-1 text-sm">{currentChain?.name || 'Unknown'}</div>
         </div>
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Block Number:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Block Number:</div>
           <div className="w-48 ml-1 text-sm">{latestBlock?.number || 'Unknown'}</div>
         </div>
-        <div className="flex justify-between items-center mt-3">
-          <div className="mr-2 w-28 text-left text-sm">Node Rpc Url:</div>
+        <div className="flex items-center justify-between mt-3">
+          <div className="mr-2 text-sm text-left w-28">Node Rpc Url:</div>
           <div className="w-48 ml-1 text-sm">{shortenUrl(currentChain?.rpcUrl) || 'Unknown'}</div>
         </div>
         <HrDivider classes="my-6" />
-        <div className="flex items-center space-x-6 pb-2">
+        <div className="flex items-center pb-2 space-x-6">
           {allChains.map((c) => (
             <button
               onClick={() => switchToNetwork(c)}
diff --git a/src/config/wallets.ts b/src/config/wallets.ts
index 9f6e932..15085fb 100644
--- a/src/config/wallets.ts
+++ b/src/config/wallets.ts
@@ -7,6 +7,7 @@ import {
 } from '@rainbow-me/rainbowkit/wallets'
 import { Valora } from 'src/config/celoWallets'
 import { config } from 'src/config/config'
+import { logger } from 'src/utils/logger'
 
 export function getWalletConnectors(chains: Chain[]) {
   const connectorConfig = {
@@ -24,3 +25,30 @@ export function getWalletConnectors(chains: Chain[]) {
     trustWallet(connectorConfig),
   ]
 }
+
+/**
+ * Remove wallet connect local storage data
+ * @dev We got into an issue where the walletconnect data was in a corrupted state
+ *      and causing issues with wallet connection. This will remove the data from
+ *      localStorage to clean up the state.
+ */
+export const cleanupStaleWalletSessions = () => {
+  logger.debug('Clearing wallet connect local storage data')
+  const wcStorageKeys = Object.keys(localStorage).filter(
+    (key) => key.startsWith('wc@') || key.startsWith('walletconnect')
+  )
+
+  logger.debug(`Found ${wcStorageKeys.length} wallet connect keys`)
+
+  wcStorageKeys.forEach((key) => {
+    try {
+      const item = localStorage.getItem(key)
+      if (!item) return
+
+      localStorage.removeItem(key)
+      logger.debug(`Removed wallet connect value for key: ${key}`)
+    } catch (error) {
+      logger.error(`Failed to remove wallet connect value for key: ${key}`, error)
+    }
+  })
+}
diff --git a/src/features/swap/SwapConfirm.tsx b/src/features/swap/SwapConfirm.tsx
index d54fc71..e64ad83 100644
--- a/src/features/swap/SwapConfirm.tsx
+++ b/src/features/swap/SwapConfirm.tsx
@@ -6,7 +6,7 @@ import { toastToYourSuccess } from 'src/components/TxSuccessToast'
 import { Button3D } from 'src/components/buttons/3DButton'
 import { TokenId, Tokens } from 'src/config/tokens'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
-import { setFormValues } from 'src/features/swap/swapSlice'
+import { setConfirmView, setFormValues } from 'src/features/swap/swapSlice'
 import { SwapFormValues } from 'src/features/swap/types'
 import { useApproveTransaction } from 'src/features/swap/useApproveTransaction'
 import { useSwapQuote } from 'src/features/swap/useSwapQuote'
@@ -142,7 +142,7 @@ export function SwapConfirmCard({ formValues }: Props) {
   }, [isApproveTxSuccess, isSwapTxLoading, isSwapTxSuccess, sendSwapTx, chainId, dispatch])
 
   const onClickBack = () => {
-    dispatch(setFormValues(null))
+    dispatch(setConfirmView(false))
   }
 
   const onClickRefresh = () => {
diff --git a/src/features/swap/SwapForm.tsx b/src/features/swap/SwapForm.tsx
index 917d8de..3da54fd 100644
--- a/src/features/swap/SwapForm.tsx
+++ b/src/features/swap/SwapForm.tsx
@@ -20,7 +20,7 @@ import { reset as blockReset } from 'src/features/blocks/blockSlice'
 import { resetTokenPrices } from 'src/features/chart/tokenPriceSlice'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
 import { SettingsMenu } from 'src/features/swap/SettingsMenu'
-import { setFormValues, reset as swapReset } from 'src/features/swap/swapSlice'
+import { setConfirmView, setFormValues, reset as swapReset } from 'src/features/swap/swapSlice'
 import { SwapDirection, SwapFormValues } from 'src/features/swap/types'
 import { useFormValidator } from 'src/features/swap/useFormValidator'
 import { useSwapQuote } from 'src/features/swap/useSwapQuote'
@@ -66,12 +66,15 @@ function SwapForm() {
   const dispatch = useAppDispatch()
   const onSubmit = (values: SwapFormValues) => {
     dispatch(setFormValues(values))
+    dispatch(setConfirmView(true)) // Switch to confirm view
   }
   const validateForm = useFormValidator(balances)
+  const storedFormValues = useAppSelector((s) => s.swap.formValues) // Get stored form values
+  const initialFormValues = storedFormValues || initialValues // Use stored values if they exist
 
   return (
     <Formik<SwapFormValues>
-      initialValues={initialValues}
+      initialValues={initialFormValues}
       onSubmit={onSubmit}
       validate={validateForm}
       validateOnChange={true}
diff --git a/src/features/swap/swapSlice.ts b/src/features/swap/swapSlice.ts
index 26477bc..32d45db 100644
--- a/src/features/swap/swapSlice.ts
+++ b/src/features/swap/swapSlice.ts
@@ -6,6 +6,7 @@ export interface SwapState {
   toCeloRates: ToCeloRates
   showSlippage: boolean
   showChart: boolean
+  confirmView: boolean
 }
 
 const initialState: SwapState = {
@@ -13,6 +14,7 @@ const initialState: SwapState = {
   toCeloRates: {},
   showSlippage: false,
   showChart: false,
+  confirmView: false,
 }
 
 export const swapSlice = createSlice({
@@ -29,8 +31,12 @@ export const swapSlice = createSlice({
       state.showChart = action.payload
     },
     reset: () => initialState,
+    setConfirmView(state, action) {
+      state.confirmView = action.payload
+    },
   },
 })
 
-export const { setFormValues, setShowSlippage, setShowChart, reset } = swapSlice.actions
+export const { setFormValues, setShowSlippage, setShowChart, reset, setConfirmView } =
+  swapSlice.actions
 export const swapReducer = swapSlice.reducer
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9b3d369..1fdf637 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,11 +6,15 @@ import { SwapConfirmCard } from 'src/features/swap/SwapConfirm'
 import { SwapFormCard } from 'src/features/swap/SwapForm'
 
 export default function SwapPage() {
-  const { formValues, showChart } = useAppSelector((state) => state.swap)
+  const { formValues, showChart, confirmView } = useAppSelector((state) => state.swap)
   return (
     <div className="flex justify-center items-center h-full flex-wrap w-full">
       <div className="mb-6 w-full max-w-md">
-        {!formValues ? <SwapFormCard /> : <SwapConfirmCard formValues={formValues} />}
+        {!formValues || !confirmView ? (
+          <SwapFormCard />
+        ) : (
+          <SwapConfirmCard formValues={formValues} />
+        )}{' '}
       </div>
       {config.showPriceChart && showChart && (
         <div className="mb-6 md:ml-10">