@hot-labs/kit 1.0.33

package/src/ui/payment/Bridge.tsx

@@ -0,0 +1,582 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import styled, { keyframes } from "styled-components";
+import { observer } from "mobx-react-lite";
+import uuid4 from "uuid4";
+
+import { SwitchIcon } from "../icons/switch";
+import { ArrowRightIcon } from "../icons/arrow-right";
+
+import { formatter } from "../../omni/utils";
+import { tokens } from "../../omni/tokens";
+import { Recipient } from "../../omni/recipient";
+import { OmniWallet } from "../../OmniWallet";
+import { BridgeReview } from "../../exchange";
+import { HotConnector } from "../../HotConnector";
+import { WalletType } from "../../omni/config";
+import { Token } from "../../omni/token";
+
+import Popup from "../Popup";
+import { PopupButton } from "../styles";
+import { openSelectRecipient, openSelectTokenPopup, openSelectSender } from "../router";
+import { TokenIcon } from "./TokenCard";
+import DepositQR from "./DepositQR";
+
+export interface BridgeProps {
+  hot: HotConnector;
+  widget?: boolean;
+  onClose: () => void;
+  onProcess: (task: Promise<BridgeReview>) => void;
+  setup?: {
+    autoClose?: boolean; // if true, the popup will close automatically when the transaction is successful
+    title?: string;
+    readonlyAmount?: boolean;
+    readonlyTo?: boolean;
+    readonlyFrom?: boolean;
+    type?: "exactIn" | "exactOut";
+    sender?: OmniWallet;
+    recipient?: Recipient;
+    amount?: number;
+    from?: Token;
+    to?: Token;
+  };
+}
+
+const FIXED = 6;
+
+export const Bridge = observer(({ hot, widget, setup, onClose, onProcess }: BridgeProps) => {
+  const [isFiat, setIsFiat] = useState(false);
+  const [type, setType] = useState<"exactIn" | "exactOut">(setup?.type || "exactIn");
+  const [value, setValue] = useState<string>(setup?.amount?.toString() ?? "");
+  const [from, setFrom] = useState<Token>(setup?.from || tokens.list.find((t) => t.id === localStorage.getItem("bridge:from")) || tokens.list.find((t) => t.symbol === "NEAR")!);
+  const [to, setTo] = useState<Token>(setup?.to || tokens.list.find((t) => t.id === localStorage.getItem("bridge:to")) || tokens.list.find((t) => t.symbol === "USDT")!);
+
+  const [review, setReview] = useState<BridgeReview | null>(null);
+  const [isError, setIsError] = useState<string | null>(null);
+  const [isReviewing, setIsReviewing] = useState(false);
+
+  const [processing, setProcessing] = useState<{
+    status: "qr" | "processing" | "success" | "error";
+    resolve?: (value: BridgeReview) => void;
+    reject?: (error: Error) => void;
+    message: string;
+    review: BridgeReview;
+  } | null>(null);
+
+  const [sender, setSender] = useState<OmniWallet | "qr" | undefined>(() => {
+    if (setup?.sender) return setup.sender;
+    if (from.type === WalletType.OMNI) return hot.priorityWallet;
+    return hot.wallets.find((w) => w.type === from.type);
+  });
+
+  const [recipient, setRecipient] = useState<Recipient | undefined>(() => {
+    if (setup?.recipient) return setup.recipient;
+    if (to.type === WalletType.OMNI) return Recipient.fromWallet(hot.priorityWallet!);
+    return Recipient.fromWallet(hot.wallets.find((w) => w.type === to.type)!);
+  });
+
+  const initialSender = useRef<OmniWallet | "qr" | undefined>(sender);
+  const initialRecipient = useRef<Recipient | undefined>(recipient);
+
+  const valueInTokens = isFiat ? +formatter.fromInput(value) / (type === "exactIn" ? from.usd : to.usd) : +formatter.fromInput(value);
+  const amountFrom = type === "exactOut" ? from.float(review?.amountIn ?? 0) : valueInTokens;
+  const amountTo = type === "exactIn" ? to.float(review?.amountOut ?? 0) : valueInTokens;
+
+  const showAmountFrom = type === "exactOut" ? +from.float(review?.amountIn ?? 0).toFixed(FIXED) : formatter.fromInput(value);
+  const showAmountTo = type === "exactIn" ? +to.float(review?.amountOut ?? 0).toFixed(FIXED) : formatter.fromInput(value);
+
+  const availableBalance = sender !== "qr" ? +Math.max(0, from.float(hot.balance(sender, from)) - from.reserve).toFixed(FIXED) : 0;
+
+  useEffect(() => {
+    localStorage.setItem("bridge:from", from.id);
+    localStorage.setItem("bridge:to", to.id);
+  }, [from, to]);
+
+  useEffect(() => {
+    if (initialSender.current == null) {
+      if (from.type === WalletType.OMNI) setSender(hot.priorityWallet);
+      else setSender(hot.wallets.find((w) => w.type === from.type));
+    }
+
+    if (initialRecipient.current == null) {
+      if (to.type === WalletType.OMNI) setRecipient(Recipient.fromWallet(hot.priorityWallet));
+      else setRecipient(Recipient.fromWallet(hot.wallets.find((w) => w.type === to.type)));
+    }
+  }, [to, from, hot.wallets, hot.priorityWallet]);
+
+  const reviewId = useRef(uuid4());
+  const throwError = (message: string) => {
+    setIsError(message);
+    setIsReviewing(false);
+  };
+
+  const reviewSwap = useCallback(() => {
+    reviewId.current = uuid4();
+    const currentReviewId = reviewId.current;
+    setIsReviewing(true);
+    setReview(null);
+    setIsError(null);
+
+    const refund = sender !== "qr" ? sender : hot.priorityWallet;
+    if (valueInTokens <= 0) return throwError("Enter amount");
+    if (!sender) return throwError("Set sender");
+    if (!recipient) return throwError("Set recipient");
+    if (!refund) return throwError("Connect any wallet");
+
+    const debounceTimer = setTimeout(async () => {
+      try {
+        if (currentReviewId !== reviewId.current) return;
+        const amount = type === "exactIn" ? from.int(valueInTokens) : to.int(valueInTokens);
+        const review = await hot.exchange.reviewSwap({ sender, refund, amount, recipient, slippage: 0.005, type, from, to });
+        if (currentReviewId !== reviewId.current) return;
+        setIsReviewing(false);
+        setIsError(null);
+        setReview(review);
+      } catch (e) {
+        if (currentReviewId !== reviewId.current) return;
+        setIsError(typeof e === "string" ? e : e instanceof Error ? e.message : "Failed to review swap");
+        setIsReviewing(false);
+        setReview(null);
+        console.error(e);
+      }
+    }, 500);
+
+    return () => clearTimeout(debounceTimer);
+  }, [valueInTokens, type, from, to, sender, hot.exchange, recipient, hot.priorityWallet]);
+
+  useEffect(() => {
+    reviewSwap();
+  }, [reviewSwap]);
+
+  const process = async (review: BridgeReview) => {
+    try {
+      setProcessing({ status: "processing", message: "Signing transaction", review });
+      const result = await hot.exchange.makeSwap(review, { log: (message: string) => setProcessing({ status: "processing", message, review }) });
+      setProcessing({ status: "success", message: "Transaction signed", review: result });
+      if (setup?.autoClose) onClose();
+      return result;
+    } catch (e) {
+      setProcessing({ status: "error", message: e?.toString?.() ?? "Unknown error", review });
+      throw e;
+    }
+  };
+
+  const cancelReview = () => {
+    setReview(null);
+    setIsReviewing(false);
+    setProcessing(null);
+    setIsError(null);
+    reviewSwap();
+  };
+
+  const handleConfirm = async () => {
+    if (sender != "qr") return onProcess(process(review!));
+    setProcessing({ status: "qr", message: "Scan QR code to sign transaction", review: review! });
+  };
+
+  const handleMax = () => {
+    if (sender === "qr") return;
+    if (isFiat) {
+      setType("exactIn");
+      setValue(String(+(availableBalance * from.usd).toFixed(FIXED)));
+    } else {
+      setType("exactIn");
+      setValue(String(availableBalance));
+    }
+  };
+
+  if (processing?.status === "qr") {
+    return (
+      <Popup widget={widget} onClose={onClose} header={setup?.title ? <p>{setup?.title}</p> : null}>
+        <DepositQR //
+          review={processing.review}
+          onConfirm={() => onProcess(process(processing.review))}
+          onCancel={cancelReview}
+        />
+      </Popup>
+    );
+  }
+
+  if (processing?.status === "processing") {
+    return (
+      <Popup widget={widget} onClose={onClose} header={setup?.title ? <p>{setup?.title}</p> : null}>
+        <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+          {/* @ts-expect-error: dotlottie-wc is not typed */}
+          <dotlottie-wc key="loading" src="/loading.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <p style={{ marginTop: -32, fontSize: 16 }}>{processing.message}</p>
+        </div>
+      </Popup>
+    );
+  }
+
+  if (processing?.status === "success") {
+    return (
+      <Popup widget={widget} onClose={onClose} header={setup?.title ? <p>{setup?.title}</p> : null}>
+        <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+          {/* @ts-expect-error: dotlottie-wc is not typed */}
+          <dotlottie-wc key="success" src="/success.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Exchange successful</p>
+        </div>
+        <PopupButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
+          Continue
+        </PopupButton>
+      </Popup>
+    );
+  }
+
+  if (processing?.status === "error") {
+    return (
+      <Popup widget={widget} onClose={onClose} header={setup?.title ? <p>{setup?.title}</p> : null}>
+        <div style={{ width: "100%", height: 400, gap: 8, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+          {/* @ts-expect-error: dotlottie-wc is not typed */}
+          <dotlottie-wc key="error" src="/error.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Exchange failed</p>
+          <p style={{ fontSize: 14 }}>{processing.message}</p>
+        </div>
+        <PopupButton onClick={() => (cancelReview(), onClose())}>Continue</PopupButton>
+      </Popup>
+    );
+  }
+
+  const button = () => {
+    if (sender == null) return <PopupButton disabled>Set sender</PopupButton>;
+    if (recipient == null) return <PopupButton disabled>Set recipient</PopupButton>;
+    if (sender !== "qr" && +from.float(hot.balance(sender, from)).toFixed(FIXED) < +amountFrom.toFixed(FIXED)) return <PopupButton disabled>Insufficient balance</PopupButton>;
+    return (
+      <PopupButton disabled={isReviewing || isError != null} onClick={handleConfirm}>
+        {isReviewing ? "Quoting..." : isError != null ? isError : "Confirm"}
+      </PopupButton>
+    );
+  };
+
+  return (
+    <Popup widget={widget} onClose={onClose} header={setup?.title ? <p>{setup?.title}</p> : null}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 32, width: "100%", height: "100%" }}>
+        <Card>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <p style={{ fontWeight: "bold" }}>{from.chain === -4 ? "Withdraw HEX from:" : "Send from:"}</p>
+              <BadgeButton onClick={() => openSelectSender({ hot, type: from.type, onSelect: (wallet) => setSender(wallet) })}>
+                <p>{formatter.truncateAddress(sender === "qr" ? "QR code" : sender?.address ?? "Connect wallet")}</p>
+              </BadgeButton>
+            </div>
+          </div>
+
+          <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }}>
+            <TokenPreview //
+              token={from}
+              style={{ pointerEvents: setup?.readonlyFrom ? "none" : "all" }}
+              onSelect={() => openSelectTokenPopup({ hot, onSelect: (token, wallet) => (setFrom(token), setSender(wallet)) })}
+            />
+
+            {isReviewing && type === "exactOut" ? (
+              <SkeletonShine />
+            ) : (
+              <input //
+                name="from"
+                type="text"
+                className="input"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
+                readOnly={setup?.readonlyAmount}
+                value={isFiat ? `$${showAmountFrom}` : showAmountFrom}
+                onChange={(e) => (setType("exactIn"), setValue(e.target.value))}
+                placeholder="0"
+                autoFocus
+              />
+            )}
+          </div>
+
+          {isFiat && (
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+              {sender !== "qr" && (
+                <AvailableBalance>
+                  <p>Balance: ${from.readable(availableBalance, from.usd)}</p>
+                  <RefreshButton onClick={() => sender && hot.fetchToken(from, sender)} />
+                </AvailableBalance>
+              )}
+
+              {sender === "qr" && <div />}
+
+              <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+                {from.usd !== 0 && <p style={{ marginRight: 8 }}>{`${from.readable(amountFrom / from.usd)} ${from.symbol}`}</p>}
+                {from.usd !== 0 && (
+                  <BadgeButton style={{ border: `1px solid #fff` }} onClick={() => setIsFiat(!isFiat)}>
+                    USD
+                  </BadgeButton>
+                )}
+                {sender !== "qr" && <BadgeButton onClick={handleMax}>MAX</BadgeButton>}
+              </div>
+            </div>
+          )}
+
+          {!isFiat && (
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+              {sender !== "qr" && (
+                <AvailableBalance>
+                  <p>Balance: {`${from.readable(availableBalance)} ${from.symbol}`}</p>
+                  <RefreshButton onClick={() => sender && hot.fetchToken(from, sender)} />
+                </AvailableBalance>
+              )}
+              {sender === "qr" && <div />}
+              <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+                {from.usd !== 0 && <p style={{ marginRight: 8 }}>${from.readable(amountFrom, from.usd)}</p>}
+                {from.usd !== 0 && <BadgeButton onClick={() => setIsFiat(!isFiat)}>USD</BadgeButton>}
+                {sender !== "qr" && <BadgeButton onClick={handleMax}>MAX</BadgeButton>}
+              </div>
+            </div>
+          )}
+        </Card>
+
+        <div style={{ position: "relative" }}>
+          <div style={{ width: "100%", height: 1, backgroundColor: "rgba(255, 255, 255, 0.07)" }} />
+          <SwitchButton
+            onClick={() => {
+              setFrom(to);
+              setTo(from);
+              setSender(hot.wallets.find((w) => w.address === recipient?.address));
+              setRecipient(sender === "qr" ? undefined : sender ? Recipient.fromWallet(sender) : undefined);
+              setType(type === "exactIn" ? "exactOut" : "exactIn");
+              setValue("");
+            }}
+          >
+            <SwitchIcon />
+          </SwitchButton>
+        </div>
+
+        <Card>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <p style={{ fontWeight: "bold" }}>{to.chain !== -4 ? "To:" : "Deposit HEX to:"}</p>
+              <BadgeButton onClick={() => openSelectRecipient({ hot, recipient, type: to.type, onSelect: (recipient) => setRecipient(recipient) })}>
+                <p>{formatter.truncateAddress(recipient?.address ?? "Connect wallet")}</p>
+              </BadgeButton>
+            </div>
+          </div>
+
+          <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }}>
+            <TokenPreview //
+              token={to}
+              style={{ pointerEvents: setup?.readonlyTo ? "none" : "all" }}
+              onSelect={() =>
+                openSelectTokenPopup({
+                  hot,
+                  onSelect: (token, wallet) => {
+                    setRecipient(wallet ? Recipient.fromWallet(wallet) : undefined);
+                    setTo(token);
+                  },
+                })
+              }
+            />
+
+            {isReviewing && type === "exactIn" ? (
+              <SkeletonShine />
+            ) : (
+              <input //
+                name="to"
+                type="text"
+                className="input"
+                autoComplete="off"
+                autoCapitalize="off"
+                autoCorrect="off"
+                readOnly={setup?.readonlyAmount}
+                value={isFiat ? `$${+(+showAmountTo * to.usd).toFixed(FIXED)}` : showAmountTo}
+                onChange={(e) => (setType("exactOut"), setValue(e.target.value))}
+                placeholder="0"
+              />
+            )}
+          </div>
+
+          <div style={{ width: "100%", display: "flex", justifyContent: "flex-end", marginTop: -8 }}>
+            {isFiat && <p>Receive: ${`${to.readable(amountTo ?? 0)} ${to.symbol}`}</p>}
+            {!isFiat && <p>Receive: ${to.readable(amountTo ?? 0, to.usd)}</p>}
+          </div>
+        </Card>
+
+        <div style={{ marginTop: "auto" }}>{button()}</div>
+      </div>
+    </Popup>
+  );
+});
+
+const TokenPreview = ({ style, token, onSelect }: { style?: React.CSSProperties; token: Token; onSelect: (token: Token) => void }) => {
+  return (
+    <SelectTokenButton style={style} onClick={() => onSelect(token)}>
+      <TokenIcon token={token} />
+      <p style={{ fontSize: 24, fontWeight: "bold" }}>{token.symbol}</p>
+      <ArrowRightIcon style={{ flexShrink: 0, position: "absolute", right: 4 }} />
+    </SelectTokenButton>
+  );
+};
+
+const BadgeButton = styled.button`
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+  background: #282c30;
+  padding: 4px 8px;
+  border-radius: 16px;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border: 1px solid transparent;
+  transition: 0.2s border-color;
+
+  &:hover {
+    border-color: #4e4e4e;
+  }
+
+  * {
+    font-size: 14px;
+    font-weight: bold;
+  }
+`;
+
+const SelectTokenButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  position: relative;
+  background: transparent;
+  border-radius: 32px;
+  padding: 8px;
+  padding-right: 32px;
+  margin: -8px;
+  max-width: 160px;
+  transition: 0.2s background-color;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const AvailableBalance = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4;
+  overflow: hidden;
+  max-width: 200px;
+  text-wrap: nowrap;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const Card = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  text-align: left;
+  align-items: flex-start;
+  justify-content: center;
+  border-radius: 12px;
+
+  input {
+    outline: none;
+    border: none;
+    background: none;
+    color: #fff;
+    font-size: 32px;
+    font-weight: bold;
+    width: 100%;
+    line-height: 40px;
+    text-align: left;
+    align-items: flex-start;
+    justify-content: center;
+    background: transparent;
+    text-align: right;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+`;
+
+const SwitchButton = styled.button`
+  position: absolute;
+  left: 50%;
+  top: -18px;
+  transform: translate(-50%, 0);
+  background: #232323;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  cursor: pointer;
+  border: 2px solid #181818;
+  box-shadow: 0 2px 8px 0 #18181870;
+  outline: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const shine = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+
+const SkeletonShine = styled.div`
+  display: inline-block;
+  width: 100px;
+  height: 40px;
+  border-radius: 8px;
+  background: #2e2e2e;
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(90deg, rgba(34, 34, 34, 0) 0%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 60%, rgba(34, 34, 34, 0) 100%);
+    background-size: 200px 100%;
+    animation: ${shine} 1.4s infinite linear;
+  }
+`;
+
+const RefreshButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <svg
+      onClick={onClick}
+      style={{ width: 18, height: 18, verticalAlign: "middle", marginLeft: 8, cursor: "pointer", opacity: 0.7, transition: "opacity 0.2s" }}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#fff"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      onMouseOver={(e) => (e.currentTarget.style.opacity = "1")}
+      onMouseOut={(e) => (e.currentTarget.style.opacity = "0.7")}
+    >
+      <path d="M23 4v6h-6" />
+      <path d="M1 20v-6h6" />
+      <path d="M3.51 9a9 9 0 0114.13-3.36L23 10" />
+      <path d="M20.49 15a9 9 0 01-14.13 3.36L1 14" />
+    </svg>
+  );
+};

package/src/ui/payment/DepositQR.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState } from "react";
+import QRCodeStyling from "qr-code-styling";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { BridgeReview } from "../../exchange";
+import { PopupButton } from "../styles";
+
+const DepositQR = observer(({ review, onConfirm, onCancel }: { review: BridgeReview; onConfirm: () => void; onCancel: () => void }) => {
+  const qrCodeRef = useRef<HTMLDivElement>(null);
+  const [qrCode] = useState<QRCodeStyling | null>(() => {
+    if (review.qoute === "deposit" || review.qoute === "withdraw") return null;
+    return new QRCodeStyling({
+      data: review.qoute.depositAddress,
+      dotsOptions: { color: "#eeeeee", type: "rounded" },
+      backgroundOptions: { color: "transparent" },
+      shape: "circle",
+      width: 180,
+      height: 180,
+      type: "svg",
+    });
+  });
+
+  useEffect(() => {
+    if (!qrCodeRef.current) return;
+    if (review.qoute === "deposit" || review.qoute === "withdraw") return;
+    qrCode?.append(qrCodeRef.current);
+  }, []);
+
+  if (review.qoute === "deposit" || review.qoute === "withdraw") return null;
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1 }}>
+      <CloseButton onClick={onCancel} aria-label="Close">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="11" stroke="#2d2d2d" strokeWidth="2" fill="#181818" />
+          <path d="M8 8l8 8M16 8l-8 8" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
+        </svg>
+      </CloseButton>
+
+      <div
+        ref={qrCodeRef}
+        style={{
+          marginTop: "auto",
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 8,
+          paddingTop: 10,
+          paddingLeft: 10,
+          border: "1px solid #2d2d2d",
+          background: "#1c1c1c",
+        }}
+      ></div>
+
+      <p style={{ marginTop: 24 }}>
+        Send{" "}
+        <b>
+          {review.qoute.amountInFormatted} {review.from.symbol}
+        </b>{" "}
+        on <b>{review.from.chainName}</b> to
+      </p>
+
+      <div style={{ width: "100%", marginTop: 8, padding: 12, marginBottom: 24, border: "1px solid #2d2d2d", borderRadius: 12, background: "#1c1c1c" }}>
+        <p style={{ wordBreak: "break-all" }}>{review.qoute.depositAddress}</p>
+      </div>
+
+      <PopupButton style={{ marginTop: "auto" }} onClick={onConfirm}>
+        I sent the funds
+      </PopupButton>
+    </div>
+  );
+});
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: -8px;
+  right: -12px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 6;
+  border-radius: 50%;
+  transition: background 0.2s;
+`;
+
+export default DepositQR;