Fix: Correct 'Use Max' Behavior to Set Input Field and Recalculate Output

.github/workflows/check-branch.yml

@@ -0,0 +1,21 @@
+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

.github/workflows/ci.yml

@@ -3,9 +3,9 @@ name: ci
 on:
   # Triggers the workflow on push or pull request events but only for the main branch
   push:
-    branches: [main]
+    branches: [main, dev]
   pull_request:
-    branches: [main]
+    branches: [main, dev]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mento-protocol/mento-web",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A simple DApp for Celo Mento exchanges",
   "keywords": [
     "Celo",

src/components/input/Select.tsx

@@ -23,7 +23,7 @@ export function Select({ value, optionValues, onChange, button, option, buttonLa
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-20 w-full py-1 mt-1 overflow-auto dark:bg-[#3F3F46] bg-white rounded-[8px] shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none border border-solid border-black">
+          <Listbox.Options className="absolute z-20 w-full py-1 mt-1 overflow-auto dark:bg-[#3F3F46] bg-white rounded-[8px] shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none border border-solid border-black sm:mobile-dropdown dropdown-menu">
             {optionValues.map((optionValue) => (
               <Listbox.Option
                 key={optionValue}

src/features/swap/SwapForm.tsx

@@ -107,8 +107,10 @@ function SwapFormInputs({ balances }: { balances: AccountBalances }) {
   const { isLoading, quote, rate } = useSwapQuote(amount, direction, fromTokenId, toTokenId)
 
   useEffect(() => {
-    setFieldValue('quote', quote)
-  }, [quote, setFieldValue])
+    if (values.direction === 'in' && quote) {
+      setFieldValue('quote', quote);
+    }
+  }, [quote, setFieldValue, values.direction]);
 
   useEffect(() => {
     if (chain && isConnected && !isSwappable(values.fromTokenId, values.toTokenId, chain?.id)) {
@@ -122,7 +124,10 @@ function SwapFormInputs({ balances }: { balances: AccountBalances }) {
   const roundedBalance = fromWeiRounded(balances[fromTokenId], Tokens[fromTokenId].decimals)
   const isRoundedBalanceGreaterThanZero = Boolean(Number.parseInt(roundedBalance) > 0)
   const onClickUseMax = () => {
-    setFieldValue('amount', fromWei(balances[fromTokenId], Tokens[fromTokenId].decimals))
+    const maxAmount = fromWei(balances[fromTokenId], Tokens[fromTokenId].decimals);
+    setFieldValue('amount', maxAmount);
+
+    setFieldValue('direction', 'in');
     if (fromTokenId === TokenId.CELO) {
       toast.warn('Consider keeping some CELO for transaction fees')
     }

src/styles/globals.css

@@ -214,3 +214,14 @@ Toasts
   --toastify-color-progress-warning: var(--toastify-color-warning);
   --toastify-color-progress-error: var(--toastify-color-error);
 }
+
+@media (max-width: 640px) {
+  .dropdown-menu {
+    position: fixed !important;
+    bottom: auto !important;
+    top: auto !important;
+    max-height: 25vh !important;
+    width: 48% !important;
+    z-index: 9999 !important;
+  }
+}