228 Transaction review

src/app/types/enum.ts

@@ -46,6 +46,7 @@ export enum ActionType {
   SET_ASSET_LOADING = "SET_ASSET_LOADING",
   SET_TOKEN_CAN_NOT_CREATE_WARNING_POOLS = "SET_TOKEN_CAN_NOT_CREATE_WARNING_POOLS",
   SET_TOKEN_CAN_NOT_CREATE_WARNING_SWAP = "SET_TOKEN_CAN_NOT_CREATE_WARNING_SWAP",
+  SET_BLOCK_HASH_FINALIZED = "SET_BLOCK_HASH_FINALIZED",
 }
 
 export enum TokenSelection {

src/components/organism/AddPoolLiquidity/index.tsx

@@ -30,6 +30,7 @@ import TokenAmountInput from "../../molecule/TokenAmountInput";
 import CreatePool from "../CreatePool";
 import PoolSelectTokenModal from "../PoolSelectTokenModal";
 import SwapAndPoolSuccessModal from "../SwapAndPoolSuccessModal";
+import ReviewTransactionModal from "../ReviewTransactionModal";
 
 type AssetTokenProps = {
   tokenSymbol: string;
@@ -94,6 +95,7 @@ const AddPoolLiquidity = ({ tokenBId }: AddPoolLiquidityProps) => {
   const [inputEdited, setInputEdited] = useState<InputEditedProps>({ inputType: InputEditedType.exactIn });
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [poolExists, setPoolExists] = useState<boolean>(false);
+  const [reviewModalOpen, setReviewModalOpen] = useState<boolean>(false);
   const [tooManyDecimalsError, setTooManyDecimalsError] = useState<TokenDecimalsErrorProps>({
     tokenSymbol: "",
     isError: false,
@@ -137,6 +139,7 @@ const AddPoolLiquidity = ({ tokenBId }: AddPoolLiquidityProps) => {
   };
 
   const handlePool = async () => {
+    setReviewModalOpen(false);
     if (waitingForTransaction) {
       clearTimeout(waitingForTransaction);
     }
@@ -643,12 +646,38 @@ const AddPoolLiquidity = ({ tokenBId }: AddPoolLiquidityProps) => {
             </>
           )}
           <Button
-            onClick={() => (getButtonProperties.disabled ? null : handlePool())}
+            onClick={() => (getButtonProperties.disabled ? null : setReviewModalOpen(true))}
             variant={ButtonVariants.btnInteractivePink}
             disabled={getButtonProperties.disabled || addLiquidityLoading}
           >
             {addLiquidityLoading ? <LottieMedium /> : getButtonProperties.label}
           </Button>
+          <ReviewTransactionModal
+            open={reviewModalOpen}
+            title="Review adding liquidity"
+            priceImpact={priceImpact}
+            youPay={selectedTokenA.tokenBalance}
+            youReceive={selectedTokenB.assetTokenBalance}
+            tokenValueA={
+              inputEdited.inputType === InputEditedType.exactIn
+                ? selectedTokenAssetValue?.tokenValue
+                : selectedTokenNativeValue?.tokenValue
+            }
+            tokenValueB={
+              inputEdited.inputType === InputEditedType.exactIn
+                ? formatDecimalsFromToken(assetTokenWithSlippage?.tokenValue, selectedTokenB.decimals)
+                : formatDecimalsFromToken(nativeTokenWithSlippage?.tokenValue, selectedTokenA.nativeTokenDecimals)
+            }
+            tokenSymbolA={selectedTokenA.nativeTokenSymbol}
+            tokenSymbolB={selectedTokenB.tokenSymbol}
+            onClose={() => {
+              setReviewModalOpen(false);
+            }}
+            inputType={inputEdited.inputType}
+            onConfirmTransaction={() => {
+              handlePool();
+            }}
+          />
           <PoolSelectTokenModal
             onSelect={setSelectedTokenB}
             onClose={() => setIsModalOpen(false)}

src/components/organism/ReviewTransactionModal/index.tsx

@@ -0,0 +1,86 @@
+import { FC } from "react";
+import Modal from "../../atom/Modal";
+import Button from "../../atom/Button";
+import { ButtonVariants, InputEditedType } 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;
+  tokenValueA?: string;
+  tokenValueB?: string;
+  tokenSymbolA: string;
+  tokenSymbolB: string;
+  inputType: string;
+  onClose: () => void;
+  onConfirmTransaction: () => void;
+}
+
+const ReviewTransactionModal: FC<SwapSelectTokenModalProps> = ({
+  open,
+  title,
+  youPay,
+  youReceive,
+  priceImpact,
+  tokenValueA,
+  tokenValueB,
+  tokenSymbolA,
+  tokenSymbolB,
+  inputType,
+  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="flex w-full items-center justify-between font-unbounded-variable text-heading-4 font-bold text-gray-400">
+            {youPay}
+            <DotToken />
+          </span>
+        </div>
+        <div className="flex flex-col items-start">
+          <span className="font-inter text-small text-gray-200">You receive</span>
+          <span className="flex w-full items-center justify-between font-unbounded-variable text-heading-4 font-bold text-gray-400">
+            {youReceive}
+            <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>
+          <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"}t
+            </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
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ReviewTransactionModal;

src/components/organism/SwapAndPoolSuccessModal/index.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { ReactComponent as ArrowLeft } from "../../../assets/img/arrow-left.svg";
 import { ReactComponent as ArrowRight } from "../../../assets/img/arrow-right.svg";
+import { ReactComponent as OpenLinkArrow } from "../../../assets/img/open-link-arrow.svg";
 import Modal from "../../atom/Modal";
+import { useAppContext } from "../../../state";
 
 interface SwapAndPoolSuccessModalProps {
   open: boolean;
@@ -28,6 +30,8 @@ const SwapAndPoolSuccessModal: FC<SwapAndPoolSuccessModalProps> = ({
   tokenB,
   onClose,
 }) => {
+  const { state } = useAppContext();
+  const { blockHashFinalized } = state;
   return (
     <div>
       <Modal isOpen={open} onClose={onClose}>
@@ -47,6 +51,12 @@ const SwapAndPoolSuccessModal: FC<SwapAndPoolSuccessModalProps> = ({
               {tokenA.icon} {tokenA.value} {tokenA.symbol} <ArrowRight /> {tokenB.icon} {tokenB.value} {tokenB.symbol}
             </div>
           </div>
+          <div className="flex flex-row items-center justify-center gap-1 font-unbounded-variable text-medium underline">
+            <a href={`https://assethub-rococo.subscan.io/block/${blockHashFinalized}`} target="_blank" rel="noreferrer">
+              View in block explorer
+            </a>
+            <OpenLinkArrow />
+          </div>
         </div>
       </Modal>
     </div>

src/components/organism/SwapTokens/index.tsx

@@ -40,6 +40,7 @@ import WarningMessage from "../../atom/WarningMessage";
 import TokenAmountInput from "../../molecule/TokenAmountInput";
 import SwapAndPoolSuccessModal from "../SwapAndPoolSuccessModal";
 import SwapSelectTokenModal from "../SwapSelectTokenModal";
+import ReviewTransactionModal from "../ReviewTransactionModal";
 
 type SwapTokenProps = {
   tokenA: TokenProps;
@@ -124,6 +125,7 @@ const SwapTokens = () => {
   });
 
   const [isTransactionTimeout, setIsTransactionTimeout] = useState<boolean>(false);
+  const [reviewModalOpen, setReviewModalOpen] = useState<boolean>(false);
   const [waitingForTransaction, setWaitingForTransaction] = useState<NodeJS.Timeout>();
   const [priceImpact, setPriceImpact] = useState<string>("");
   const [assetBPriceOfOneAssetA, setAssetBPriceOfOneAssetA] = useState<string>("");
@@ -573,6 +575,7 @@ const SwapTokens = () => {
   };
 
   const handleSwap = async () => {
+    setReviewModalOpen(false);
     if (waitingForTransaction) {
       clearTimeout(waitingForTransaction);
     }
@@ -1317,7 +1320,7 @@ const SwapTokens = () => {
         />
 
         <Button
-          onClick={() => (getSwapButtonProperties.disabled ? null : handleSwap())}
+          onClick={() => (getSwapButtonProperties.disabled ? null : setReviewModalOpen(true))}
           variant={ButtonVariants.btnInteractivePink}
           disabled={getSwapButtonProperties.disabled || swapLoading}
         >
@@ -1350,6 +1353,38 @@ const SwapTokens = () => {
           }}
           actionLabel="Swapped"
         />
+        <ReviewTransactionModal
+          open={reviewModalOpen}
+          title="Review Swap"
+          priceImpact={priceImpact}
+          youPay={selectedTokenAValue.tokenValue}
+          youReceive={selectedTokenBValue.tokenValue}
+          tokenValueA={
+            inputEdited.inputType === InputEditedType.exactIn
+              ? selectedTokenBValue.tokenValue
+              : selectedTokenAValue.tokenValue
+          }
+          tokenValueB={
+            inputEdited.inputType === InputEditedType.exactIn
+              ? formatDecimalsFromToken(
+                  formatInputTokenValue(tokenBValueForSwap.tokenValue, selectedTokens.tokenB.decimals),
+                  selectedTokens.tokenB.decimals
+                )
+              : formatDecimalsFromToken(
+                  formatInputTokenValue(tokenAValueForSwap.tokenValue, selectedTokens.tokenA.decimals),
+                  selectedTokens.tokenA.decimals
+                )
+          }
+          tokenSymbolA={selectedTokens.tokenA.tokenSymbol}
+          tokenSymbolB={selectedTokens.tokenB.tokenSymbol}
+          onClose={() => {
+            setReviewModalOpen(false);
+          }}
+          inputType={inputEdited.inputType}
+          onConfirmTransaction={() => {
+            handleSwap();
+          }}
+        />
       </div>
       <WarningMessage show={lowTradingMinimum} message={t("pageError.tradingMinimum")} />
       <WarningMessage

src/components/organism/WithdrawPoolLiquidity/index.tsx

@@ -7,7 +7,7 @@ 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, LiquidityPageType } from "../../../app/types/enum";
+import { ActionType, ButtonVariants, InputEditedType, LiquidityPageType } from "../../../app/types/enum";
 import {
   calculateSlippageReduce,
   formatDecimalsFromToken,
@@ -28,6 +28,7 @@ import AmountPercentage from "../../molecule/AmountPercentage";
 import TokenAmountInput from "../../molecule/TokenAmountInput";
 import PoolSelectTokenModal from "../PoolSelectTokenModal";
 import SwapAndPoolSuccessModal from "../SwapAndPoolSuccessModal";
+import ReviewTransactionModal from "../ReviewTransactionModal";
 
 type AssetTokenProps = {
   tokenSymbol: string;
@@ -86,6 +87,7 @@ const WithdrawPoolLiquidity = () => {
   const [minimumTokenAmountExceeded, setMinimumTokenAmountExceeded] = useState<boolean>(false);
   const [withdrawAmountPercentage, setWithdrawAmountPercentage] = useState<number>(100);
   const [maxPercentage, setMaxPercentage] = useState<number>(100);
+  const [reviewModalOpen, setReviewModalOpen] = useState<boolean>(false);
   const [isTransactionTimeout, setIsTransactionTimeout] = useState<boolean>(false);
   const [waitingForTransaction, setWaitingForTransaction] = useState<NodeJS.Timeout>();
   const [assetBPriceOfOneAssetA, setAssetBPriceOfOneAssetA] = useState<string>("");
@@ -118,6 +120,7 @@ const WithdrawPoolLiquidity = () => {
   };
 
   const handlePool = async () => {
+    setReviewModalOpen(false);
     const lpToken = Math.floor(Number(lpTokensAmountToBurn) * (withdrawAmountPercentage / 100)).toString();
     if (waitingForTransaction) {
       clearTimeout(waitingForTransaction);
@@ -586,7 +589,7 @@ const WithdrawPoolLiquidity = () => {
           </>
         )}
         <Button
-          onClick={() => (getWithdrawButtonProperties.disabled ? null : handlePool())}
+          onClick={() => (getWithdrawButtonProperties.disabled ? null : setReviewModalOpen(true))}
           variant={ButtonVariants.btnInteractivePink}
           disabled={getWithdrawButtonProperties.disabled || withdrawLiquidityLoading}
         >
@@ -598,6 +601,31 @@ const WithdrawPoolLiquidity = () => {
           open={isModalOpen}
           title={t("button.selectToken")}
         />
+        <ReviewTransactionModal
+          open={reviewModalOpen}
+          title="Review remove liquidity"
+          priceImpact={priceImpact}
+          youPay={
+            selectedTokenNativeValue?.tokenValue
+              ? new Decimal(selectedTokenNativeValue?.tokenValue).mul(withdrawAmountPercentage).div(100).toFixed()
+              : ""
+          }
+          youReceive={formattedTokenBValue()}
+          tokenValueA={
+            selectedTokenAssetValue?.tokenValue &&
+            new Decimal(selectedTokenAssetValue?.tokenValue).times(withdrawAmountPercentage / 100).toString()
+          }
+          tokenValueB={formatDecimalsFromToken(assetTokenWithSlippage.tokenValue, selectedTokenB.decimals)}
+          tokenSymbolA={selectedTokenA.nativeTokenSymbol}
+          tokenSymbolB={selectedTokenB.tokenSymbol}
+          onClose={() => {
+            setReviewModalOpen(false);
+          }}
+          inputType={InputEditedType.exactIn}
+          onConfirmTransaction={() => {
+            handlePool();
+          }}
+        />
         <SwapAndPoolSuccessModal
           open={successModalOpen}
           onClose={closeSuccessModal}

src/services/poolServices/index.ts

@@ -12,6 +12,7 @@ import dotAcpToast from "../../app/util/toast";
 import NativeTokenIcon from "../../assets/img/dot-token.svg";
 import AssetTokenIcon from "../../assets/img/test-token.svg";
 import { PoolAction } from "../../store/pools/interface";
+import { WalletAction } from "../../store/wallet/interface";
 
 const { parents, nativeTokenSymbol } = useGetNetwork();
 
@@ -113,7 +114,7 @@ export const createPool = async (
   minAssetTokenValue: string,
   nativeTokenDecimals: string,
   assetTokenDecimals: string,
-  dispatch: Dispatch<PoolAction>
+  dispatch: Dispatch<PoolAction | WalletAction>
 ) => {
   const firstArg = api
     .createType("MultiLocation", {
@@ -199,7 +200,7 @@ export const addLiquidity = async (
   minAssetTokenValue: string,
   nativeTokenDecimals: string,
   assetTokenDecimals: string,
-  dispatch: Dispatch<PoolAction>
+  dispatch: Dispatch<PoolAction | WalletAction>
 ) => {
   const firstArg = api
     .createType("MultiLocation", {
@@ -271,6 +272,7 @@ export const addLiquidity = async (
         if (response.status.type === ServiceResponseStatus.Finalized && !response.dispatchError) {
           exactAddedLiquidityInPool(response.toHuman(), nativeTokenDecimals, assetTokenDecimals, dispatch);
 
+          dispatch({ type: ActionType.SET_BLOCK_HASH_FINALIZED, payload: response.status.asFinalized.toString() });
           dispatch({ type: ActionType.SET_SUCCESS_MODAL_OPEN, payload: true });
           dispatch({ type: ActionType.SET_ADD_LIQUIDITY_LOADING, payload: false });
           const allPools = await getAllPools(api);
@@ -297,7 +299,7 @@ export const removeLiquidity = async (
   minAssetTokenValue: string,
   nativeTokenDecimals: string,
   assetTokenDecimals: string,
-  dispatch: Dispatch<PoolAction>
+  dispatch: Dispatch<PoolAction | WalletAction>
 ) => {
   const firstArg = api
     .createType("MultiLocation", {
@@ -361,6 +363,7 @@ export const removeLiquidity = async (
         if (response.status.type === ServiceResponseStatus.Finalized && !response.dispatchError) {
           exactWithdrawnLiquidityFromPool(response.toHuman(), nativeTokenDecimals, assetTokenDecimals, dispatch);
 
+          dispatch({ type: ActionType.SET_BLOCK_HASH_FINALIZED, payload: response.status.asFinalized.toString() });
           dispatch({ type: ActionType.SET_SUCCESS_MODAL_OPEN, payload: true });
           dispatch({ type: ActionType.SET_WITHDRAW_LIQUIDITY_LOADING, payload: false });
           const allPools = await getAllPools(api);