One Click Swap

apps/extension/src/components/hold-button/circular-progress.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties, FunctionComponent } from "react";
+
+export interface CircularProgressProps {
+  progress: number; // 0 ~ 1
+  size?: string;
+  color?: string;
+  style?: CSSProperties;
+}
+
+export const CircularProgress: FunctionComponent<CircularProgressProps> = ({
+  progress,
+  size = "1.25rem",
+  color = "white",
+  style,
+}) => {
+  const radius = 8.5;
+  const strokeWidth = 3;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference * (1 - progress);
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      style={{
+        transform: "rotate(-90deg) scaleY(-1)", // start from 12 o'clock, counter-clockwise
+        ...style,
+      }}
+    >
+      {/* Background donut - 30% opacity */}
+      <circle
+        cx="10"
+        cy="10"
+        r={radius}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        opacity={0.3}
+      />
+      {/* Progress circle */}
+      <circle
+        cx="10"
+        cy="10"
+        r={radius}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeDasharray={circumference}
+        strokeDashoffset={strokeDashoffset}
+        strokeLinecap="round"
+        style={{
+          transition: progress === 0 ? "none" : "stroke-dashoffset 16ms linear",
+        }}
+      />
+    </svg>
+  );
+};

apps/extension/src/components/hold-button/hold-button.tsx

@@ -0,0 +1,165 @@
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { HoldButtonProps } from "./types";
+import { Styles } from "../button/styles";
+import { LoadingIcon } from "../icon";
+import { Box } from "../box";
+import { useTheme } from "styled-components";
+import { CircularProgress } from "./circular-progress";
+
+const UPDATE_INTERVAL_MS = 16;
+const MIN_HOLD_DURATION_MS = 100;
+
+export const HoldButton: FunctionComponent<HoldButtonProps> = ({
+  holdDurationMs,
+  onConfirm,
+  onHoldStart,
+  onHoldEnd,
+  onProgressChange,
+  type = "button",
+  progressSize = "1.25rem",
+  style,
+  className,
+  text,
+  holdingText,
+  left,
+  right,
+  isLoading,
+  disabled,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+
+  const [isHolding, setIsHolding] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const holdStartTimeRef = useRef<number | null>(null);
+  const intervalRef = useRef<number | null>(null);
+  const confirmedRef = useRef(false);
+
+  const clearHoldInterval = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const startHold = useCallback(() => {
+    if (disabled || isLoading) return;
+
+    confirmedRef.current = false;
+    setIsHolding(true);
+    setProgress(0);
+    holdStartTimeRef.current = Date.now();
+    onHoldStart?.();
+
+    intervalRef.current = window.setInterval(() => {
+      if (holdStartTimeRef.current === null) return;
+
+      const elapsed = Date.now() - holdStartTimeRef.current;
+      const newProgress = Math.min(
+        elapsed / Math.max(holdDurationMs, MIN_HOLD_DURATION_MS),
+        1
+      );
+
+      setProgress(newProgress);
+      onProgressChange?.(newProgress);
+
+      if (newProgress >= 1 && !confirmedRef.current) {
+        confirmedRef.current = true;
+        clearHoldInterval();
+        setIsHolding(false);
+        setProgress(0);
+        holdStartTimeRef.current = null;
+
+        onConfirm?.();
+
+        if (type === "submit" && buttonRef.current?.form) {
+          buttonRef.current.form.requestSubmit();
+        }
+      }
+    }, UPDATE_INTERVAL_MS);
+  }, [
+    disabled,
+    isLoading,
+    holdDurationMs,
+    onHoldStart,
+    onProgressChange,
+    onConfirm,
+    type,
+    clearHoldInterval,
+  ]);
+
+  const endHold = useCallback(() => {
+    if (!isHolding) return;
+
+    clearHoldInterval();
+    setIsHolding(false);
+    setProgress(0);
+    holdStartTimeRef.current = null;
+    onHoldEnd?.();
+  }, [isHolding, clearHoldInterval, onHoldEnd]);
+
+  useEffect(() => {
+    return () => {
+      clearHoldInterval();
+    };
+  }, [clearHoldInterval]);
+
+  const displayText = isHolding && holdingText ? holdingText : text;
+
+  // CircularProgress is default left content
+  const leftContent =
+    left !== undefined ? (
+      left
+    ) : (
+      <CircularProgress
+        progress={progress}
+        size={progressSize}
+        style={{ opacity: isLoading ? 0 : 1 }}
+      />
+    );
+
+  return (
+    <Styles.Container
+      style={style}
+      className={className}
+      mode={otherProps.mode}
+    >
+      <Styles.Button
+        ref={buttonRef}
+        isLoading={isLoading}
+        type="button" // prevent default form submit behavior
+        disabled={disabled}
+        {...otherProps}
+        style={{ gap: "0.25rem" }}
+        onMouseDown={startHold}
+        onMouseUp={endHold}
+        onMouseLeave={endHold}
+        onTouchStart={startHold}
+        onTouchEnd={endHold}
+        onTouchCancel={endHold}
+        data-holding={isHolding}
+        data-progress={progress}
+      >
+        {leftContent ? <Styles.Left>{leftContent}</Styles.Left> : null}
+
+        {isLoading ? (
+          <Styles.Loading buttonColor={otherProps.color} theme={theme}>
+            <LoadingIcon width="1rem" height="1rem" />
+          </Styles.Loading>
+        ) : null}
+
+        <Box style={{ opacity: isLoading ? 0 : 1 }}>{displayText}</Box>
+
+        {right ? <Styles.Right>{right}</Styles.Right> : null}
+      </Styles.Button>
+    </Styles.Container>
+  );
+};

apps/extension/src/components/hold-button/index.ts

@@ -0,0 +1,3 @@
+export * from "./hold-button";
+export * from "./circular-progress";
+export * from "./types";

apps/extension/src/components/hold-button/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "../button/types";
+
+export interface HoldButtonProps extends ButtonProps {
+  holdDurationMs: number;
+  onConfirm?: () => void;
+  onHoldStart?: () => void;
+  onHoldEnd?: () => void;
+  onProgressChange?: (progress: number) => void;
+
+  progressSize?: string;
+  holdingText?: string | ReactNode;
+}

apps/extension/src/languages/en.json

@@ -439,6 +439,8 @@
 
   "page.ibc-swap.title.swap": "Swap",
   "page.ibc-swap.button.next": "Swap",
+  "page.ibc-swap.button.hold-to-approve": "Hold to Approve & Swap",
+  "page.ibc-swap.button.keep-holding": "Keep holding...",
   "page.ibc-swap.error.no-route-found": "No routes found for this swap",
   "page.ibc-swap.warning.unable-to-populate-price": "Unable to retrieve {assets} price from Coingecko. Check the fiat values of input and output from other sources before clicking \"Next\".",
   "page.ibc-swap.warning.high-price-impact-title": "{inPrice} on {srcChain} → {outPrice} on {dstChain}",

apps/extension/src/languages/ko.json

@@ -433,6 +433,8 @@
 
   "page.ibc-swap.title.swap": "토큰 교환",
   "page.ibc-swap.button.next": "스왑",
+  "page.ibc-swap.button.hold-to-approve": "꾹 눌러서 승인 & 스왑",
+  "page.ibc-swap.button.keep-holding": "계속 누르세요...",
   "page.ibc-swap.error.no-route-found": "이 교환에 맞는 경로가 검색되지 않습니다.",
   "page.ibc-swap.warning.unable-to-populate-price": "{assets}의 가격을 알 수 없습니다. \"다음\"을 누르기 전에 각각 통화 가치를 확인하십시오.",
   "page.ibc-swap.warning.high-price-impact-title": "{inPrice} ({srcChain}) → {outPrice} ({dstChain})",

apps/extension/src/languages/zh-cn.json

@@ -397,6 +397,8 @@
 
   "page.ibc-swap.title.swap": "兑换",
   "page.ibc-swap.button.next": "交换",
+  "page.ibc-swap.button.hold-to-approve": "按住以批准并交换",
+  "page.ibc-swap.button.keep-holding": "请继续按住...",
   "page.ibc-swap.error.no-route-found": "找不到此兑换的路线",
   "page.ibc-swap.warning.unable-to-populate-price": "无法从Coingecko检索到{assets}的价格。在点击“下一步”之前从其他来源检查输入和输出的法定价值。",
   "page.ibc-swap.warning.high-price-impact-title": "{inPrice} ({srcChain}) → {outPrice} ({dstChain})",