@pollar/react 0.10.1-rc.10 → 0.10.1-rc.11

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.10.1-rc.10"
+        "0.10.1-rc.11"
       ] })
     ] })
   ] });
@@ -3429,6 +3429,7 @@ function AssetSelect({
   options,
   onChange,
   loading = false,
+  loadingLabel,
   disabled = false,
   appGroupLabel = "App assets",
   otherGroupLabel = "Other assets",
@@ -3438,7 +3439,10 @@ function AssetSelect({
   const otherAssets = options.filter((o) => !o.enabledInApp);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: label }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+    loading ? loadingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-input pollar-select-loading", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingLabel })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-send-skeleton" }) : /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
         className: "pollar-input pollar-send-select",
@@ -4111,10 +4115,6 @@ function SwapModalTemplate({
             /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
           ] })
         ] }),
-        step === "form" && configLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-loading-block", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-spinner" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading swap options\u2026" })
-        ] }),
         step === "form" && !configLoading && swapUnavailable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Swap is not available for this app." }),
         step === "form" && !swapUnavailable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           smartUnsupported && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Swaps are not yet available for smart (passkey) wallets." }),
@@ -4123,7 +4123,8 @@ function SwapModalTemplate({
             {
               label: "You pay",
               value: sellKey,
-              loading: isLoadingData,
+              loading: isLoadingData || configLoading,
+              loadingLabel: "Loading assets\u2026",
               disabled: configLoading,
               options: sellOptions.map((o) => ({
                 key: assetOptionKey(o),
@@ -4165,7 +4166,8 @@ function SwapModalTemplate({
             {
               label: "You receive",
               value: buyKey,
-              loading: isLoadingData,
+              loading: isLoadingData || configLoading,
+              loadingLabel: "Loading assets\u2026",
               disabled: configLoading,
               options: buyOptions.map((o) => ({
                 key: assetOptionKey(o),
@@ -4596,6 +4598,8 @@ function EarnModal({ onClose }) {
     earnWithdraw,
     tx: transaction,
     wallet,
+    walletBalance,
+    refreshWalletBalance,
     network,
     styles
   } = usePollar();
@@ -4627,6 +4631,9 @@ function EarnModal({ onClose }) {
   react.useEffect(() => {
     void loadProviders();
   }, [loadProviders]);
+  react.useEffect(() => {
+    void refreshWalletBalance();
+  }, [refreshWalletBalance]);
   react.useEffect(() => {
     if (!provider) return;
     let cancelled = false;
@@ -4670,6 +4677,15 @@ function EarnModal({ onClose }) {
   const withdrawUnit = position?.withdrawUnit ?? "asset";
   const assetCode = selectedOpportunity?.asset.code ?? "";
   const amountUnitLabel = tab === "deposit" ? assetCode : withdrawUnit === "shares" ? "shares" : assetCode;
+  const walletAvailable = (() => {
+    if (!selectedOpportunity) return null;
+    const balances = walletBalance.step === "loaded" ? walletBalance.data.balances : [];
+    const issuer = selectedOpportunity.asset.issuer;
+    const rec = balances.find(
+      (b) => issuer === null ? b.type === "native" : b.code === assetCode && b.issuer === issuer
+    );
+    return rec ? rec.available : null;
+  })();
   const hash = transaction.step === "success" ? transaction.hash : null;
   const buildData = "buildData" in transaction ? transaction.buildData : null;
   const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : buildData ? "public" : network === "testnet" ? "testnet" : "public";
@@ -4677,7 +4693,9 @@ function EarnModal({ onClose }) {
   const isInProgress = IN_FLIGHT_STEPS2.includes(transaction.step);
   const showBack = step === "tx" && (transaction.step === "error" || transaction.step === "success") && !isInProgress;
   const txTitle = isInProgress ? tab === "deposit" ? "Depositing\u2026" : "Withdrawing\u2026" : transaction.step === "success" ? "Done!" : transaction.step === "error" ? tab === "deposit" ? "Deposit failed" : "Withdraw failed" : "Confirm";
-  const canSubmit = !smartUnsupported && !!provider && !!opportunityId && !!amount && parseFloat(amount) > 0 && !providersLoading && !loadingOpps;
+  const parsedAmount = parseFloat(amount);
+  const exceedsAvailable = tab === "deposit" ? walletAvailable != null && parsedAmount > parseFloat(walletAvailable) : position != null && parsedAmount > parseFloat(position.withdrawable);
+  const canSubmit = !smartUnsupported && !!provider && !!opportunityId && !!amount && parsedAmount > 0 && !exceedsAvailable && !providersLoading && !loadingOpps;
   const cssVars = {
     "--pollar-accent": accentColor,
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
@@ -4710,6 +4728,10 @@ function EarnModal({ onClose }) {
       setFormError("Enter a valid amount");
       return;
     }
+    if (tab === "deposit" && walletAvailable != null && parsed > parseFloat(walletAvailable)) {
+      setFormError("Amount exceeds your wallet balance");
+      return;
+    }
     if (tab === "withdraw" && position && parsed > parseFloat(position.withdrawable)) {
       setFormError("Amount exceeds your position");
       return;
@@ -4749,6 +4771,7 @@ function EarnModal({ onClose }) {
     if (refreshing || !provider) return;
     setRefreshing(true);
     try {
+      void refreshWalletBalance();
       const opps = await getEarnOpportunities(provider);
       setOpportunities(opps);
       setOpportunityId((cur) => opps.some((o) => o.id === cur) ? cur : opps[0]?.id ?? "");
@@ -4876,6 +4899,14 @@ function EarnModal({ onClose }) {
             )
           ] }),
           selectedOpportunity && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote", children: [
+            tab === "deposit" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "In your wallet" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                walletAvailable != null ? formatAmount4(walletAvailable) : "\u2026",
+                " ",
+                assetCode
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-quote-row", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-hint", children: "Your position" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -4895,6 +4926,12 @@ function EarnModal({ onClose }) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-label-row", children: [
               /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: tab === "deposit" ? "Amount" : "Withdraw amount" }),
+              tab === "deposit" && walletAvailable != null && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-swap-custom-toggle", onClick: () => setAmount(walletAvailable), children: [
+                "Max: ",
+                formatAmount4(walletAvailable),
+                " ",
+                amountUnitLabel
+              ] }),
               tab === "withdraw" && position && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-swap-custom-toggle", onClick: () => setAmount(position.withdrawable), children: [
                 "Max: ",
                 formatAmount4(position.withdrawable),
@@ -5870,6 +5907,9 @@ function PollarProvider({
   const [sendModalOpen, setSendModalOpen] = react.useState(false);
   const [swapModalOpen, setSwapModalOpen] = react.useState(false);
   const [earnModalOpen, setEarnModalOpen] = react.useState(false);
+  const [sendModalKey, setSendModalKey] = react.useState(0);
+  const [swapModalKey, setSwapModalKey] = react.useState(0);
+  const [earnModalKey, setEarnModalKey] = react.useState(0);
   const [receiveModalOpen, setReceiveModalOpen] = react.useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = react.useState(false);
   const [distributionRulesModalOpen, setDistributionRulesModalOpen] = react.useState(false);
@@ -5912,21 +5952,33 @@ function PollarProvider({
       setTrustline: (asset, opts) => pollarClient.setTrustline(asset, opts),
       openEnabledAssetsModal: () => setEnabledAssetsModalOpen(true),
       // send / receive
-      openSendModal: () => setSendModalOpen(true),
+      openSendModal: () => {
+        pollarClient.resetTransactionState();
+        setSendModalKey((k) => k + 1);
+        setSendModalOpen(true);
+      },
       openReceiveModal: () => setReceiveModalOpen(true),
       // swap
       getSwapConfig: () => pollarClient.getSwapConfig(),
       getSwapTokens: () => pollarClient.getSwapTokens(),
       getSwapQuote: (params) => pollarClient.getSwapQuote(params),
       swap: (quote, opts) => pollarClient.swap(quote, opts),
-      openSwapModal: () => setSwapModalOpen(true),
+      openSwapModal: () => {
+        pollarClient.resetTransactionState();
+        setSwapModalKey((k) => k + 1);
+        setSwapModalOpen(true);
+      },
       // earn
       getEarnProviders: () => pollarClient.getEarnProviders(),
       getEarnOpportunities: (provider) => pollarClient.getEarnOpportunities(provider),
       getEarnPosition: (params) => pollarClient.getEarnPosition(params),
       earnDeposit: (params) => pollarClient.earnDeposit(params),
       earnWithdraw: (params) => pollarClient.earnWithdraw(params),
-      openEarnModal: () => setEarnModalOpen(true),
+      openEarnModal: () => {
+        pollarClient.resetTransactionState();
+        setEarnModalKey((k) => k + 1);
+        setEarnModalOpen(true);
+      },
       // sessions
       sessions,
       openSessionsModal: () => setSessionsModalOpen(true),
@@ -5980,9 +6032,9 @@ function PollarProvider({
     txHistoryModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setTxHistoryModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(TxHistoryModal, { onClose: () => setTxHistoryModalOpen(false) }) }),
     walletBalanceModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setWalletBalanceModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(WalletBalanceModal, { onClose: () => setWalletBalanceModalOpen(false) }) }),
     enabledAssetsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEnabledAssetsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EnabledAssetsModal, { onClose: () => setEnabledAssetsModalOpen(false) }) }),
-    sendModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }),
-    swapModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }),
-    earnModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEarnModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EarnModal, { onClose: () => setEarnModalOpen(false) }) }),
+    sendModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }, sendModalKey),
+    swapModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }, swapModalKey),
+    earnModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEarnModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EarnModal, { onClose: () => setEarnModalOpen(false) }) }, earnModalKey),
     receiveModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
     sessionsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) }),
     distributionRulesModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setDistributionRulesModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(DistributionRulesModal, { onClose: () => setDistributionRulesModalOpen(false) }) })