style updates to be closer to figma

DeXter-on-Radix · Oct 9, 2023 · a0ca975 · a0ca975
1 parent c5f453d
commit a0ca975
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 41 deletions.
diff --git a/src/app/components/order_input/AmountInput.tsx b/src/app/components/order_input/AmountInput.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 
 import { useAppDispatch, useAppSelector } from "hooks";
-import { OrderSide, TokenInput, orderInputSlice } from "redux/orderInputSlice";
+import {
+  OrderSide,
+  TokenInput,
+  orderInputSlice,
+  selectTargetToken,
+} from "redux/orderInputSlice";
 
 interface TokenInputFiledProps extends TokenInput {
   onFocus: () => void;
@@ -19,7 +24,9 @@ function nullableNumberInput(event: React.ChangeEvent<HTMLInputElement>) {
 }
 
 function TokenInputFiled(props: TokenInputFiledProps) {
+  const targetToken = useAppSelector(selectTargetToken);
   const {
+    address,
     symbol,
     iconUrl,
     valid,
@@ -30,7 +37,7 @@ function TokenInputFiled(props: TokenInputFiledProps) {
     onFocus,
   } = props;
   return (
-    <div className="form-control">
+    <div className="form-control my-2">
       {/* balance */}
       <div className="flex justify-between text-secondary-content text-xs">
         <span>Current balance:</span>
@@ -40,12 +47,20 @@ function TokenInputFiled(props: TokenInputFiledProps) {
       {/* input */}
       <div
         className={
-          "flex flex-row flex-nowrap bg-base-300 justify-between py-1 focus:border-accent" +
+          "flex flex-row flex-nowrap bg-base-300 justify-between py-1" +
+          (targetToken.address === address ? " border border-accent" : "") +
           (!valid ? " border border-error" : "")
         }
       >
-        <img src={iconUrl} alt={symbol} className="w-4 object-contain ml-1" />
-        <span className="mx-1">{symbol}</span>
+        <div className="flex flex-nowrap items-center">
+          <img
+            src={iconUrl}
+            alt={symbol}
+            className="w-6 h-6 rounded-full mx-2"
+          />
+          <span>{symbol}</span>
+        </div>
+
         <input
           type="number"
           value={amount}
@@ -89,7 +104,7 @@ export function AmountInput() {
         width="16"
         height="20"
         viewBox="0 0 16 20"
-        className="text-primary-content hover:text-accent"
+        className="text-primary-content hover:text-accent ml-4"
         fill="none"
         onClick={() => {
           dispatch(orderInputSlice.actions.swapTokens());

diff --git a/src/app/components/order_input/LimitOrderInput.tsx b/src/app/components/order_input/LimitOrderInput.tsx
@@ -27,9 +27,6 @@ export function LimitOrderInput() {
     <>
       <div className="form-control w-full">
         <AmountInput />
-        <p className="text-left text-sm font-medium !mb-2">
-          {side === OrderSide.BUY ? "Buy" : "Sell"} Price
-        </p>
         <p
           className="text-left text-sm font-medium !mb-2 cursor-pointer"
           onClick={() =>
@@ -40,7 +37,7 @@ export function LimitOrderInput() {
             )
           }
         >
-          Best Price:{" "}
+          Best {side} Price:{" "}
           <span
             className={
               "font-semibold " +

diff --git a/src/app/components/order_input/OrderInput.tsx b/src/app/components/order_input/OrderInput.tsx
@@ -7,7 +7,8 @@ import {
   orderInputSlice,
   selectTargetToken,
   submitOrder,
-  validateOrderInput,
+  isValidQuoteInput,
+  isValidTransaction,
 } from "redux/orderInputSlice";
 import { fetchBalances } from "redux/pairSelectorSlice";
 import { OrderTypeTabs } from "./OrderTypeTabs";
@@ -24,7 +25,7 @@ function SubmitButton() {
   const transactionResult = useAppSelector(
     (state) => state.orderInput.transactionResult
   );
-  const validationResult = useAppSelector(validateOrderInput);
+  const transactionValidation = useAppSelector(isValidTransaction);
   const dispatch = useAppDispatch();
   const submitString = tab.toString() + " " + side.toString() + " " + symbol;
 
@@ -35,18 +36,14 @@ function SubmitButton() {
           <input
             type="checkbox"
             className="checkbox checkbox-sm my-auto mr-2"
-            onClick={() =>
-              dispatch(
-                orderInputSlice.actions.togglePreventImmediateExecution()
-              )
-            }
+            onClick={() => dispatch(orderInputSlice.actions.togglePostOnly())}
           />
-          <span className="my-auto text-sm">Prevent immediate execution </span>
+          <span className="my-auto text-sm">Post only</span>
         </div>
       )}
       <button
         className="flex-1 btn btn-accent"
-        disabled={!validationResult.valid || transactionInProgress}
+        disabled={!transactionValidation.valid || transactionInProgress}
         onClick={() => dispatch(submitOrder())}
       >
         {transactionInProgress ? "Transaction in progress..." : submitString}
@@ -58,26 +55,19 @@ function SubmitButton() {
 
 export function OrderInput() {
   const dispatch = useAppDispatch();
-  const {
-    token1,
-    token2,
-    side,
-    price,
-    preventImmediateExecution,
-    slippage,
-    tab,
-  } = useAppSelector((state) => state.orderInput);
+  const { token1, token2, side, price, postOnly, slippage, tab } =
+    useAppSelector((state) => state.orderInput);
   const tartgetToken = useAppSelector(selectTargetToken);
   const pairAddress = useAppSelector((state) => state.pairSelector.address);
 
-  const validationResult = useAppSelector(validateOrderInput);
+  const quoteValidation = useAppSelector(isValidQuoteInput);
 
   useEffect(() => {
     dispatch(fetchBalances());
   }, [dispatch, pairAddress]);
 
   useEffect(() => {
-    if (validationResult.valid && tartgetToken.amount !== "") {
+    if (quoteValidation.valid && tartgetToken.amount !== "") {
       dispatch(fetchQuote());
     }
   }, [
@@ -89,15 +79,15 @@ export function OrderInput() {
     price,
     slippage,
     tab,
-    preventImmediateExecution,
-    validationResult,
+    postOnly,
+    quoteValidation,
     tartgetToken,
   ]);
 
   return (
     <>
       <OrderTypeTabs />
-      <div className="form-control justify-between items-start bg-neutral p-3 flex-1 w-full">
+      <div className="form-control justify-between items-start bg-neutral px-4 py-8 w-full">
         {tab === OrderTab.MARKET ? <MarketOrderInput /> : <LimitOrderInput />}
         <SubmitButton />
       </div>

diff --git a/src/app/components/order_input/OrderTypeTabs.tsx b/src/app/components/order_input/OrderTypeTabs.tsx
@@ -8,12 +8,12 @@ export function OrderTypeTabs() {
 
   function tabClass(isActive: boolean) {
     return (
-      "flex-1 tab no-underline h-full text-base font-semibold py-3 tab-border-2" +
+      "flex-1 tab no-underline h-full text-base font-semibold py-3 mx-4 tab-border-2" +
       (isActive ? " tab-active tab-bordered" : "")
     );
   }
   return (
-    <div className="tabs">
+    <div className="tabs mt-4 uppercase">
       <div
         className={tabClass(activeTab === OrderTab.MARKET)}
         onClick={() => dispatch(actions.setActiveTab(OrderTab.MARKET))}

diff --git a/src/app/redux/orderInputSlice.ts b/src/app/redux/orderInputSlice.ts
@@ -44,7 +44,7 @@ export interface OrderInputState {
   token1: TokenInput;
   token2: TokenInput;
   tab: OrderTab;
-  preventImmediateExecution: boolean;
+  postOnly: boolean;
   side: OrderSide;
   price: number;
   slippage: number;
@@ -59,7 +59,7 @@ function adexOrderType(state: OrderInputState): adex.OrderType {
     return adex.OrderType.MARKET;
   }
   if (state.tab === OrderTab.LIMIT) {
-    if (state.preventImmediateExecution) {
+    if (state.postOnly) {
       return adex.OrderType.POSTONLY;
     } else {
       return adex.OrderType.LIMIT;
@@ -82,7 +82,7 @@ const initialState: OrderInputState = {
   token1: initialTokenInput,
   token2: initialTokenInput,
   tab: OrderTab.MARKET,
-  preventImmediateExecution: false,
+  postOnly: false,
   side: adex.OrderSide.BUY,
   price: 0,
   slippage: 0.01,
@@ -263,8 +263,8 @@ export const orderInputSlice = createSlice({
         state.slippage = 1;
       }
     },
-    togglePreventImmediateExecution(state) {
-      state.preventImmediateExecution = !state.preventImmediateExecution;
+    togglePostOnly(state) {
+      state.postOnly = !state.postOnly;
     },
   },
 
@@ -472,7 +472,7 @@ function validateAmountToken1(token1: TokenInput): TokenInput {
 }
 
 const selectTab = (state: RootState) => state.orderInput.tab;
-export const validateOrderInput = createSelector(
+export const isValidQuoteInput = createSelector(
   [
     selectToken1,
     selectToken2,
@@ -500,3 +500,17 @@ export const validateOrderInput = createSelector(
     return { valid: true };
   }
 );
+
+export const isValidTransaction = createSelector(
+  [isValidQuoteInput, selectToken1, selectToken2],
+  (quoteInputValid, token1, token2) => {
+    if (!quoteInputValid.valid) {
+      return quoteInputValid;
+    }
+    if (token1.amount === "" || token2.amount === "") {
+      return { valid: false };
+    }
+
+    return { valid: true };
+  }
+);