@hot-labs/kit 1.2.0-alpha.1 → 1.2.0

package/src/ui/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-const font = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+const font = `Golos Text, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
 
 export const ModalContainer = styled.div`
   position: fixed;
@@ -133,16 +133,6 @@ export const ModalBody = styled.div`
     transition: background 0.2s ease-in-out;
     font-family: monospace;
   }
-
-  p {
-    color: rgba(255, 255, 255, 0.9);
-    text-align: center;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    letter-spacing: -0.8px;
-  }
 `;
 
 export const Footer = styled.div`
@@ -195,6 +185,7 @@ export const PopupOption = styled.button`
   outline: none;
   border: none;
   background: transparent;
+  width: 100%;
   gap: 12px;
 
   img {
@@ -263,7 +254,9 @@ export const PopupButton = styled.button`
 `;
 
 export const PopupRoot = styled.div`
+  @import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap");
   height: 100%;
+  width: 100%;
 
   h1,
   h2,

package/src/ui/uikit/Stepper.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface Step {
+  label: string;
+  completed?: boolean;
+  active?: boolean;
+}
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  style?: React.CSSProperties;
+}
+
+export const HorizontalStepper: React.FC<StepperProps> = ({ steps, currentStep, style }) => {
+  return (
+    <div style={{ padding: "0 32px 32px", display: "flex", alignItems: "center", width: "100%", margin: "16px 0", ...style }}>
+      {steps.map((step, idx) => {
+        const isCompleted = idx < currentStep;
+        const isActive = idx === currentStep;
+
+        return (
+          <React.Fragment key={idx}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <div
+                style={{
+                  width: 16,
+                  height: 16,
+                  position: "relative",
+                  borderRadius: "50%",
+                  border: isActive || isCompleted ? "2px solid #ffffff" : "2px solid #a0a0a0",
+                  background: isCompleted ? "#ffffff" : "#333",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transition: "all 0.2s",
+                  zIndex: 1,
+                }}
+              >
+                <p style={{ fontSize: 16, color: "#fff", opacity: isActive ? 1 : 0.5, position: "absolute", top: 24, width: 100 }}>{step.label}</p>
+              </div>
+            </div>
+
+            {idx < steps.length - 1 && <div style={{ transition: "background 0.2s", flex: 1, height: 2, background: idx < currentStep ? "#ffffff" : "#333", margin: "0 6px", borderRadius: 24, minWidth: 24 }} />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/src/ui/uikit/Toast.tsx

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { Loader } from "./loader";
+
+const Toast = ({ message }: { message: string }) => {
+  return (
+    <ToastRoot>
+      <div style={{ width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 12, background: "rgba(255, 255, 255, 0.07)" }}>
+        <Loader />
+      </div>
+
+      <div>
+        <p style={{ color: "#ADA5A4" }}>Executing transaction</p>
+        <p style={{ marginTop: 2 }}>{message}</p>
+      </div>
+    </ToastRoot>
+  );
+};
+
+export default Toast;
+
+const ToastRoot = styled.div`
+  position: fixed;
+  bottom: 48px;
+  left: 12px;
+  right: 12px;
+  background: var(--surface-common-container--low, #262729);
+  border: 1px solid var(--border-lowest, rgba(255, 255, 255, 0.07));
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1000000000;
+  width: fit-content;
+  padding-right: 24px;
+  gap: 12px;
+
+  p {
+    color: var(--text-primary, #fff);
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0;
+  }
+`;

package/src/ui/uikit/button.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+export const ActionButton = styled.button`
+  display: flex;
+  padding: 0 24px;
+  border-radius: 12px;
+  background: #e7e7e7;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  height: 48px;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 8px;
+  flex: 1;
+  width: 100%;
+
+  color: #121212;
+  text-align: center;
+  font-family: "Golos Text";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.16px;
+
+  &:hover {
+    background: #d2d2d2;
+  }
+
+  &:disabled {
+    background: #3e3e3e;
+    color: #828282;
+    cursor: not-allowed;
+  }
+`;
+
+export const Button = styled.button`
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: 0.2s opacity;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;

package/src/ui/uikit/image.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+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>
+  );
+};

package/src/ui/uikit/loader.tsx

@@ -0,0 +1,52 @@
+import styled, { keyframes } from "styled-components";
+
+export const Loader = styled.div`
+  border: 4px solid #2a2a2a;
+  border-top: 4px solid #fff;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 0.9s linear infinite;
+  margin: 0 auto;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const shine = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+
+export const Skeleton = 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;
+  }
+`;

package/src/ui/uikit/tabs.tsx

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+
+interface SegmentedControlProps {
+  options: { label: string; value: string; color?: string; background?: string }[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const SegmentedControl = ({ options, value, onChange }: SegmentedControlProps) => {
+  return (
+    <Tabs>
+      {options.map((option) => (
+        <Tab
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          $active={option.value === value}
+          style={{
+            background: option.value === value ? option.background || "#1D1F20" : "transparent",
+            color: option.value === value ? option.color : "#6b6661",
+          }}
+        >
+          {option.label}
+        </Tab>
+      ))}
+    </Tabs>
+  );
+};
+
+const Tabs = styled.div`
+  display: flex;
+  border-radius: 16px;
+  border: 1px solid var(--border-lowest-solid, #242627);
+  padding: 0;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 2px;
+  width: 100%;
+`;
+
+const Tab = styled.button<{ $active?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  height: 100%;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  transition: 0.2s background-color;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+export default SegmentedControl;

package/src/ui/uikit/text.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+export const PSmall = styled.p`
+  color: var(--text-text-secondary, #bfbfbf);
+  font-family: var(--font-family-text, "Golos Text");
+  font-size: var(--P-Small-font-size, 14px);
+  line-height: var(--P-Small-line-height, 20px); /* 142.857% */
+  letter-spacing: -0.14px;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0;
+`;
+
+export const PMedium = styled.p`
+  color: var(--text-text-primary, #fff);
+  font-family: var(--font-family-text, "Golos Text");
+  font-size: var(--P-Default-font-size, 16px);
+  line-height: var(--P-Default-line-height, 22px); /* 137.5% */
+  letter-spacing: -0.16px;
+  font-style: normal;
+  margin: 0;
+`;
+
+export const PLarge = styled.p`
+  color: var(--text-text-primary, #fff);
+  font-family: var(--font-family-text, "Golos Text");
+  font-size: var(--P-Large-font-size, 18px);
+  line-height: var(--P-Large-line-height, 24px); /* 133.333% */
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: -0.18px;
+  margin: 0;
+`;
+
+export const PTiny = styled.p`
+  color: var(--text-text-primary, #fff);
+  font-family: var(--font-family-text, "Golos Text");
+  font-size: var(--P-Tiny-font-size, 12px);
+  line-height: var(--P-Tiny-line-height, 16px);
+  letter-spacing: -0.12px;
+  font-style: normal;
+  font-weight: 400;
+  margin: 0;
+`;
+
+export const H5 = styled.h5`
+  color: var(--text-text-tertiary, #fff);
+  font-family: var(--font-family-headings, "Golos Text");
+  font-size: var(--h5-font-size, 24px);
+  line-height: var(--h5-line-height, 32px);
+  font-style: normal;
+  font-weight: 500;
+  margin: 0;
+`;
+
+export const H4 = styled.h4`
+  color: var(--text-text-primary, #fff);
+  font-family: var(--font-family-headings, "Golos Text");
+  font-size: var(--h4-font-size, 32px);
+  line-height: var(--h4-line-height, 44px);
+  font-style: normal;
+  font-weight: 600;
+  margin: 0;
+`;

package/src/ui/utils.ts

@@ -0,0 +1,14 @@
+import { NetworkError, TimeoutNetworkError } from "../core/api";
+
+export const serializeError = (error: any): string => {
+  try {
+    if (error instanceof Error) return error.message;
+    if (error instanceof NetworkError) return error.toString();
+    if (error instanceof TimeoutNetworkError) return error.toString();
+    if (typeof error === "object" && Object.keys(error).length > 0) return JSON.stringify(error);
+    if (typeof error === "string" || typeof error === "number") return error.toString();
+    return "";
+  } catch (error) {
+    return "Unknown error";
+  }
+};

package/src/ui/payment/Payment.tsx

@@ -1,79 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { useEffect } from "react";
-
-import { HotConnector } from "../../HotConnector";
-import { openBridge, openConnector } from "../router";
-import { Recipient } from "../../core/recipient";
-import { BridgeReview } from "../../exchange";
-import { OmniWallet } from "../../OmniWallet";
-import { Network } from "../../core/chains";
-import { Token } from "../../core/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/TokenCard.tsx

@@ -1,98 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { useEffect, useState } from "react";
-import styled from "styled-components";
-
-import { chains } from "../../core/chains";
-import { formatter } from "../../core/utils";
-import { Token } from "../../core/token";
-
-import { HotConnector } from "../../HotConnector";
-import { OmniWallet } from "../../OmniWallet";
-import { PopupOption } from "../styles";
-
-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={chains.get(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} />
-
-      <TokenWrap style={{ marginTop: -2, 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>
-      </TokenWrap>
-
-      <TokenWrap style={{ 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>
-      </TokenWrap>
-    </PopupOption>
-  );
-});
-
-const TokenWrap = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  &,
-  p {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;