@hot-labs/kit 1.6.0 → 1.6.2

package/src/ui/profile/DepositQR.tsx

@@ -3,107 +3,215 @@ import QRCodeStyling from "qr-code-styling";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
-import { HotKit } from "../../HotKit";
-import { BridgeReview } from "../../core/exchange";
 import { WarningIcon } from "../icons/warning";
+import CopyIcon from "../icons/copy";
 
+import { HotKit } from "../../HotKit";
 import { ActionButton, Button } from "../uikit/button";
-import { PMedium, PSmall } from "../uikit/text";
-import CopyIcon from "../icons/copy";
+import { PLarge, PMedium, PSmall, PTiny } from "../uikit/text";
+import { Token } from "../../core/token";
+import { WarningBox } from "../uikit/badge";
+import uuid4 from "uuid4";
 
-const DepositQR = observer(({ kit, review, onConfirm, onCancel }: { kit: HotKit; review: BridgeReview; onConfirm: () => void; onCancel?: () => void }) => {
+export const QRAnimation = ({ size = 180 }: { size?: number }) => {
   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: "dots" },
+      data: uuid4().slice(0, 6),
+      dotsOptions: { color: "#eeeeee73", type: "dots" },
       backgroundOptions: { color: "transparent" },
       shape: "square",
-      width: 180,
-      height: 180,
+      width: window.innerWidth < 760 ? size * 0.7 : size,
+      height: window.innerWidth < 760 ? size * 0.7 : size,
       type: "svg",
     });
   });
 
   useEffect(() => {
     if (!qrCodeRef.current) return;
-    if (review.qoute === "deposit" || review.qoute === "withdraw") return;
     qrCode?.append(qrCodeRef.current);
+
+    const interval = setInterval(() => {
+      qrCode?.update({ data: uuid4().slice(0, 6) });
+    }, 600);
+
+    return () => clearInterval(interval);
   }, []);
 
-  if (review.qoute === "deposit" || review.qoute === "withdraw") return null;
-  const depositAddress = review.qoute.depositAddress as string;
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(depositAddress);
-      kit.toast.success("Address copied to clipboard");
-    } catch (error) {
-      kit.toast.failed("Failed to copy address");
-    }
-  };
-
-  return (
-    <div style={{ position: "relative", width: "100%", height: "100%", gap: 8, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1 }}>
-      {onCancel != null && (
-        <CloseButton onClick={onCancel}>
-          <PSmall>Back</PSmall>
-        </CloseButton>
-      )}
-
-      <div ref={qrCodeRef} style={{ marginTop: "auto", borderRadius: 12, padding: "4px 4px 0 4px", border: "1px solid #2d2d2d", background: "#1c1c1c", textAlign: "left" }}></div>
-
-      <PMedium style={{ textAlign: "center", marginTop: 16, color: "#ababab", width: "100%" }}>
-        Send <Pre>{review.qoute.amountInFormatted}</Pre> <Pre>{review.from.symbol}</Pre> on <Pre>{review.from.chainName}</Pre> chain to:
-      </PMedium>
-
-      <div style={{ width: "100%", justifyContent: "center", display: "flex", gap: 4 }}>
-        <Pre style={{ fontSize: 14, fontWeight: "bold", padding: 0, background: "transparent", border: "none" }}>{depositAddress}</Pre>
-        <Button onClick={handleCopy}>
-          <CopyIcon width={16} height={16} color="#ababab" />
-        </Button>
+  return <div ref={qrCodeRef} style={{ borderRadius: 12, padding: "4px 4px 0 4px", border: "1px solid #2d2d2d", background: "#1c1c1c" }}></div>;
+};
+
+const DepositQR = observer(
+  ({
+    kit,
+    token,
+    depositAmount,
+    minimumAmount,
+    depositAddress,
+    memo,
+    onConfirm,
+    onCancel,
+  }: {
+    kit: HotKit;
+    token: Token;
+    memo?: string;
+    depositAmount?: string;
+    minimumAmount?: number;
+    depositAddress: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+  }) => {
+    const qrCodeRef = useRef<HTMLDivElement>(null);
+    const [qrCode] = useState<QRCodeStyling | null>(() => {
+      return new QRCodeStyling({
+        data: depositAddress,
+        dotsOptions: { color: "#eeeeee", type: "dots" },
+        backgroundOptions: { color: "transparent" },
+        shape: "square",
+        width: 140,
+        height: 140,
+        type: "svg",
+      });
+    });
+
+    useEffect(() => {
+      if (!qrCodeRef.current) return;
+      qrCode?.append(qrCodeRef.current);
+    }, []);
+
+    const handleCopy = async (value: string, label?: string) => {
+      try {
+        await navigator.clipboard.writeText(value);
+        kit.toast.success(label != null ? `${label} copied to clipboard` : "Value copied to clipboard");
+      } catch (error) {
+        kit.toast.failed(label != null ? `Failed to copy ${label}` : "Failed to copy value");
+      }
+    };
+
+    return (
+      <div style={{ position: "relative", width: "100%", height: "100%", gap: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1 }}>
+        {onCancel != null && (
+          <div style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center", height: 32 }}>
+            <CloseButton onClick={onCancel}>
+              <PSmall>Back</PSmall>
+            </CloseButton>
+            <PLarge>Exchange via QR</PLarge>
+          </div>
+        )}
+
+        <div style={{ width: "100%", display: "flex", gap: 4 }}>
+          <div>
+            <QRContainer ref={qrCodeRef} />
+          </div>
+
+          <Card>
+            <Row style={{ background: "#1c1c1c", flexDirection: "column", textAlign: "left", alignItems: "flex-start" }}>
+              <PSmall style={{ color: "#d4d4d4" }}>Deposit address</PSmall>
+              <PSmall style={{ marginTop: 4, fontWeight: 600, fontFamily: "monospace", textAlign: "left" }}>
+                {depositAddress}
+                <Button style={{ marginLeft: 4, display: "inline-block", verticalAlign: "bottom", flexShrink: 0, width: 20, height: 20 }} onClick={() => handleCopy(depositAddress, "Address")}>
+                  <CopyIcon width={20} height={20} color="#ababab" />
+                </Button>
+              </PSmall>
+            </Row>
+
+            {minimumAmount != null && (
+              <Row>
+                <PSmall>Minimum deposit</PSmall>
+                <PMedium>
+                  {token.readable(minimumAmount)} {token.symbol}
+                </PMedium>
+              </Row>
+            )}
+
+            {depositAmount != null && (
+              <>
+                <Row>
+                  <PSmall>Network</PSmall>
+                  <PMedium>{token.chainName}</PMedium>
+                </Row>
+
+                <Row>
+                  <PSmall>Token</PSmall>
+                  <PMedium>{token.symbol}</PMedium>
+                </Row>
+
+                <Row>
+                  <PSmall>Required transfer</PSmall>
+                  <PMedium>
+                    {depositAmount}
+                    <Button style={{ marginLeft: 4, display: "inline-block", verticalAlign: "bottom", flexShrink: 0, width: 20, height: 20 }} onClick={() => handleCopy(depositAmount, "Amount")}>
+                      <CopyIcon width={20} height={20} color="#ababab" />
+                    </Button>
+                  </PMedium>
+                </Row>
+              </>
+            )}
+
+            {memo != null && (
+              <Row>
+                <PSmall style={{ fontWeight: 600 }}>Required memo</PSmall>
+                <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
+                  <PMedium style={{ fontWeight: 600, color: "#f3ae47" }}>{memo}</PMedium>
+                  <Button style={{ flexShrink: 0, marginTop: 2 }} onClick={() => handleCopy(memo, "Memo")}>
+                    <CopyIcon width={20} height={20} color="#ababab" />
+                  </Button>
+                </div>
+              </Row>
+            )}
+          </Card>
+        </div>
+
+        <WarningBox type="warning" style={{ marginTop: "auto" }}>
+          Only deposit {token.symbol} from {token.chainName} network{memo != null ? ` with memo "${memo}"` : ""}, otherwise funds will be lost!
+        </WarningBox>
+
+        <ActionButton style={{ marginTop: 8 }} onClick={onConfirm}>
+          I sent the funds
+        </ActionButton>
       </div>
+    );
+  }
+);
 
-      <WarningBadge>
-        <WarningIcon color="#F3AE47" style={{ marginTop: 4, flexShrink: 0 }} />
-        <PSmall style={{ color: "#F3AE47", fontWeight: "bold" }}>
-          Only deposit {review.from.symbol} from {review.from.chainName} network.
-          <br />
-          Depositing other assets or using a different network will result in loss of funds
-        </PSmall>
-      </WarningBadge>
-
-      <ActionButton style={{ marginTop: 12 }} onClick={onConfirm}>
-        I sent the funds
-      </ActionButton>
-    </div>
-  );
-});
-
-const WarningBadge = styled.div`
+const Card = styled.div`
   border-radius: 8px;
-  border: 1px solid var(--border-border-orange, #f3ae47);
-  background: var(--surface-warning, #3f311d);
-  padding: 8px;
+  border: 1px solid #323232;
+  background: #1f1f1f;
+  overflow: hidden;
+  height: fit-content;
+
+  width: 100%;
   display: flex;
-  gap: 8px;
-  text-align: left;
+  flex-direction: column;
   margin-top: 12px;
+
+  p {
+    text-align: left;
+    word-break: break-all;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    color: #fff;
+  }
 `;
 
-const Pre = styled.code`
-  display: inline;
-  background: #2d2d2d;
-  padding: 0 2px;
-  border-radius: 4px;
-  border: 1px solid #ffffff14;
-  word-break: break-all;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  text-align: left;
-  margin: 0;
+const Row = styled.div`
+  padding: 8px 12px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+
+  > *:first-child {
+    margin-right: 12px;
+  }
+
+  & + & {
+    border-top: 1px solid #323232;
+  }
 `;
 
 const CloseButton = styled(Button)`
@@ -122,4 +230,16 @@ const CloseButton = styled(Button)`
   background: #2d2d2d;
 `;
 
+const QRContainer = styled.div`
+  margin-top: 12px;
+  border-radius: 12px;
+  border: 1px solid #2d2d2d;
+  background: #1c1c1c;
+  text-align: left;
+
+  @media (max-width: 760px) {
+    display: none;
+  }
+`;
+
 export default DepositQR;

package/src/ui/profile/Payment.tsx

@@ -22,7 +22,6 @@ import { HotKit } from "../../HotKit";
 import { PopupOption, PopupOptionInfo } from "../styles";
 import { TokenCard } from "../bridge/TokenCard";
 import Popup from "../Popup";
-import DepositQR from "./DepositQR";
 
 interface PaymentProps {
   onReject: (message: string) => void;
@@ -63,7 +62,7 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
 
   const [flow, setFlow] = useState<{
     token?: Token;
-    wallet?: OmniWallet | "qr";
+    wallet?: OmniWallet;
     commitment?: Commitment;
     review?: BridgeReview;
     success?: { depositQoute?: BridgeReview; processing?: () => Promise<BridgeReview> };
@@ -75,7 +74,7 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
   const paymentTitle = title || `Pay ${payableToken.readable(needAmount)} ${payableToken.symbol}`;
   const showPrepaidToken = payableToken.float(prepaidAmount) >= 0.001;
 
-  const selectToken = async (from: Token, wallet?: OmniWallet | "qr") => {
+  const selectToken = async (from: Token, wallet?: OmniWallet) => {
     if (!wallet) return;
 
     setFlow({ token: from, wallet, review: undefined, step: "sign" });
@@ -85,7 +84,7 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
     const isStable = isStableFrom && isStableTo;
 
     let tasks: Promise<BridgeReview>[] = [];
-    if (isStable && !isDirectDeposit && wallet !== "qr") {
+    if (isStable && !isDirectDeposit) {
       const slippages = [0.0005, 0.001, 0.0015];
       tasks = slippages.map((slippage) => {
         const extra = (needAmount * BigInt(Math.floor(slippage * 1000))) / BigInt(1000);
@@ -105,7 +104,7 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
     const exectOutReview = await kit.exchange
       .reviewSwap({
         slippage: isStable ? STABLE_SLIPPAGE : PAY_SLIPPAGE,
-        refund: wallet === "qr" ? kit.priorityWallet : wallet,
+        refund: wallet,
         recipient: intents.signer!,
         amount: needAmount,
         sender: wallet,
@@ -214,15 +213,6 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
   }
 
   if (flow?.step === "transfer") {
-    if (flow.wallet === "qr") {
-      return (
-        <Popup onClose={() => onReject("closed")} header={<p>{paymentTitle}</p>}>
-          <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={2} />
-          <DepositQR kit={kit} review={flow.review!} onConfirm={confirmPaymentStep} />
-        </Popup>
-      );
-    }
-
     return (
       <Popup onClose={() => onReject("closed")} header={<p>{paymentTitle}</p>}>
         <HorizontalStepper style={{ marginBottom: 24 }} steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={2} />
@@ -371,19 +361,6 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
       {recommendedTokens.map(({ token, wallet, balance }) => renderToken(token, wallet, balance))}
       {otherTokens.map(({ token, wallet, balance }) => renderToken(token, wallet, balance))}
 
-      {kit.connectors.every((t) => !t.walletTypes.includes(payableToken.originalChain)) && (
-        <PopupOption style={{ marginTop: 8 }} onClick={() => selectToken(tokens.get(payableToken.originalAddress, payableToken.originalChain), "qr")}>
-          <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            <QRIcon />
-          </div>
-
-          <PopupOptionInfo>
-            <p>Send via QR code</p>
-            <span className="wallet-address">Transfer from CEX or external wallet</span>
-          </PopupOptionInfo>
-        </PopupOption>
-      )}
-
       <PopupOption style={{ marginTop: 8 }} onClick={() => kit.router.openConnector(kit)}>
         <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
           <WalletIcon />

package/src/ui/profile/Profile.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import PlusIcon from "../icons/plus";
 import { LogoutIcon } from "../icons/logout";
@@ -21,10 +21,18 @@ import { HotKit } from "../../HotKit";
 import { openBridge, openConnector } from "../router";
 import { TokenCard, TokenIcon } from "../bridge/TokenCard";
 import Popup from "../Popup";
+import SegmentedControl from "../uikit/tabs";
 
-export const Profile = observer(({ kit, onClose }: { kit: HotKit; onClose: (wallet?: OmniWallet) => void }) => {
-  let totalBalance = 0;
+interface ProfileProps {
+  kit: HotKit;
+  widget?: boolean;
+  onClose?: (wallet?: OmniWallet) => void;
+  onDeposit?: () => void;
+  onExchange?: () => void;
+}
 
+export const Profile = observer(({ kit, widget, onClose, onExchange, onDeposit }: ProfileProps) => {
+  let totalBalance = 0;
   const tokensList = kit.walletsTokens
     .map(({ token, wallet, balance }) => {
       if (token.float(balance) < 0.000001) return null;
@@ -52,106 +60,107 @@ export const Profile = observer(({ kit, onClose }: { kit: HotKit; onClose: (wall
   const socialConnector = kit.connectors.find((connector) => connector.type === ConnectorType.SOCIAL && connector.wallets.length > 0);
   const connectors = kit.connectors.filter((connector) => connector.type !== ConnectorType.HOTCRAFT);
 
+  const [selectedTab, setSelectedTab] = useState<"pendings" | "withdraw" | "portfolio">("portfolio");
+
   useEffect(() => {
     if (kit.wallets.length > 0) return;
-    onClose();
+    onClose?.();
   }, [kit.wallets.length]);
 
   return (
-    <Popup onClose={onClose} style={{ gap: 16 }}>
-      <div style={{ display: "flex", flexWrap: "wrap", width: "100%", gap: 8 }}>
-        {connectors.flatMap((connector) => {
-          return connector.wallets.map((wallet) => (
-            <WalletCard key={wallet.type} onClick={() => connector.disconnect()}>
-              <ImageView src={connector.icon} alt={connector.name} size={20} />
-              {connector.icon !== wallet.icon && <ImageView style={{ position: "absolute", bottom: 4, left: 20 }} src={wallet.icon} alt={connector.name} size={12} />}
-              <div>{formatter.truncateAddress(wallet.address, 8)}</div>
-              <LogoutIcon />
-            </WalletCard>
-          ));
-        })}
-
-        {connectors.some((t) => t.wallets.length === 0) && (
-          <WalletCard
-            style={{ paddingRight: 12 }}
-            onClick={() =>
-              openConnector(kit)
-                .then((wallet) => onClose(wallet))
-                .catch(() => onClose())
-            }
-          >
-            <PlusIcon />
-            Add wallet
-          </WalletCard>
-        )}
-      </div>
+    <Popup onClose={onClose} style={{ gap: 16 }} widget={widget}>
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", flexWrap: "wrap", width: "100%", gap: 8 }}>
+          {connectors.flatMap((connector) => {
+            return connector.wallets.map((wallet) => (
+              <WalletCard key={wallet.type} onClick={() => connector.disconnect()}>
+                <ImageView src={connector.icon} alt={connector.name} size={20} />
+                {connector.icon !== wallet.icon && <ImageView style={{ position: "absolute", bottom: 4, left: 20 }} src={wallet.icon} alt={connector.name} size={12} />}
+                <div>{formatter.truncateAddress(wallet.address, 8)}</div>
+                <LogoutIcon />
+              </WalletCard>
+            ));
+          })}
 
-      <Card>
-        <PSmall>YOUR BALANCE</PSmall>
-        <BalanceCard>${formatter.amount(totalBalance)}</BalanceCard>
+          {connectors.some((t) => t.wallets.length === 0) && (
+            <WalletCard
+              style={{ paddingRight: 12 }}
+              onClick={() =>
+                openConnector(kit)
+                  .then((wallet) => onClose?.(wallet))
+                  .catch(() => onClose?.())
+              }
+            >
+              <PlusIcon />
+              Add wallet
+            </WalletCard>
+          )}
+        </div>
 
-        <div style={{ width: "100%", display: "flex", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
-          <ActionButton onClick={() => (onClose(), openBridge(kit, { title: "Exchange" }))}>
-            <ExchangeIcon />
-            Exchange
-          </ActionButton>
+        <Card>
+          <PSmall>YOUR BALANCE</PSmall>
+          <BalanceCard>${formatter.amount(totalBalance)}</BalanceCard>
 
-          {socialConnector != null && (
-            <ActionButton onClick={() => socialConnector.openWallet()}>
-              <ImageView src={socialConnector.icon} alt={socialConnector.name} size={20} />
-              Open wallet
+          <div style={{ width: "100%", display: "flex", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
+            <ActionButton onClick={() => (onClose?.(), onExchange ? onExchange() : openBridge(kit, { title: "Exchange" }))}>
+              <ExchangeIcon />
+              Exchange
             </ActionButton>
-          )}
 
-          <ActionButton disabled onClick={() => (onClose(), openBridge(kit, { title: "Deposit" }))}>
-            Deposit
-          </ActionButton>
-        </div>
-      </Card>
-
-      {kit.activity.activityList.length > 0 && (
-        <TokenCards>
-          <PSmall style={{ fontSize: 16, fontWeight: 600, color: "#d2d2d2", textAlign: "left" }}>Pendings</PSmall>
-          {kit.activity.activityList.map((activity) => {
-            return (
-              <Card key={activity.id} onClick={() => activity.action()} style={{ flexDirection: "row", gap: 12 }}>
-                {activity.preview instanceof Token && <TokenIcon token={activity.preview} />}
-
-                <div>
-                  <PMedium style={{ textAlign: "left" }}>{activity.title}</PMedium>
-                  <PSmall style={{ textAlign: "left" }}>{activity.subtitle}</PSmall>
-                </div>
-
-                {activity.status === "pending" && (
-                  <div style={{ marginLeft: "auto", width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <Loader />
+            {socialConnector != null && (
+              <ActionButton onClick={() => socialConnector.openWallet()}>
+                <ImageView src={socialConnector.icon} alt={socialConnector.name} size={20} />
+                Open wallet
+              </ActionButton>
+            )}
+
+            <ActionButton onClick={() => (onClose?.(), onDeposit ? onDeposit() : kit.router.openDepositFlow(kit))}>Deposit</ActionButton>
+          </div>
+        </Card>
+
+        <SegmentedControl
+          value={selectedTab}
+          onChange={(value) => setSelectedTab(value as "pendings" | "withdraw" | "portfolio")}
+          options={[
+            { label: "Portfolio", value: "portfolio", background: "#141414", badge: nonOmniTokens.length.toString() },
+            { label: "HEX Balance", value: "withdraw", background: "#141414", badge: omniTokens.length.toString() },
+            { label: "Activity", value: "pendings", background: "#141414", badge: kit.activity.activityList.length.toString() },
+          ]}
+        />
+
+        {selectedTab === "pendings" && (
+          <TokenCards>
+            {kit.activity.activityList.map((activity) => {
+              return (
+                <Card key={activity.id} onClick={() => activity.action()} style={{ flexDirection: "row", gap: 12 }}>
+                  {activity.preview instanceof Token && <TokenIcon token={activity.preview} />}
+
+                  <div>
+                    <PMedium style={{ textAlign: "left" }}>{activity.title}</PMedium>
+                    <PSmall style={{ textAlign: "left" }}>{activity.subtitle}</PSmall>
                   </div>
-                )}
 
-                {activity.actionText && !activity.actionLoading && (
-                  <div style={{ marginLeft: "auto", padding: "8px 12px", borderRadius: 16, background: "#1a1a1a", color: "#fff" }}>
-                    <PSmall style={{ color: "#d6d6d6" }}>{activity.actionText}</PSmall>
-                  </div>
-                )}
-              </Card>
-            );
-          })}
-        </TokenCards>
-      )}
-
-      {omniTokens.length > 0 && (
-        <TokenCards>
-          <PSmall style={{ fontSize: 16, fontWeight: 600, color: "#d2d2d2", textAlign: "left" }}>Tokens to withdraw</PSmall>
-          {omniTokens.map((t) => t.component)}
-        </TokenCards>
-      )}
-
-      {nonOmniTokens.length > 0 && (
-        <TokenCards>
-          <PSmall style={{ fontSize: 16, fontWeight: 600, color: "#d2d2d2", textAlign: "left" }}>Portfolio</PSmall>
-          {nonOmniTokens.map((t) => t.component)}
-        </TokenCards>
-      )}
+                  {activity.status === "pending" && (
+                    <div style={{ marginLeft: "auto", width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                      <Loader />
+                    </div>
+                  )}
+
+                  {activity.actionText && !activity.actionLoading && (
+                    <div style={{ marginLeft: "auto", padding: "8px 12px", borderRadius: 16, background: "#1a1a1a", color: "#fff" }}>
+                      <PSmall style={{ color: "#d6d6d6" }}>{activity.actionText}</PSmall>
+                    </div>
+                  )}
+                </Card>
+              );
+            })}
+          </TokenCards>
+        )}
+
+        {selectedTab === "withdraw" && <TokenCards>{omniTokens.map((t) => t.component)}</TokenCards>}
+
+        {selectedTab === "portfolio" && <TokenCards>{nonOmniTokens.map((t) => t.component)}</TokenCards>}
+      </div>
     </Popup>
   );
 });

package/src/ui/router.tsx

@@ -132,10 +132,8 @@ export const openConnector = async (kit: HotKit) => {
   });
 };
 
-export const openDeposit = (kit: HotKit) => {
-  return new Promise<void>((resolve, reject) => {
-    present((close) => <DepositFlow kit={kit} onClose={() => (close(), resolve())} />);
-  });
+export const openDepositFlow = (kit: HotKit, token?: Token) => {
+  present((close) => <DepositFlow kit={kit} initialToken={token} onClose={close} />);
 };
 
 export const openConnectPrimaryWallet = (kit: HotKit) => {
@@ -148,8 +146,8 @@ export const openProfile = (kit: HotKit) => {
   present((close) => <Profile kit={kit} onClose={close} />);
 };
 
-export const openSelectTokenPopup = ({ kit, initialChain, onSelect }: { kit: HotKit; initialChain?: number; onSelect: (token: Token, wallet?: OmniWallet) => void }) => {
-  present((close) => <SelectTokenPopup kit={kit} initialChain={initialChain} onClose={close} onSelect={(t, w) => (onSelect(t, w), close())} />);
+export const openSelectTokenPopup = ({ kit, disableChains, initialChain, onSelect }: { kit: HotKit; disableChains?: number[]; initialChain?: number; onSelect: (token: Token, wallet?: OmniWallet) => void }) => {
+  present((close) => <SelectTokenPopup kit={kit} disableChains={disableChains} initialChain={initialChain} onClose={close} onSelect={(t, w) => (onSelect(t, w), close())} />);
 };
 
 export const openWalletPicker = (connector: OmniConnector, onSelect?: (wallet: OmniWallet) => void) => {
@@ -164,7 +162,7 @@ export const openWalletPicker = (connector: OmniConnector, onSelect?: (wallet: O
   });
 };
 
-export const openSelectSender = (props: { kit: HotKit; type: WalletType; onSelect: (wallet?: OmniWallet | "qr") => void }) => {
+export const openSelectSender = (props: { kit: HotKit; type: WalletType; disableQR?: boolean; onSelect: (wallet?: OmniWallet | "qr") => void }) => {
   present((close) => <SelectSender {...props} onClose={close} />);
 };
 

package/src/ui/styles.ts

@@ -49,7 +49,8 @@ export const ModalContent = styled.div<{ $mobileFullscreen?: boolean }>`
   @media (max-width: 600px) {
     max-width: 100%;
     width: 100%;
-    max-height: 90%;
+    height: auto !important;
+    max-height: 95% !important;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     border: none;