@getpara/react-sdk 1.12.0 → 2.0.0-alpha.10

package/dist/modal/components/Account/Account.js

@@ -6,52 +6,94 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
-import { OnRampStep, useModalStore, useThemeStore } from "../../stores/index.js";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { useState } from "react";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useEffect, useState } from "react";
 import { ModalStep } from "../../utils/steps.js";
-import { useWalletBalance } from "../../hooks/useWalletBalance.js";
-import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { formatBalanceString } from "../../utils/stringFormatters.js";
+import { useAccount, useWalletBalance } from "../../../provider/index.js";
+import { EnabledFlow } from "@getpara/web-sdk";
 const Account = ({ onClose }) => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setStep = useModalStore((state) => state.setStep);
   const setFlow = useModalStore((state) => state.setFlow);
+  const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const { disconnectExternalWallet } = useExternalWallets();
-  const { balance, isLoading: isBalanceLoading } = useWalletBalance();
   const para = useInternalClient();
+  const { data: account } = useAccount();
+  const { data: balance, isLoading: isBalanceLoading } = useWalletBalance();
   const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
+  const cantBuyAndWithdraw = para.externalWalletConnectionType === "CONNECTION_ONLY" && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
-  const canBuyAndWithdraw = !!para.userId;
   const handleBuyClick = () => {
-    setOnRampStep(OnRampStep.SETTINGS);
-    setStep(ModalStep.ADD_FUNDS_BUY);
+    if (isGuestMode) {
+      setGuestAddFundsTab(EnabledFlow.BUY);
+      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+    } else {
+      setOnRampStep(OnRampStep.SETTINGS);
+      setStep(ModalStep.ADD_FUNDS_BUY);
+    }
   };
   const handleReceiveClick = () => {
     setStep(ModalStep.ADD_FUNDS_RECEIVE);
   };
   const handleSellClick = () => {
-    setOnRampStep(OnRampStep.SETTINGS);
-    setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+    if (isGuestMode) {
+      setGuestAddFundsTab(EnabledFlow.WITHDRAW);
+      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+    } else {
+      setOnRampStep(OnRampStep.SETTINGS);
+      setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+    }
   };
   const handleDisconnectClick = () => __async(void 0, null, function* () {
     setIsDisconnecting(true);
+    yield para.logout();
     yield disconnectExternalWallet();
     onClose();
     setStep(ModalStep.AUTH_MAIN);
     setFlow(void 0);
     setIsDisconnecting(false);
   });
+  useEffect(() => {
+    setGuestAddFundsTab();
+  }, []);
   return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-    isBalanceLoading ? /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 39 }) }) : balance !== void 0 && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
+    isBalanceLoading ? /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 39 }) }) : balance !== void 0 && balance !== null && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
+    isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+      balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
+        "You've funded this account - complete account setup to maintain access."
+      ] }),
+      /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          variant: "primary",
+          onClick: () => {
+            setStep(ModalStep.AUTH_GUEST_SIGNUP);
+          },
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
+            "Complete Account Setup"
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      canBuyAndWithdraw && onRampConfig.isBuyEnabled && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Buy Crypto" }) }),
+      onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Buy Crypto" }) }),
       onRampConfig.isReceiveEnabled && /* @__PURE__ */ jsx(OptionButton, { icon: "qrCode02", onClick: handleReceiveClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) }),
-      canBuyAndWithdraw && onRampConfig.isWithdrawEnabled && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) })
+      onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) })
     ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) }),
-    /* @__PURE__ */ jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isGuestMode && /* @__PURE__ */ jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       hideWallets ? "Logout" : "Disconnect Wallet",
       /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
     ] }) })
@@ -80,6 +122,21 @@ const BalanceContainer = styled.div`
   padding-top: 8px;
   padding-bottom: 24px;
 `;
+const Alert = styled.div`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --icon-stroke-color: var(--cpsl-color-utility-yellow);
+  --icon-fill-color: var(--cpsl-color-utility-yellow);
+
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: var(--cpsl-border-radius-alert);
+  border: 1px solid var(--cpsl-color-utility-yellow);
+  background: var(--cpsl-color-utility-yellow-light);
+  font-size: 14px;
+`;
 export {
   Account
 };

package/dist/modal/components/AddFunds/AddFunds.js

@@ -7,26 +7,25 @@ import { CpslIcon, CpslSpinner, CpslTab, CpslTabs } from "@getpara/react-compone
 import { OnRampStep } from "../../stores/index.js";
 import { useModalStore } from "../../stores/modal/useModalStore.js";
 import { useEffect, useMemo } from "react";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
 import { getAddFundsStep } from "../../utils/steps.js";
 import styled from "styled-components";
+import { useAccount, useWallet } from "../../../provider/index.js";
 import { AddFundsProvider } from "./AddFundsProvider.js";
 import { AddFundsReceive } from "./AddFundsReceive.js";
 import { AddFundsContextProvider, TABS } from "./AddFundsContext.js";
 import { AnimatePresence } from "framer-motion";
 import { AddFundsSettings } from "./AddFundsSettings.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const AddFunds = () => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampStep = useModalStore((state) => state.onRampStep);
   const storedTab = useModalStore((state) => state.accountAddFundTab);
   const setModalStep = useModalStore((state) => state.setStep);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const para = useInternalClient();
-  const activeWallet = useActiveWallet();
-  const canBuyAndWithdraw = !!para.userId;
+  const { data: activeWallet } = useWallet();
+  const { data: account } = useAccount();
+  const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
   const tabs = TABS.filter(
-    ([, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (["isBuyEnabled", "isWithdrawEnabled"].includes(key) && canBuyAndWithdraw || !["isBuyEnabled", "isWithdrawEnabled"].includes(key))
+    ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
   );
   const tab = storedTab != null ? storedTab : tabs[0][0];
   const isMultiFlow = tabs.length > 1;

package/dist/modal/components/AddFunds/AddFundsAsset.js

@@ -12,21 +12,21 @@ import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/cons
 import { useModalStore } from "../../stores/index.js";
 import { useRef, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
 import { AssetIcon } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
 import { contentMotionProps } from "./common.js";
 function AddFundsAsset() {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { assets, setAsset, network, setNetwork } = useAddFunds();
-  const activeWallet = useActiveWallet();
+  const { data: activeWallet } = useWallet();
   const [isAtBottom, setIsAtBottom] = useState(false);
   const [isAtTop, setIsAtTop] = useState(true);
   const [searchStr, setSearchStr] = useState("");
   const ref = useRef(null);
   const onSelect = (_asset) => __async(this, null, function* () {
     yield setAsset(_asset);
-    if (!network) {
+    if (!network && !!onRampConfig && !!activeWallet) {
       yield setNetwork(
         getOnRampNetworks(onRampConfig.assetInfo, {
           walletType: activeWallet.type,
@@ -36,16 +36,18 @@ function AddFundsAsset() {
     }
   });
   const onScroll = () => {
-    const { scrollTop, scrollHeight, clientHeight } = ref.current;
-    if (scrollTop + clientHeight >= scrollHeight - 30) {
-      setIsAtBottom(true);
-    } else {
-      setIsAtBottom(false);
-    }
-    if (scrollTop < 30) {
-      setIsAtTop(true);
-    } else {
-      setIsAtTop(false);
+    if (ref.current) {
+      const { scrollTop, scrollHeight, clientHeight } = ref.current;
+      if (scrollTop + clientHeight >= scrollHeight - 30) {
+        setIsAtBottom(true);
+      } else {
+        setIsAtBottom(false);
+      }
+      if (scrollTop < 30) {
+        setIsAtTop(true);
+      } else {
+        setIsAtTop(false);
+      }
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/modal/components/AddFunds/AddFundsAwaiting.js

@@ -1,17 +1,19 @@
 "use client";
 import {
+  __spreadProps,
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { StepContainer } from "../common.js";
 import { OnRampProvider } from "@getpara/web-sdk";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { lazy, useEffect, useMemo, useState } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { RampEmbed, StripeEmbed } from "@getpara/react-common";
 import styled from "styled-components";
 import { useGoBack } from "../../hooks/useGoBack.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 const STEPS = {
   CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
   FINISHED: ModalStep.ADD_FUNDS_SUCCESS
@@ -23,9 +25,9 @@ const AddFundsAwaiting = () => {
   const onRampPurchase = useModalStore((state) => state.onRampPurchase);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
   const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
-  const isDark = useThemeStore((state) => state.isDark);
-  const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
+  const appName = useStore((state) => state.appName);
+  const isDark = useStore((state) => state.isDarkTheme);
+  const [MoonPayEmbed, setMoonPayEmbed] = useState();
   const props = {
     para,
     appName,
@@ -38,26 +40,30 @@ const AddFundsAwaiting = () => {
   };
   useEffect(() => {
     const _MoonPayEmbed = lazy(() => import("./MoonPayEmbed.js"));
-    setMoonPayEmbed(_MoonPayEmbed);
+    if (_MoonPayEmbed) {
+      setMoonPayEmbed(_MoonPayEmbed);
+    }
   }, []);
   const onRampEmbed = useMemo(() => {
-    if (!onRampPurchase.id) {
+    var _a, _b;
+    if (!(onRampPurchase == null ? void 0 : onRampPurchase.id) || !props.onRampConfig) {
       return null;
     }
     switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
       case OnRampProvider.STRIPE:
-        return /* @__PURE__ */ jsx(StripeEmbed, __spreadValues({}, props));
+        return /* @__PURE__ */ jsx(StripeEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
       case OnRampProvider.MOONPAY:
-        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadValues({}, props));
+        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
       case OnRampProvider.RAMP:
-        return /* @__PURE__ */ jsx(RampEmbed, __spreadValues({ apiKey: onRampConfig.rampApiKey }, props));
+        return /* @__PURE__ */ jsx(RampEmbed, __spreadProps(__spreadValues({}, props), { apiKey: (_b = (_a = props.onRampConfig) == null ? void 0 : _a.rampApiKey) != null ? _b : "", onRampConfig: props.onRampConfig }));
     }
   }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
   useEffect(() => {
     let timeoutId;
     if ((onRampPurchase == null ? void 0 : onRampPurchase.status) && ["CANCELLED", "FINISHED"].includes(onRampPurchase.status)) {
       timeoutId = setTimeout(() => {
-        setStep(STEPS[onRampPurchase.status]);
+        var _a;
+        setStep(STEPS[(_a = onRampPurchase.status) != null ? _a : ""]);
       }, 5e3);
     }
     return () => clearTimeout(timeoutId);

package/dist/modal/components/AddFunds/AddFundsContext.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
-import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+import { useWallet } from '../../../provider/hooks/index.js';
 import { EnabledFlow, Network, OnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
 import { IconType } from '@getpara/react-components';
 export type Tab = EnabledFlow;
@@ -20,7 +20,7 @@ type Value = {
     assets: OnRampAsset[];
     isProviderAllowed: Partial<Record<OnRampProvider, boolean>>;
     tab: Tab;
-    activeWallet: ReturnType<typeof useActiveWallet>;
+    activeWallet: ReturnType<typeof useWallet>['data'];
     onRampConfig: OnRampConfig;
 };
 export declare const AddFundsContext: import("react").Context<Value>;

package/dist/modal/components/AddFunds/AddFundsContext.js

@@ -12,8 +12,8 @@ import {
   useState
 } from "react";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useWallet } from "../../../provider/hooks/index.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import {
   EnabledFlow,
   getOnRampAssets,
@@ -43,9 +43,9 @@ const DEFAULT = {
   onRampConfig: {},
   activeWallet: {}
 };
-function isValid({ assetInfo }, walletType, network, asset) {
+function isValid(onRampConfig, walletType, network, asset) {
   var _a, _b;
-  return !!((_b = (_a = assetInfo[walletType]) == null ? void 0 : _a[network]) == null ? void 0 : _b[asset]);
+  return network && asset && walletType ? !!((_b = (_a = onRampConfig == null ? void 0 : onRampConfig.assetInfo[walletType]) == null ? void 0 : _a[network]) == null ? void 0 : _b[asset]) : false;
 }
 const AddFundsContext = createContext(DEFAULT);
 function AddFundsContextProvider({ tab, children }) {
@@ -54,19 +54,25 @@ function AddFundsContextProvider({ tab, children }) {
   const onRampStep = useModalStore((state) => state.onRampStep);
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const { chainId } = useExternalWallets();
-  const activeWallet = useActiveWallet();
-  const [fiatQuantity, setFiatQuantity] = useState((_b = (_a = onRampConfig.defaultBuyAmount) == null ? void 0 : _a[0]) != null ? _b : "25.00");
+  const { data: activeWallet } = useWallet();
+  const [fiatQuantity, setFiatQuantity] = useState((_b = (_a = onRampConfig == null ? void 0 : onRampConfig.defaultBuyAmount) == null ? void 0 : _a[0]) != null ? _b : "25.00");
   const networks = useMemo(() => {
+    if (!onRampConfig) {
+      return [];
+    }
     const detectedNetwork = getNetworkFromChainId(chainId);
-    const isExternal = activeWallet.isExternal && !!detectedNetwork;
+    const isExternal = (activeWallet == null ? void 0 : activeWallet.isExternal) && !!detectedNetwork;
     return isExternal ? [getNetworkOrMainNetEquivalent(detectedNetwork, onRampConfig.testMode)] : getOnRampNetworks(onRampConfig.assetInfo, {
-      walletType: activeWallet.type,
+      walletType: activeWallet == null ? void 0 : activeWallet.type,
       allowed: onRampConfig.allowedAssets ? Object.keys(onRampConfig.allowedAssets) : void 0,
       providers: onRampConfig.providers,
       action: OnRampPurchaseType[tab === EnabledFlow.BUY ? "BUY" : "SELL"]
     });
   }, [chainId, activeWallet, onRampConfig, tab]);
   const assets = useMemo(() => {
+    if (!onRampConfig) {
+      return [];
+    }
     return [
       ...new Set(
         Object.values(
@@ -76,7 +82,7 @@ function AddFundsContextProvider({ tab, children }) {
             const allowed = configValue === true ? void 0 : configValue;
             return __spreadProps(__spreadValues({}, acc), {
               [network2]: getOnRampAssets(onRampConfig.assetInfo, {
-                walletType: activeWallet.type,
+                walletType: activeWallet == null ? void 0 : activeWallet.type,
                 network: network2,
                 allowed,
                 providers: onRampConfig.providers,
@@ -89,13 +95,13 @@ function AddFundsContextProvider({ tab, children }) {
     ];
   }, [networks, onRampConfig, activeWallet, tab]);
   const [network, setNetwork] = useState(
-    !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampNetwork) && !!onRampConfig.assetInfo[activeWallet.type][onRampConfig.defaultOnRampNetwork] ? onRampConfig.defaultOnRampNetwork : void 0
+    !!(activeWallet == null ? void 0 : activeWallet.type) && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampNetwork) && !!onRampConfig.assetInfo[activeWallet.type][onRampConfig.defaultOnRampNetwork] ? onRampConfig.defaultOnRampNetwork : void 0
   );
   const [asset, setAsset] = useState(
     !!network && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampAsset) && assets.includes(onRampConfig.defaultOnRampAsset) ? onRampConfig.defaultOnRampAsset : void 0
   );
   const isProviderAllowed = useMemo(
-    () => onRampConfig.providers.reduce(
+    () => onRampConfig && !!(activeWallet == null ? void 0 : activeWallet.type) ? onRampConfig.providers.reduce(
       (acc, id) => {
         var _a2, _b2, _c, _d, _e;
         return __spreadProps(__spreadValues({}, acc), {
@@ -103,7 +109,7 @@ function AddFundsContextProvider({ tab, children }) {
         });
       },
       {}
-    ),
+    ) : {},
     [onRampConfig, network, asset, activeWallet, tab]
   );
   const value = useMemo(() => {
@@ -139,10 +145,10 @@ function AddFundsContextProvider({ tab, children }) {
     onRampConfig
   ]);
   useEffect(() => {
-    if (onRampStep === OnRampStep.PROVIDER && !isValid(onRampConfig, activeWallet.type, network, asset)) {
+    if (!!activeWallet && onRampStep === OnRampStep.PROVIDER && !isValid(onRampConfig, activeWallet.type, network, asset)) {
       setOnRampStep(OnRampStep.SETTINGS);
     }
-  }, [onRampStep, onRampConfig, activeWallet.type, network, asset, setOnRampStep]);
+  }, [onRampStep, onRampConfig, activeWallet, network, asset, setOnRampStep]);
   return /* @__PURE__ */ jsx(AddFundsContext.Provider, { value, children });
 }
 const useAddFunds = () => useContext(AddFundsContext);

package/dist/modal/components/AddFunds/AddFundsDone.js

@@ -2,12 +2,18 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Heading, HeroIcon, InnerStepContainer, StepContainer } from "../common.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { useMemo } from "react";
 import { CpslButton, CpslText } from "@getpara/react-components";
 import { getAddFundsStep } from "../../utils/steps.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { EnabledFlow } from "@getpara/web-sdk";
 const AddFundsDone = ({ isSuccess, onClose }) => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  var _a;
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
   const setStep = useModalStore((state) => state.setStep);
   const onRampPurchase = useModalStore((state) => state.onRampPurchase);
   const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
@@ -18,7 +24,7 @@ const AddFundsDone = ({ isSuccess, onClose }) => {
     });
   }, [onRampPurchase == null ? void 0 : onRampPurchase.fiat]);
   const heading = isSuccess ? "Transaction Successful" : "Something Went Wrong";
-  const text = isSuccess ? `${formatter.format(parseFloat(onRampPurchase == null ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? "account" : "wallet"}.` : `No funds were added to your ${hideWallets ? "account" : "wallet"}.`;
+  const text = isSuccess ? `${formatter.format(parseFloat((_a = onRampPurchase == null ? void 0 : onRampPurchase.fiatQuantity) != null ? _a : "0"))} is now available in your ${hideWallets ? "account" : "wallet"}.` : `No funds were added to your ${hideWallets ? "account" : "wallet"}.`;
   const buttonText = isSuccess ? "Done" : "Try Again";
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
@@ -31,7 +37,7 @@ const AddFundsDone = ({ isSuccess, onClose }) => {
       {
         fullWidth: true,
         onClick: () => {
-          isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
+          isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab != null ? accountAddFundTab : EnabledFlow.BUY));
         },
         children: buttonText
       }

package/dist/modal/components/AddFunds/AddFundsProvider.js

@@ -9,22 +9,26 @@ import styled from "styled-components";
 import { Heading, InnerStepContainer } from "../common.js";
 import { CpslText } from "@getpara/react-components";
 import { useAddFunds } from "./AddFundsContext.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useWallet } from "../../../provider/index.js";
 import { EnabledFlow, OnRampProvider, OnRampPurchaseType } from "@getpara/web-sdk";
 import { ModalStep } from "../../utils/steps.js";
 import { contentMotionProps } from "./common.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 function AddFundsProvider() {
   const para = useInternalClient();
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
   const setModalStep = useModalStore((state) => state.setStep);
   const { asset, network, fiatQuantity, isProviderAllowed, tab } = useAddFunds();
-  const activeWallet = useActiveWallet();
+  const { data: activeWallet } = useWallet();
   return /* @__PURE__ */ jsxs(Container, __spreadProps(__spreadValues({}, contentMotionProps), { children: [
     /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Choose Provider" }),
     /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
@@ -32,7 +36,7 @@ function AddFundsProvider() {
         "No providers are available for this ",
         hideWallets ? "account" : "wallet"
       ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { children: onRampConfig.providers.map((id, index) => {
+      /* @__PURE__ */ jsx(AnimatePresence, { children: onRampConfig ? onRampConfig.providers.map((id, index) => {
         return isProviderAllowed[id] ? /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -61,7 +65,7 @@ function AddFundsProvider() {
                       network,
                       asset,
                       fiatQuantity,
-                      testMode: onRampConfig.testMode
+                      testMode: onRampConfig == null ? void 0 : onRampConfig.testMode
                     }
                   });
                   setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
@@ -73,7 +77,7 @@ function AddFundsProvider() {
           },
           id
         ) : null;
-      }) })
+      }) : null })
     ] })
   ] }));
 }

package/dist/modal/components/AddFunds/AddFundsReceive.js

@@ -11,27 +11,31 @@ import {
   CpslText
 } from "@getpara/react-components";
 import { CenteredText, FilledDisabledInput, InnerStepContainer, QRContainer } from "../common.js";
-import { isMobile, WalletType } from "@getpara/web-sdk";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
+import { useModalStore } from "../../stores/index.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { useMemo } from "react";
-import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useWallet } from "../../../provider/hooks/index.js";
 import { useAddFunds } from "./AddFundsContext.js";
 import { formatNetworkList } from "../../utils/stringFormatters.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const GENERIC_WALLET = {
-  [WalletType.EVM]: "Ethereum or EVM-based L2s",
-  [WalletType.SOLANA]: "Solana",
-  [WalletType.COSMOS]: "Cosmos"
+  EVM: "Ethereum or EVM-based L2s",
+  SOLANA: "Solana",
+  COSMOS: "Cosmos"
 };
 function AddFundsReceive() {
   const [isCopied, copy] = useCopyToClipboard();
   const { networks } = useAddFunds();
   const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const appName = useStore((state) => state.appName);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const onRampConfig = useModalStore((state) => state.onRampConfig);
-  const activeWallet = useActiveWallet();
+  const { data: activeWallet } = useWallet();
   const address = useMemo(
     () => activeWallet ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "",
     [para, activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type]
@@ -40,7 +44,7 @@ function AddFundsReceive() {
     copy(address);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(
+    activeWallet && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(
       FilledDisabledInput,
       {
         noAutoDisable: true,
@@ -64,13 +68,13 @@ function AddFundsReceive() {
         /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "secondary", children: "Scan with your crypto wallet" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    (activeWallet == null ? void 0 : activeWallet.type) && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsxs(CenteredText, { weight: "semiBold", children: [
-        !!onRampConfig.allowedAssets && networks.length > 0 || hideWallets ? appName != null ? appName : "This App" : "This Wallet",
+        !!(onRampConfig == null ? void 0 : onRampConfig.allowedAssets) && networks.length > 0 || hideWallets ? appName != null ? appName : "This App" : "This Wallet",
         " ",
         "Only Supports:"
       ] }),
-      /* @__PURE__ */ jsx(CenteredText, { weight: "medium", color: "secondary", children: !!onRampConfig.allowedAssets && networks.length > 0 ? formatNetworkList(networks) : GENERIC_WALLET[activeWallet.type] })
+      /* @__PURE__ */ jsx(CenteredText, { weight: "medium", color: "secondary", children: !!(onRampConfig == null ? void 0 : onRampConfig.allowedAssets) && networks.length > 0 ? formatNetworkList(networks) : GENERIC_WALLET[activeWallet.type] })
     ] })
   ] });
 }

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -10,7 +10,8 @@ import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/rea
 import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
 import { getAssetCode, getNetworkName } from "../../constants/constants.js";
 import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
-import { OnRampStep, useModalStore, useThemeStore } from "../../stores/index.js";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 import styled from "styled-components";
 import { contentMotionProps, NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
@@ -40,7 +41,10 @@ function AssetPill({ asset, gap = "4px", slot, fix }) {
 const NetworkLabel = /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", style: { margin: "0 8px" }, children: "Network" });
 function AddFundsSettings() {
   const isPresent = useIsPresent();
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const {
     assets,
@@ -56,16 +60,16 @@ function AddFundsSettings() {
     isProviderAllowed,
     tab
   } = useAddFunds();
-  const [value, setValue] = useState(parseFloat(fiatQuantity).toFixed(2) || "25.00");
+  const [value, setValue] = useState(parseFloat(fiatQuantity || "25.00").toFixed(2));
   const narrowedNetworks = useMemo(() => {
     return !asset ? networks : getOnRampNetworks(onRampConfig.assetInfo, {
-      walletType: activeWallet.type,
+      walletType: activeWallet == null ? void 0 : activeWallet.type,
       allowed: onRampConfig.allowedAssets ? Object.entries(onRampConfig.allowedAssets).filter(([_, value2]) => value2 === true || value2.includes(asset)).map(([key]) => key) : void 0,
       assets: [asset],
       providers: onRampConfig.providers,
       action: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL
     });
-  }, [networks, network, asset, activeWallet.type, onRampConfig.providers, tab]);
+  }, [networks, network, asset, activeWallet == null ? void 0 : activeWallet.type, onRampConfig.providers, tab]);
   const content = useMemo(() => {
     if (!!asset && Object.values(isProviderAllowed).every((v) => !v) || assets.length === 0) {
       return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
@@ -161,7 +165,7 @@ function AddFundsSettings() {
           fullWidth: true,
           disabled: value === "",
           onClick: () => {
-            setFiatQuantity(value);
+            setFiatQuantity(value != null ? value : void 0);
             setOnRampStep(OnRampStep.PROVIDER);
           },
           children: [

package/dist/modal/components/AddFunds/common.d.ts

@@ -13,7 +13,7 @@ export declare const contentMotionProps: {
     };
 };
 export declare const NoProviders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
-    ref?: import("react").Ref<any>;
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {
     isHidden?: boolean;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;