push new code

phongho01 · May 8, 2023 · ddfd15d · ddfd15d
1 parent ef10067
commit ddfd15d
Show file tree

Hide file tree

Showing 22 changed files with 3,245 additions and 123 deletions.
diff --git a/app/src/src/app/slice/orderList.js b/app/src/src/app/slice/orderList.js
@@ -15,11 +15,14 @@ export const orderListSlice = createSlice({
     addOrder: (state, action) => {
       state.push(action.payload);
       return state;
+    },
+    removeOrder: (state, action) => {
+      return state.filter(item => item._id !== action.payload)
     }
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setOrderList, addOrder } = orderListSlice.actions;
+export const { setOrderList, addOrder, removeOrder } = orderListSlice.actions;
 
 export default orderListSlice.reducer;
diff --git a/app/src/src/components/OrderList/index.jsx b/app/src/src/components/OrderList/index.jsx
@@ -1,10 +1,14 @@
 import { useEffect, useState } from 'react';
 import styles from './styles.module.scss';
 import { formatUnits } from '../../utils/token';
-import { getMakerOrders } from '../../api/order.api';
+import { getMakerOrders, getTakerOrders } from '../../api/order.api';
 import { TOKEN_SYMBOL } from '../../constants/index';
 import { useSelector, useDispatch } from 'react-redux';
-import { setOrderList } from '../../app/slice/orderList';
+import { setOrderList, removeOrder } from '../../app/slice/orderList';
+import { approveERC20, checkAllowance } from '../../utils/erc20';
+import { fillOrder } from '../../utils/fillOrder';
+import { AUGUSTUS_ADDRESS } from '../../constants/order';
+import toast from '../../utils/toast';
 
 export default function OrderList() {
   const account = useSelector((state) => state.account);
@@ -26,7 +30,8 @@ export default function OrderList() {
         break;
       }
       case 1: {
-        dispatch(setOrderList([]));
+        const { data } = await getTakerOrders(account);
+        dispatch(setOrderList(data));
         break;
       }
       case 2: {
@@ -36,6 +41,33 @@ export default function OrderList() {
     }
   };
 
+  const handleFillOrder = async (order) => {
+    try {
+      const args = {
+        nonceAndMeta: order.nonceAndMeta,
+        expiry: order.expiry,
+        makerAsset: order.makerAsset,
+        takerAsset: order.takerAsset,
+        maker: order.maker,
+        taker: order.taker,
+        makerAmount: order.makerAmount,
+        takerAmount: order.takerAmount,
+      };
+
+      const isAllowance = await checkAllowance(args.takerAsset, AUGUSTUS_ADDRESS, args.taker, args.takerAmount);
+      if (!isAllowance) {
+        await approveERC20(args.takerAsset, AUGUSTUS_ADDRESS);
+      }
+
+      await fillOrder(args, order.signature);
+      dispatch(removeOrder(order._id));
+      toast.success('Fill order successfully');
+    } catch (error) {
+      console.log('error', error);
+      toast.error('An error has been occur');
+    }
+  };
+
   useEffect(() => {
     if (account) {
       getOrderList(tab);
@@ -69,6 +101,11 @@ export default function OrderList() {
             <th width={'20%'} className={styles.textCenter}>
               Expiry
             </th>
+            {tab === 1 && (
+              <th width={'20%'} className={styles.textCenter}>
+                Action
+              </th>
+            )}
           </tr>
         </thead>
         <tbody>
@@ -81,6 +118,13 @@ export default function OrderList() {
               <td className={styles.textCenter}>{formatUnits(item.makerAmount)}</td>
               <td className={styles.textCenter}>{formatUnits(item.takerAmount)}</td>
               <td className={styles.textCenter}>{item.expiry !== 0 ? getExpiry(item.expiry) : 'Never'}</td>
+              {tab === 1 && (
+                <td className={styles.textCenter}>
+                  <button className={styles.fillBtn} onClick={() => handleFillOrder(item)}>
+                    Fill
+                  </button>
+                </td>
+              )}
             </tr>
           ))}
         </tbody>

diff --git a/app/src/src/components/OrderList/styles.module.scss b/app/src/src/components/OrderList/styles.module.scss
@@ -41,7 +41,16 @@
     }
 
     .textCenter {
-        text-align: center;
+      text-align: center;
+    }
+
+    .fillBtn {
+      background-color: #2669f5;
+      width: 100%;
+      height: 40px;
+      color: #fff;
+      outline: none;
+      font-weight: bold;
     }
   }
 }
diff --git a/app/src/src/components/Swap/index.jsx b/app/src/src/components/Swap/index.jsx
@@ -11,6 +11,8 @@ import { createOrder } from '../../api/order.api';
 import ReactLoading from 'react-loading';
 import toast from '../../utils/toast';
 import { addOrder } from '../../app/slice/orderList';
+import { approveERC20, checkAllowance } from '../../utils/erc20';
+import { AUGUSTUS_ADDRESS } from '../../constants/order';
 
 export default function Swap() {
   const account = useSelector((state) => state.account);
@@ -23,7 +25,7 @@ export default function Swap() {
 
   const [fromToken, setFromToken] = useState({
     img: 'https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/512/Ethereum-ETH-icon.png',
-    symbol: 'ETH',
+    symbol: 'WETH',
     address: '0x0d1F718A3079d3B695C733BA2a726873A019299a',
   });
 
@@ -81,6 +83,11 @@ export default function Swap() {
         toast.error('Invalid input data');
         return;
       }
+
+      const isAllowance = await checkAllowance(args.makerAsset, AUGUSTUS_ADDRESS, args.maker, args.makerAmount)
+      if(!isAllowance) {
+        await approveERC20(args.makerAsset, AUGUSTUS_ADDRESS);
+      }
       const orderData = await createOrderStructure(args);
       const { data } = await createOrder(orderData);
       dispatch(addOrder(data));