feat: 1ct review modal

packages/web/components/one-click-trading/one-click-remaining-amount.tsx

@@ -0,0 +1,16 @@
+import { useOneClickTradingSession, useTranslation } from "~/hooks";
+
+export const OneClickTradingRemainingAmount: React.FC = () => {
+  const { t } = useTranslation();
+  const { isOneClickTradingExpired, getSpendingLimitRemaining } =
+    useOneClickTradingSession();
+
+  if (isOneClickTradingExpired) {
+    return (
+      <p className="body1 text-osmoverse-300">
+        {t("oneClickTrading.profile.sessionExpired")}
+      </p>
+    );
+  }
+  return <p>{getSpendingLimitRemaining().toString()}</p>;
+};

packages/web/components/one-click-trading/one-click-trading-call-to-action.tsx

@@ -0,0 +1,78 @@
+import { OneClickTradingTransactionParams } from "@osmosis-labs/types";
+import classNames from "classnames";
+import Image from "next/image";
+
+import { Switch } from "~/components/ui/switch";
+import { EventName } from "~/config";
+import { useAmplitudeAnalytics, useTranslation } from "~/hooks";
+
+interface Props {
+  onRequestOptions?: () => void;
+  spendLimit: OneClickTradingTransactionParams["spendLimit"];
+  isOneClickEnabled: OneClickTradingTransactionParams["isOneClickEnabled"];
+  sessionPeriod: OneClickTradingTransactionParams["sessionPeriod"];
+  setIsOneClickEnabled: (v: boolean) => void;
+}
+
+export const OneClickTradingCallToAction: React.FC<Props> = ({
+  onRequestOptions,
+  isOneClickEnabled,
+  sessionPeriod,
+  spendLimit,
+  setIsOneClickEnabled,
+}) => {
+  const { t } = useTranslation();
+  const { logEvent } = useAmplitudeAnalytics();
+
+  const handleToggle = () => {
+    if (isOneClickEnabled) {
+      logEvent([EventName.OneClickTrading.enableOneClickTrading]);
+    }
+    setIsOneClickEnabled(!isOneClickEnabled);
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-2 py-3">
+      <div
+        className={classNames(
+          "group flex cursor-pointer items-center justify-between gap-4 rounded-2xl bg-osmoverse-alpha-800/[.54] p-4"
+        )}
+        onClick={handleToggle}
+      >
+        <div className="flex items-center gap-4">
+          <Image
+            src="/images/1ct-medium-icon.svg"
+            alt="1-Click trading icon"
+            width={48}
+            height={48}
+          />
+          <div className="flex flex-col gap-1">
+            <p>{t("oneClickTrading.reviewSwapModal.title")}</p>
+            <p className="body2 text-osmoverse-300">
+              {t("oneClickTrading.reviewSwapModal.subtitle")}
+            </p>
+          </div>
+        </div>
+        <Switch checked={isOneClickEnabled} />
+      </div>
+      {isOneClickEnabled ? (
+        <p className="text-sm">
+          <span className="text-osmoverse-300">
+            {t("oneClickTrading.reviewSwapModal.details", {
+              time: t(
+                `oneClickTrading.settings.sessionPeriodScreen.periods.${sessionPeriod?.end}`
+              ),
+              limit: spendLimit?.toString() || "$5,000 USD",
+            })}
+          </span>
+          <span
+            className="cursor-pointer text-wosmongton-300"
+            onClick={onRequestOptions}
+          >
+            {t("change")}
+          </span>
+        </p>
+      ) : null}
+    </div>
+  );
+};

packages/web/components/one-click-trading/one-click-trading-in-review-modal.tsx

@@ -0,0 +1,162 @@
+import { OneClickTradingTransactionParams } from "@osmosis-labs/types";
+import {
+  Dispatch,
+  forwardRef,
+  SetStateAction,
+  useCallback,
+  useImperativeHandle,
+} from "react";
+
+import { displayErrorRemovingSessionToast } from "~/components/alert/one-click-trading-toasts";
+import { isRejectedTxErrorMessage } from "~/components/alert/prettify";
+import { OneClickTradingSettings } from "~/components/one-click-trading/one-click-trading-settings";
+import { useOneClickTradingSession } from "~/hooks";
+import { useCreateOneClickTradingSession } from "~/hooks/mutations/one-click-trading";
+import { useRemoveOneClickTradingSession } from "~/hooks/mutations/one-click-trading/use-remove-one-click-trading-session";
+import { useStore } from "~/stores";
+import { api } from "~/utils/trpc";
+
+interface Props {
+  onGoBack: () => void;
+  transaction1CTParams: OneClickTradingTransactionParams | undefined;
+  setTransaction1CTParams: Dispatch<
+    SetStateAction<OneClickTradingTransactionParams | undefined>
+  >;
+  spendLimitTokenDecimals: number | undefined;
+  isLoading1CTParams?: boolean;
+  resetTransaction1CTParams: () => void;
+}
+
+export interface OneClickTradingInReviewModalRef {
+  onStartTrading: () => Promise<void>;
+  isLoading: boolean;
+}
+
+export const OneClickTradingInReviewModal = forwardRef<
+  OneClickTradingInReviewModalRef,
+  Props
+>((props, ref) => {
+  const {
+    onGoBack,
+    transaction1CTParams,
+    setTransaction1CTParams,
+    spendLimitTokenDecimals,
+    isLoading1CTParams,
+    resetTransaction1CTParams,
+  } = props;
+
+  const { accountStore, chainStore } = useStore();
+  const { oneClickTradingInfo, isOneClickTradingEnabled } =
+    useOneClickTradingSession();
+  const removeSession = useRemoveOneClickTradingSession();
+  const create1CTSession = useCreateOneClickTradingSession();
+  const account = accountStore.getWallet(chainStore.osmosis.chainId);
+
+  const shouldFetchSessionAuthenticator =
+    !!account?.address && !!oneClickTradingInfo;
+
+  const {
+    data: sessionAuthenticator,
+    isLoading: isLoadingSessionAuthenticator,
+  } = api.local.oneClickTrading.getSessionAuthenticator.useQuery(
+    {
+      userOsmoAddress: account?.address ?? "",
+      publicKey: oneClickTradingInfo?.publicKey ?? "",
+    },
+    {
+      enabled: shouldFetchSessionAuthenticator,
+      cacheTime: 15_000, // 15 seconds
+      staleTime: 15_000, // 15 seconds
+      retry: false,
+    }
+  );
+
+  const onStartTrading = useCallback(async () => {
+    await create1CTSession.mutateAsync(
+      {
+        spendLimitTokenDecimals,
+        transaction1CTParams,
+        walletRepo: accountStore.getWalletRepo(chainStore.osmosis.chainId),
+        /**
+         * If the user has an existing session, remove it and add the new one.
+         */
+        additionalAuthenticatorsToRemove: sessionAuthenticator
+          ? [BigInt(sessionAuthenticator.id)]
+          : undefined,
+      },
+      {
+        onSuccess: onGoBack,
+      }
+    );
+  }, [
+    onGoBack,
+    accountStore,
+    chainStore.osmosis.chainId,
+    create1CTSession,
+    sessionAuthenticator,
+    spendLimitTokenDecimals,
+    transaction1CTParams,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isLoading: create1CTSession.isLoading,
+      onStartTrading,
+    }),
+    [onStartTrading, create1CTSession]
+  );
+
+  return (
+    <OneClickTradingSettings
+      showCreationButton={false}
+      transaction1CTParams={transaction1CTParams}
+      setTransaction1CTParams={setTransaction1CTParams}
+      resetTransaction1CTParams={resetTransaction1CTParams}
+      isLoading={
+        isLoading1CTParams ||
+        (shouldFetchSessionAuthenticator
+          ? isLoadingSessionAuthenticator
+          : false)
+      }
+      isSendingTx={create1CTSession.isLoading}
+      onStartTrading={onStartTrading}
+      onGoBack={onGoBack}
+      hasExistingSession={isOneClickTradingEnabled}
+      onEndSession={() => {
+        const rollback = () => {
+          if (!transaction1CTParams) return;
+          setTransaction1CTParams({
+            ...transaction1CTParams,
+            isOneClickEnabled: true,
+          });
+        };
+
+        if (!oneClickTradingInfo) {
+          displayErrorRemovingSessionToast();
+          rollback();
+          throw new Error("oneClickTradingInfo is undefined");
+        }
+
+        removeSession.mutate(
+          {
+            authenticatorId: oneClickTradingInfo?.authenticatorId,
+          },
+          {
+            onSuccess: () => {
+              onGoBack();
+            },
+            onError: (e) => {
+              const error = e as Error;
+              rollback();
+              if (!isRejectedTxErrorMessage({ message: error?.message })) {
+                displayErrorRemovingSessionToast();
+              }
+            },
+          }
+        );
+      }}
+      isEndingSession={removeSession.isLoading}
+    />
+  );
+});

packages/web/components/one-click-trading/one-click-trading-limit-remaining.tsx

@@ -0,0 +1,56 @@
+import { OneClickTradingRemainingAmount } from "~/components/one-click-trading/one-click-remaining-amount";
+import { OneClickTradingRemainingTime } from "~/components/one-click-trading/one-click-remaining-time";
+import { Tooltip } from "~/components/tooltip";
+import { useTranslation } from "~/hooks";
+
+interface Props {
+  isSpendingLimitExceeded: boolean;
+  onRequestEdit: () => void;
+}
+
+export const OneClickTradingLimitRemaining: React.FC<Props> = ({
+  isSpendingLimitExceeded,
+  onRequestEdit,
+}) => {
+  const { t } = useTranslation();
+
+  if (!isSpendingLimitExceeded) {
+    return (
+      <div
+        className="body2 flex cursor-pointer items-center justify-end gap-1 text-wosmongton-300"
+        onClick={onRequestEdit}
+      >
+        <OneClickTradingRemainingAmount />
+        <p>/</p>
+        <OneClickTradingRemainingTime className="!body2 !text-wosmongton-300" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="body2 flex items-center justify-end gap-1 text-wosmongton-300">
+      <button
+        type="button"
+        className="flex min-h-[2rem] items-center justify-center rounded-5xl border border-osmoverse-700 py-1 px-3"
+        onClick={onRequestEdit}
+      >
+        <span className="body2 sm:caption text-wosmongton-300">
+          {t("edit")}
+        </span>
+      </button>
+      <Tooltip
+        rootClassNames="!max-w-[17.5rem]"
+        content={
+          <div className="caption flex flex-col gap-1">
+            <p>{t("oneClickTrading.tooltipExceeded.title")}</p>
+            <p className="text-osmoverse-300">
+              {t("oneClickTrading.tooltipExceeded.description")}
+            </p>
+          </div>
+        }
+      >
+        <p className="body-2 text-rust-400">{t("exceeded")}</p>
+      </Tooltip>
+    </div>
+  );
+};