✨ select tokens both side

marigold-dev · Sep 8, 2023 · a9515a6 · a9515a6
1 parent b00afdb
commit a9515a6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/batcher-ui/src/components/Exchange.tsx b/batcher-ui/src/components/Exchange.tsx
@@ -262,7 +262,7 @@ const Exchange = () => {
               </Form.Label>
             </div>
             <div className="flex">
-              <SelectPair />
+              <SelectPair isFrom />
               <Form.Control asChild>
                 <input
                   className="box-border w-full bg-white shadow-black inline-flex h-[35px] items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-black outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
@@ -339,15 +339,18 @@ const Exchange = () => {
                 </p>
               </Form.Label>
             </div>
-            <Form.Control asChild>
-              <input
-                className="box-border w-full cursor-not-allowed bg-white shadow-black inline-flex h-[35px] items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-black outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                type="number"
-                min={0}
-                disabled
-                required
-              />
-            </Form.Control>
+            <div className="flex">
+              <SelectPair isFrom={false} />
+              <Form.Control asChild>
+                <input
+                  className="box-border w-full cursor-not-allowed bg-white shadow-black inline-flex h-[35px] items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-black outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  type="number"
+                  min={0}
+                  disabled
+                  required
+                />
+              </Form.Control>
+            </div>
           </Form.Field>
 
           <Form.Submit asChild>

diff --git a/batcher-ui/src/components/SelectPair.tsx b/batcher-ui/src/components/SelectPair.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import * as Select from '@radix-ui/react-select';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -13,12 +13,24 @@ import { changePair } from 'src/actions';
 import { getTokensMetadata } from 'src/utils/utils';
 import Image from 'next/image';
 
-const SelectPair = () => {
+interface SelectPairProps {
+  isFrom: boolean;
+}
+
+const SelectPair = ({ isFrom }: SelectPairProps) => {
   const { swap, isReverse } = useSelector(currentSwapSelector);
   const dispatch = useDispatch();
 
   const [availableTokens, setAvailableTokens] = useState<any[]>([]);
 
+  const displayValue = useCallback(() => {
+    if (isReverse && isFrom) return swap.to.name;
+    if (isReverse && !isFrom) return swap.from.token.name;
+    if (!isReverse && isFrom) return swap.from.token.name;
+    if (!isReverse && !isFrom) return swap.to.name;
+    return swap.from.token.name;
+  }, [isReverse, isFrom, swap]);
+
   useEffect(() => {
     getTokensMetadata().then(
       (tokens: { name: string; address: string; icon: string | undefined }[]) =>
@@ -28,14 +40,13 @@ const SelectPair = () => {
 
   return (
     <Select.Root
-      // value={availableTokens[1].name}
-      value={isReverse ? swap.to.name : swap.from.token.name}
+      value={displayValue()}
       onValueChange={value => {
         //TODO: change this when we had more pair
-        // const parsedValue = value === 'USDt'
         const pair =
           value === 'tzBTC' ? `tzBTC/${swap.to.name}` : `tzBTC/${value}`;
-        const reversed = value !== 'tzBTC';
+        const reversed =
+          (!isFrom && value === 'tzBTC') || (isFrom && value !== 'tzBTC');
         dispatch(changePair(pair, reversed));
       }}>
       <Select.Trigger className="flex items-center text-dark w-[150px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">