♻️ change pair selecting

marigold-dev · Sep 1, 2023 · 30656e2 · 30656e2
1 parent 18903cd
commit 30656e2
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 163 deletions.
diff --git a/batcher-ui/components/ChoosePairs.tsx b/batcher-ui/components/ChoosePairs.tsx
diff --git a/batcher-ui/components/Exchange.tsx b/batcher-ui/components/Exchange.tsx
@@ -19,6 +19,7 @@ import { fetchUserBalances, reverseSwap } from 'src/actions';
 import * as Form from '@radix-ui/react-form';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowRightArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import SelectPair from './SelectPair';
 
 const Exchange = () => {
   const userAddress = useSelector(userAddressSelector);
@@ -245,7 +246,7 @@ const Exchange = () => {
     <div className="flex flex-col grow my-2">
       <div className="p-5 flex flex-col md:flex-row justify-center border-2 border-solid border-lightgray md:text-base text-sm">
         <Form.Root
-          className="flex flex-col items-center"
+          className="flex flex-col items-strech"
           onSubmit={event => {
             event.preventDefault();
             depositToken();
@@ -265,24 +266,27 @@ const Exchange = () => {
                         0
                       : userBalances[
                           currentSwap.swap.from.token.name.toUpperCase()
-                        ]
+                        ] || 0
                   }`}
                 </p>
               </Form.Label>
             </div>
-            <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"
-                onChange={event => {
-                  (/^\d*\.{0,1}\d*$/.test(event.target.value) ||
-                    event.target.value === '') &&
-                    setAmount(event.target.value);
-                }}
-                type="text"
-                value={amountInput}
-                defaultValue={0}
-              />
-            </Form.Control>
+            <div className="flex">
+              <SelectPair />
+              <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"
+                  onChange={event => {
+                    (/^\d*\.{0,1}\d*$/.test(event.target.value) ||
+                      event.target.value === '') &&
+                      setAmount(event.target.value);
+                  }}
+                  type="text"
+                  value={amountInput}
+                  defaultValue={0}
+                />
+              </Form.Control>
+            </div>
             <Form.Message
               className="text-[13px] text-primary opacity-[0.8]"
               match={'valueMissing'}>
@@ -339,7 +343,8 @@ const Exchange = () => {
                       ? userBalances[
                           currentSwap.swap.from.token.name.toUpperCase()
                         ] || 0
-                      : userBalances[currentSwap.swap.to.name.toUpperCase()]
+                      : userBalances[currentSwap.swap.to.name.toUpperCase()] ||
+                        0
                   }`}
                 </p>
               </Form.Label>
@@ -358,7 +363,7 @@ const Exchange = () => {
           <Form.Submit asChild>
             <button
               disabled={!userAddress || batcherStatus !== BatcherStatus.OPEN}
-              className="text-white h-10 disabled:cursor-not-allowed cursor-pointer disabled:bg-lightgray items-center justify-center rounded bg-primary px-4 mt-8 text-xl">
+              className="text-white h-10 disabled:cursor-not-allowed cursor-pointer disabled:bg-lightgray items-center justify-center rounded bg-primary px-4 mt-8 text-xl self-center">
               Swap
             </button>
           </Form.Submit>

diff --git a/batcher-ui/components/NavBar.tsx b/batcher-ui/components/NavBar.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image';
 import { connectedWallet, disconnectedWallet } from '.././src/actions';
 import BatcherLogo from '../img/batcher-logo.png';
 import { useWallet } from '.././contexts/wallet';
-import ChoosePairs from './ChoosePairs';
 import Menu from './Menu';
 import LinkComponent from './Link';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
@@ -42,7 +41,6 @@ const NavBar = ({ isMenuOpen, setIsMenuOpen }: NavBarProps) => {
         </div>
 
         <div className="flex">
-          <ChoosePairs />
           {userAddress ? (
             <p className="p-4">{`${userAddress.substring(
               0,

diff --git a/batcher-ui/components/SelectPair.tsx b/batcher-ui/components/SelectPair.tsx
@@ -1,40 +1,73 @@
 import React from 'react';
 import * as Select from '@radix-ui/react-select';
-import classnames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from '@radix-ui/react-icons';
+  faChevronDown,
+  faCheck,
+  faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
+import { useSelector } from 'react-redux';
+import { currentSwapSelector } from 'src/reducers';
+import { useDispatch } from 'react-redux';
+import { changePair } from 'src/actions';
 
-const SelectDemo = () => (
-  <Select.Root>
-    <Select.Trigger
-      className="flex items-center justify-center rounded px-2 border border-solid border-[red] text-base leading-none h-[35px] gap-[5px] bg-[pink] shadow-[0_2px_10px] shadow-black/10 hover:bg-[red] focus:shadow-[0_0_0_2px] focus:shadow-black outline-none"
-      aria-label="Tokens">
-      <Select.Value placeholder="tzBTC" />
-      <Select.Icon className="text-[red]">
-        <ChevronDownIcon />
-      </Select.Icon>
-    </Select.Trigger>
-    <Select.Portal>
-      <Select.Content className="overflow-hidden bg-[pink] rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
-        <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-[pink]text-violet11 cursor-default">
-          <ChevronUpIcon />
-        </Select.ScrollUpButton>
-        <Select.Viewport className="p-[5px]">
-          <Select.Group>
-            <SelectItem value="usdt">USDT</SelectItem>
-            <SelectItem value="eurl">EURL</SelectItem>
-          </Select.Group>
-        </Select.Viewport>
-        <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-[pink]text-violet11 cursor-default">
-          <ChevronDownIcon />
-        </Select.ScrollDownButton>
-      </Select.Content>
-    </Select.Portal>
-  </Select.Root>
-);
+const SelectPair = () => {
+  const { swap, isReverse } = useSelector(currentSwapSelector);
+  const dispatch = useDispatch();
+
+  const availableTokens = ['tzBTC', 'USDT', 'EURL'];
+
+  return (
+    <Select.Root
+      value={isReverse ? swap.to.name : swap.from.token.name}
+      onValueChange={value => {
+        console.warn(value);
+        const pair =
+          value === 'tzBTC' ? `tzBTC/${swap.to.name}` : `tzBTC/${value}`;
+        const reversed = value !== 'tzBTC';
+        dispatch(changePair(pair, reversed));
+      }}>
+      <Select.Trigger className="flex items-center text-dark w-[90px] justify-center rounded px-2 mr-1 text-base gap-2 bg-white hover:bg-hovergray outline-none">
+        <Select.Value
+          placeholder={isReverse ? swap.to.name : swap.from.token.name}
+        />
+        <Select.Icon className="text-dark">
+          <FontAwesomeIcon icon={faChevronDown} />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal className="w-[7rem]">
+        <Select.Content className="overflow-hidden bg-white rounded-md text-dark">
+          <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-[red] cursor-default">
+            <FontAwesomeIcon icon={faChevronUp} />
+          </Select.ScrollUpButton>
+          <Select.Viewport className="p-2">
+            <Select.Group>
+              {availableTokens
+                // .filter(a =>
+                //   isReverse ? swap.to.name !== a : swap.from.token.name !== a
+                // )
+                .map(t => (
+                  <SelectItem
+                    value={t}
+                    key={t}
+                    disabled={
+                      isReverse
+                        ? swap.to.name === t
+                        : swap.from.token.name === t
+                    }>
+                    {t}
+                  </SelectItem>
+                ))}
+            </Select.Group>
+          </Select.Viewport>
+          <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-[pink]text-violet11 cursor-default">
+            <FontAwesomeIcon icon={faChevronDown} />
+          </Select.ScrollDownButton>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
 
 // eslint-disable-next-line react/display-name
 const SelectItem = React.forwardRef<
@@ -43,22 +76,25 @@ const SelectItem = React.forwardRef<
     children: React.ReactNode;
     className?: string;
     value: string;
+    disabled?: boolean;
   }
->(({ children, className, ...props }, forwardedRef) => {
+>(({ children, className, disabled, ...props }, forwardedRef) => {
   return (
     <Select.Item
-      className={classnames(
-        'text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-[green] data-[highlighted]:text-violet1',
-        className
-      )}
+      disabled={disabled}
+      className={`${
+        disabled
+          ? 'data-[highlighted]:cursor-not-allowed data-[highlighted]:bg-white'
+          : ''
+      } text-base text-dark rounded flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-hovergray disabled:cursor-not-allowed`}
       {...props}
       ref={forwardedRef}>
       <Select.ItemText>{children}</Select.ItemText>
-      <Select.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
-        <CheckIcon />
+      <Select.ItemIndicator className="absolute left-0 w-6 inline-flex items-center justify-center">
+        <FontAwesomeIcon icon={faCheck} />
       </Select.ItemIndicator>
     </Select.Item>
   );
 });
 
-export default SelectDemo;
+export default SelectPair;
diff --git a/batcher-ui/src/actions/exchange.ts b/batcher-ui/src/actions/exchange.ts
@@ -11,10 +11,10 @@ export const reverseSwap = () =>
     type: 'REVERSE_SWAP',
   } as const);
 
-export const changePair = (pair: string) =>
+export const changePair = (pair: string, isReverse: boolean) =>
   ({
     type: 'CHANGE_PAIR',
-    payload: { pair },
+    payload: { pair, isReverse },
   } as const);
 
 export const getPairsInfos = (pair: string) =>
@@ -27,7 +27,7 @@ export const updatePairsInfos = ({
   currentSwap,
   pair,
 }: {
-  currentSwap: CurrentSwap;
+  currentSwap: Omit<CurrentSwap, 'isReverse'>;
   pair: string;
 }) =>
   ({

diff --git a/batcher-ui/src/reducers/exchange.ts b/batcher-ui/src/reducers/exchange.ts
@@ -83,7 +83,17 @@ const exchangeReducer = (
     case 'BATCHER_UNSETUP':
       return loop(state, Cmd.clearInterval(state.batcherTimerId));
     case 'CHANGE_PAIR':
-      return loop(state, Cmd.action(getPairsInfos(action.payload.pair)));
+      return loop(
+        {
+          ...state,
+          swapPairName: action.payload.pair,
+          currentSwap: {
+            ...state.currentSwap,
+            isReverse: action.payload.isReverse,
+          },
+        },
+        Cmd.action(getPairsInfos(action.payload.pair))
+      );
     case 'GET_PAIR_INFOS':
       return loop(state, fetchPairInfosCmd(action.payload.pair));
     case 'UPDATE_PAIR_INFOS': {
@@ -95,6 +105,7 @@ const exchangeReducer = (
           swapPairName: action.payload.pair,
           currentSwap: {
             ...action.payload.currentSwap,
+            isReverse: state.currentSwap.isReverse,
             swap: {
               from: {
                 token: {

diff --git a/batcher-ui/tailwind.config.js b/batcher-ui/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
         primary: '#D8464E',
         darkgray: '#2B2A2E',
         lightgray: '#7B7B7E',
+        hovergray: '#d1d5db',
       },
     },
     fontFamily: {