@hot-labs/kit 1.1.0-beta.4 → 1.1.0-beta.7

package/src/core/Intents.ts

@@ -7,10 +7,9 @@ import { rpc } from "../near/rpc";
 import type { Intent, Commitment, TokenDiffIntent, MtWithdrawIntent, FtWithdrawIntent, NftWithdrawIntent, TransferIntent } from "./types";
 import { OmniToken } from "./chains";
 import { tokens } from "./tokens";
-import { formatter } from "./utils";
 import { api } from "./api";
 
-import { openPayment } from "../ui/router";
+import { openPayment, openToast } from "../ui/router";
 
 export const TGAS = 1000000000000n;
 
@@ -21,14 +20,22 @@ export class Intents {
     return new Intents();
   }
 
-  hashes: string[] = [];
-  intents: Intent[] = [];
-  signer?: OmniWallet;
-  nonce?: Uint8Array;
-  deadline?: Date;
-
+  signedHashes: string[] = [];
   commitments: Commitment[] = [];
   need = new Map<OmniToken, bigint>();
+  signer?: OmniWallet;
+
+  unsignedCommitment?: {
+    intents: Intent[];
+    nonce?: Uint8Array;
+    deadline?: Date;
+  };
+
+  addIntent(intent: Intent) {
+    if (!this.unsignedCommitment) this.unsignedCommitment = { intents: [] };
+    this.unsignedCommitment.intents.push(intent);
+    return this;
+  }
 
   addNeed(token: OmniToken, amount: bigint) {
     if (!this.need.has(token)) this.need.set(token, 0n);
@@ -38,7 +45,7 @@ export class Intents {
 
   authCall(args: { contractId: string; msg: string; attachNear: bigint; tgas: number }) {
     this.addNeed(OmniToken.NEAR, args.attachNear);
-    this.intents.push({
+    this.addIntent({
       min_gas: (BigInt(args.tgas) * TGAS).toString(),
       attached_deposit: args.attachNear.toString(),
       contract_id: args.contractId,
@@ -58,7 +65,7 @@ export class Intents {
       recipient: "pay.fi.tg",
       amount,
       token,
-    }).depositAndExecute({ email });
+    }).yieldExecute({ email });
   }
 
   transfer(args: { recipient: string; token: OmniToken; amount: number | bigint; memo?: string; msg?: string; tgas?: number }) {
@@ -74,7 +81,7 @@ export class Intents {
     };
 
     this.addNeed(args.token, BigInt(amount));
-    this.intents.push(intent);
+    this.addIntent(intent);
     return this;
   }
 
@@ -96,7 +103,7 @@ export class Intents {
       msg: args.msg,
     };
 
-    this.intents.push(intent);
+    this.addIntent(intent);
     return this;
   }
 
@@ -119,7 +126,7 @@ export class Intents {
       }
     }
 
-    this.intents.push(intent);
+    this.addIntent(intent);
     return this;
   }
 
@@ -156,7 +163,7 @@ export class Intents {
         this.addNeed(token, BigInt(rawIntent.amounts[i]));
       }
 
-      this.intents.push({
+      this.addIntent({
         intent: "mt_withdraw",
         amounts: rawIntent.amounts,
         receiver_id: rawIntent.receiver_id,
@@ -211,12 +218,12 @@ export class Intents {
   }
 
   addPublicKey(publicKey: string) {
-    this.intents.push({ intent: "add_public_key", public_key: publicKey });
+    this.addIntent({ intent: "add_public_key", public_key: publicKey });
     return this;
   }
 
   removePublicKey(publicKey: string) {
-    this.intents.push({ intent: "remove_public_key", public_key: publicKey });
+    this.addIntent({ intent: "remove_public_key", public_key: publicKey });
     return this;
   }
 
@@ -229,7 +236,7 @@ export class Intents {
     if (standart === "nep245") {
       const mtContract = tokenParts[0];
       const tokenId = tokenParts.slice(1).join(":");
-      this.intents.push({
+      this.addIntent({
         intent: "mt_withdraw",
         amounts: [amount],
         receiver_id: args.receiver,
@@ -243,7 +250,7 @@ export class Intents {
     }
 
     if (standart === "nep141") {
-      this.intents.push({
+      this.addIntent({
         intent: "ft_withdraw",
         receiver_id: args.receiver,
         token: tokenParts.join(":"),
@@ -255,7 +262,7 @@ export class Intents {
     }
 
     if (standart === "nep171") {
-      this.intents.push({
+      this.addIntent({
         intent: "nft_withdraw",
         receiver_id: args.receiver,
         token_id: tokenParts.join(":"),
@@ -270,7 +277,7 @@ export class Intents {
   }
 
   attachHashes(hashes: string[]) {
-    this.hashes.push(...hashes);
+    this.signedHashes.push(...hashes);
     return this;
   }
 
@@ -280,22 +287,26 @@ export class Intents {
   }
 
   attachDeadline(deadline: Date) {
-    this.deadline = deadline;
+    if (!this.unsignedCommitment) this.unsignedCommitment = { intents: [] };
+    this.unsignedCommitment.deadline = deadline;
     return this;
   }
 
   attachNonce(nonce: Uint8Array) {
-    this.nonce = nonce;
+    if (!this.unsignedCommitment) this.unsignedCommitment = { intents: [] };
+    this.unsignedCommitment.nonce = nonce;
     return this;
   }
 
   attachTimeout(seconds: number) {
-    this.deadline = new Date(Date.now() + seconds * 1000);
+    if (!this.unsignedCommitment) this.unsignedCommitment = { intents: [] };
+    this.unsignedCommitment.deadline = new Date(Date.now() + seconds * 1000);
     return this;
   }
 
   attachSeed(seed: string) {
-    this.nonce = new Uint8Array(sha256(new TextEncoder().encode(seed))).slice(0, 32);
+    if (!this.unsignedCommitment) this.unsignedCommitment = { intents: [] };
+    this.unsignedCommitment.nonce = new Uint8Array(sha256(new TextEncoder().encode(seed))).slice(0, 32);
     return this;
   }
 
@@ -308,10 +319,10 @@ export class Intents {
     const intAmount = typeof amount === "number" ? tokens.get(token).int(amount) : amount;
 
     // this.addNeed(token, -intAmount); Do we need to add the need here?
-    const tokenDiff = this.intents.find((intent) => intent.intent === "token_diff");
+    const tokenDiff = this.unsignedCommitment?.intents.find((intent) => intent.intent === "token_diff");
 
     if (tokenDiff) tokenDiff.diff[token.toString()] = intAmount.toString();
-    else this.intents.push({ intent: "token_diff", diff: { [token.toString()]: intAmount.toString() } });
+    else this.addIntent({ intent: "token_diff", diff: { [token.toString()]: intAmount.toString() } });
     return this;
   }
 
@@ -319,10 +330,10 @@ export class Intents {
     const intAmount = typeof amount === "number" ? tokens.get(token).int(amount) : amount;
 
     this.addNeed(token as OmniToken, intAmount);
-    const tokenDiff = this.intents.find((intent) => intent.intent === "token_diff");
+    const tokenDiff = this.unsignedCommitment?.intents.find((intent) => intent.intent === "token_diff");
 
     if (tokenDiff) tokenDiff.diff[token.toString()] = (-intAmount).toString();
-    else this.intents.push({ intent: "token_diff", diff: { [token.toString()]: (-intAmount).toString() } });
+    else this.addIntent({ intent: "token_diff", diff: { [token.toString()]: (-intAmount).toString() } });
     return this;
   }
 
@@ -332,9 +343,13 @@ export class Intents {
     if (!signer.omniAddress) throw new Error("No omni address");
 
     const commitments: Commitment[] = [];
-    for (const intent of this.intents) {
-      const signed = await signer.signIntents([intent], { deadline: this.deadline ? +this.deadline : undefined, nonce: this.nonce });
-      commitments.push(signed);
+    for (const intent of this.unsignedCommitment?.intents || []) {
+      commitments.push(
+        await signer.signIntents([intent], {
+          deadline: this.unsignedCommitment?.deadline ? +this.unsignedCommitment.deadline : undefined,
+          nonce: this.unsignedCommitment?.nonce,
+        })
+      );
     }
 
     return commitments;
@@ -344,48 +359,60 @@ export class Intents {
     const signer = this.signer;
     if (!signer) throw new Error("No signer attached");
     if (!signer.omniAddress) throw new Error("No omni address");
-    return await signer.signIntents(this.intents, {
-      deadline: this.deadline ? +this.deadline : undefined,
-      nonce: this.nonce,
+    const commitment = await signer.signIntents(this.unsignedCommitment?.intents || [], {
+      deadline: this.unsignedCommitment?.deadline ? +this.unsignedCommitment.deadline : undefined,
+      nonce: this.unsignedCommitment?.nonce,
     });
+
+    this.unsignedCommitment = undefined;
+    this.commitments.push(commitment);
+    return this;
   }
 
   async simulate() {
-    if (!this.signer) throw new Error("No signer attached");
-    const signed = await this.sign();
-    return await Intents.simulateIntents([signed]);
+    if (this.commitments.length === 0) throw new Error("No commitments attached");
+    return await Intents.simulateIntents(this.commitments);
   }
 
-  async depositAndExecute(payload?: Record<string, any>) {
+  async yieldExecute(payload?: Record<string, any>) {
     if (!this.wibe3) throw new Error("No wibe3 attached");
-    return openPayment(this.wibe3, this, payload);
-  }
+    const { depositQoute, processing } = await openPayment(this.wibe3, this);
+    const depositAddress = depositQoute === "direct" ? undefined : typeof depositQoute?.qoute === "object" ? depositQoute?.qoute?.depositAddress : undefined;
 
-  async execute() {
-    if (!this.signer) throw new Error("No signer attached");
-    const signed = await this.sign();
-    return await Intents.publish([signed], this.hashes);
-  }
-
-  async executeBatch(params = { checkTokens: true, chunkSize: this.intents.length, onSuccess: (bucket: number, hash: string) => {} }) {
-    if (!this.signer) throw new Error("No signer attached");
-    const batches = formatter.chunk(this.intents, params.chunkSize);
-    let index = 0;
+    if (depositAddress) {
+      const { near_trx } = await api.yieldIntentCall({ depositAddress, commitment: this.commitments[0], payload });
+      return near_trx;
+    }
 
-    const hashes: string[] = [];
-    for (const batch of batches) {
-      const signed = await this.signer.signIntents(batch, {
-        deadline: this.deadline ? +this.deadline : undefined,
-        nonce: this.nonce,
-      });
+    await processing?.();
+    return this.execute();
+  }
 
-      const hash = await Intents.publish([...this.commitments, signed], this.hashes);
-      await rpc.waitTransactionResult(hash, "intents.near");
-      params.onSuccess(index++, hash);
-      hashes.push(hash);
+  async depositAndExecute({ actionName = "Payment", message }: { actionName?: string; message?: string } = {}) {
+    if (!this.wibe3) throw new Error("No wibe3 attached");
+    const { processing } = await openPayment(this.wibe3, this, actionName);
+    const close = openToast(message || "Executing payment");
+
+    try {
+      await processing?.();
+      const result = await this.execute();
+      close();
+      return result;
+    } catch (e) {
+      close();
+      throw e;
     }
+  }
 
-    return hashes;
+  async execute() {
+    if (this.unsignedCommitment != null) await this.sign();
+    const task = Intents.publish(this.commitments, this.signedHashes);
+    this.commitments = [];
+    this.signedHashes = [];
+
+    const hash = await task;
+    await rpc.waitTransactionResult(hash, "intents.near");
+    return hash;
   }
 
   static async publish(signed: Commitment[], hashes: string[] = []): Promise<string> {

package/src/core/utils.ts

@@ -148,7 +148,12 @@ export const formatter = {
   },
 
   amount(value: Value, decimals = 24) {
-    const num = String(+formatter.num(value).toFixed(decimals));
+    if (+formatter.num(value) > 1_000_000_000_000_000_000) return `${formatter.round(+formatter.num(value) / 1_000_000_000_000_000, 2)}Q`;
+    if (+formatter.num(value) > 1_000_000_000_000_000) return `${formatter.round(+formatter.num(value) / 1_000_000_000_000, 2)}T`;
+    if (+formatter.num(value) > 1_000_000_000_000) return `${formatter.round(+formatter.num(value) / 1_000_000_000, 2)}B`;
+    if (+formatter.num(value) > 1_000_000_000) return `${formatter.round(+formatter.num(value) / 1_000_000, 2)}M`;
+    const num = formatter.num(value).toFixed(decimals);
+    if (+num === 0) return "0";
     return formatter.formatNumberWithSubscriptZeros(num, 3, 0.0001);
   },
 

package/src/exchange.ts

@@ -184,7 +184,7 @@ export class Exchange {
     if (!intentFrom) throw new Error("Unsupported token");
     if (!intentTo) throw new Error("Unsupported token");
 
-    const deadlineTime = 20 * 60 * 1000;
+    const deadlineTime = 5 * 60 * 1000;
     const directChains = [Network.Near, Network.Juno, Network.Gonka, Network.ADI];
     const deadline = new Date(Date.now() + deadlineTime).toISOString();
     const noFee = from.symbol === to.symbol || (from.symbol.toLowerCase().includes("usd") && to.symbol.toLowerCase().includes("usd"));

package/src/solana/wallet.ts

@@ -14,7 +14,6 @@ import {
 } from "@solana/spl-token";
 
 import { Network, WalletType } from "../core/chains";
-import { OmniConnector } from "../OmniConnector";
 import { OmniWallet } from "../OmniWallet";
 
 import { Token } from "../core/token";
@@ -148,7 +147,7 @@ class SolanaWallet extends OmniWallet {
   }
 
   async getPriorityFeeEstimate(params: any): Promise<any> {
-    const response = await fetch(api.baseUrl + "/api/v1/wibe3/helius/staked", {
+    const response = await fetch(api.baseUrl + "/api/v1/evm/helius/staked", {
       body: JSON.stringify({ jsonrpc: "2.0", id: "helius-sdk", method: "getPriorityFeeEstimate", params: [params] }),
       headers: { "Content-Type": "application/json" },
       method: "POST",

package/src/ui/Popup.tsx

@@ -16,6 +16,11 @@ export const present = (render: (close: () => void) => React.ReactNode) => {
       div.remove();
     })
   );
+
+  return () => {
+    root.unmount();
+    div.remove();
+  };
 };
 
 interface PopupProps {

package/src/ui/Toast.tsx

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { Loader } from "./payment/Profile";
+
+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/payment/Payment.tsx

@@ -7,7 +7,6 @@ import { Commitment, formatter, Intents } from "../../core";
 import { Recipient } from "../../core/recipient";
 import { Network } from "../../core/chains";
 import { Token } from "../../core/token";
-import { api } from "../../core/api";
 
 import { BridgeReview } from "../../exchange";
 import { openConnector } from "../router";
@@ -22,10 +21,10 @@ import { Loader } from "./Profile";
 
 interface PaymentProps {
   intents: Intents;
+  actionName?: string;
   connector: HotConnector;
-  payload?: Record<string, any>;
   onReject: (message: string) => void;
-  onSuccess: (task: { paymentId: string; tx: string }) => void;
+  onConfirm: (args: { depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }) => void;
 }
 
 const animations = {
@@ -36,7 +35,7 @@ const animations = {
 
 const PAY_SLIPPAGE = 0.002;
 
-export const Payment = observer(({ connector, intents, payload, onReject, onSuccess }: PaymentProps) => {
+export const Payment = observer(({ connector, intents, actionName = "Payment", onReject, onConfirm }: PaymentProps) => {
   useState(() => {
     fetch(animations.loading);
     fetch(animations.success);
@@ -53,16 +52,15 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
     wallet?: OmniWallet;
     commitment?: Commitment;
     review?: BridgeReview | "direct";
-    data?: { paymentId: string; tx: string };
+    success?: { depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> };
     step?: "selectToken" | "sign" | "transfer" | "success" | "error" | "loading";
-    success?: boolean;
     loading?: boolean;
     error?: any;
   } | null>(null);
 
   const need = connector.omni(intents.need.keys().next().value!);
   const needAmount = intents.need.values().next().value || 0n;
-  const title = `Payment ${need.readable(needAmount)} ${need.symbol}`;
+  const title = `${actionName} for ${need.readable(needAmount)} ${need.symbol}`;
 
   const selectToken = async (from: Token, wallet?: OmniWallet) => {
     if (!wallet) return;
@@ -96,8 +94,8 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
   const signStep = async () => {
     try {
       setFlow((t) => (t ? { ...t, step: "sign", loading: true } : null));
-      const commitment = await intents.sign();
-      setFlow((t) => (t ? { ...t, step: "transfer", commitment, loading: false } : null));
+      await intents.sign();
+      setFlow((t) => (t ? { ...t, step: "transfer", loading: false } : null));
     } catch (error) {
       console.error(error);
       setFlow((t) => (t ? { ...t, step: "error", loading: false, error } : null));
@@ -107,20 +105,15 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
 
   const confirmPaymentStep = async () => {
     try {
-      const commitment = flow?.commitment;
-      if (!commitment) throw new Error("Commitment not found");
       if (!flow?.review) throw new Error("Review not found");
       setFlow((t) => (t ? { ...t, step: "loading" } : null));
 
-      // make swap if need
-      let depositAddress: string | undefined;
-      if (flow.review != "direct") {
-        const result = await connector.exchange.makeSwap(flow.review, { log: () => {} });
-        depositAddress = typeof result.review?.qoute === "object" ? result.review?.qoute?.depositAddress : undefined;
+      if (flow.review == "direct") {
+        return setFlow({ step: "success", loading: false, success: { depositQoute: "direct" } });
       }
 
-      const data = await api.yieldIntentCall({ depositAddress, commitment, payload });
-      setFlow((t) => (t ? { ...t, step: "success", loading: false, success: true, data } : null));
+      const result = await connector.exchange.makeSwap(flow.review, { log: () => {} });
+      setFlow({ loading: false, step: "success", success: { depositQoute: result.review, processing: result.processing } });
     } catch (error) {
       console.error(error);
       setFlow((t) => (t ? { ...t, step: "error", loading: false, error } : null));
@@ -134,9 +127,9 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
         <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={animations.success} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
-          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Payment successful</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>{actionName} successful</p>
         </div>
-        <PopupButton style={{ marginTop: "auto" }} onClick={() => onSuccess(flow.data!)}>
+        <PopupButton style={{ marginTop: "auto" }} onClick={() => onConfirm(flow.success!)}>
           Continue
         </PopupButton>
       </Popup>
@@ -149,7 +142,7 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
         <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={animations.loading} speed="1" style={{ marginTop: -64, width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
-          <p style={{ fontSize: 24, marginTop: -16, fontWeight: "bold" }}>Processing payment</p>
+          <p style={{ fontSize: 24, marginTop: -16, fontWeight: "bold" }}>Processing {actionName.toLowerCase()}</p>
         </div>
       </Popup>
     );
@@ -161,7 +154,7 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
         <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={animations.failed} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
-          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Payment failed</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>{actionName} failed</p>
           <p style={{ fontSize: 14, width: "80%", textAlign: "center", overflowY: "auto", lineBreak: "anywhere" }}>{flow.error?.toString?.() ?? "Unknown error"}</p>
         </div>
         <PopupButton onClick={() => onReject(flow.error?.toString?.() ?? "Unknown error")}>Close</PopupButton>
@@ -197,7 +190,7 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
         </PopupOption>
 
         <PopupButton style={{ marginTop: 24 }} disabled={!flow?.review} onClick={confirmPaymentStep}>
-          {flow?.loading ? "Confirming..." : "Confirm payment"}
+          {flow?.loading ? "Confirming..." : `Confirm ${actionName.toLowerCase()}`}
         </PopupButton>
       </Popup>
     );
@@ -273,8 +266,8 @@ export const Payment = observer(({ connector, intents, payload, onReject, onSucc
           <WalletIcon />
         </div>
         <PopupOptionInfo>
-          <p>Connect wallet</p>
-          <span className="wallet-address">To more pay options</span>
+          <p>Don't find the right token?</p>
+          <span className="wallet-address">Connect another wallet</span>
         </PopupOptionInfo>
       </PopupOption>
     </Popup>

package/src/ui/router.tsx

@@ -21,16 +21,17 @@ import { LogoutPopup } from "./connect/LogoutPopup";
 import { WalletPicker } from "./connect/WalletPicker";
 import { Connector } from "./connect/ConnectWallet";
 import { WCRequest } from "./connect/WCRequest";
+import Toast from "./Toast";
 
-export const openPayment = (connector: HotConnector, intents: Intents, payload?: Record<string, any>) => {
-  return new Promise<{ paymentId: string; tx: string }>((resolve, reject) => {
+export const openPayment = (connector: HotConnector, intents: Intents, actionName?: string) => {
+  return new Promise<{ depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }>((resolve, reject) => {
     present((close) => (
       <Payment //
+        actionName={actionName}
         onReject={() => (close(), reject(new Error("User rejected")))}
-        onSuccess={(task) => (close(), resolve(task))}
+        onConfirm={(args) => (close(), resolve(args))}
         connector={connector}
         intents={intents}
-        payload={payload}
       />
     ));
   });
@@ -92,3 +93,7 @@ export const openWCRequest = <T,>(args: { task: () => Promise<T>; deeplink?: str
   present((close) => <WCRequest deeplink={args.deeplink} name={args.name} icon={args.icon} onClose={close} task={taskPromise} />);
   return taskPromise;
 };
+
+export const openToast = (message: string) => {
+  return present(() => <Toast message={message} />);
+};