@getpara/react-sdk 2.0.0-alpha.18 → 2.0.0-alpha.20

package/dist/cli/cli.mjs

@@ -30,6 +30,8 @@ const checkForPackages = async () => {
       }
     }
   }
+
+  process.exit();
 };
 
 await checkForPackages();

package/dist/modal/ParaModal.js

@@ -14,7 +14,7 @@ import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/
 import { AuthLayout } from "./types/modalProps.js";
 import { DEFAULTS } from "./constants/defaults.js";
 import { useGoBack } from "./hooks/useGoBack.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
 import { useAccount, useModal, useWalletState } from "../provider/index.js";
 import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
@@ -278,7 +278,7 @@ const ParaModal = forwardRef((props, ref) => {
     }
   );
 });
-const StyledAuthModal = styled(CpslAuthModal)`
+const StyledAuthModal = safeStyled(CpslAuthModal)`
   ${({ $embeddedModal }) => $embeddedModal && `
     &::part(modal-body-card) {
     --card-box-shadow: none;

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

@@ -3,7 +3,7 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
@@ -99,7 +99,7 @@ const Account = ({ onClose }) => {
     ] }) })
   ] }) });
 };
-const ButtonContainer = styled.div`
+const ButtonContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -107,22 +107,22 @@ const ButtonContainer = styled.div`
   width: 100%;
   height: 88px;
 `;
-const OptionButton = styled(StyledCpslTileButton)`
+const OptionButton = safeStyled(StyledCpslTileButton)`
   flex: 1;
 
   --button-icon-color: var(--cpsl-color-text-primary);
 `;
-const DisconnectButton = styled(CpslButton)`
+const DisconnectButton = safeStyled(CpslButton)`
   --button-border-width: 0px;
 `;
-const BalanceContainer = styled.div`
+const BalanceContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   padding-top: 8px;
   padding-bottom: 24px;
 `;
-const Alert = styled.div`
+const Alert = safeStyled.div`
   --icon-color: var(--cpsl-color-utility-yellow);
   --icon-stroke-color: var(--cpsl-color-utility-yellow);
   --icon-fill-color: var(--cpsl-color-utility-yellow);

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

@@ -8,7 +8,7 @@ import { OnRampStep } from "../../stores/index.js";
 import { useModalStore } from "../../stores/modal/useModalStore.js";
 import { useEffect, useMemo } from "react";
 import { getAddFundsStep } from "../../utils/steps.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useAccount, useWallet } from "../../../provider/index.js";
 import { AddFundsProvider } from "./AddFundsProvider.js";
 import { AddFundsReceive } from "./AddFundsReceive.js";
@@ -61,7 +61,7 @@ const AddFunds = () => {
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });
 };
-const SpinnerContainer = styled(StepContainer)`
+const SpinnerContainer = safeStyled(StepContainer)`
   margin: 50% 0;
 `;
 export {

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

@@ -7,7 +7,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as comp from "@getpara/react-components";
 import { getOnRampNetworks } from "@getpara/web-sdk";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
 import { useModalStore } from "../../stores/index.js";
 import { useRef, useState } from "react";
@@ -84,7 +84,7 @@ function AddFundsAsset() {
     )) }) }) })
   ] });
 }
-const ScrollContainer = styled.div`
+const ScrollContainer = safeStyled.div`
   height: calc(100% - 56px);
   width: 100%;
   display: flex;
@@ -93,7 +93,7 @@ const ScrollContainer = styled.div`
   overflow-y: auto;
   mask-image: ${({ isAtBottom, isAtTop }) => !isAtBottom && !isAtTop ? "linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%)" : !isAtBottom ? "linear-gradient(to bottom, black calc(100% - 24px), transparent 100%)" : !isAtTop ? "linear-gradient(to top, black calc(100% - 24px), transparent 100%)" : "none"};
 `;
-const AssetList = styled.ul`
+const AssetList = safeStyled.ul`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -103,7 +103,7 @@ const AssetList = styled.ul`
   margin: 0;
   padding: 0px;
 `;
-const AssetButton = styled(comp.CpslButton)`
+const AssetButton = safeStyled(comp.CpslButton)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -113,10 +113,10 @@ const AssetButton = styled(comp.CpslButton)`
   --button-secondary-hover-background-color: var(--cpsl-color-background-16);
   --button-secondary-hover-border-color: var(--cpsl-color-background-16);
 `;
-const Info = styled(comp.CpslCol)`
+const Info = safeStyled(comp.CpslCol)`
     text-align: left;
   `, Code = comp.CpslText, Name = comp.CpslText;
-const SearchInput = styled(comp.CpslInput)`
+const SearchInput = safeStyled(comp.CpslInput)`
   --container-background-color: var(--cpsl-color-background-8);
   --input-background-color: transparent;
 `;

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

@@ -10,7 +10,7 @@ import { useModalStore } from "../../stores/index.js";
 import { lazy, useEffect, useMemo, useState } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { RampEmbed } from "@getpara/react-common";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useGoBack } from "../../hooks/useGoBack.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
@@ -70,7 +70,7 @@ const AddFundsAwaiting = () => {
   }, [onRampPurchase == null ? void 0 : onRampPurchase.status]);
   return /* @__PURE__ */ jsx(Container, { $wide: true, children: onRampEmbed });
 };
-const Container = styled(StepContainer)`
+const Container = safeStyled(StepContainer)`
   flex: 1;
 `;
 export {

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

@@ -5,7 +5,7 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { Heading, InnerStepContainer } from "../common.js";
 import { CpslText } from "@getpara/react-components";
 import { useAddFunds } from "./AddFundsContext.js";
@@ -81,7 +81,7 @@ function AddFundsProvider() {
     ] })
   ] }));
 }
-const Container = styled(motion.div)`
+const Container = safeStyled(motion.div)`
   width: 100%;
   height: 100%;
   align-self: center;
@@ -91,10 +91,10 @@ const Container = styled(motion.div)`
   gap: 8px;
   height: 320px;
 `;
-const $InnerStepContainer = styled(InnerStepContainer)`
+const $InnerStepContainer = safeStyled(InnerStepContainer)`
   position: relative;
 `;
-const NoProviders = styled(CpslText)`
+const NoProviders = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
   visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};

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

@@ -12,7 +12,7 @@ import { getAssetCode, getNetworkName } from "../../constants/constants.js";
 import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { contentMotionProps, NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";
@@ -188,7 +188,7 @@ function AddFundsSettings() {
   }, [assets, asset, tab]);
   return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: content });
 }
-const Container = styled(motion.div)`
+const Container = safeStyled(motion.div)`
   width: 100%;
   height: 100%;
   align-self: center;
@@ -204,16 +204,16 @@ const Container = styled(motion.div)`
     width: 100%;
   }
 `;
-const AssetContainer = styled(Container)`
+const AssetContainer = safeStyled(Container)`
   gap: 8px;
 `;
-const CurrencySign = styled.div`
+const CurrencySign = safeStyled.div`
   font-size: 72px;
   color: var(--cpsl-color-text-primary);
   position: relative;
   right: -16px;
 `;
-const PresetButton = styled(CpslButton)`
+const PresetButton = safeStyled(CpslButton)`
   --button-color: var(--cpsl-color-text-contrast);
   --button-font-size: 24px;
   --button-secondary-background-color: var(--cpsl-color-background-8);
@@ -223,7 +223,7 @@ const PresetButton = styled(CpslButton)`
   --button-secondary-hover-border-color: var(--cpsl-color-background-16);
   flex: 1;
 `;
-const Input = styled(CpslInput)`
+const Input = safeStyled(CpslInput)`
   --container-background-color: transparent;
   --container-height: 90px;
   --container-border-width: 0;

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

@@ -1,14 +1,14 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { CpslText } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 const contentMotionProps = {
   transition: { duration: 0.2 },
   initial: { opacity: 0 },
   animate: { opacity: 1 },
   exit: { opacity: 0 }
 };
-const NoProviders = styled(CpslText)`
+const NoProviders = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
   visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};

package/dist/modal/components/AuthInput/AuthInput.js

@@ -13,7 +13,7 @@ import {
   CpslText
 } from "@getpara/react-components";
 import { useEffect, useMemo, useRef, useState } from "react";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import countryCodes from "../../utils/countryCodes.js";
 import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
@@ -205,7 +205,7 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     }
   );
 };
-const IconContainer = styled.div`
+const IconContainer = safeStyled.div`
   height: 100%;
   display: flex;
   align-items: center;
@@ -217,7 +217,7 @@ const IconContainer = styled.div`
     --icon-color: var(--cpsl-color-contrast);
   }
 `;
-const CountryCodeSelect = styled(CpslSelect)`
+const CountryCodeSelect = safeStyled(CpslSelect)`
   --container-height: 100%;
   --container-padding-start: 0px;
   --container-padding-end: 0px;
@@ -242,17 +242,17 @@ const CountryCodeSelect = styled(CpslSelect)`
     }
   }
 `;
-const StyledSelectItem = styled(CpslSelectItem)`
+const StyledSelectItem = safeStyled(CpslSelectItem)`
   &::part(inner-container) {
     justify-content: space-between;
   }
 `;
-const SelectedItem = styled.div`
+const SelectedItem = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
 `;
-const StyledInput = styled(CpslInput)`
+const StyledInput = safeStyled(CpslInput)`
   --container-background-color: var(--cpsl-color-background-8);
   --input-background-color: var(--cpsl-color-background-8);
   --container-padding-end: 8px;

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { AuthMainStepContent } from "./AuthMainStepContent.js";
 import { CenteredText } from "../common.js";
 import { useStore } from "../../../provider/stores/useStore.js";
@@ -38,7 +38,7 @@ const AuthMainStep = ({
     )
   ] });
 };
-const Logo = styled.img`
+const Logo = safeStyled.img`
   height: 100px;
   max-width: 260px;
   object-fit: contain;

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2, useMemo } from "react";
 import { CpslButton, CpslDivider, CpslIconGroup } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
 import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
@@ -117,27 +117,27 @@ const AuthMainStepContent = ({
     )
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-const StyledIconGroup = styled(CpslIconGroup)`
+const StyledIconGroup = safeStyled(CpslIconGroup)`
   --icon-item-color: ${({ $isDark }) => $isDark ? "white" : "black"};
   flex: 1;
   justify-content: flex-end;
 `;
-const IconGroupSpacer = styled(StyledIconGroup)`
+const IconGroupSpacer = safeStyled(StyledIconGroup)`
   visibility: hidden;
 `;
-const CondensedButton = styled(CpslButton)`
+const CondensedButton = safeStyled(CpslButton)`
   --button-justify-content: space-between;
 
   &::part(button-native) {
     max-height: 50px;
   }
 `;
-const GuestMode = styled.a`
+const GuestMode = safeStyled.a`
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -2,7 +2,7 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { OAuth } from "../OAuth/OAuth.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
@@ -39,12 +39,12 @@ const AuthOptions = ({
     Content
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-const CompleteAccountSetup = styled.div`
+const CompleteAccountSetup = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -52,7 +52,7 @@ const CompleteAccountSetup = styled.div`
   color: var(--cpsl-color-text-primary);
   margin-bottom: 8px;
 `;
-const CompleteAccountIcon = styled(CpslIcon)`
+const CompleteAccountIcon = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-primary);
 `;
 export {

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -4,7 +4,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
 import { useModalStore } from "../../stores/index.js";
 import { Heading, StepContainer, InnerStepContainer } from "../common.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { AuthMethod } from "@getpara/web-sdk";
 import { KnownDevices, UserIdentifier } from "@getpara/react-common";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
@@ -40,7 +40,7 @@ const BiometricLoginStep = () => {
     ] })
   ] });
 };
-const MainContainer = styled(InnerStepContainer)`
+const MainContainer = safeStyled(InnerStepContainer)`
   gap: 16px;
 `;
 export {

package/dist/modal/components/Body/AnimatedHeightWrapper.js

@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 const AnimatedHeightWrapper = ({ children, className }) => {
   const containerRef = useRef(null);
   const [height, setHeight] = useState("auto");
@@ -21,7 +21,7 @@ const AnimatedHeightWrapper = ({ children, className }) => {
   }, []);
   return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
 };
-const Container = styled(motion.div)`
+const Container = safeStyled(motion.div)`
   overflow: hidden;
 `;
 export {

package/dist/modal/components/Body/Body.js

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { IFrameSteps, ModalStep } from "../../utils/steps.js";
 import { CpslAlert, CpslIcon } from "@getpara/react-components";
 import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
@@ -258,20 +258,20 @@ const Body = ({
     ] })
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   position: relative;
 `;
-const AnimatedWrapper = styled(AnimatedHeightWrapper)`
+const AnimatedWrapper = safeStyled(AnimatedHeightWrapper)`
   margin-top: -16px;
 `;
-const BodyContainer = styled(motion.div)`
+const BodyContainer = safeStyled(motion.div)`
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 24px;
   will-change: auto !important;
 `;
-const InnerContainer = styled.div`
+const InnerContainer = safeStyled.div`
   z-index: 1;
   flex: 1;
   display: flex;
@@ -302,7 +302,7 @@ const InnerContainer = styled.div`
     padding: 72px 16px 0px;
   }
 `;
-const TestModeAlert = styled(CpslAlert)`
+const TestModeAlert = safeStyled(CpslAlert)`
   --container-padding-end: 40px;
   position: absolute;
   bottom: 16px;
@@ -310,7 +310,7 @@ const TestModeAlert = styled(CpslAlert)`
   right: 16px;
   z-index: 1000;
 `;
-const CloseButton = styled.button`
+const CloseButton = safeStyled.button`
   background-color: transparent;
   border: none;
   padding: 4px;
@@ -319,7 +319,7 @@ const CloseButton = styled.button`
   top: 0;
   right: 0;
 `;
-const CloseX = styled(CpslIcon)`
+const CloseX = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-foreground-0);
 `;
 export {

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -7,7 +7,7 @@ import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpar
 import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
 import { useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
@@ -75,17 +75,17 @@ const ChainSwitch = () => {
   }
   return /* @__PURE__ */ jsx(Container, { children: Content });
 };
-const Container = styled(StepContainer)`
+const Container = safeStyled(StepContainer)`
   flex: 1;
   justify-content: space-between;
 `;
-const ErrorContainer = styled.div`
+const ErrorContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 `;
-const ErrorIcon = styled(CpslIcon)`
+const ErrorIcon = safeStyled(CpslIcon)`
   --height: 16px;
   --width: 16px;
   --icon-color: var(--cpsl-color-text-error);

package/dist/modal/components/Controls/Controls.js

@@ -2,7 +2,7 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon } from "@getpara/react-components";
-import { styled } from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { useGoBack } from "../../hooks/useGoBack.js";
 import { AccountSelect, ChainSelect } from "./Selects.js";
@@ -48,7 +48,7 @@ const Controls = ({ onClose }) => {
     /* @__PURE__ */ jsx(CloseButton, { bareModal, variant: "ghost", onClick: onClose, children: /* @__PURE__ */ jsx(CpslIcon, { icon: "close" }) })
   ] });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   position: absolute;
   width: 100%;
   top: 16px;
@@ -59,18 +59,18 @@ const Container = styled.div`
   justify-content: space-between;
   gap: 8px;
 `;
-const MiddleContainer = styled.div`
+const MiddleContainer = safeStyled.div`
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
 `;
-const CloseButton = styled(HeaderButton)`
+const CloseButton = safeStyled(HeaderButton)`
   transform: rotate(180deg);
   visibility: ${({ bareModal }) => bareModal ? "hidden" : "visible"};
 `;
-const BackButton = styled(HeaderButton)`
+const BackButton = safeStyled(HeaderButton)`
   transform: rotate(180deg);
 `;
 export {

package/dist/modal/components/Controls/Selects.js

@@ -6,7 +6,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "@getpara/react-common";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useEffect, useRef } from "react";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
@@ -154,26 +154,26 @@ const AccountSelect = () => {
     }
   ) : ActiveWalletNode }) });
 };
-const Container = styled.div`
+const Container = safeStyled.div`
   flex: 0;
   width: 100%;
   display: flex;
   justify-content: center;
 `;
-const FlexRow = styled.div`
+const FlexRow = safeStyled.div`
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const FlexCol = styled.div`
+const FlexCol = safeStyled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
-const WalletName = styled(CpslText)`
+const WalletName = safeStyled(CpslText)`
   white-space: nowrap;
 `;
-const ChainName = styled(CpslText)`
+const ChainName = safeStyled(CpslText)`
   max-width: 150px;
   text-transform: capitalize;