@getpara/react-sdk 1.8.0 → 1.10.0

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

@@ -1,23 +1,42 @@
 import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-export declare const SpinnerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const QRContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InfoBoxContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InfoBoxHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { Network, OnRampAsset } from '@getpara/web-sdk';
+export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoBoxHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FilledDisabledInput: typeof CpslInput;
 export declare const FullWidthFilledDisabledInput: typeof CpslInput;
 export declare const CenteredText: typeof CpslText;
-export declare const InnerStepContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StepContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const InnerStepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, {
     $wide?: boolean;
 }>> & string;
 export declare const Heading: typeof CpslText;
 export declare const StyledCpslTileButton: typeof CpslTileButton;
-export declare const HeroIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+export declare const HeroIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: import("react").Ref<any>;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+export declare const HeaderSelect: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    $width: number;
+    $top?: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderSelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderSelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare function AssetIcon({ asset, size }: {
+    asset: OnRampAsset;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NetworkIcon({ network, size }: {
+    network: Network;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: import("react").Ref<any>;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/modal/components/common.js

@@ -1,7 +1,10 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
-import { CpslIcon, CpslInput, CpslText, CpslTileButton } from "@getpara/react-components";
+import { jsx } from "react/jsx-runtime";
+import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
 import { styled } from "styled-components";
+import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "../constants/constants.js";
+import { useThemeStore } from "../stores/index.js";
 const SpinnerContainer = styled.div`
   display: flex;
   align-items: center;
@@ -67,6 +70,71 @@ const HeroIcon = styled(CpslIcon)`
   --width: 80px;
   --icon-color: var(--cpsl-color-text-primary);
 `;
+const HeaderSelect = styled(CpslSelect)`
+  --container-height: auto;
+  --container-border-width: 0px;
+  --container-padding-end: 0px;
+  --container-padding-start: 0px;
+  --container-background-color: transparent;
+  --container-box-shadow: none;
+  --container-gap: 2px;
+  --icon-width: 16px;
+  --icon-height: 16px;
+  position: relative;
+
+  &::part(selected-text) {
+    white-space: nowrap;
+  }
+
+  &::part(dropdown) {
+    min-width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(popover) {
+    /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
+    @media (max-width: ${MOBILE_SIZE}px) {
+      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+      bottom: 16px;
+    }
+    cpsl-auth-modal.force-mobile-media & {
+      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+      bottom: 16px;
+    }
+  }
+
+  &::part(icon) {
+    --icon-color: var(--cpsl-color-contrast);
+  }
+`;
+const HeaderSelectItem = styled(CpslSelectItem)`
+  --outer-container-padding-start: 4px;
+  --outer-container-padding-end: 4px;
+  --outer-container-padding-top: 4px;
+  --outer-container-padding-bottom: 4px;
+`;
+const HeaderSelectContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 1000px;
+  background-color: var(--cpsl-color-background-8);
+  padding: 4px;
+`;
+const StyledIcon = styled(CpslIcon)`
+  background: var(--cpsl-color-background-0);
+  border-radius: 100%;
+`;
+function AssetIcon({ asset, size }) {
+  const isDark = useThemeStore((state) => state.isDark);
+  const data = ON_RAMP_ASSETS[asset];
+  return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
+}
+function NetworkIcon({ network, size }) {
+  const isDark = useThemeStore((state) => state.isDark);
+  const data = NETWORKS[network];
+  return /* @__PURE__ */ jsx(StyledIcon, { size, icon: data.icon, inset: data.isCircular ? void 0 : "15%", invert: isDark && data.isDark });
+}
 const ErrorContainer = styled.div`
   display: flex;
   align-items: center;
@@ -79,16 +147,21 @@ const ErrorIcon = styled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-error);
 `;
 export {
+  AssetIcon,
   CenteredText,
   ErrorContainer,
   ErrorIcon,
   FilledDisabledInput,
   FullWidthFilledDisabledInput,
+  HeaderSelect,
+  HeaderSelectContainer,
+  HeaderSelectItem,
   Heading,
   HeroIcon,
   InfoBoxContent,
   InfoBoxHeader,
   InnerStepContainer,
+  NetworkIcon,
   QRContainer,
   SpinnerContainer,
   StepContainer,

package/dist/modal/constants/constants.d.ts

@@ -12,21 +12,28 @@ export interface OnRampProviderConfig {
     backgroundColors: string[];
 }
 export declare const ON_RAMP_PROVIDERS: Record<OnRampProvider, OnRampProviderConfig>;
-export declare const NETWORKS: Record<Network, {
+type Networks = Record<Network, {
     name: string;
     icon: IconType;
+    isCircular?: boolean;
+    isDark?: boolean;
 }>;
+export declare const NETWORKS: Networks;
 export declare const ON_RAMP_ASSETS: Record<OnRampAsset, {
     name: string;
     code: string;
     icon: IconType;
+    isCircular?: boolean;
+    isDark?: boolean;
 }>;
 export declare function getNetworkName(str: Network | string): string;
 export declare function getNetworkIcon(str: Network | string): IconType;
+export declare function getAssetCode(str: OnRampAsset | string): string;
 export declare function getAssetName(str: OnRampAsset | string): string;
-export declare function getAssetIcon(str: OnRampAsset | string): "code" | "menu" | "image" | "polygon" | "key" | "search" | "download" | "x" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "close" | "clubhouseBrand" | "clubhouse" | "copy07" | "copy" | "cosmos" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dots" | "downloadCloud" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "wallet" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare function getAssetIcon(str: OnRampAsset | string): "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "close" | "clubhouseBrand" | "clubhouse" | "code" | "copy07" | "copy" | "cosmos" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "key" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "search" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "wallet" | "x" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
 export declare const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;
 export declare const BODY_MOTION_VARIANTS: Variants;
 export declare const BODY_TRANSITION: Transition;
+export {};

package/dist/modal/constants/constants.js

@@ -1,5 +1,8 @@
 "use client";
-import "../../chunk-MMUBH76A.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-MMUBH76A.js";
 import { Network, OnRampAsset, OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
 const PARA_CONNECT = "https://connect.getpara.com/";
 const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
@@ -29,7 +32,17 @@ const ON_RAMP_PROVIDERS = {
     backgroundColors: ["#7715F5", "#9647fd"]
   }
 };
-const NETWORKS = {
+const ICON_TYPES = {
+  ethereum: { isDark: true },
+  usdcBrand: { isCircular: true },
+  arbitrumBrand: { isCircular: true },
+  baseBrand: { isCircular: true },
+  optimismBrand: { isCircular: true },
+  cosmos: { isCircular: true, isDark: true },
+  celoBrand: { isCircular: true },
+  tetherBrand: { isCircular: true }
+};
+const NETWORKS = Object.entries({
   [Network.ETHEREUM]: { name: "Ethereum", icon: "ethereum" },
   [Network.SEPOLIA]: { name: "Sepolia", icon: "ethereum" },
   [Network.ARBITRUM]: { name: "Arbitrum", icon: "arbitrumBrand" },
@@ -39,12 +52,17 @@ const NETWORKS = {
   [Network.SOLANA]: { name: "Solana", icon: "solana" },
   [Network.COSMOS]: { name: "Cosmos", icon: "cosmos" },
   [Network.CELO]: { name: "Celo", icon: "celoBrand" },
+  [Network.SOLANA_DEVNET]: { name: "Solana Devnet", icon: "solana" },
   [Network.NOBLE]: { name: "Noble", icon: "nobleBrand" }
-};
-const ON_RAMP_ASSETS = {
+}).reduce((acc, [key, entry]) => {
+  return __spreadProps(__spreadValues({}, acc), {
+    [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
+  });
+}, {});
+const ON_RAMP_ASSETS = Object.entries({
   [OnRampAsset.ETHEREUM]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
-  [OnRampAsset.USDC]: { name: "USDC", code: "USDC", icon: "usdcBrand" },
-  [OnRampAsset.POLYGON]: { name: "Polygon", code: "MATIC", icon: "polygonBrand" },
+  [OnRampAsset.USDC]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
+  [OnRampAsset.POLYGON]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
   [OnRampAsset.SOLANA]: { name: "Solana", code: "SOL", icon: "solana" },
   [OnRampAsset.ATOM]: { name: "Atom", code: "ATOM", icon: "cosmos" },
   [OnRampAsset.CELO]: { name: "Celo", code: "CELO", icon: "celoBrand" },
@@ -52,7 +70,11 @@ const ON_RAMP_ASSETS = {
   [OnRampAsset.CUSD]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
   [OnRampAsset.CEUR]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
   [OnRampAsset.CREAL]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" }
-};
+}).reduce((acc, [key, entry]) => {
+  return __spreadProps(__spreadValues({}, acc), {
+    [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
+  });
+}, {});
 function getNetworkName(str) {
   var _a, _b;
   return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.name) != null ? _b : `${str[0]}${str.slice(1).toLowerCase()}`;
@@ -61,10 +83,14 @@ function getNetworkIcon(str) {
   var _a, _b;
   return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.icon) != null ? _b : "globe";
 }
-function getAssetName(str) {
+function getAssetCode(str) {
   var _a, _b;
   return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.code) != null ? _b : str;
 }
+function getAssetName(str) {
+  var _a, _b;
+  return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.name) != null ? _b : str;
+}
 function getAssetIcon(str) {
   var _a, _b;
   return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.icon) != null ? _b : "emptyCircle";
@@ -104,6 +130,7 @@ export {
   ON_RAMP_PROVIDERS,
   PARA_CONNECT,
   PARA_TERMS_AND_CONDITIONS,
+  getAssetCode,
   getAssetIcon,
   getAssetName,
   getNetworkIcon,

package/dist/modal/hooks/useCreateAccount.d.ts

@@ -1,4 +1,6 @@
-export declare function useCreateAccount(): {
+export declare function useCreateAccount({ twoFactorAuthEnabled }?: {
+    twoFactorAuthEnabled?: boolean;
+}): {
     withPasskey: () => void;
     withPassword: () => void;
 };

package/dist/modal/hooks/useCreateAccount.js

@@ -8,7 +8,7 @@ import { useModalStore } from "../stores/index.js";
 import { openPopup } from "../utils/openPopup.js";
 import { ModalStep } from "../utils/steps.js";
 import { useGoBack } from "./useGoBack.js";
-function useCreateAccount() {
+function useCreateAccount({ twoFactorAuthEnabled = false } = {}) {
   const para = useInternalClient();
   const goBack = useGoBack();
   const refs = useModalStore((state) => state.refs);
@@ -25,7 +25,12 @@ function useCreateAccount() {
     if (isComplete) {
       setWebAuthURLForCreate("");
       setIFrameUrl("");
-      setStep(ModalStep.AWAITING_WALLET_CREATION);
+      if (para.isNoWalletConfig) {
+        const is2faComplete = twoFactorAuthEnabled ? (yield para.check2FAStatus()).isSetup : true;
+        setStep(is2faComplete ? ModalStep.LOGIN_DONE : ModalStep.SETUP_2FA);
+      } else {
+        setStep(ModalStep.AWAITING_WALLET_CREATION);
+      }
     } else if (refs.currentStep.current === ModalStep.AWAITING_BIOMETRIC_CREATION) {
       goBack();
     }

package/dist/modal/index.d.ts

@@ -3,7 +3,7 @@ export type { ParaModalProps, ParaModalHandle, ParaModalTheme } from './types/mo
 export { ModalStep, type ModalStepProp } from './utils/steps.js';
 export { AuthLayout } from './types/modalProps.js';
 export * from './utils/openPopup.js';
-export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetName, getNetworkIcon, getNetworkName, } from './constants/constants.js';
+export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from './constants/constants.js';
 export { SaveRecoverySecret } from './components/RecoverySecretStep/RecoverySecretStep.js';
 export * from './utils/validateOnRampConfig.js';
 export * from './types/externalWallets.js';

package/dist/modal/index.js

@@ -9,7 +9,7 @@ import {
   ON_RAMP_ASSETS,
   NETWORKS,
   getAssetIcon,
-  getAssetName,
+  getAssetCode,
   getNetworkIcon,
   getNetworkName
 } from "./constants/constants.js";
@@ -25,8 +25,8 @@ export {
   ON_RAMP_ASSETS,
   ON_RAMP_PROVIDERS,
   SaveRecoverySecret,
+  getAssetCode,
   getAssetIcon,
-  getAssetName,
   getNetworkIcon,
   getNetworkName,
   useExternalWalletProviderStore

package/dist/modal/stores/modal/actions.js

@@ -15,10 +15,15 @@ const getActions = (set, get) => ({
   },
   decrementStep: () => {
     var _a;
+    const currentStep = get().step;
+    const onRampStep = get().onRampStep;
+    if ([ModalStep.ADD_FUNDS_BUY, ModalStep.ADD_FUNDS_WITHDRAW].includes(currentStep) && onRampStep > 0) {
+      set({ onRampStep: onRampStep - 1 });
+      return;
+    }
     const onModalStepChange = get().onModalStepChange;
     const isLogin = get().flow === "login";
     const isAccount = get().flow === "account";
-    const currentStep = get().step;
     const webAuthURLForCreate = get().webAuthURLForCreate;
     const iFrameUrl = get().iFrameUrl;
     const refs = get().refs;
@@ -40,6 +45,10 @@ const getActions = (set, get) => ({
     const isLogin = get().flow === "login";
     const isAccount = get().flow === "account";
     const currentStep = get().step;
+    const onRampStep = get().onRampStep;
+    if ([ModalStep.ADD_FUNDS_BUY, ModalStep.ADD_FUNDS_WITHDRAW].includes(currentStep) && onRampStep > 0) {
+      return true;
+    }
     return !!(isAccount ? AccountPreviousStep[currentStep] : isLogin ? LoginPreviousStep[currentStep] : SignUpPreviousStep[currentStep]);
   },
   setFlow: (flow) => set({ flow }),
@@ -51,6 +60,7 @@ const getActions = (set, get) => ({
   setSupportedAuthMethods: (supportedAuthMethods) => set({ supportedAuthMethods }),
   setOnRampPurchase: (onRampPurchase) => set((state) => ({ onRampPurchase: __spreadValues(__spreadValues({}, state.onRampPurchase || {}), onRampPurchase) })),
   setOnRampConfig: (onRampConfig) => set({ onRampConfig }),
+  setOnRampStep: (onRampStep) => set({ onRampStep }),
   setIsFullyLoggedIn: (isFullyLoggedIn) => set({ isFullyLoggedIn }),
   setAccountAddFundTab: (accountAddFundTab) => set({ accountAddFundTab }),
   setSelectedExternalWalletId: (selectedExternalWalletId) => set({ selectedExternalWalletId }),

package/dist/modal/stores/modal/useModalStore.d.ts

@@ -1,11 +1,15 @@
 import { ModalStep } from '../../utils/steps.js';
 import { OnRampConfig as OnRampConfigBase, OnRampPurchase, WalletType } from '@getpara/web-sdk';
-import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFunds.js';
+import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFundsContext.js';
 import { AuthMethod } from '@getpara/core-sdk';
 import { BiometricLocationHint } from '@getpara/user-management-client';
 import { MutableRefObject } from 'react';
 type Flow = 'login' | 'signUp' | 'account';
 type ActiveWallet = [string | undefined, WalletType | undefined];
+export declare enum OnRampStep {
+    SETTINGS = 0,
+    PROVIDER = 1
+}
 export type OnRampConfig = OnRampConfigBase & {
     testMode?: boolean;
 };
@@ -25,6 +29,7 @@ interface ModalState {
     onModalStepChange: (value: OnModalStepChangeValue) => void | undefined;
     onRampConfig: OnRampConfig | undefined;
     onRampPurchase: Partial<OnRampPurchase> | undefined;
+    onRampStep: OnRampStep;
     isFullyLoggedIn: boolean;
     accountAddFundTab?: AddFundsTabType;
     selectedExternalWalletId?: string;
@@ -62,6 +67,7 @@ export interface ModalActions {
     setOnModalStepChange: (fn: (value: OnModalStepChangeValue) => void) => void;
     setOnRampConfig: (_: OnRampConfig | undefined) => void;
     setOnRampPurchase: (_: Partial<OnRampPurchase> | undefined) => void;
+    setOnRampStep: (_: OnRampStep) => void;
     setIsFullyLoggedIn: (isFullyLoggedIn: boolean) => void;
     setAccountAddFundTab: (accountAddFundTab: AddFundsTabType) => void;
     setSelectedExternalWalletId: (id?: string) => void;

package/dist/modal/stores/modal/useModalStore.js

@@ -7,6 +7,11 @@ import { persist, createJSONStorage } from "zustand/middleware";
 import { ModalStep } from "../../utils/steps.js";
 import { getActions } from "./actions.js";
 import { createRef } from "react";
+var OnRampStep = /* @__PURE__ */ ((OnRampStep2) => {
+  OnRampStep2[OnRampStep2["SETTINGS"] = 0] = "SETTINGS";
+  OnRampStep2[OnRampStep2["PROVIDER"] = 1] = "PROVIDER";
+  return OnRampStep2;
+})(OnRampStep || {});
 const DEFAULT_MODAL_STATE = {
   flow: void 0,
   stepDirection: 1,
@@ -16,6 +21,7 @@ const DEFAULT_MODAL_STATE = {
   supportedAuthMethods: /* @__PURE__ */ new Set(),
   onModalStepChange: void 0,
   onRampPurchase: void 0,
+  onRampStep: 0 /* SETTINGS */,
   isFullyLoggedIn: false,
   accountAddFundTab: void 0,
   isExternalWalletConnecting: false,
@@ -61,5 +67,6 @@ const useModalStore = create()(
 );
 export {
   DEFAULT_MODAL_STATE,
+  OnRampStep,
   useModalStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,9 +12,9 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "1.8.0",
-    "@getpara/react-components": "1.8.0",
-    "@getpara/web-sdk": "1.8.0",
+    "@getpara/react-common": "1.10.0",
+    "@getpara/react-components": "1.10.0",
+    "@getpara/web-sdk": "1.10.0",
     "@tanstack/react-query": "^5.0.0",
     "date-fns": "^3.6.0",
     "framer-motion": "11.3.28",
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/chrome": "^0.0.237",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.2.7",
@@ -49,5 +50,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "ef96e79558695ccbe148d25a8e3611c4596d1954"
+  "gitHead": "617cf0aa1307a96ec5e91d39e306e8a0b3b86b82"
 }