From 27afcbc63dfffcdae0401ddf66c1c5abf65d31fa Mon Sep 17 00:00:00 2001
From: Connor Barr <crnbarr@gmail.com>
Date: Thu, 6 Jun 2024 21:35:37 +0100
Subject: [PATCH] feat: added review order modal

---
 packages/web/components/input/limit-input.tsx |   4 +-
 .../web/components/place-limit-tool/index.tsx | 253 ++++++++++--------
 .../web/hooks/limit-orders/use-place-limit.ts | 105 +++++---
 packages/web/modals/review-limit-order.tsx    | 161 +++++++++++
 4 files changed, 366 insertions(+), 157 deletions(-)
 create mode 100644 packages/web/modals/review-limit-order.tsx

diff --git a/packages/web/components/input/limit-input.tsx b/packages/web/components/input/limit-input.tsx
index b963bdb0dc..423b480727 100644
--- a/packages/web/components/input/limit-input.tsx
+++ b/packages/web/components/input/limit-input.tsx
@@ -4,6 +4,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import { Icon } from "~/components/assets";
 import { DynamicSizeInput } from "~/components/input/dynamic-size-input";
+import { useCoinPrice } from "~/hooks/queries/assets/use-coin-price";
 import { formatPretty } from "~/utils/formatter";
 
 export interface LimitInputProps {
@@ -43,6 +44,7 @@ export const LimitInput: FC<LimitInputProps> = ({
 }) => {
   const [fiatAmount, setFiatAmount] = useState<string>("");
   const [focused, setFocused] = useState<FocusedInput>(FocusedInput.FIAT);
+  const { price: basePrice } = useCoinPrice(baseAsset);
 
   const swapFocus = useCallback(() => {
     switch (focused) {
@@ -99,7 +101,7 @@ export const LimitInput: FC<LimitInputProps> = ({
     const tokenValue = new Dec(value)?.quo(price);
     setTokenAmountSafe(tokenValue.toString());
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [price, fiatAmount, setTokenAmountSafe]);
+  }, [price, fiatAmount, setTokenAmountSafe, basePrice]);
 
   const FiatInput = useMemo(() => {
     const isFocused = focused === FocusedInput.FIAT;
diff --git a/packages/web/components/place-limit-tool/index.tsx b/packages/web/components/place-limit-tool/index.tsx
index 05686e9ac3..c01f495522 100644
--- a/packages/web/components/place-limit-tool/index.tsx
+++ b/packages/web/components/place-limit-tool/index.tsx
@@ -12,6 +12,7 @@ import { Button } from "~/components/ui/button";
 import { useTranslation } from "~/hooks";
 import { OrderDirection, usePlaceLimit } from "~/hooks/limit-orders";
 import { useOrderbookPool } from "~/hooks/limit-orders/use-orderbook-pool";
+import { ReviewLimitOrderModal } from "~/modals/review-limit-order";
 import { useStore } from "~/stores";
 import { formatPretty } from "~/utils/formatter";
 
@@ -30,6 +31,7 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
   ({ orderDirection = OrderDirection.Bid }) => {
     const { accountStore } = useStore();
     const { t } = useTranslation();
+    const [reviewOpen, setReviewOpen] = useState<boolean>(false);
     const [baseDenom, setBaseDenom] = useState<string>("ION");
     const quoteDenom = "OSMO";
 
@@ -51,135 +53,148 @@ export const PlaceLimitTool: FunctionComponent<PlaceLimitToolProps> = observer(
     const isSwapToolLoading = false;
 
     return (
-      <div className="flex flex-col gap-3">
-        <TokenSelectLimit
-          selectableAssets={[swapState.fromAsset, swapState.toAsset]}
-          baseAsset={swapState.baseAsset}
-          quoteAsset={swapState.quoteAsset}
-          baseBalance={swapState.baseTokenBalance}
-          quoteBalance={swapState.quoteTokenBalance}
-          onTokenSelect={(newDenom) => setBaseDenom(newDenom)}
-          disabled={false}
-          orderDirection={orderDirection}
-        />
-        <div className="px-4 py-[22px] transition-all md:rounded-xl md:py-2.5 md:px-3">
-          <div className="flex place-content-end items-center transition-opacity">
-            <div className="flex items-center gap-1.5">
-              <Tooltip
-                content={
-                  <div className="text-center">
-                    {t("swap.maxButtonErrorNoBalance")}
-                  </div>
-                }
-                disabled={!swapState.inAmountInput.notEnoughBalanceForMax}
-              >
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className={classNames(
-                    "text-wosmongton-300",
-                    swapState.inAmountInput.isMaxValue &&
-                      !swapState.inAmountInput
-                        .isLoadingCurrentBalanceNetworkFee &&
-                      !swapState.inAmountInput.hasErrorWithCurrentBalanceQuote
-                      ? "bg-wosmongton-100/20"
-                      : "bg-transparent"
-                  )}
-                  disabled={
-                    !swapState.inAmountInput.balance ||
-                    swapState.inAmountInput.balance.toDec().isZero() ||
-                    swapState.inAmountInput.notEnoughBalanceForMax
+      <>
+        <div className="flex flex-col gap-3">
+          <TokenSelectLimit
+            selectableAssets={[swapState.baseAsset, swapState.quoteAsset]}
+            baseAsset={swapState.baseAsset}
+            quoteAsset={swapState.quoteAsset}
+            baseBalance={swapState.baseTokenBalance}
+            quoteBalance={swapState.quoteTokenBalance}
+            onTokenSelect={(newDenom) => setBaseDenom(newDenom)}
+            disabled={false}
+            orderDirection={orderDirection}
+          />
+          <div className="px-4 py-[22px] transition-all md:rounded-xl md:py-2.5 md:px-3">
+            <div className="flex place-content-end items-center transition-opacity">
+              <div className="flex items-center gap-1.5">
+                <Tooltip
+                  content={
+                    <div className="text-center">
+                      {t("swap.maxButtonErrorNoBalance")}
+                    </div>
                   }
-                  isLoading={false}
-                  loadingText={t("swap.MAX")}
-                  classes={{
-                    spinner: "!h-3 !w-3",
-                    spinnerContainer: "!gap-1",
-                  }}
-                  onClick={() => swapState.inAmountInput.toggleMax()}
+                  disabled={!swapState.inAmountInput.notEnoughBalanceForMax}
                 >
-                  {t("swap.MAX")}
-                </Button>
-              </Tooltip>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className={classNames(
+                      "text-wosmongton-300",
+                      swapState.inAmountInput.isMaxValue &&
+                        !swapState.inAmountInput
+                          .isLoadingCurrentBalanceNetworkFee &&
+                        !swapState.inAmountInput.hasErrorWithCurrentBalanceQuote
+                        ? "bg-wosmongton-100/20"
+                        : "bg-transparent"
+                    )}
+                    disabled={
+                      !swapState.inAmountInput.balance ||
+                      swapState.inAmountInput.balance.toDec().isZero() ||
+                      swapState.inAmountInput.notEnoughBalanceForMax
+                    }
+                    isLoading={false}
+                    loadingText={t("swap.MAX")}
+                    classes={{
+                      spinner: "!h-3 !w-3",
+                      spinnerContainer: "!gap-1",
+                    }}
+                    onClick={() => swapState.inAmountInput.toggleMax()}
+                  >
+                    {t("swap.MAX")}
+                  </Button>
+                </Tooltip>
+              </div>
             </div>
-          </div>
-          <div className="mt-3 flex place-content-between items-center">
-            <div className="flex w-full flex-col items-center">
-              <LimitInput
-                onChange={swapState.inAmountInput.setAmount}
-                baseAsset={swapState.inAmountInput.balance!}
-                tokenAmount={swapState.inAmountInput.inputAmount}
-                price={swapState.priceState.price}
-              />
+            <div className="mt-3 flex place-content-between items-center">
+              <div className="flex w-full flex-col items-center">
+                <LimitInput
+                  onChange={swapState.inAmountInput.setAmount}
+                  baseAsset={swapState.inAmountInput.balance!}
+                  tokenAmount={swapState.inAmountInput.inputAmount}
+                  price={swapState.priceState.price}
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <div className="mt-3 flex place-content-between items-center text-body1">
-          <div className="flex w-full flex-col">
-            <div>
-              <span
-                className={classNames(
-                  "w-full bg-transparent text-white-full focus:outline-none"
-                )}
-              >{`When ${swapState.baseDenom} price is at `}</span>
-              <span
-                className={classNames(
-                  "w-full bg-transparent text-wosmongton-300 focus:outline-none "
-                )}
-              >{`$${formatPretty(swapState.priceState.price)}`}</span>
+          <div className="mt-3 flex place-content-between items-center text-body1">
+            <div className="flex w-full flex-col">
+              <div>
+                <span
+                  className={classNames(
+                    "w-full bg-transparent text-white-full focus:outline-none"
+                  )}
+                >{`When ${swapState.baseDenom} price is at `}</span>
+                <span
+                  className={classNames(
+                    "w-full bg-transparent text-wosmongton-300 focus:outline-none "
+                  )}
+                >{`$${formatPretty(swapState.priceState.price)}`}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="flex w-full flex-row place-content-between items-center rounded-xl border border-osmoverse-700 py-3 px-6">
-          <div className="h-full">
-            <span>{`${swapState.priceState.percentAdjusted
-              .mul(new Dec(100))
-              .round()
-              .abs()}% `}</span>
-            <span className="text-osmoverse-400">
-              {orderDirection === OrderDirection.Bid ? "below" : "above"}{" "}
-              current price
-            </span>
+          <div className="flex w-full flex-row place-content-between items-center rounded-xl border border-osmoverse-700 py-3 px-6">
+            <div className="h-full">
+              <span>{`${swapState.priceState.percentAdjusted
+                .mul(new Dec(100))
+                .round()
+                .abs()}% `}</span>
+              <span className="text-osmoverse-400">
+                {orderDirection === OrderDirection.Bid ? "below" : "above"}{" "}
+                current price
+              </span>
+            </div>
+            <div className="grid grid-cols-4 gap-2">
+              {useMemo(
+                () =>
+                  percentAdjustmentOptions.map(({ label, value }) => (
+                    <button
+                      className="rounded-xl border border-osmoverse-700 py-1 px-3 text-white-full text-wosmongton-200"
+                      key={`limit-price-adjust-${label}`}
+                      onClick={() =>
+                        swapState.priceState.adjustByPercentage(
+                          orderDirection == OrderDirection.Bid
+                            ? value.neg()
+                            : value
+                        )
+                      }
+                    >
+                      {label}
+                    </button>
+                  )),
+                [swapState.priceState, orderDirection]
+              )}
+            </div>
           </div>
-          <div className="grid grid-cols-4 gap-2">
-            {useMemo(
-              () =>
-                percentAdjustmentOptions.map(({ label, value }) => (
-                  <button
-                    className="rounded-xl border border-osmoverse-700 py-1 px-3 text-white-full text-wosmongton-200"
-                    key={`limit-price-adjust-${label}`}
-                    onClick={() =>
-                      swapState.priceState.adjustByPercentage(
-                        orderDirection == OrderDirection.Bid
-                          ? value.neg()
-                          : value
-                      )
-                    }
-                  >
-                    {label}
-                  </button>
-                )),
-              [swapState.priceState, orderDirection]
+          <Button
+            disabled={
+              swapState.insufficientFunds ||
+              !swapState.inAmountInput.inputAmount ||
+              swapState.inAmountInput.inputAmount === "0"
+            }
+            isLoading={!swapState.isBalancesFetched}
+            loadingText={"Loading..."}
+            onClick={() => setReviewOpen(true)}
+          >
+            {account?.walletStatus === WalletStatus.Connected ||
+            isSwapToolLoading ? (
+              "Review Order"
+            ) : (
+              <h6 className="flex items-center gap-3">
+                <Icon id="wallet" className="h-6 w-6" />
+                {t("connectWallet")}
+              </h6>
             )}
-          </div>
+          </Button>
         </div>
-        <Button
-          disabled={swapState.insufficientFunds}
-          isLoading={!swapState.isBalancesFetched}
-          loadingText={"Loading..."}
-          onClick={swapState.placeLimit}
-        >
-          {account?.walletStatus === WalletStatus.Connected ||
-          isSwapToolLoading ? (
-            "Place Order"
-          ) : (
-            <h6 className="flex items-center gap-3">
-              <Icon id="wallet" className="h-6 w-6" />
-              {t("connectWallet")}
-            </h6>
-          )}
-        </Button>
-      </div>
+        <ReviewLimitOrderModal
+          placeLimitState={swapState}
+          orderDirection={orderDirection}
+          isOpen={reviewOpen}
+          onRequestClose={() => setReviewOpen(false)}
+          orderType="limit"
+        />
+      </>
     );
   }
 );
diff --git a/packages/web/hooks/limit-orders/use-place-limit.ts b/packages/web/hooks/limit-orders/use-place-limit.ts
index 5d331772d0..5cc2db9dac 100644
--- a/packages/web/hooks/limit-orders/use-place-limit.ts
+++ b/packages/web/hooks/limit-orders/use-place-limit.ts
@@ -1,13 +1,12 @@
 import { CoinPretty, Dec } from "@keplr-wallet/unit";
 import { priceToTick } from "@osmosis-labs/math";
+import { DEFAULT_VS_CURRENCY } from "@osmosis-labs/server";
 import { useCallback, useMemo, useState } from "react";
 
+import { mulPrice } from "~/hooks/queries/assets/use-coin-fiat-value";
+import { useCoinPrice } from "~/hooks/queries/assets/use-coin-price";
 import { useBalances } from "~/hooks/queries/cosmos/use-balances";
-import {
-  useSwapAmountInput,
-  useSwapAsset,
-  useSwapAssets,
-} from "~/hooks/use-swap";
+import { useSwapAmountInput, useSwapAssets } from "~/hooks/use-swap";
 import { useStore } from "~/stores";
 
 export enum OrderDirection {
@@ -26,6 +25,8 @@ export interface UsePlaceLimitParams {
   orderbookContractAddress: string;
 }
 
+export type PlaceLimitState = ReturnType<typeof usePlaceLimit>;
+
 // TODO: adjust as necessary
 const CLAIM_BOUNTY = "0.01";
 
@@ -45,6 +46,10 @@ export const usePlaceLimit = ({
     useQueryParams,
     useOtherCurrencies,
   });
+
+  const quoteAsset = swapAssets.toAsset;
+  const baseAsset = swapAssets.fromAsset;
+
   const priceState = useLimitPrice();
   const inAmountInput = useSwapAmountInput({
     swapAssets,
@@ -53,61 +58,86 @@ export const usePlaceLimit = ({
   });
   const account = accountStore.getWallet(osmosisChainId);
 
+  const paymentAmount = useMemo(
+    () =>
+      orderDirection === OrderDirection.Ask
+        ? inAmountInput.amount ?? new CoinPretty(baseAsset, "0")
+        : new CoinPretty(
+            quoteAsset,
+            inAmountInput.amount?.toCoin().amount ?? "0"
+          ).mul(priceState.price),
+    [
+      orderDirection,
+      inAmountInput.amount,
+      priceState.price,
+      baseAsset,
+      quoteAsset,
+    ]
+  );
+
+  const { price: basePrice } = useCoinPrice(
+    new CoinPretty(baseAsset, new Dec(1))
+  );
+  const { price: quotePrice } = useCoinPrice(
+    new CoinPretty(quoteAsset, new Dec(1))
+  );
+
+  const paymentFiatValue = useMemo(
+    () =>
+      mulPrice(
+        paymentAmount,
+        orderDirection === OrderDirection.Bid ? quotePrice : basePrice,
+        DEFAULT_VS_CURRENCY
+      ),
+    [paymentAmount, orderDirection, basePrice, quotePrice]
+  );
+
   const placeLimit = useCallback(async () => {
-    const quantity = inAmountInput.amount?.toCoin().amount ?? "0'";
+    const quantity = inAmountInput.amount?.toCoin().amount ?? "0";
     if (quantity === "0") {
       return;
     }
 
     const paymentDenom =
       orderDirection === OrderDirection.Bid
-        ? swapAssets.toAsset.coinMinimalDenom
-        : swapAssets.fromAsset.coinMinimalDenom;
-    const paymentAmount =
-      orderDirection === OrderDirection.Ask
-        ? quantity
-        : new Dec(quantity).mul(priceState.price).truncate().toString();
+        ? quoteAsset.coinMinimalDenom
+        : baseAsset.coinMinimalDenom;
 
     const tickId = priceToTick(priceState.price);
     const msg = {
       place_limit: {
         tick_id: parseInt(tickId.toString()),
         order_direction: orderDirection,
-        quantity: paymentAmount,
+        quantity: paymentAmount?.toCoin().amount ?? "0",
         claim_bounty: CLAIM_BOUNTY,
       },
     };
-    await account?.cosmwasm.sendExecuteContractMsg(
-      "executeWasm",
-      orderbookContractAddress,
-      msg,
-      [
-        {
-          amount: paymentAmount,
-          denom: paymentDenom,
-        },
-      ]
-    );
+    try {
+      await account?.cosmwasm.sendExecuteContractMsg(
+        "executeWasm",
+        orderbookContractAddress,
+        msg,
+        [
+          {
+            amount: paymentAmount.toCoin().amount ?? "0",
+            denom: paymentDenom,
+          },
+        ]
+      );
+    } catch (error) {
+      console.error("Error attempting to broadcast place limit tx", error);
+    }
   }, [
     orderbookContractAddress,
     account,
-    swapAssets,
+    quoteAsset,
+    baseAsset,
     orderDirection,
     inAmountInput,
     priceState,
+    paymentAmount,
   ]);
 
-  const { asset: quoteAsset } = useSwapAsset({
-    minDenomOrSymbol: quoteDenom,
-    existingAssets: swapAssets.selectableAssets,
-  });
-  console.log("QUOTE", quoteAsset);
-
-  const { asset: baseAsset } = useSwapAsset({
-    minDenomOrSymbol: baseDenom,
-    existingAssets: swapAssets.selectableAssets,
-  });
-
   const { data: balances, isFetched: isBalancesFetched } = useBalances({
     address: account?.address ?? "",
     queryOptions: {
@@ -141,7 +171,6 @@ export const usePlaceLimit = ({
           .lt(inAmountInput.amount?.toDec() ?? new Dec(0));
 
   return {
-    ...swapAssets,
     quoteDenom,
     baseDenom,
     baseAsset,
@@ -153,6 +182,8 @@ export const usePlaceLimit = ({
     quoteTokenBalance,
     isBalancesFetched,
     insufficientFunds,
+    paymentAmount,
+    paymentFiatValue,
   };
 };
 
diff --git a/packages/web/modals/review-limit-order.tsx b/packages/web/modals/review-limit-order.tsx
new file mode 100644
index 0000000000..c3021f3c62
--- /dev/null
+++ b/packages/web/modals/review-limit-order.tsx
@@ -0,0 +1,161 @@
+import { Dec, PricePretty } from "@keplr-wallet/unit";
+import { DEFAULT_VS_CURRENCY } from "@osmosis-labs/server";
+import Image from "next/image";
+import { useMemo } from "react";
+
+import { Icon } from "~/components/assets";
+import { Button } from "~/components/buttons";
+import { OrderDirection, PlaceLimitState } from "~/hooks/limit-orders";
+import { ModalBase } from "~/modals/base";
+import { formatPretty } from "~/utils/formatter";
+
+export interface ReviewLimitOrderModalProps {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  placeLimitState: PlaceLimitState;
+  orderDirection: OrderDirection;
+  orderType: "limit" | "market";
+}
+
+export const ReviewLimitOrderModal: React.FC<ReviewLimitOrderModalProps> = ({
+  isOpen,
+  onRequestClose,
+  placeLimitState,
+  orderDirection,
+  orderType,
+}) => {
+  const fee = useMemo(() => new PricePretty(DEFAULT_VS_CURRENCY, 0.14), []);
+  const total = useMemo(() => {
+    if (
+      placeLimitState.paymentFiatValue &&
+      !placeLimitState.paymentFiatValue?.toDec().isZero()
+    ) {
+      return placeLimitState.paymentFiatValue!.sub(fee);
+    }
+    return new PricePretty(DEFAULT_VS_CURRENCY, 0);
+  }, [placeLimitState.paymentFiatValue, fee]);
+  return (
+    <ModalBase
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      title={`${orderDirection === OrderDirection.Bid ? "Buy" : "Sell"} ${
+        placeLimitState.baseAsset.coinName
+      }`}
+    >
+      <div className="mt-6 flex flex-col">
+        <div className="flex w-full flex-row justify-center">
+          <Image
+            width={48}
+            height={48}
+            src={placeLimitState.baseAsset.coinImageUrl!}
+            alt={placeLimitState.baseAsset.coinDenom}
+          />
+        </div>
+        <div className="flex w-full flex-col items-center justify-center py-4">
+          <span className="text-h5">
+            ≈{" "}
+            {placeLimitState.inAmountInput.amount
+              ? formatPretty(placeLimitState.inAmountInput.amount)
+              : "0"}
+          </span>
+          <span className="text-body1 text-osmoverse-300">
+            at ${formatPretty(placeLimitState.priceState.price)}
+          </span>
+        </div>
+      </div>
+      <div className="my-4 flex w-full flex-col">
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">Amount</span>
+          <span className="text-osmoverse-100">
+            ≈{" "}
+            {placeLimitState.inAmountInput.fiatValue
+              ? formatPretty(placeLimitState.paymentFiatValue!)
+              : "$0"}
+          </span>
+        </div>
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">Total Estimated Fees</span>
+          <span className="text-osmoverse-100">≈ {formatPretty(fee)}</span>
+        </div>
+        <hr className="my-2 text-osmoverse-700" />
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">Total</span>
+          <span className="text-osmoverse-100">≈ {formatPretty(total)}</span>
+        </div>
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">
+            {orderDirection === OrderDirection.Ask
+              ? "Receive Asset"
+              : "Pay With"}
+          </span>
+          <span className="text-osmoverse-100">
+            <Image
+              width={24}
+              height={24}
+              src={placeLimitState.quoteAsset.coinImageUrl!}
+              alt={placeLimitState.quoteAsset.coinDenom}
+              className="inline"
+            />{" "}
+            {placeLimitState.quoteAsset.coinDenom}
+          </span>
+        </div>
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">Order Type</span>
+          <span className="text-osmoverse-100">
+            {orderType === "limit" ? "Limit order" : "Market order"}
+          </span>
+        </div>
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">Limit price</span>
+          <div className="flex flex-row items-center justify-center text-osmoverse-100">
+            <div className="space-content-between mr-2 flex flex-row items-center justify-center rounded-xl border border-osmoverse-700 px-3 py-1 text-caption text-osmoverse-300">
+              {!placeLimitState.priceState.percentAdjusted.isZero() && (
+                <Icon
+                  id="triangle-down"
+                  style={{
+                    transform:
+                      placeLimitState.priceState.percentAdjusted.isPositive()
+                        ? "rotate(180deg)"
+                        : "rotate(00deg)",
+                  }}
+                  width={10}
+                  height={6}
+                  className="mr-1"
+                />
+              )}
+              <div>
+                {formatPretty(
+                  placeLimitState.priceState.percentAdjusted
+                    .mul(new Dec(100))
+                    .abs()
+                )}
+                %
+              </div>
+            </div>
+            <div> ${formatPretty(placeLimitState.priceState.price)}</div>
+          </div>
+        </div>
+        <div className="flex w-full flex-row justify-between py-2 text-body2">
+          <span className="text-osmoverse-300">More details</span>
+          <span className="cursor-pointer text-wosmongton-300">Show</span>
+        </div>
+        <div className="mt-5 flex w-full flex-row items-center justify-center py-2 text-body2">
+          <span className="text-caption text-osmoverse-300">
+            Disclaimer lorem ipsum.{" "}
+            <a className="text-wosmongton-300">Learn more.</a>
+          </span>
+        </div>
+        <div className="mt-4 flex w-full flex-row justify-between space-x-2 py-2 text-body2">
+          <Button
+            mode="unstyled"
+            onClick={onRequestClose}
+            className="rounded-xl border border-osmoverse-700 text-h6 text-wosmongton-200"
+          >
+            Cancel
+          </Button>
+          <Button onClick={placeLimitState.placeLimit}>Confirm</Button>
+        </div>
+      </div>
+    </ModalBase>
+  );
+};