@hot-labs/kit 1.0.33

package/src/ui/payment/Payment.tsx

@@ -0,0 +1,78 @@
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+
+import { HotConnector } from "../../HotConnector";
+import { openBridge, openConnector } from "../router";
+import { Recipient } from "../../omni/recipient";
+import { BridgeReview } from "../../exchange";
+import { OmniWallet } from "../../OmniWallet";
+import { Network } from "../../omni/config";
+import { Token } from "../../omni/token";
+import Popup from "../Popup";
+
+import { TokenCard } from "./TokenCard";
+import { PopupOption, PopupOptionInfo } from "../styles";
+import { WalletIcon } from "../icons/wallet";
+
+interface PaymentProps {
+  connector: HotConnector;
+  token: Token;
+  amount: bigint;
+  recipient?: Recipient;
+  onClose: () => void;
+  onProcess: (task: Promise<BridgeReview>) => void;
+}
+
+export const Payment = observer(({ connector, recipient, token: need, amount: needAmount, onProcess, onClose }: PaymentProps) => {
+  const title = `Need ${need.readable(needAmount)} ${need.symbol}`;
+  const selectToken = async (from: Token, wallet?: OmniWallet) => {
+    onProcess(
+      openBridge(connector, {
+        sender: wallet,
+        autoClose: true,
+        type: "exactOut",
+        recipient: recipient || Recipient.fromWallet(connector.priorityWallet!),
+        readonlyTo: recipient ? true : false,
+        amount: need.float(needAmount),
+        readonlyAmount: true,
+        title: title,
+        from: from,
+        to: need,
+      })
+    );
+  };
+
+  useEffect(() => {
+    if (connector.wallets.length !== 0) return;
+    openConnector(connector);
+  }, [connector.wallets.length, connector]);
+
+  return (
+    <Popup onClose={onClose} header={<p>{title}</p>}>
+      {connector.walletsTokens.map(({ token, wallet, balance }) => {
+        if (token.id === need.id) return null;
+        const availableBalance = token.float(balance) - token.reserve;
+
+        if (need.originalChain === Network.Gonka || need.originalChain === Network.Juno) {
+          if (token.id === need.id) return null;
+          if (token.originalAddress !== need.originalAddress) return null;
+          if (availableBalance <= need.float(needAmount)) return null;
+          return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
+        }
+
+        if (availableBalance * token.usd <= need.usd * need.float(needAmount)) return null;
+        return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
+      })}
+
+      <PopupOption onClick={() => openConnector(connector)}>
+        <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <WalletIcon />
+        </div>
+        <PopupOptionInfo>
+          <p>Connect wallet</p>
+          <span className="wallet-address">To more pay options</span>
+        </PopupOptionInfo>
+      </PopupOption>
+    </Popup>
+  );
+});

package/src/ui/payment/Profile.tsx

@@ -0,0 +1,140 @@
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+import { useEffect } from "react";
+
+import { LogoutIcon } from "../icons/logout";
+import { openBridge, openConnector } from "../router";
+import { HotConnector } from "../../HotConnector";
+import { formatter } from "../../omni/utils";
+import { OmniToken } from "../../omni/config";
+import { tokens } from "../../omni/tokens";
+import Popup from "../Popup";
+
+import { ImageView, TokenCard } from "./TokenCard";
+import ExchangeIcon from "../icons/exchange";
+
+export const Profile = observer(({ hot, onClose }: { hot: HotConnector; onClose: () => void }) => {
+  let totalBalance = 0;
+  const tokensList = hot.wallets
+    .flatMap((wallet) => {
+      return tokens.list.map((token) => ({ token, wallet, balance: hot.balance(wallet, token) }));
+    })
+    .sort((a, b) => {
+      const balanceA = a.token.float(a.balance) * a.token.usd;
+      const balanceB = b.token.float(b.balance) * b.token.usd;
+      return balanceB - balanceA;
+    })
+    .map(({ token, wallet, balance }) => {
+      if (token.float(balance) < 0.000001) return null;
+      totalBalance += token.float(balance) * token.usd;
+      return {
+        chain: token.chain,
+        component: (
+          <TokenCard //
+            onSelect={() => {
+              if (token.chain === -4) hot.withdraw(token.address as OmniToken, +token.float(balance).toFixed(6), { sender: wallet });
+              else openBridge(hot, { title: "Exchange", sender: wallet, from: token });
+            }}
+            key={`${wallet.type}:${wallet.address}:${token.id}`}
+            wallet={wallet}
+            token={token}
+            hot={hot}
+          />
+        ),
+      };
+    });
+
+  useEffect(() => {
+    if (hot.wallets.length > 0) return;
+    onClose();
+  }, [hot.wallets.length]);
+
+  return (
+    <Popup onClose={onClose}>
+      <div style={{ display: "flex", flexWrap: "wrap", width: "100%", gap: 8 }}>
+        {hot.wallets.map((wallet) => (
+          <WalletCard onClick={() => wallet.disconnect()}>
+            <ImageView src={wallet.icon} alt={wallet.connector.name} size={20} />
+            <div>{formatter.truncateAddress(wallet.address, 8)}</div>
+            <LogoutIcon width={20} height={20} />
+          </WalletCard>
+        ))}
+
+        {hot.wallets.length < 6 && (
+          <WalletCard style={{ paddingLeft: 12, paddingRight: 12 }} onClick={() => openConnector(hot)}>
+            Add wallet
+          </WalletCard>
+        )}
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", width: "100%", gap: 8, marginTop: 16 }}>
+        <BalanceCard>${formatter.amount(totalBalance)}</BalanceCard>
+        <ExchangeButton onClick={() => (onClose(), openBridge(hot, { title: "Exchange" }))}>
+          <ExchangeIcon size={32} strokeColor="#d2d2d2" />
+        </ExchangeButton>
+      </div>
+
+      {tokensList.filter((t) => t != null && t.chain === -4).length > 0 && (
+        <TokenCards style={{ marginTop: 16 }}>
+          <p style={{ fontSize: 16, fontWeight: 600, color: "#d2d2d2", textAlign: "left" }}>Tokens to withdraw</p>
+          {tokensList.filter((t) => t != null && t.chain === -4).map((t) => t?.component)}
+          <div style={{ marginTop: 8, marginBottom: -4, width: "100%", height: 1, background: "#383d42" }}></div>
+        </TokenCards>
+      )}
+
+      {tokensList.filter((t) => t != null && t.chain !== -4).length > 0 && (
+        <TokenCards style={{ marginTop: 16 }}>
+          {/* Tokens to exchange */}
+          {tokensList.filter((t) => t != null && t.chain !== -4).map((t) => t?.component)}
+        </TokenCards>
+      )}
+    </Popup>
+  );
+});
+
+const ExchangeButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: transparent;
+  padding: 8px;
+  border-radius: 24px;
+  transition: background 0.2s ease-in-out;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`;
+
+const TokenCards = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+
+const WalletCard = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 6px;
+  padding-left: 8px;
+  padding-right: 12px;
+  background: #1a1a1a;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+`;
+
+const BalanceCard = styled.h2`
+  font-size: 48px;
+  font-weight: 600;
+  color: #fff;
+`;

package/src/ui/payment/SelectRecipient.tsx

@@ -0,0 +1,111 @@
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+import { useState } from "react";
+
+import { ArrowRightIcon } from "../icons/arrow-right";
+import { PopupOption, PopupOptionInfo } from "../styles";
+import { ConnectorType, OmniConnector } from "../../OmniConnector";
+import { HotConnector } from "../../HotConnector";
+import { Recipient } from "../../omni/recipient";
+import { WalletType } from "../../omni/config";
+import { openWalletPicker } from "../router";
+import { formatter } from "../../omni/utils";
+import Popup from "../Popup";
+
+import { ImageView } from "./TokenCard";
+
+interface SelectRecipientProps {
+  recipient?: Recipient;
+  type: WalletType;
+  onSelect: (recipient?: Recipient) => void;
+  hot: HotConnector;
+  onClose: () => void;
+}
+
+export const SelectRecipient = observer(({ recipient, hot, type, onSelect, onClose }: SelectRecipientProps) => {
+  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
+  const [customAddress, setCustomAddress] = useState<string>(recipient?.address || "");
+
+  const selectCustom = async () => {
+    const recipient = await Recipient.fromAddress(type, customAddress);
+    onSelect(recipient);
+    onClose();
+  };
+
+  const selectWallet = async (t: OmniConnector) => {
+    if (!t.wallets[0]) return openWalletPicker(t, (w) => (onSelect(Recipient.fromWallet(w)), onClose()));
+    onSelect(Recipient.fromWallet(t.wallets[0]));
+    onClose();
+  };
+
+  return (
+    <Popup header={<p>Select recipient</p>} onClose={onClose}>
+      {type !== WalletType.OMNI && (
+        <div style={{ width: "100%", marginBottom: 24 }}>
+          <p style={{ fontSize: 16, textAlign: "left" }}>Enter recipient address, avoid CEX</p>
+          <CustomRecipient>
+            <input //
+              type="text"
+              placeholder="Enter wallet address"
+              onChange={(e) => setCustomAddress(e.target.value)}
+              value={customAddress}
+            />
+            <button onClick={selectCustom} disabled={customAddress.length === 0}>
+              Select
+            </button>
+          </CustomRecipient>
+        </div>
+      )}
+
+      {connectors.map((t) => (
+        <PopupOption key={t.id} onClick={() => selectWallet(t)}>
+          <ImageView src={t.icon} alt={t.name} size={44} />
+          <PopupOptionInfo>
+            <p style={{ fontSize: 20, fontWeight: "bold" }}>{t.name}</p>
+            {t.wallets[0]?.address && <span className="wallet-address">{formatter.truncateAddress(t.wallets[0].address)}</span>}
+          </PopupOptionInfo>
+          {!t.wallets[0]?.address ? <p>Connect</p> : <ArrowRightIcon style={{ flexShrink: 0 }} />}
+        </PopupOption>
+      ))}
+    </Popup>
+  );
+});
+
+const CustomRecipient = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid #2d2d2d;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-top: 8px;
+  height: 50px;
+
+  input {
+    width: 100%;
+    padding: 12px;
+    background: #161616;
+    color: #fff;
+    outline: none;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: left;
+    outline: none;
+    border: none;
+    height: 100%;
+    flex: 1;
+  }
+
+  button {
+    width: 100px;
+    color: #fff;
+    background: #000000;
+    border-radius: 0px;
+    margin: 0px;
+    outline: none;
+    border: none;
+    height: 100%;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+`;

package/src/ui/payment/SelectSender.tsx

@@ -0,0 +1,60 @@
+import { observer } from "mobx-react-lite";
+
+import { QRIcon } from "../icons/qr";
+import { ArrowRightIcon } from "../icons/arrow-right";
+import { PopupOption, PopupOptionInfo } from "../styles";
+
+import { ConnectorType, OmniConnector } from "../../OmniConnector";
+import { OmniWallet } from "../../OmniWallet";
+import { WalletType } from "../../omni/config";
+import { HotConnector } from "../../HotConnector";
+import { openWalletPicker } from "../router";
+import { formatter } from "../../omni/utils";
+import Popup from "../Popup";
+
+import { ImageView } from "./TokenCard";
+
+interface SelectSenderProps {
+  type: WalletType;
+  onSelect: (wallet?: OmniWallet | "qr") => void;
+  hot: HotConnector;
+  onClose: () => void;
+}
+
+export const SelectSender = observer(({ hot, type, onSelect, onClose }: SelectSenderProps) => {
+  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
+  const noExternal = type === WalletType.OMNI || type === WalletType.COSMOS;
+
+  const selectWallet = async (t: OmniConnector) => {
+    if (!t.wallets[0]) return openWalletPicker(t, (w) => (onSelect(w), onClose()));
+    onSelect(t.wallets[0]);
+    onClose();
+  };
+
+  return (
+    <Popup header={<p>Select sender</p>} onClose={onClose}>
+      {!noExternal && (
+        <PopupOption onClick={() => (onSelect("qr"), onClose())}>
+          <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <QRIcon />
+          </div>
+          <PopupOptionInfo>
+            <p style={{ fontSize: 20, fontWeight: "bold" }}>Send via QR code</p>
+            <span className="wallet-address">From CEX or external wallet</span>
+          </PopupOptionInfo>
+        </PopupOption>
+      )}
+
+      {connectors.map((t) => (
+        <PopupOption key={t.id} onClick={() => selectWallet(t)}>
+          <ImageView src={t.icon} alt={t.name} size={44} />
+          <PopupOptionInfo>
+            <p style={{ fontSize: 20, fontWeight: "bold" }}>{t.name}</p>
+            {t.wallets[0]?.address && <span className="wallet-address">{formatter.truncateAddress(t.wallets[0].address)}</span>}
+          </PopupOptionInfo>
+          {!t.wallets[0]?.address ? <p>Connect</p> : <ArrowRightIcon style={{ flexShrink: 0 }} />}
+        </PopupOption>
+      ))}
+    </Popup>
+  );
+});

package/src/ui/payment/SelectToken.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { formatter } from "../../omni/utils";
+import { Token } from "../../omni/token";
+import { HotConnector } from "../../HotConnector";
+import { OmniWallet } from "../../OmniWallet";
+import { Network, OmniToken } from "../../omni/config";
+import { PopupOption } from "../styles";
+import Popup from "../Popup";
+
+import { TokenCard, ImageView } from "./TokenCard";
+import { tokens } from "../../omni/tokens";
+
+interface SelectTokenPopupProps {
+  hot: HotConnector;
+  initialChain?: number;
+  onClose: () => void;
+  onSelect: (token: Token, wallet?: OmniWallet) => void;
+}
+
+export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect }: SelectTokenPopupProps) => {
+  const [chain, setChain] = useState<number | null>(initialChain || null);
+  const [search, setSearch] = useState<string>("");
+
+  if (chain == null) {
+    const chains: Record<number, { chain: number; balance: number; name: string; icon: string }> = {};
+    tokens.list.forEach((token) => {
+      if (!chains[token.chain])
+        chains[token.chain] = {
+          chain: token.chain,
+          name: token.chainName,
+          icon: token.chainIcon,
+          balance: 0,
+        };
+
+      hot.wallets.forEach((wallet) => {
+        const balance = hot.balance(wallet, token);
+        chains[token.chain].balance += token.float(balance) * token.usd;
+      });
+    });
+
+    const sorted = Object.values(chains).sort((a, b) => {
+      if (a.chain === Network.Hot) return -1;
+      return b.balance - a.balance;
+    });
+
+    return (
+      <Popup onClose={onClose} header={<p>Select chain</p>} style={{ minHeight: 300 }}>
+        <SearchInput type="text" placeholder="Search chain" onChange={(e) => setSearch(e.target.value)} />
+
+        {sorted.map(({ chain, balance, name, icon }) => {
+          if (search && !name.toLowerCase().includes(search.toLowerCase())) return;
+
+          return (
+            <PopupOption onClick={() => (setChain(chain), setSearch(""))}>
+              <ImageView src={icon} alt={name} size={24} />
+              <p style={{ fontSize: 24, fontWeight: "bold" }}>{name}</p>
+              {balance > 0 && <p style={{ marginLeft: "auto", fontSize: 20, color: "#c6c6c6" }}>${formatter.amount(balance)}</p>}
+            </PopupOption>
+          );
+        })}
+      </Popup>
+    );
+  }
+
+  if (chain !== -4) {
+    return (
+      <Popup onClose={onClose} header={<p>Select token</p>} style={{ minHeight: 300 }}>
+        <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />
+
+        {tokens.list
+          .filter((token) => token.chain === chain)
+          .sort((a, b) => {
+            const wallet = hot.wallets.find((w) => w.type === a.type)!;
+            const aBalance = a.float(hot.balance(wallet, a)) * a.usd;
+            const bBalance = b.float(hot.balance(wallet, b)) * b.usd;
+            return bBalance - aBalance;
+          })
+          .map((token) => {
+            const wallet = hot.wallets.find((w) => w.type === token.type);
+            if (search && !token.symbol.toLowerCase().includes(search.toLowerCase())) return;
+            return <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />;
+          })}
+      </Popup>
+    );
+  }
+
+  let used = new Set<string>();
+  return (
+    <Popup onClose={onClose} header={<p>Select token</p>}>
+      <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />
+      {hot.walletsTokens
+        .filter(({ token, balance }) => {
+          if (token.chain !== Network.Hot) return false;
+          if (token.float(balance) < 0.0001) return false;
+          if (!token.symbol.toLowerCase().includes(search.toLowerCase())) return false;
+          used.add(token.address);
+          return true;
+        })
+        .sort((a, b) => {
+          const aBalance = a.token.float(a.balance) * a.token.usd;
+          const bBalance = b.token.float(b.balance) * b.token.usd;
+          return bBalance - aBalance;
+        })
+        .map(({ token, wallet }) => (
+          <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />
+        ))}
+
+      {Object.values(OmniToken)
+        .filter((token) => !used.has(token))
+        .map((token) => (
+          <TokenCard key={token} token={hot.omni(token)} onSelect={onSelect} hot={hot} wallet={hot.priorityWallet} />
+        ))}
+    </Popup>
+  );
+});
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 16px;
+  border: 1px solid #282c30;
+  background: #282c30;
+  color: #fff;
+  outline: none;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: -0.32px;
+  text-align: left;
+  margin-bottom: 8px;
+`;

package/src/ui/payment/TokenCard.tsx

@@ -0,0 +1,83 @@
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+
+import { formatter } from "../../omni/utils";
+import { Token } from "../../omni/token";
+import { HotConnector } from "../../HotConnector";
+import { OmniWallet } from "../../OmniWallet";
+import { PopupOption } from "../styles";
+import { chainsMap } from "../../omni/config";
+
+const images = {
+  cached: new Map<string, Promise<void>>(),
+  cache(url: string): Promise<void> {
+    if (this.cached.has(url)) return this.cached.get(url)!;
+    const promise = new Promise<void>((resolve, reject) => {
+      const img = new Image();
+      img.src = url;
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error("Failed to load image"));
+    });
+
+    this.cached.set(url, promise);
+    return promise;
+  },
+};
+
+enum ImageState {
+  Loading = "loading",
+  Loaded = "loaded",
+  Error = "error",
+}
+
+export const ImageView = ({ src, size = 40, alt, style }: { src: string; size?: number; alt: string; style?: React.CSSProperties }) => {
+  const [icon, setIcon] = useState<ImageState>(ImageState.Loading);
+  useEffect(() => {
+    setIcon(ImageState.Loading);
+    images
+      .cache(src)
+      .then(() => setIcon(ImageState.Loaded))
+      .catch(() => setIcon(ImageState.Error));
+  }, [src]);
+
+  if (icon === ImageState.Loaded) {
+    return <img src={src} alt={alt} style={{ objectFit: "contain", width: size, height: size, borderRadius: "50%", ...style }} />;
+  }
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: size, height: size, borderRadius: "50%", backgroundColor: "#0e0e0e", ...style }}>
+      <p style={{ fontWeight: "bold", fontSize: size / 2, color: "#ffffff" }}>{alt.charAt(0)?.toUpperCase()}</p>
+    </div>
+  );
+};
+
+export const TokenIcon = observer(({ token, wallet }: { token: Token; wallet?: OmniWallet }) => {
+  return (
+    <div style={{ position: "relative", width: 40, height: 40 }}>
+      <ImageView src={token.icon} alt={token.symbol} size={40} />
+      <ImageView src={token.chainIcon} alt={token.symbol} size={14} style={{ position: "absolute", bottom: 0, right: 0 }} />
+      {token.chain === -4 && wallet?.type && <ImageView src={wallet.icon} alt={chainsMap[wallet.type]?.name || ""} size={14} style={{ position: "absolute", bottom: 0, left: 0 }} />}
+    </div>
+  );
+});
+
+export const TokenCard = observer(({ token, onSelect, hot, wallet }: { token: Token; onSelect: (token: Token, wallet?: OmniWallet) => void; hot: HotConnector; wallet?: OmniWallet }) => {
+  const balance = hot.balance(wallet, token);
+  const symbol = token.chain === -4 && !token.isMainOmni ? `${token.originalChainSymbol}_${token.symbol}` : token.symbol;
+
+  return (
+    <PopupOption key={token.id} onClick={() => onSelect(token, wallet)}>
+      <TokenIcon token={token} wallet={wallet} />
+
+      <div style={{ marginTop: -2, display: "flex", flexDirection: "column", gap: 4, textAlign: "left" }}>
+        <p style={{ textAlign: "left", fontSize: 20, fontWeight: "bold" }}>{symbol}</p>
+        <p style={{ textAlign: "left", fontSize: 14, color: "#c6c6c6" }}>${formatter.amount(token.usd)}</p>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
+        <p style={{ textAlign: "right", fontSize: 20 }}>{token.readable(balance)}</p>
+        <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${token.readable(balance, token.usd)}</p>
+      </div>
+    </PopupOption>
+  );
+});