Merge branch 'dev' into dependabot/npm_and_yarn/micromatch-4.0.8

.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. -->

.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. -->

.gitignore

@@ -43,3 +43,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.3.0",
+  "version": "2.3.3",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",
@@ -45,7 +45,7 @@
     "frappe-charts": "^1.6.2",
     "jsbi": "^4.3.0",
     "lottie-react": "^2.4.0",
-    "next": "13.5.7-canary.37",
+    "next": "14.2.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.0",

src/components/nav/BalancesSummary.tsx

@@ -13,10 +13,16 @@ export function BalancesSummary() {
         {tokenIds.map((id) => {
           const balance = fromWeiRounded(balances[id], Tokens[id].decimals)
           if (balance !== '0') {
+            const token = Tokens[id]
             // TODO: @bayo Either revert this !== 0 check or add some animation for when balances are loading
             return (
-              <div style={{ minWidth: '35%' }} className="flex pb-4 dark:text-white" key={id}>
-                <TokenIcon token={Tokens[id]} size="xs" />
+              <div
+                style={{ minWidth: '35%' }}
+                className="flex pb-4 dark:text-white"
+                key={id}
+                data-testid={`walletSettings_${token.id}_balance`}
+              >
+                <TokenIcon token={token} size="xs" />
                 <div className="ml-3">{balance}</div>
               </div>
             )

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>

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'
@@ -15,6 +16,7 @@ interface Props {
 }
 
 export function NetworkModal({ isOpen, close }: Props) {
+  const baseLocator = 'networkModal'
   const latestBlock = useAppSelector((s) => s.block.latestBlock)
   const chainId = useChainId()
   const currentChain = chainIdToChain[chainId]
@@ -25,6 +27,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,38 +41,47 @@ 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>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentNetwork`}
+            >
               {currentChain?.name || 'Unknown'}
             </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>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentBlockNumber`}
+            >
               {latestBlock?.number || 'Unknown'}
             </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>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentNodeRpcUrl`}
+            >
               {shortenUrl(currentChain?.rpcUrl) || 'Unknown'}
             </div>
           </div>
         </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 +109,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)}

src/config/consts.ts

@@ -19,3 +19,7 @@ export const MAX_GAS_LIMIT = '10000000' // 10 million
 export const MIN_ROUNDED_VALUE = 0.0001
 export const DISPLAY_DECIMALS = 4
 export const MAX_EXCHANGE_SPREAD = 0.1 // 10%
+
+export const ERC20_ABI = [
+  'function allowance(address owner, address spender) view returns (uint256)',
+]

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)
+    }
+  })
+}