Merge branch 'main' into dev

Author: chapati23

.github/workflows/check-branch.yml

@@ -1,21 +1,24 @@
-name: Prevent Non-Release/Non-Hotfix PRs to Main
+# NOTE: @chapati23 disabled this check today on 18.02.2025 as a conscious tradeoff to prioritize simpler and faster delivery
+# over a slower release cycle with more checks. We can turn it back on if we notice that we have more production issues but
+# for the moment we don't have a lot of users on this DApp so should prioritize faster improvements until we reach greater scale.
 
-on:
-  pull_request:
-    branches:
-      - main
-  pull_request_target:
-    branches:
-      - main
+# name: Prevent Non-Release/Non-Hotfix PRs to Main
+# on:
+#   pull_request:
+#     branches:
+#       - main
+#   pull_request_target:
+#     branches:
+#       - main
 
-jobs:
-  check-target-branch:
-    if: github.base_ref == 'main'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check if the source branch is a release branch
-        run: |
-          if [[ "${{ github.head_ref }}" != release/* && "${{ github.head_ref }}" != hotfix/* ]]; then
-            echo "Only release and hotfix branches can be merged into the main branch."
-            exit 1
-          fi
+# jobs:
+#   check-target-branch:
+#     if: github.base_ref == 'main'
+#     runs-on: ubuntu-latest
+#     steps:
+#       - name: Check if the source branch is a release branch
+#         run: |
+#           if [[ "${{ github.head_ref }}" != release/* && "${{ github.head_ref }}" != hotfix/* ]]; then
+#             echo "Only release and hotfix branches can be merged into the main branch."
+#             exit 1
+#           fi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",
@@ -29,7 +29,7 @@
     "@celo/rainbowkit-celo": "^0.11.0",
     "@headlessui-float/react": "^0.11.2",
     "@headlessui/react": "^1.7.13",
-    "@mento-protocol/mento-sdk": "^1.0.2",
+    "@mento-protocol/mento-sdk": "^1.0.3",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",

src/components/buttons/3DButton.tsx

@@ -2,39 +2,104 @@ import { PropsWithChildren } from 'react'
 
 type BaseButtonProps = {
   onClick?: () => void
-  error?: boolean
-  fullWidth?: boolean
   type?: 'button' | 'submit' | 'reset'
+  isError?: boolean
+  isFullWidth?: boolean
+  isDisabled?: boolean
+  isWalletConnected?: boolean
+  isBalanceLoaded?: boolean
 }
 
-export const Button3D = ({ children, ...restProps }: PropsWithChildren<BaseButtonProps>) => {
-  return <_3DButtonLink {...restProps}>{children}</_3DButtonLink>
+export enum Button3DText {
+  connectWallet = 'Connect Wallet',
+  continue = 'Continue',
+  balanceStillLoading = 'Balance still loading...',
+  switchToCeloNetwork = 'Switch to Celo Network',
 }
 
-const _3DButtonLink = ({
+export const Button3D = ({
   children,
-  error,
-  fullWidth,
   onClick,
-  type,
+  type = 'button',
+  isError,
+  isFullWidth,
+  isDisabled,
+  isWalletConnected,
+  isBalanceLoaded,
 }: PropsWithChildren<BaseButtonProps>) => {
   return (
-    <button className={fullWidth ? 'w-full' : ''} onClick={onClick} type={type ?? 'button'}>
+    <button
+      className={isFullWidth ? 'w-full' : ''}
+      onClick={onClick}
+      type={type}
+      disabled={isDisabled}
+    >
       <span
-        className={`group font-inter outline-offset-4 cursor-pointer  ${
-          error ? 'bg-[#863636]' : 'bg-[#2A326A]'
-        } ${
-          fullWidth ? 'w-full ' : ''
+        className={`group font-inter outline-offset-4 cursor-pointer ${getShadowButtonColor({
+          isDisabled,
+          isWalletConnected,
+          isError,
+          isBalanceLoaded,
+        })} ${
+          isFullWidth ? 'w-full ' : ''
         } border-b rounded-lg border-primary-dark font-medium select-none inline-block`}
       >
         <span
-          className={`${'pr-10'} pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] hover:-translate-y-[6px] -translate-y-[4px] font-medium text-[15px] border rounded-lg border-primary-dark leading-5 ${
-            error ? 'bg-[#E14F4F] text-white' : 'bg-[#4D62F0] text-white '
-          } ${fullWidth ? 'w-full flex items-center justify-center' : ''} `}
+          className={`pr-10 pl-10 group-active:-translate-y-[2px] block py-[18px] transition-transform delay-[250] hover:translate-y-[${
+            isDisabled ? '-4px' : '6px'
+          }] -translate-y-[4px] font-medium text-[15px] border rounded-lg border-primary-dark leading-5 ${getButtonColor(
+            {
+              isDisabled,
+              isWalletConnected,
+              isError,
+              isBalanceLoaded,
+            }
+          )} ${isFullWidth ? 'w-full flex items-center justify-center' : ''} `}
         >
           <span className="flex items-center">{children}</span>
         </span>
       </span>
     </button>
   )
 }
+
+function getShadowButtonColor({
+  isDisabled,
+  isWalletConnected,
+  isError,
+  isBalanceLoaded,
+}: IGetButtonColorArgs) {
+  switch (true) {
+    case isDisabled:
+    case isWalletConnected && !isBalanceLoaded:
+      return 'bg-[#666666]'
+    case isError && isWalletConnected:
+      return 'bg-[#863636]'
+    default:
+      return 'bg-[#2A326A]'
+  }
+}
+
+function getButtonColor({
+  isDisabled,
+  isWalletConnected,
+  isError,
+  isBalanceLoaded,
+}: IGetButtonColorArgs) {
+  switch (true) {
+    case isDisabled:
+    case isWalletConnected && !isBalanceLoaded:
+      return 'bg-[#888888] text-white cursor-not-allowed'
+    case isError && isWalletConnected:
+      return 'bg-[#E14F4F] text-white'
+    default:
+      return 'bg-[#4D62F0] text-white '
+  }
+}
+
+interface IGetButtonColorArgs {
+  isWalletConnected: boolean | undefined
+  isBalanceLoaded: boolean | undefined
+  isDisabled: boolean | undefined
+  isError: boolean | undefined
+}

src/components/nav/BottomGrid.tsx

@@ -4,7 +4,7 @@ import BackgroundTiles from 'src/images/background/background_tiles_light.png'
 
 export function BottomGrid() {
   return (
-    <div className="absolute bottom-0 z-10 transform -translate-x-1/2 left-1/2">
+    <div className="absolute bottom-0 transform -translate-x-1/2 left-1/2 pointer-events-none">
       <div className="w-screen h-[201px] relative">
         <Image
           src={BackgroundTiles}

src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,10 @@
+export const Tooltip = ({ text, dataTestId = 'tooltipText' }: TooltipProps) => (
+  <div className="absolute bottom-[-150%] transform -translate-x-[30%] bg-[rgb(29,29,32)] text-white text-xs rounded-md px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+    <span datatest-id={dataTestId}>{text}</span>
+  </div>
+)
+
+interface TooltipProps {
+  text: string
+  dataTestId?: string
+}

src/config/tokens.ts

@@ -28,6 +28,7 @@ export enum TokenId {
   cKES = 'cKES',
   PUSO = 'PUSO',
   cCOP = 'cCOP',
+  cGHS = 'cGHS',
 }
 
 export const NativeStableTokenIds = [TokenId.cUSD, TokenId.cEUR, TokenId.cREAL]
@@ -122,6 +123,14 @@ export const cCOP: Token = Object.freeze({
   decimals: 18,
 })
 
+export const cGHS: Token = Object.freeze({
+  id: TokenId.cGHS,
+  symbol: TokenId.cGHS,
+  name: 'cGHS',
+  color: Color.usdcBlue,
+  decimals: 18,
+})
+
 export const Tokens: Record<TokenId, Token> = {
   CELO,
   cUSD,
@@ -135,6 +144,7 @@ export const Tokens: Record<TokenId, Token> = {
   cKES,
   PUSO,
   cCOP,
+  cGHS,
 }
 
 export const TokenAddresses: Record<ChainId, Record<TokenId, Address>> = Object.freeze({
@@ -151,6 +161,7 @@ export const TokenAddresses: Record<ChainId, Record<TokenId, Address>> = Object.
     [TokenId.cKES]: '0x1E0433C1769271ECcF4CFF9FDdD515eefE6CdF92',
     [TokenId.PUSO]: '0x5E0E3c9419C42a1B04e2525991FB1A2C467AB8bF',
     [TokenId.cCOP]: '0xe6A57340f0df6E020c1c0a80bC6E13048601f0d4',
+    [TokenId.cGHS]: '0xf419dfab059c36cbafb43a088ebeb2811f9789b9',
   },
   [ChainId.Baklava]: {
     [TokenId.CELO]: '0xdDc9bE57f553fe75752D61606B94CBD7e0264eF8',
@@ -165,6 +176,7 @@ export const TokenAddresses: Record<ChainId, Record<TokenId, Address>> = Object.
     [TokenId.cKES]: '0x8813Ae180017057d0Cf98C930cED1E7101B97370',
     [TokenId.PUSO]: '',
     [TokenId.cCOP]: '',
+    [TokenId.cGHS]: '',
   },
   [ChainId.Celo]: {
     [TokenId.CELO]: '0x471EcE3750Da237f93B8E339c536989b8978a438',
@@ -179,6 +191,7 @@ export const TokenAddresses: Record<ChainId, Record<TokenId, Address>> = Object.
     [TokenId.cKES]: '0x456a3D042C0DbD3db53D5489e98dFb038553B0d0',
     [TokenId.PUSO]: '0x105d4A9306D2E55a71d2Eb95B81553AE1dC20d7B',
     [TokenId.cCOP]: '0x8A567e2aE79CA692Bd748aB832081C45de4041eA',
+    [TokenId.cGHS]: '0xfAeA5F3404bbA20D3cc2f8C4B0A888F55a3c7313',
   },
 })
 
@@ -203,10 +216,20 @@ export async function isSwappable(token_1: string, token_2: string, chainId: num
   )
 }
 
-export function getSwappableTokenOptions(token: string, chainId: ChainId) {
-  return getTokenOptionsByChainId(chainId)
-    .filter((tkn) => isSwappable(tkn, token, chainId))
-    .filter((tkn) => token !== tkn)
+export async function getSwappableTokenOptions(token: string, chainId: ChainId) {
+  const options = getTokenOptionsByChainId(chainId)
+
+  const swappableOptions = await Promise.all(
+    options.map(async (tkn) => ({
+      token: tkn,
+      isSwappable: await isSwappable(tkn, token, chainId),
+    }))
+  ).then((results) => {
+    return results
+      .filter((result) => result.isSwappable && result.token !== token)
+      .map((result) => result.token)
+  })
+  return swappableOptions
 }
 
 export function getTokenOptionsByChainId(chainId: ChainId): TokenId[] {
@@ -219,8 +242,8 @@ export function getTokenOptionsByChainId(chainId: ChainId): TokenId[] {
     : []
 }
 
-export function getTokenById(id: string): Token | null {
-  return Tokens[id as TokenId] || null
+export function getTokenById(id: TokenId | string): Token {
+  return Tokens[id as TokenId]
 }
 
 export function getTokenAddress(id: TokenId, chainId: ChainId): Address {