Merge pull request #356 from MVPWorkshop/354-fix-review-modal

fix: fixed transaction review modal and network switcher
MVPWorkshop · Dec 25, 2023 · 6432c32 · 6432c32
2 parents 54d29e0 + 823aa2e
commit 6432c32
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 79 deletions.
diff --git a/src/app/types/enum.ts b/src/app/types/enum.ts
@@ -89,3 +89,10 @@ export enum WalletConnectSteps {
   stepExtensions = "extensions",
   stepAddresses = "addresses",
 }
+
+export enum TransactionTypes {
+  swap = "swap",
+  add = "add",
+  withdraw = "withdraw",
+  createPool = "createPool",
+}
diff --git a/src/components/atom/NetworkSelector/index.tsx b/src/components/atom/NetworkSelector/index.tsx
@@ -35,7 +35,7 @@ const NetworkSelector = ({ networkSelected, items, isDropdownOpen, setIsDropdown
   });
 
   return (
-    <div ref={wrapperRef} className="relative z-[100] flex align-middle">
+    <div ref={wrapperRef} className="relative z-[10] flex align-middle">
       <button
         className="flex items-center gap-9 rounded-lg bg-purple-200 px-4 py-3"
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}

diff --git a/src/components/organism/AddPoolLiquidity/index.tsx b/src/components/organism/AddPoolLiquidity/index.tsx
@@ -7,7 +7,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import useGetNetwork from "../../../app/hooks/useGetNetwork";
 import { POOLS_PAGE } from "../../../app/router/routes";
 import { InputEditedProps, TokenDecimalsErrorProps } from "../../../app/types";
-import { ActionType, ButtonVariants, InputEditedType } from "../../../app/types/enum";
+import { ActionType, ButtonVariants, InputEditedType, TransactionTypes } from "../../../app/types/enum";
 import {
   calculateSlippageReduce,
   checkIfPoolAlreadyExists,
@@ -655,9 +655,10 @@ const AddPoolLiquidity = ({ tokenBId }: AddPoolLiquidityProps) => {
           <ReviewTransactionModal
             open={reviewModalOpen}
             title="Review adding liquidity"
+            transactionType={TransactionTypes.add}
             priceImpact={priceImpact}
-            youPay={selectedTokenA.tokenBalance}
-            youReceive={selectedTokenB.assetTokenBalance}
+            inputValueA={selectedTokenNativeValue ? selectedTokenNativeValue?.tokenValue : ""}
+            inputValueB={selectedTokenAssetValue ? selectedTokenAssetValue?.tokenValue : ""}
             tokenValueA={
               inputEdited.inputType === InputEditedType.exactIn
                 ? selectedTokenAssetValue?.tokenValue

diff --git a/src/components/organism/CreatePool/index.tsx b/src/components/organism/CreatePool/index.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import useGetNetwork from "../../../app/hooks/useGetNetwork";
 import { POOLS_PAGE } from "../../../app/router/routes";
 import { TokenDecimalsErrorProps } from "../../../app/types";
-import { ActionType, ButtonVariants } from "../../../app/types/enum";
+import { ActionType, ButtonVariants, TransactionTypes } from "../../../app/types/enum";
 import {
   calculateSlippageReduce,
   checkIfPoolAlreadyExists,
@@ -29,6 +29,7 @@ import TokenAmountInput from "../../molecule/TokenAmountInput";
 import AddPoolLiquidity from "../AddPoolLiquidity";
 import PoolSelectTokenModal from "../PoolSelectTokenModal";
 import SwapAndPoolSuccessModal from "../SwapAndPoolSuccessModal";
+import ReviewTransactionModal from "../ReviewTransactionModal";
 
 type AssetTokenProps = {
   tokenSymbol: string;
@@ -94,6 +95,7 @@ const CreatePool = ({ tokenBSelected }: CreatePoolProps) => {
   const [poolExists, setPoolExists] = useState<boolean>(false);
   const [assetTokenMinValueExceeded, setAssetTokenMinValueExceeded] = useState<boolean>(false);
   const [assetTokenMinValue, setAssetTokenMinValue] = useState<string>("");
+  const [reviewModalOpen, setReviewModalOpen] = useState<boolean>(false);
   const [tooManyDecimalsError, setTooManyDecimalsError] = useState<TokenDecimalsErrorProps>({
     tokenSymbol: "",
     isError: false,
@@ -489,13 +491,27 @@ const CreatePool = ({ tokenBSelected }: CreatePoolProps) => {
             </div>
 
             <Button
-              onClick={() => (getButtonProperties.disabled ? null : handlePool())}
+              onClick={() => (getButtonProperties.disabled ? null : setReviewModalOpen(true))}
               variant={ButtonVariants.btnInteractivePink}
               disabled={getButtonProperties.disabled || createPoolLoading || addLiquidityLoading}
             >
               {createPoolLoading || addLiquidityLoading ? <LottieMedium /> : getButtonProperties.label}
             </Button>
-
+            <ReviewTransactionModal
+              open={reviewModalOpen}
+              title="Review create pool"
+              transactionType={TransactionTypes.createPool}
+              inputValueA={selectedTokenNativeValue ? selectedTokenNativeValue.tokenValue : ""}
+              tokenValueA={selectedTokenA.nativeTokenSymbol}
+              inputValueB={selectedTokenAssetValue ? selectedTokenAssetValue.tokenValue : ""}
+              tokenValueB={selectedTokenB.tokenSymbol}
+              onClose={() => {
+                setReviewModalOpen(false);
+              }}
+              onConfirmTransaction={() => {
+                handlePool();
+              }}
+            />
             <PoolSelectTokenModal
               onSelect={setSelectedTokenB}
               onClose={() => setIsModalOpen(false)}

diff --git a/src/components/organism/ReviewTransactionModal/index.tsx b/src/components/organism/ReviewTransactionModal/index.tsx
@@ -1,32 +1,33 @@
 import { FC } from "react";
 import Modal from "../../atom/Modal";
 import Button from "../../atom/Button";
-import { ButtonVariants, InputEditedType } from "../../../app/types/enum";
+import { ButtonVariants, InputEditedType, TransactionTypes } from "../../../app/types/enum";
 import { ReactComponent as DotToken } from "../../../assets/img/dot-token.svg";
 
 interface SwapSelectTokenModalProps {
   open: boolean;
   title: string;
-  youPay: string;
-  youReceive: string;
-  priceImpact: string;
+  inputValueA: string;
+  inputValueB: string;
+  priceImpact?: string;
   tokenValueA?: string;
   tokenValueB?: string;
   tokenValueASecond?: string;
   tokenValueBSecond?: string;
-  tokenSymbolA: string;
-  tokenSymbolB: string;
-  inputType: string;
+  tokenSymbolA?: string;
+  tokenSymbolB?: string;
+  inputType?: string;
   showAll?: boolean;
+  transactionType: TransactionTypes;
   onClose: () => void;
   onConfirmTransaction: () => void;
 }
 
 const ReviewTransactionModal: FC<SwapSelectTokenModalProps> = ({
   open,
   title,
-  youPay,
-  youReceive,
+  inputValueA,
+  inputValueB,
   priceImpact,
   tokenValueA,
   tokenValueASecond,
@@ -36,83 +37,101 @@ const ReviewTransactionModal: FC<SwapSelectTokenModalProps> = ({
   tokenSymbolB,
   inputType,
   showAll,
+  transactionType,
   onClose,
   onConfirmTransaction,
 }) => {
   return (
     <Modal isOpen={open} onClose={onClose} title={title}>
       <div className="flex w-[360px] flex-col gap-5">
         <div className="flex flex-col items-start">
-          <span className="font-inter text-small text-gray-200">You pay</span>
+          <span className="font-inter text-small text-gray-200">
+            {transactionType === TransactionTypes.add && ""}
+            {transactionType === TransactionTypes.swap && "You pay"}
+            {transactionType === TransactionTypes.withdraw && "Withdrawal amount"}
+            {transactionType === TransactionTypes.createPool && "You pay"}
+          </span>
           <span className="flex w-full items-center justify-between font-unbounded-variable text-heading-4 font-bold text-gray-400">
-            {youPay}
+            {inputValueA}
             <DotToken />
           </span>
         </div>
         <div className="flex flex-col items-start">
-          <span className="font-inter text-small text-gray-200">You receive</span>
+          <span className="font-inter text-small text-gray-200">
+            {transactionType === TransactionTypes.add && ""}
+            {transactionType === TransactionTypes.swap && "You receive"}
+            {transactionType === TransactionTypes.withdraw && "Withdrawal amount"}
+            {transactionType === TransactionTypes.createPool && "You pay"}
+          </span>
           <span className="flex w-full items-center justify-between font-unbounded-variable text-heading-4 font-bold text-gray-400">
-            {youReceive}
+            {inputValueB}
             <DotToken />
           </span>
         </div>
-        <hr className="mb-0.5 mt-1 w-full border-[0.7px] border-gray-50" />
-        <div className="flex flex-col">
-          <div className="flex justify-between">
-            <span className="font-inter text-medium text-gray-300">Price impact</span>
-            <span className="font-inter text-medium text-gray-400">{priceImpact}%</span>
-          </div>
-          {showAll ? (
-            <>
-              <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">Expected output</span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueA} {tokenSymbolA}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">Minimum output</span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueB} {tokenSymbolA}
-                </span>
-              </div>
+        {transactionType !== TransactionTypes.createPool && (
+          <>
+            <hr className="mb-0.5 mt-1 w-full border-[0.7px] border-gray-50" />
+            <div className="flex flex-col">
               <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">Expected output</span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueASecond} {tokenSymbolB}
-                </span>
+                <span className="font-inter text-medium text-gray-300">Price impact</span>
+                <span className="font-inter text-medium text-gray-400">{priceImpact}%</span>
               </div>
-              <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">Minimum output</span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueBSecond} {tokenSymbolB}
-                </span>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">
-                  {inputType == InputEditedType.exactIn ? "Expected output" : "Expected input"}
-                </span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueA} {tokenSymbolA}
-                </span>
-              </div>
-              <div className="flex justify-between">
-                <span className="font-inter text-medium text-gray-300">
-                  {inputType === InputEditedType.exactIn ? "Minimum output" : "Maximum input"}
-                </span>
-                <span className="font-inter text-medium text-gray-400">
-                  {tokenValueB} {tokenSymbolB}
-                </span>
-              </div>
-            </>
-          )}
-        </div>
+              {showAll ? (
+                <>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">Expected output</span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueA} {tokenSymbolA}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">Minimum output</span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueB} {tokenSymbolA}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">Expected output</span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueASecond} {tokenSymbolB}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">Minimum output</span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueBSecond} {tokenSymbolB}
+                    </span>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">
+                      {inputType == InputEditedType.exactIn ? "Expected output" : "Expected input"}
+                    </span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueA} {tokenSymbolA}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-inter text-medium text-gray-300">
+                      {inputType === InputEditedType.exactIn ? "Minimum output" : "Maximum input"}
+                    </span>
+                    <span className="font-inter text-medium text-gray-400">
+                      {tokenValueB} {tokenSymbolB}
+                    </span>
+                  </div>
+                </>
+              )}
+            </div>
+          </>
+        )}
         <div className="flex flex-col">
           <Button onClick={onConfirmTransaction} variant={ButtonVariants.btnInteractivePink}>
-            Confirm Swap
+            Confirm {transactionType === TransactionTypes.add && "Deposit"}
+            {transactionType === TransactionTypes.swap && "Swap"}
+            {transactionType === TransactionTypes.createPool && "Deposit"}
+            {transactionType === TransactionTypes.withdraw && "Withdraw"}
           </Button>
         </div>
       </div>

diff --git a/src/components/organism/SwapTokens/index.tsx b/src/components/organism/SwapTokens/index.tsx
@@ -4,8 +4,15 @@ import { t } from "i18next";
 import { useEffect, useMemo, useState } from "react";
 import { NumericFormat } from "react-number-format";
 import useGetNetwork from "../../../app/hooks/useGetNetwork";
+import {
+  ActionType,
+  ButtonVariants,
+  InputEditedType,
+  TokenPosition,
+  TokenSelection,
+  TransactionTypes,
+} from "../../../app/types/enum";
 import { InputEditedProps, PoolCardProps, TokenDecimalsErrorProps, TokenProps } from "../../../app/types";
-import { ActionType, ButtonVariants, InputEditedType, TokenPosition, TokenSelection } from "../../../app/types/enum";
 import {
   calculateSlippageAdd,
   calculateSlippageReduce,
@@ -1640,8 +1647,9 @@ const SwapTokens = () => {
           open={reviewModalOpen}
           title="Review Swap"
           priceImpact={priceImpact}
-          youPay={selectedTokenAValue.tokenValue}
-          youReceive={selectedTokenBValue.tokenValue}
+          transactionType={TransactionTypes.swap}
+          inputValueA={selectedTokenAValue.tokenValue}
+          inputValueB={selectedTokenBValue.tokenValue}
           tokenValueA={
             inputEdited.inputType === InputEditedType.exactIn
               ? selectedTokenBValue.tokenValue

diff --git a/src/components/organism/WithdrawPoolLiquidity/index.tsx b/src/components/organism/WithdrawPoolLiquidity/index.tsx
@@ -7,7 +7,13 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import useGetNetwork from "../../../app/hooks/useGetNetwork";
 import { POOLS_PAGE } from "../../../app/router/routes";
 import { LpTokenAsset } from "../../../app/types";
-import { ActionType, ButtonVariants, InputEditedType, LiquidityPageType } from "../../../app/types/enum";
+import {
+  ActionType,
+  ButtonVariants,
+  InputEditedType,
+  LiquidityPageType,
+  TransactionTypes,
+} from "../../../app/types/enum";
 import {
   calculateSlippageReduce,
   formatDecimalsFromToken,
@@ -604,14 +610,15 @@ const WithdrawPoolLiquidity = () => {
         <ReviewTransactionModal
           open={reviewModalOpen}
           showAll={true}
+          transactionType={TransactionTypes.withdraw}
           title="Review remove liquidity"
           priceImpact={priceImpact}
-          youPay={
+          inputValueA={
             selectedTokenNativeValue?.tokenValue
               ? new Decimal(selectedTokenNativeValue?.tokenValue).mul(withdrawAmountPercentage).div(100).toFixed()
               : ""
           }
-          youReceive={formattedTokenBValue()}
+          inputValueB={formattedTokenBValue()}
           tokenValueA={
             selectedTokenNativeValue?.tokenValue &&
             new Decimal(selectedTokenNativeValue?.tokenValue).times(withdrawAmountPercentage / 100).toString()