@getpara/react-common 1.8.0 → 2.0.0-alpha.3

package/dist/types/externalWalletCommon.d.ts

@@ -0,0 +1,79 @@
+import { AuthStateLogin, AuthStateVerify, WalletType } from '@getpara/web-sdk';
+export type WalletMetadata = {
+    id: string;
+    name: string;
+    iconUrl: string;
+    rdns?: string;
+    installed?: boolean;
+    isExtension?: boolean;
+    isMobile?: boolean;
+    isWeb?: boolean;
+    downloadUrl?: string;
+    getQrUri?: () => Promise<string>;
+    downloadUrls?: {
+        android?: string;
+        ios?: string;
+        mobile?: string;
+        qrCode?: string;
+        chrome?: string;
+        edge?: string;
+        firefox?: string;
+        opera?: string;
+        safari?: string;
+        browserExtension?: string;
+        macos?: string;
+        windows?: string;
+        linux?: string;
+        desktop?: string;
+    };
+};
+export type CommonWallet = {
+    connect: () => Promise<{
+        address?: string;
+        bufferAddress?: string;
+        error?: string;
+        authState?: AuthStateLogin | AuthStateVerify;
+    }>;
+    connectMobile: (isManualWalletConnect?: boolean) => Promise<{
+        address?: string;
+        bufferAddress?: string;
+        error?: string;
+        authState?: AuthStateLogin | AuthStateVerify;
+    }>;
+    type: WalletType;
+} & WalletMetadata;
+export type CommonChain = {
+    id: string | number;
+    name: string;
+};
+export declare enum EvmWallet {
+    METAMASK = "METAMASK",
+    RAINBOW = "RAINBOW",
+    COINBASE = "COINBASE",
+    WALLETCONNECT = "WALLETCONNECT",
+    ZERION = "ZERION",
+    RABBY = "RABBY"
+}
+export declare enum SolanaWallet {
+    PHANTOM = "PHANTOM",
+    GLOW = "GLOW",
+    BACKPACK = "BACKPACK"
+}
+export declare enum CosmosWallet {
+    KEPLR = "KEPLR",
+    LEAP = "LEAP"
+}
+export declare const ExternalWallet: {
+    KEPLR: CosmosWallet.KEPLR;
+    LEAP: CosmosWallet.LEAP;
+    PHANTOM: SolanaWallet.PHANTOM;
+    GLOW: SolanaWallet.GLOW;
+    BACKPACK: SolanaWallet.BACKPACK;
+    METAMASK: EvmWallet.METAMASK;
+    RAINBOW: EvmWallet.RAINBOW;
+    COINBASE: EvmWallet.COINBASE;
+    WALLETCONNECT: EvmWallet.WALLETCONNECT;
+    ZERION: EvmWallet.ZERION;
+    RABBY: EvmWallet.RABBY;
+};
+export type TExternalWallet = keyof typeof ExternalWallet;

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
-import { ExtractAuth } from '@getpara/user-management-client';
+import { AuthInfo } from '@getpara/user-management-client';
 import ParaWeb, { type OnRampConfig, type OnRampPurchase } from '@getpara/web-sdk';
+export * from './externalWalletCommon.js';
 export type Props = {
     appName?: string;
     para: ParaWeb;
@@ -10,7 +11,7 @@ export type Props = {
     onRampPurchase: OnRampPurchase;
     setOnRampPurchase?: (_: OnRampPurchase) => void;
 };
-export type ModalAuthInfo = ExtractAuth & Partial<{
+export type ModalAuthInfo = AuthInfo & Partial<{
     pfpUrl: string | null;
     displayName: string | null;
 }>;

package/dist/utils/index.d.ts

@@ -32,5 +32,4 @@ export * from './getDeviceLogo.js';
 export * from './getDeviceModelName.js';
 export * from './getBrowserName.js';
 export * from './formatBiometricHints.js';
-export * from './formatPhoneNumber.js';
 export * from './getExternalWalletDisplayName.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "1.8.0",
+  "version": "2.0.0-alpha.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "1.8.0",
-    "@getpara/web-sdk": "1.8.0",
+    "@getpara/react-components": "2.0.0-alpha.3",
+    "@getpara/web-sdk": "2.0.0-alpha.3",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "@stripe/crypto": "^0.0.4",
@@ -23,8 +23,7 @@
   },
   "scripts": {
     "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs",
-    "typegen": "tsc --emitDeclarationOnly",
-    "test": "vitest run --coverage"
+    "typegen": "tsc --emitDeclarationOnly"
   },
   "devDependencies": {
     "@types/react": "^18.0.31",
@@ -43,5 +42,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "ef96e79558695ccbe148d25a8e3611c4596d1954"
+  "gitHead": "77a1e04b06258842ca9c81e3db2a2b0092517659"
 }

package/dist/chunk-IV3L3JVM.js

@@ -1,46 +0,0 @@
-"use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-export {
-  __spreadValues,
-  __spreadProps,
-  __async
-};

package/dist/classes/ParaInternal.js

@@ -1,25 +0,0 @@
-"use client";
-import "../chunk-IV3L3JVM.js";
-import ParaWeb from "@getpara/web-sdk";
-class ParaInternal extends ParaWeb {
-  constructor() {
-    super(...arguments);
-    this.getSupportedCreateAuthMethods = super.getSupportedCreateAuthMethods;
-    this.isUsingExternalWallet = super.isUsingExternalWallet;
-    this.getTransmissionKeyShares = super.getTransmissionKeyShares;
-    this.userSetupAfterLogin = super.userSetupAfterLogin;
-    this.setLoginEncryptionKeyPair = super.setLoginEncryptionKeyPair;
-    this.getPortalURL = super.getPortalURL;
-    this.isProviderModalDisabled = super.isProviderModalDisabled;
-    this.supportedAuthMethods = super.supportedAuthMethods;
-    this.getUserBiometricLocationHints = super.getUserBiometricLocationHints;
-    this.exitLoops = super.exitLoops;
-    this.exitLogin = super.exitLogin;
-    this.exitAccountCreation = super.exitAccountCreation;
-    this.exitOAuth = super.exitOAuth;
-    this.exitFarcaster = super.exitFarcaster;
-  }
-}
-export {
-  ParaInternal
-};

package/dist/classes/index.js

@@ -1,2 +0,0 @@
-"use client";
-export * from "./ParaInternal.js";

package/dist/components/HeroSpinner.js

@@ -1,55 +0,0 @@
-"use client";
-import "../chunk-IV3L3JVM.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-function HeroSpinner({
-  icon,
-  status = "inactive",
-  text
-}) {
-  return /* @__PURE__ */ jsxs(Root, { children: [
-    /* @__PURE__ */ jsxs(Hero, { children: [
-      /* @__PURE__ */ jsx(Spinner, { size: 150, barWidth: 9, variant: status === "loading" ? "default" : status }),
-      icon && /* @__PURE__ */ jsx(CpslIcon, { icon, size: "80px" })
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { status, children: [
-      status === "error" && /* @__PURE__ */ jsx(CpslIcon, { icon: "alertCircle", size: "16px", style: { stroke: "currentColor" } }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "semiBold", color: status === "error" ? "error" : "primary", children: text })
-    ] })
-  ] });
-}
-const Root = styled.div`
-  height: 276px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-`;
-const Hero = styled.div`
-  width: 150px;
-  height: 150px;
-  margin: 16px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-`;
-const Text = styled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : "auto"};
-`;
-const Spinner = styled(CpslSpinner)`
-  position: absolute;
-  width: 150px;
-  height: 150px;
-  top: 0;
-  left: 0;
-  right: 0;
-`;
-export {
-  HeroSpinner
-};

package/dist/components/KnownDevices.js

@@ -1,60 +0,0 @@
-"use client";
-import "../chunk-IV3L3JVM.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";
-import { QRCode } from "./QRCode.js";
-import { getDeviceLogo, getDeviceModelName } from "../utils/index.js";
-import { useCopyToClipboard } from "../hooks/index.js";
-const KnownDevices = ({ hints, link, showCurrentDevice }) => {
-  const [isCopied, copy] = useCopyToClipboard();
-  const handleCopy = () => {
-    copy(link);
-  };
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", children: "Continue with one of your other known devices" }),
-    !!hints.formattedHints.length && /* @__PURE__ */ jsx(DevicesContainer, { children: hints.formattedHints.map(
-      (hint) => {
-        var _a, _b, _c;
-        return (showCurrentDevice && hint.isKnownDevice || !hint.isKnownDevice) && /* @__PURE__ */ jsxs(DeviceListItem, { children: [
-          /* @__PURE__ */ jsx(DeviceLogo, { icon: getDeviceLogo(hint.device.vendor, hint.isMobile) }),
-          /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "contrast", children: (_b = (_a = getDeviceModelName(hint.device.model)) != null ? _a : hint.device.vendor) != null ? _b : hint.os.name }),
-          (hint.browser || hint.passwordManager) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: "using" }),
-            /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "contrast", children: (_c = hint.passwordManager) != null ? _c : hint.browser.name })
-          ] })
-        ] }, hint.key);
-      }
-    ) }),
-    hints.hasMobileDevice ? /* @__PURE__ */ jsx(QRCode, { link, icon: "paraIconQr" }) : /* @__PURE__ */ jsxs(CenteredColumnContainer, { children: [
-      /* @__PURE__ */ jsx(FullWidthFilledDisabledInput, { noAutoDisable: true, readonly: true, disabled: true, value: link, children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: isCopied ? "check" : "copy" }) }) }),
-      /* @__PURE__ */ jsx(CenteredText, { color: "secondary", variant: "bodyS", weight: "medium", children: "Navigate to this link using your other device" })
-    ] })
-  ] });
-};
-const Container = styled(CenteredColumnContainer)`
-  gap: 16px;
-`;
-const DevicesContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background: var(--cpsl-color-background-4);
-  padding: 16px;
-  width: 100%;
-  border-radius: 16px;
-`;
-const DeviceListItem = styled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
-const DeviceLogo = styled(CpslIcon)`
-  --icon-color: var(--cpsl-color-text-contrast);
-  --height: 16px;
-  --width: 16px;
-`;
-export {
-  KnownDevices
-};

package/dist/components/MoonPayEmbed.js

@@ -1,195 +0,0 @@
-"use client";
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-IV3L3JVM.js";
-import { jsx } from "react/jsx-runtime";
-import { OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
-import { lazy, useCallback, useEffect, useMemo, useState } from "react";
-import { getCurrencyCodes, reverseCurrencyLookup, offRampSend } from "../utils/index.js";
-import styled from "styled-components";
-const MOONPAY_PUBLISHABLE_KEY = "pk_live_EQva4LydtNDE0Rwd9X7SG9w58wqOzbux";
-const MOONPAY_PUBLISHABLE_KEY_TEST = "pk_test_HYobzemmTBXxcSStVA4dSED6jT";
-const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }) => {
-  const [LazyMoonPayBuyWidget, setLazyMoonPayBuyWidget] = useState(null);
-  const [LazyMoonPaySellWidget, setLazyMoonPaySellWidget] = useState(null);
-  const [LazyMoonPayProvider, setLazyMoonPayProvider] = useState(null);
-  useEffect(() => {
-    const _LazyMoonPayBuyWidget = lazy(
-      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayBuyWidget }))
-    );
-    const _LazyMoonPaySellWidget = lazy(
-      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPaySellWidget }))
-    );
-    const _LazyMoonPayProvider = lazy(
-      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayProvider }))
-    );
-    setLazyMoonPayBuyWidget(_LazyMoonPayBuyWidget);
-    setLazyMoonPaySellWidget(_LazyMoonPaySellWidget);
-    setLazyMoonPayProvider(_LazyMoonPayProvider);
-  }, []);
-  const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
-  const onUrlSignatureRequested = useCallback(
-    (url) => __async(void 0, null, function* () {
-      if (!para.getUserId() || !onRampPurchase.walletType) {
-        throw new Error("missing required fields");
-      }
-      const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
-        url,
-        type: onRampPurchase.walletType,
-        cosmosPrefix: para.cosmosPrefix,
-        testMode: onRampPurchase.testMode,
-        walletId: onRampPurchase.walletId || void 0,
-        externalWalletAddress: onRampPurchase.externalWalletAddress || void 0
-      });
-      return res.data.signature;
-    }),
-    [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]
-  );
-  const { currencyCodes, defaultCurrencyCode } = useMemo(
-    () => getCurrencyCodes(onRampConfig, {
-      provider: OnRampProvider.MOONPAY,
-      walletType: onRampPurchase.walletType,
-      purchaseType: onRampPurchase.type
-    }),
-    [onRampPurchase.walletType, onRampPurchase.type, onRampConfig.assetInfo, onRampConfig == null ? void 0 : onRampConfig.allowedAssets]
-  );
-  const onTransactionCompleted = useCallback(
-    (payload) => __async(void 0, null, function* () {
-      try {
-        const [network, asset] = reverseCurrencyLookup(
-          onRampConfig.assetInfo,
-          OnRampProvider.MOONPAY,
-          payload.quoteCurrency.code
-        );
-        const updated = yield para.ctx.client.updateOnRampPurchase({
-          userId: para.getUserId(),
-          walletId: onRampPurchase.walletId,
-          purchaseId: onRampPurchase.id,
-          externalWalletAddress: onRampPurchase.externalWalletAddress,
-          updates: {
-            fiatQuantity: payload.baseCurrencyAmount.toString(),
-            fiat: payload.baseCurrency.code,
-            network,
-            asset,
-            assetQuantity: payload.quoteCurrencyAmount.toString(),
-            status: OnRampPurchaseStatus.FINISHED
-          }
-        });
-        setOnRampPurchase(updated);
-        if (!isEmbedded) {
-          setTimeout(() => {
-            if (typeof window !== "undefined") {
-              window.close();
-            }
-          }, 5e3);
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    }),
-    [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]
-  );
-  const onInitiateDeposit = useCallback(
-    (payload) => __async(void 0, null, function* () {
-      const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
-        assetQuantity: payload.cryptoCurrencyAmount,
-        fiatQuantity: payload.fiatCurrencyAmount || void 0,
-        fiat: payload.fiatCurrency.code.toUpperCase(),
-        destinationAddress: payload.depositWalletAddress,
-        contractAddress: payload.cryptoCurrency.contractAddress,
-        chainId: payload.cryptoCurrency.chainId
-      });
-      return { depositId: txHash, cancelTransactionOnError: false };
-    }),
-    [
-      para,
-      onRampPurchase.id,
-      onRampPurchase.testMode,
-      onRampPurchase.walletId,
-      onRampPurchase.walletType,
-      setOnRampPurchase
-    ]
-  );
-  const embed = useMemo(() => {
-    if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
-      return null;
-    }
-    const walletAddresses = currencyCodes.reduce((acc, code) => {
-      return __spreadProps(__spreadValues({}, acc), { [code.toLowerCase()]: onRampPurchase.address });
-    }, {});
-    return onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
-      LazyMoonPayBuyWidget,
-      {
-        variant: "embedded",
-        baseCurrencyCode: onRampPurchase.fiat,
-        baseCurrencyAmount: onRampPurchase.fiatQuantity,
-        showOnlyCurrencies: currencyCodes.join(","),
-        defaultCurrencyCode,
-        walletAddresses: JSON.stringify(walletAddresses),
-        visible: true,
-        theme: isDark ? "dark" : "light",
-        style: {
-          height: "100%",
-          width: "100%",
-          border: "none",
-          borderRadius: 0,
-          margin: 0
-        },
-        onTransactionCompleted,
-        onUrlSignatureRequested
-      }
-    ) : /* @__PURE__ */ jsx(
-      LazyMoonPaySellWidget,
-      {
-        variant: "embedded",
-        refundWalletAddresses: JSON.stringify(walletAddresses),
-        visible: true,
-        theme: isDark ? "dark" : "light",
-        style: {
-          height: "100%",
-          width: "100%",
-          border: "none",
-          borderRadius: 0,
-          margin: 0
-        },
-        showOnlyCurrencies: currencyCodes.join(","),
-        defaultCurrencyCode: currencyCodes[0],
-        onInitiateDeposit,
-        onTransactionCompleted,
-        onUrlSignatureRequested
-      }
-    );
-  }, [
-    onRampPurchase.type,
-    onRampPurchase.address,
-    onRampPurchase.walletId,
-    onRampPurchase.walletType,
-    defaultCurrencyCode,
-    currencyCodes,
-    onInitiateDeposit,
-    onTransactionCompleted,
-    onUrlSignatureRequested,
-    isDark,
-    LazyMoonPayBuyWidget,
-    LazyMoonPaySellWidget
-  ]);
-  if (!LazyMoonPayProvider) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: /* @__PURE__ */ jsx(LazyMoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: embed }) });
-};
-var MoonPayEmbed_default = MoonPayEmbed;
-const Container = styled.div`
-  width: ${({ isEmbedded }) => isEmbedded ? "100%" : "100vw"};
-  height: ${({ isEmbedded }) => isEmbedded ? "640px" : "100vh"};
-
-  iframe {
-    border: 0 !important;
-  }
-`;
-export {
-  MoonPayEmbed,
-  MoonPayEmbed_default as default
-};

package/dist/components/QRCode.js

@@ -1,80 +0,0 @@
-"use client";
-import "../chunk-IV3L3JVM.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-import { useCopyToClipboard } from "../hooks/index.js";
-import { isMobile } from "@getpara/web-sdk";
-const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
-  const [isCopied, copy] = useCopyToClipboard();
-  const isMobileScreen = isMobile();
-  const handleCopy = () => {
-    copy(link);
-  };
-  return /* @__PURE__ */ jsxs(QRContainer, { $isMobile: isMobileScreen, children: [
-    isMobileScreen && /* @__PURE__ */ jsxs(MobileCopyButton, { fullWidth: true, onClick: handleCopy, children: [
-      /* @__PURE__ */ jsx(CopyIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", children: isCopied ? "Copied" : "Copy Link Instead" })
-    ] }),
-    !link ? /* @__PURE__ */ jsx(LoadingContainer, { $size: qrSize, children: /* @__PURE__ */ jsx(CpslSpinner, { size: spinnerSize }) }) : /* @__PURE__ */ jsx(StyledQRCode, { url: link, size: qrSize, icon, imageSrc }),
-    !isMobileScreen && /* @__PURE__ */ jsxs(CopyButton, { size: "small", onClick: handleCopy, children: [
-      /* @__PURE__ */ jsx(CopyIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", children: isCopied ? "Copied" : "Copy Link Instead" })
-    ] })
-  ] });
-};
-const QRContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid;
-  border-color: var(--cpsl-color-background-16);
-  border-radius: 16px;
-  background-color: white;
-  overflow: hidden;
-  padding-bottom: ${({ $isMobile }) => $isMobile ? "0px" : "16px"};
-  padding-top: ${({ $isMobile }) => $isMobile ? "16px" : "0px"};
-`;
-const StyledQRCode = styled(CpslQrCode)`
-  --qr-box-shadow: none;
-  --qr-border-radius: 0px;
-`;
-const CopyButton = styled(CpslButton)`
-  --button-primary-color: var(--cpsl-color-text-contrast);
-  --button-primary-background-color: var(--cpsl-color-background-4);
-
-  --button-primary-hover-color: var(--cpsl-color-text-contrast);
-  --button-primary-hover-background-color: var(--cpsl-color-background-16);
-
-  --button-primary-active-color: var(--cpsl-color-text-contrast);
-  --button-primary-active-background-color: var(--cpsl-color-background-4);
-
-  --button-padding-start: 8px;
-  --button-padding-end: 8px;
-  --button-padding-top: 2px;
-  --button-padding-bottom: 2px;
-
-  --button-border-radius: 1000px;
-`;
-const MobileCopyButton = styled(CopyButton)`
-  --button-padding-top: 4px;
-  --button-padding-bottom: 4px;
-
-  padding: 0px 12px;
-`;
-const CopyIcon = styled(CpslIcon)`
-  --width: 16px;
-  --height: 16px;
-  --icon-color: var(--cpsl-color-text-contrast);
-`;
-const LoadingContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: ${({ $size }) => `${$size}px`};
-  width: ${({ $size }) => `${$size}px`};
-`;
-export {
-  QRCode
-};