@yuyin/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
1,020 lines (994 loc) • 812 kB
JavaScript
import { http, useConnectors as useConnectors$1, useAccount, useSwitchChain, useConnect as useConnect$1, useConfig, useDisconnect, useChainId, useAccountEffect, useEnsName, useSendTransaction, useWriteContract, WagmiContext, createConfig, useEnsAddress, useEnsAvatar } from 'wagmi';
import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia, worldchain, mantle } from 'wagmi/chains';
import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { DaimoPayIntentStatus, assert, DaimoPayOrderMode, isHydrated, readDaimoPayOrderID, getOrderDestChainId, assertNotNull, getChainName, arbitrum as arbitrum$1, base as base$2, bsc as bsc$1, ethereum, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, solana, getAddressContraction, supportedChains, getChainExplorerTxUrl, ExternalPaymentOptions, DepositAddressPaymentOptions, ethereumUSDC, polygonUSDC, baseUSDC, arbitrumUSDC, optimismUSDC, isCCTPV1Chain, debugJson, writeDaimoPayOrderID, DaimoPayOrderStatusSource, getOrderSourceChainId, DaimoPayEventType, getDaimoPayOrderView } from '@daimo/pay-common';
import { Buffer } from 'buffer';
import React, { createContext, useRef, useState, useEffect, useLayoutEffect, useMemo, useContext, useSyncExternalStore, useCallback, createElement } from 'react';
import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
import { createPortal } from 'react-dom';
import { detect } from 'detect-browser';
import { useTransition } from 'react-transition-state';
import { parseUnits, formatUnits, getAddress, zeroAddress, erc20Abi, hexToBytes } from 'viem';
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import ResizeObserver from 'resize-observer-polyfill';
import { useWallet as useWallet$1, useConnection, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import useMeasure from 'react-use-measure';
import QRCodeUtil from 'qrcode';
import { walletConnect as walletConnect$1 } from 'wagmi/connectors';
import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/wallet-adapter-base';
import { VersionedTransaction } from '@solana/web3.js';
import { normalize } from 'viem/ens';
var name = "@yuyin/pay";
var version = "0.0.2";
var author = "Daimo";
var homepage = "https://pay.daimo.com";
var license = "BSD-2-Clause license";
var description = "Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.";
var main = "./src/index.ts";
var type = "module";
var exports = {
"import": "./build/index.js",
types: "./build/index.d.ts"
};
var types = "./build/index.d.ts";
var engines = {
node: ">=12.4"
};
var files = [
"build",
"README.md"
];
var scripts = {
start: "rollup --config rollup.config.js -w",
dev: "rollup --config rollup.config.js -w",
build: "rollup --config rollup.config.js",
lint: "eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings=0"
};
var keywords = [
"ens",
"react-hook",
"blockchain",
"hooks",
"family",
"ethereum",
"react",
"daimo",
"pay",
"payment",
"crypto"
];
var dependencies = {
"@daimo/pay-common": "1.10.1",
"@rollup/plugin-typescript": "^12.1.2",
"@solana/wallet-adapter-base": "^0.9.23",
"@solana/wallet-adapter-react": "^0.15.35",
"@solana/web3.js": "^1.95.4",
"@trpc/client": "^11.0.0-next-beta.318",
"@trpc/server": "^11.0.0-next-beta.318",
buffer: "^6.0.3",
"detect-browser": "^5.3.0",
encoding: "^0.1.13",
"framer-motion": "^11.11.4",
"pino-pretty": "^13.0.0",
qrcode: "^1.5.0",
"react-transition-state": "^1.1.4",
"react-use-measure": "^2.1.1",
"resize-observer-polyfill": "^1.5.1",
"styled-components": "^5.3.5"
};
var peerDependencies = {
"@tanstack/react-query": ">=5.0.0",
react: "18.x || 19.x",
"react-dom": "18.x || 19.x",
viem: ">=2.22.0",
wagmi: "2.x"
};
var devDependencies = {
"@rollup/plugin-json": "^6.1.0",
"@types/node": "^20.14.12",
"@types/qrcode": "^1.4.2",
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"@types/rollup-plugin-peer-deps-external": "^2.2.5",
"@types/styled-components": "^5.1.25",
"eslint-plugin-react-hooks": "^5.2.0",
rollup: "^3.29.5",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-visualizer": "^5.5.4",
"typescript-plugin-styled-components": "^3.0.0"
};
var packageJson = {
name: name,
"private": false,
version: version,
author: author,
homepage: homepage,
license: license,
description: description,
main: main,
type: type,
exports: exports,
types: types,
engines: engines,
files: files,
scripts: scripts,
keywords: keywords,
dependencies: dependencies,
peerDependencies: peerDependencies,
devDependencies: devDependencies
};
const defaultConnectors = ({ app, walletConnectProjectId, coinbaseWalletPreference, additionalConnectors, }) => {
const hasAllAppData = app.name && app.icon && app.description && app.url;
const shouldUseSafeConnector = !(typeof window === "undefined") && window?.parent !== window;
const connectors = additionalConnectors ?? [];
// If we're in an iframe, include the SafeConnector
if (shouldUseSafeConnector) {
connectors.push(safe({
allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
}));
}
// Add the rest of the connectors
connectors.push(injected({ target: "metaMask" }), coinbaseWallet({
appName: app.name,
appLogoUrl: app.icon,
overrideIsMetaMask: false,
preference: coinbaseWalletPreference,
}));
connectors.push(walletConnect({
showQrModal: false,
projectId: walletConnectProjectId,
metadata: hasAllAppData
? {
name: app.name,
description: app.description,
url: app.url,
icons: [app.icon],
}
: undefined,
}));
/*
connectors.push(
injected({
shimDisconnect: true,
})
);
*/
return connectors;
};
// TODO: Move these to a provider rather than global variable
let globalAppName;
const getAppName = () => globalAppName;
const REQUIRED_CHAINS = [
mainnet,
base$1,
polygon,
optimism,
arbitrum,
linea,
bsc,
sepolia,
baseSepolia,
worldchain,
mantle,
];
/** Daimo Pay recommended config, for use with wagmi's createConfig(). */
const defaultConfig = ({ appName = "Daimo Pay", appIcon, appDescription, appUrl, walletConnectProjectId, coinbaseWalletPreference, additionalConnectors, chains = REQUIRED_CHAINS, client, ...props }) => {
globalAppName = appName;
const paddedChains = [...chains];
for (const chain of REQUIRED_CHAINS) {
if (!paddedChains.includes(chain)) {
paddedChains.push(chain);
}
}
const paddedTransports = {};
for (const chain of paddedChains) {
if (!props?.transports?.[chain.id]) {
// Auto inject http transport if not provided for a chain
paddedTransports[chain.id] = http();
}
else {
paddedTransports[chain.id] = props.transports[chain.id];
}
}
const connectors = props?.connectors ??
defaultConnectors({
app: {
name: appName,
icon: appIcon,
description: appDescription,
url: appUrl,
},
walletConnectProjectId: walletConnectProjectId ?? "5001414df825adbd5778f52cacea9e49",
coinbaseWalletPreference,
additionalConnectors,
});
const config = {
...props,
chains: paddedChains,
transports: paddedTransports,
connectors,
};
return config;
};
var ROUTES;
(function (ROUTES) {
ROUTES["SELECT_METHOD"] = "daimoPaySelectMethod";
ROUTES["SELECT_TOKEN"] = "daimoPaySelectToken";
ROUTES["SELECT_AMOUNT"] = "daimoPaySelectAmount";
ROUTES["SELECT_EXTERNAL_AMOUNT"] = "daimoPaySelectExternalAmount";
ROUTES["SELECT_DEPOSIT_ADDRESS_AMOUNT"] = "daimoPaySelectDepositAddressAmount";
ROUTES["SELECT_WALLET_AMOUNT"] = "daimoPaySelectWalletAmount";
ROUTES["SELECT_ZKP2P"] = "daimoPaySelectZKP2P";
ROUTES["WAITING_EXTERNAL"] = "daimoPayWaitingExternal";
ROUTES["WAITING_WALLET"] = "daimoPayWaitingWallet";
ROUTES["SELECT_DEPOSIT_ADDRESS_CHAIN"] = "daimoPaySelectDepositAddressChain";
ROUTES["WAITING_DEPOSIT_ADDRESS"] = "daimoPayWaitingDepositAddress";
ROUTES["PAY_WITH_TOKEN"] = "daimoPayPayWithToken";
ROUTES["CONFIRMATION"] = "daimoPayConfirmation";
ROUTES["SOLANA_CONNECT"] = "daimoPaySolanaConnect";
ROUTES["SOLANA_CONNECTOR"] = "daimoPaySolanaConnector";
ROUTES["SOLANA_SELECT_AMOUNT"] = "daimoPaySolanaSelectAmount";
ROUTES["SOLANA_PAY_WITH_TOKEN"] = "daimoPaySolanaPayWithToken";
// Unused routes. Kept to minimize connectkit merge conflicts.
ROUTES["ONBOARDING"] = "onboarding";
ROUTES["ABOUT"] = "about";
ROUTES["CONNECTORS"] = "connectors";
ROUTES["MOBILECONNECTORS"] = "mobileConnectors";
ROUTES["CONNECT"] = "connect";
ROUTES["DOWNLOAD"] = "download";
ROUTES["SWITCHNETWORKS"] = "switchNetworks";
})(ROUTES || (ROUTES = {}));
/** Meant for internal use. This will be non-exported in a future SDK version. */
const PayContext = createContext(null);
/** Daimo Pay internal context. */
const usePayContext = () => {
const context = React.useContext(PayContext);
if (!context)
throw Error("DaimoPay Hook must be inside a Provider.");
return context;
};
const hexToP3 = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (result == null)
return hex;
const values = {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
return `color(display-p3 ${values.r / 255} ${values.g / 255} ${values.b / 255})`;
};
/**
*
* IMPORTANT NOTE: This file is a workaround for the following issue:
*
* When using rollup with styled-components to build into an ES module, styled components decides to move all of it’s DOM elements into "styled.default" rather than just within "styled"
*
* We're unsure as to why this issue occurs, if you have any ideas or a better solution please let us know by opening a discussion on our GitHub repo:
* https://github.com/family/connectkit/discussions/new
*
*/
var styled = typeof styled$1.div === "function" ? styled$1 : styled$1["default"];
var base = {
light: {
/** Connect Wallet Button */
"--ck-connectbutton-font-size": "15px",
"--ck-connectbutton-color": "#373737",
"--ck-connectbutton-background": "#F6F7F9",
"--ck-connectbutton-background-secondary": "#FFFFFF",
"--ck-connectbutton-hover-color": "#373737",
"--ck-connectbutton-hover-background": "#F0F2F5",
"--ck-connectbutton-active-color": "#373737",
"--ck-connectbutton-active-background": "#EAECF1",
"--ck-connectbutton-balance-color": "#373737",
"--ck-connectbutton-balance-background": "#fff",
"--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-background)",
"--ck-connectbutton-balance-hover-background": "#F6F7F9",
"--ck-connectbutton-balance-hover-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-hover-background)",
"--ck-connectbutton-balance-active-background": "#F0F2F5",
"--ck-connectbutton-balance-active-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-active-background)",
/** Primary Button */
"--ck-primary-button-border-radius": "16px",
"--ck-primary-button-color": "#373737",
"--ck-primary-button-background": "#F6F7F9",
//'--ck-primary-button-box-shadow': 'inset 0 0 0 1px #F0F0F0',
"--ck-primary-button-font-weight": "600",
"--ck-primary-button-hover-color": "#373737",
"--ck-primary-button-hover-background": "#F0F2F5",
//'--ck-primary-button-hover-box-shadow': 'inset 0 0 0 2px var(--ck-focus-color)',
//'--ck-primary-button-active-background': '#EAECF1',
/** Secondary Button */
"--ck-secondary-button-border-radius": "16px",
"--ck-secondary-button-color": "#373737",
"--ck-secondary-button-background": "#F6F7F9",
//'--ck-secondary-button-box-shadow': '',
//'--ck-secondary-button-font-weight': '',
/** Tertiary Button */
"--ck-tertiary-button-background": "#FFFFFF",
"--ck-secondary-button-hover-background": "#e0e4eb",
/** Modal */
"--ck-modal-box-shadow": "0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-overlay-background": "rgba(71, 88, 107, 0.24)",
"--ck-body-color": "#373737",
"--ck-body-color-muted": "#999999",
"--ck-body-color-muted-hover": "#111111",
"--ck-body-background": "#ffffff",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary": "#f6f7f9",
"--ck-body-background-secondary-hover-background": "#e0e4eb",
"--ck-body-background-secondary-hover-outline": "#4282FF",
"--ck-body-background-tertiary": "#F3F4F7",
"--ck-body-action-color": "#999999",
"--ck-body-divider": "#f7f6f8",
"--ck-body-divider-secondary": "rgba(0, 0, 0, 0.06)",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-color-valid": "#32D74B",
"--ck-siwe-border": "#F0F0F0",
/** Disclaimer */
//'--ck-body-disclaimer-background': '#E3D6C9',
//'--ck-body-disclaimer-box-shadow': 'none',
"--ck-body-disclaimer-color": "#AAAAAB",
"--ck-body-disclaimer-link-color": "#838485",
"--ck-body-disclaimer-link-hover-color": "#000000",
/** Tooltips */
"--ck-tooltip-background": "#ffffff",
"--ck-tooltip-background-secondary": "#ffffff",
"--ck-tooltip-color": "#999999",
"--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
/** Network dropdown */
"--ck-dropdown-button-color": "#999999",
"--ck-dropdown-button-box-shadow": "0 0 0 1px rgba(0,0,0,0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)",
"--ck-dropdown-button-background": "#fff",
"--ck-dropdown-button-hover-color": "#8B8B8B",
"--ck-dropdown-button-hover-background": "#F5F7F9",
/** QR Code */
"--ck-qr-dot-color": "#000000",
"--ck-qr-border-color": "#f7f6f8",
/** Misc. */
"--ck-focus-color": "#1A88F8",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-copytoclipboard-stroke": "#CCCCCC",
},
dark: {
"--ck-connectbutton-font-size": "15px",
"--ck-connectbutton-color": "#ffffff",
"--ck-connectbutton-background": "#383838",
"--ck-connectbutton-background-secondary": "#282828",
"--ck-connectbutton-hover-background": "#404040",
"--ck-connectbutton-active-background": "#4D4D4D",
"--ck-connectbutton-balance-color": "#fff",
"--ck-connectbutton-balance-background": "#282828",
"--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-background)",
"--ck-connectbutton-balance-hover-background": "#383838",
"--ck-connectbutton-balance-hover-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-hover-background)",
"--ck-connectbutton-balance-active-background": "#404040",
"--ck-connectbutton-balance-active-box-shadow": "inset 0 0 0 1px var(--ck-connectbutton-active-background)",
"--ck-primary-button-color": "#ffffff",
"--ck-primary-button-background": "#383838",
//'--ck-primary-button-box-shadow': 'inset 0 0 0 1px #3D3D3D',
"--ck-primary-button-border-radius": "16px",
"--ck-primary-button-font-weight": "600",
"--ck-primary-button-hover-background": "#404040",
//'--ck-primary-button-hover-box-shadow': 'inset 0 0 0 2px rgba(255, 255, 255, 0.4)',
//'--ck-primary-button-active-background': '#4D4D4D',
"--ck-primary-button-active-border-radius": "16px",
"--ck-secondary-button-color": "#ffffff",
"--ck-secondary-button-background": "#333333",
"--ck-secondary-button-hover-background": "#4D4D4D",
/** Tertiary Button */
"--ck-tertiary-button-background": "#424242",
"--ck-focus-color": "#1A88F8",
"--ck-overlay-background": "rgba(0,0,0,0.4)",
"--ck-body-color": "#ffffff",
"--ck-body-color-muted": "rgba(255, 255, 255, 0.4)",
"--ck-body-color-muted-hover": "rgba(255, 255, 255, 0.8)",
"--ck-body-background": "#2B2B2B",
"--ck-body-background-transparent": "rgba(0,0,0,0)",
"--ck-body-background-secondary": "#333333",
"--ck-body-background-secondary-hover-background": "#4D4D4D",
"--ck-body-background-secondary-hover-outline": "#ffffff",
"--ck-body-background-tertiary": "#333333",
"--ck-body-action-color": "#808080",
"--ck-body-divider": "#383838",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-disclaimer-color": "#858585",
"--ck-body-disclaimer-link-color": "#ADADAD",
"--ck-body-disclaimer-link-hover-color": "#FFFFFF",
"--ck-modal-box-shadow": "0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-copytoclipboard-stroke": "#555555",
"--ck-tooltip-background": "#2B2B2B",
"--ck-tooltip-background-secondary": "#333333",
"--ck-tooltip-color": "#999999",
"--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
/** Network dropdown */
"--ck-dropdown-button-color": "#6C7381",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-qr-dot-color": "#ffffff",
"--ck-qr-border-color": "#3d3d3d",
},
};
var web95 = {
"--ck-font-family": "Lato",
"--ck-border-radius": "0px",
"--ck-connectbutton-color": "#373737",
"--ck-connectbutton-background": "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1",
"--ck-connectbutton-box-shadow": " 0 0 0 1px #003C74, 2px 2px 0px rgba(255, 255, 255, 0.75), -2px -2px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-connectbutton-border-radius": "4.5px",
"--ck-connectbutton-hover-color": "#373737",
"--ck-connectbutton-hover-background": "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 0% / 200% 200%, #F5F5F1",
"--ck-connectbutton-active-background": "linear-gradient(180deg, #F0F0EA 0%, #FFFFFF 50%, #F0F0EA 100%) 100% 100% / 200% 200%, #F5F5F1",
"--ck-connectbutton-balance-color": "#373737",
"--ck-connectbutton-balance-background": "#fff",
"--ck-connectbutton-balance-box-shadow": "0 0 0 1px #E4E7E7",
"--ck-connectbutton-balance-hover-box-shadow": "0 0 0 1px #d7dbdb",
"--ck-connectbutton-balance-active-box-shadow": "0 0 0 1px #bbc0c0",
"--ck-focus-color": "#1A88F8",
"--ck-overlay-background": "rgba(0, 127, 128, 0.8)",
"--ck-body-color": "#373737",
"--ck-body-color-muted": "#808080",
"--ck-body-color-muted-hover": "#111111",
"--ck-body-background": "#F0EDE2",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary-hover-background": "#FAFAFA",
"--ck-body-background-secondary-hover-outline": "#4282FF",
"--ck-body-action-color": "#373737",
"--ck-body-color-danger": "#FC6464",
"--ck-body-color-valid": "#32D74B",
"--ck-body-divider": "#919B9C",
"--ck-body-divider-box-shadow": "0px 1px 0px #FBFBF8",
// Primary button
"--ck-primary-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
"--ck-primary-button-box-shadow": "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-primary-button-border-radius": "6px",
// Primary button hover
"--ck-primary-button-hover-box-shadow": "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 5px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-primary-button-hover-border-radius": "6px",
// Modal
"--ck-modal-heading-font-weight": 400,
"--ck-modal-box-shadow": `
inset 0px -3px 0px #0F37A9,
inset -2px 0px 0px #0F37A9,
inset 0px -4px 0px #0D5DDF,
inset -4px 0px 0px #0D5DDF,
inset 2px 0px 0px #0453DD,
inset 0px 2px 0px #044FD1,
inset 4px 0px 0px #4283EB,
inset 0px 4px 0px #4283EB
`,
"--ck-modal-h1-font-weight": 400,
// Secondary button
"--ck-secondary-button-color": "#373737",
"--ck-secondary-button-border-radius": "6px",
"--ck-secondary-button-box-shadow": "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-secondary-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
// Secondary button hover
"--ck-secondary-button-hover-box-shadow": "inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 4px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-body-background-secondary": "rgba(0, 0, 0, 0.1)",
"--ck-body-background-tertiary": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
"--ck-tertiary-border-radius": "0px",
"--ck-tertiary-box-shadow": "inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF",
"--ck-body-button-text-align": "left",
"--ck-body-button-box-shadow": "0 2px 4px rgba(0, 0, 0, 0.05 )",
"--ck-body-disclaimer-background": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
"--ck-body-disclaimer-box-shadow": `
inset 0px -3px 0px #0F37A9,
inset -2px 0px 0px #0F37A9,
inset 0px -4px 0px #0D5DDF,
inset -4px 0px 0px #0D5DDF,
inset 2px 0px 0px #0453DD,
inset 4px 0px 0px #4283EB,
inset 0 1px 0 0 #919B9C`,
"--ck-body-disclaimer-font-size": "14px",
"--ck-body-disclaimer-color": "#959594",
"--ck-body-disclaimer-link-color": "#626262",
"--ck-body-disclaimer-link-hover-color": "#000000",
"--ck-qr-dot-color": "#000000",
"--ck-qr-border-color": "#919B9C",
"--ck-qr-border-radius": "0",
"--ck-qr-background": "#FFFFFF",
"--ck-copytoclipboard-stroke": "rgba(55, 55, 55, 0.4)",
"--ck-tooltip-background": "linear-gradient(270deg, #F7F3E6 7.69%, #F5F7DA 100%)",
"--ck-tooltip-background-secondary": "#f6f7f9",
"--ck-tooltip-color": "#000000",
"--ck-tooltip-shadow": " 0 0 0 1.5px #2b2622, 0px 2px 10px rgba(0, 0, 0, 0.08)",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-dropdown-button-color": "#999999",
"--ck-dropdown-button-box-shadow": "0 0 0 1px #A0A0A0, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset -1px -2px 2px rgba(0, 0, 0, 0.2)",
"--ck-dropdown-button-background": "linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
"--ck-dropdown-button-hover-background": "linear-gradient(0deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1",
"--ck-dropdown-pending-color": "#ACA899",
"--ck-dropdown-active-color": "#FFFFFF",
"--ck-dropdown-active-static-color": "#ACA899",
"--ck-dropdown-active-background": "#3F69BF",
"--ck-dropdown-active-border-radius": "0",
"--ck-dropdown-active-inset": "-12px",
"--ck-dropdown-color": "#ACA899",
"--ck-dropdown-background": "#FFFFFF",
"--ck-dropdown-box-shadow": "inset 0 0 0 1px #ACA899, 2px 2px 7px rgba(0, 0, 0, 0.15)",
"--ck-dropdown-border-radius": "0",
"--ck-alert-color": "#ACA899",
"--ck-alert-background": "linear-gradient(180deg, #FBFBFB 0%, #EFEFEE 100%)",
"--ck-alert-box-shadow": "inset 0 0 0 1px #919B9C, 1px 1px 2px rgba(0, 0, 0, 0.15), inset -2px -2px 0px #FFFFFF",
"--ck-alert-border-radius": "0",
"--ck-recent-badge-border-radius": "32px",
"--ck-recent-badge-top-offset": "0px",
/** Graphics options for our themes, not to be exposed to devs */
"--ck-graphic-primary-color": "#333333",
"--ck-graphic-primary-background": "#FFFFFF",
/*
'--ck-graphic-secondary-color': '#7D7D7D',
'--ck-graphic-secondary-background':
'linear-gradient(180deg, #FFFFFF 0%, #F0F0EA 100%), #F5F5F1',
'--ck-graphic-secondary-box-shadow':
'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
'--ck-graphic-compass-color': '#7D7D7D',
*/
"--ck-graphic-compass-background": "#FFFFFF",
/*
'--ck-graphic-compass-box-shadow':
'inset 0 0 0 1px #003C74, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC, inset -1px -2px 2px rgba(0, 0, 0, 0.2)',
'--ck-graphic-globe-background': '#ffffff',
'--ck-graphic-globe-lines': '#808080',
'--ck-graphic-globe-box-shadow':
' 0 0 0 1px #999A9E, 1px 1px 0px rgba(255, 255, 255, 0.75), -1px -1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 0px #97B9EC',
*/
"--ck-siwe-border": "#919B9C",
};
var retro = {
"--ck-font-family": '"SF Pro Rounded",ui-rounded,"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
"--ck-border-radius": "8px",
"--ck-connectbutton-font-size": "17px",
"--ck-connectbutton-color": "#000000",
"--ck-connectbutton-background": "#ffffff",
"--ck-connectbutton-box-shadow": "-4px 4px 0px #000000, inset 0 0 0 2px #000000",
"--ck-connectbutton-border-radius": "8px",
"--ck-connectbutton-hover-background": "#F3EDE8",
"--ck-connectbutton-active-box-shadow": "0 0 0 0 #000000, inset 0 0 0 2px #000000",
"--ck-connectbutton-balance-color": "#000000",
"--ck-connectbutton-balance-background": "#F3EDE8",
"--ck-connectbutton-balance-box-shadow": "-4px 4px 0px #000000, inset 0 0 0 2px #000000",
"--ck-connectbutton-balance-hover-background": "#eee5dd",
"--ck-connectbutton-balance-connectbutton-box-shadow": "-4px 8px 0px -4px #000000, inset 0 0 0 2px #000000",
"--ck-connectbutton-balance-connectbutton-border-radius": "0px 8px 8px 0",
"--ck-primary-button-color": "#373737",
"--ck-primary-button-background": "#ffffff",
"--ck-primary-button-box-shadow": "inset 0 0 0 2px #000000, -4px 4px 0 0 #000000",
"--ck-primary-button-border-radius": "8px",
"--ck-primary-button-hover-background": "#F3EDE8",
"--ck-primary-button-hover-box-shadow": "inset 0 0 0 2px #000000, -0px 0px 0 0 #000000",
"--ck-secondary-button-border-radius": "8px",
"--ck-secondary-button-color": "#373737",
"--ck-secondary-button-background": "#ffffff",
"--ck-secondary-button-box-shadow": "-4px 4px 0 0 #000000, inset 0 0 0 2px #000000",
"--ck-secondary-button-hover-background": "#F3EDE8",
"--ck-secondary-button-hover-box-shadow": "0 0 0 0 #000000, inset 0 0 0 2px #000000",
"--ck-focus-color": "#3B99FC",
"--ck-overlay-background": "rgba(133, 120, 122, 0.8)",
"--ck-body-color": "#373737",
"--ck-body-color-muted": "rgba(0, 0, 0, 0.5)",
"--ck-body-color-muted-hover": "#000000",
"--ck-body-background": "#EBE1D8",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary": "rgba(0,0,0,0.1)",
"--ck-body-background-secondary-hover-background": "#4D4D4D",
"--ck-body-background-secondary-hover-outline": "#373737",
"--ck-body-background-tertiary": "#ffffff",
"--ck-tertiary-border-radius": "8px",
"--ck-tertiary-box-shadow": "-4px 4px 0 0 #000000, inset 0 0 0 2px #000000",
"--ck-body-action-color": "#373737",
"--ck-body-divider": "#373737",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-disclaimer-background": "#E3D6C9",
"--ck-body-disclaimer-box-shadow": "-4px 4px 0 0 #000000, inset 2px 0 0 0 #000000, inset -2px 0 0 0 #000000, inset 0 -2px 0 0 #000000",
"--ck-body-disclaimer-font-weight": "500",
"--ck-body-disclaimer-color": "#888079",
"--ck-body-disclaimer-link-color": "#5B5650",
"--ck-body-disclaimer-link-hover-color": "#000000",
"--ck-modal-box-shadow": "-10px 10px 0px #000000, inset 0 0 0 2px #000000",
"--ck-copytoclipboard-stroke": "#555555",
"--ck-tooltip-border-radius": "8px",
"--ck-tooltip-color": "#373737",
"--ck-tooltip-background": "#ffffff",
"--ck-tooltip-background-secondary": "#EBE1D8",
"--ck-tooltip-shadow": "-6px 6px 0 0 #000000, 0 0 0 2px #000000",
"--ck-spinner-color": "#1A88F8",
"--ck-dropdown-button-color": "#000",
"--ck-dropdown-button-box-shadow": "-2px 2px 0 2px #000000, 0 0 0 2px #000000",
"--ck-dropdown-button-background": "#ffffff",
"--ck-dropdown-button-hover-background": "#F3EDE8",
"--ck-dropdown-button-hover-box-shadow": "-2px 2px 0 0 #000000, 0 0 0 2px #000000",
"--ck-dropdown-pending-color": "rgba(0, 0, 0, 0.5)",
"--ck-dropdown-active-color": "#FFFFFF",
"--ck-dropdown-active-static-color": "rgba(0, 0, 0, 0.5)",
"--ck-dropdown-active-background": "#3B99FC",
"--ck-dropdown-active-box-shadow": "inset 0 0 0 2px #000000",
"--ck-dropdown-active-border-radius": "8px",
"--ck-dropdown-color": "rgba(0, 0, 0, 0.5)",
"--ck-dropdown-background": "#FFFFFF",
"--ck-dropdown-box-shadow": "-4px 4px 0 0 #000000, inset 0 0 0 2px #000000",
"--ck-dropdown-border-radius": "8px",
"--ck-alert-color": "rgba(0, 0, 0, 0.5)",
"--ck-alert-background": " #F5F5F5",
"--ck-alert-border-radius": "8px",
"--ck-qr-border-radius": "8px",
"--ck-qr-dot-color": "#000000",
"--ck-qr-border-color": "#000000",
"--ck-qr-background": "#ffffff",
"--ck-recent-badge-border-radius": "32px",
"--ck-recent-badge-box-shadow": "inset 0 0 0 2px currentColor",
/** Graphics options for our themes, not to be exposed to devs */
"--ck-graphic-primary-color": "#000000",
"--ck-graphic-primary-background": "#ffffff",
/*
'--ck-graphic-secondary-color': '#ffffff',
'--ck-graphic-secondary-background': '#808080',
'--ck-graphic-secondary-box-shadow':
'-4px 4px 0 2px #000000, 0 0 0 2px #000000',
'--ck-graphic-compass-color': '#ffffff',*/
"--ck-graphic-compass-background": "#FFFFFF",
/*
'--ck-graphic-compass-box-shadow':
'-4px 4px 0 0 #000000, inset 0 0 0 2px #000000',
'--ck-graphic-globe-background': '#ffffff',
'--ck-graphic-globe-lines': '#808080',
'--ck-graphic-globe-box-shadow': '6px -6px 0 2px #000000, 0 0 0 2px #000000',
*/
"--ck-siwe-border": "#8E8985",
};
var soft = {
"--ck-border-radius": "12px",
"--ck-connectbutton-font-size": "17px",
"--ck-connectbutton-border-radius": "12px",
"--ck-connectbutton-color": "#414451",
"--ck-connectbutton-background": "#ffffff",
"--ck-connectbutton-box-shadow": "inset 0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-hover-background": "#F6F7F9",
"--ck-connectbutton-hover-box-shadow": "inset 0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-balance-color": "#373737",
"--ck-connectbutton-balance-background": "#F6F7F9",
"--ck-connectbutton-balance-box-shadow": "none",
"--ck-connectbutton-balance-hover-background": "#f1f1f3",
"--ck-primary-button-border-radius": "12px",
"--ck-primary-button-color": "#414451",
"--ck-primary-button-background": "#ffffff",
"--ck-primary-button-box-shadow": "0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-primary-button-hover-background": "#F6F7F9",
"--ck-primary-button-hover-box-shadow": "0 0 0 1px #D9DBDD, 0px 0 0 rgba(0, 0, 0, 0.02)",
"--ck-secondary-button-border-radius": "12px",
"--ck-secondary-button-color": "#414451",
"--ck-secondary-button-background": "#ffffff",
"--ck-secondary-button-box-shadow": "0 0 0 1px #E9EAEC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-secondary-button-hover-background": "#F6F7F9",
"--ck-secondary-button-hover-box-shadow": "0 0 0 1px #D9DBDD, 0px 0 0 rgba(0, 0, 0, 0.02)",
"--ck-focus-color": "#1A88F8",
"--ck-modal-box-shadow": `0px 3px 16px rgba(0, 0, 0, 0.08)`,
"--ck-body-color": "#414451",
"--ck-body-color-muted": "#9196A1",
"--ck-body-color-muted-hover": "#000000",
"--ck-body-background": "#ffffff",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary": "#f6f7f9",
"--ck-body-background-secondary-hover-background": "#e0e4eb",
"--ck-body-background-secondary-hover-outline": "#4282FF",
"--ck-body-background-tertiary": "#F6F8FA",
"--ck-tertiary-border-radius": "13px",
"--ck-tertiary-box-shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.04)",
"--ck-body-action-color": "#999999",
"--ck-body-divider": "#f7f6f8",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-color-valid": "#32D74B",
"--ck-body-disclaimer-background": "#F9FAFA",
"--ck-body-disclaimer-color": "#AFB1B6",
"--ck-body-disclaimer-link-color": "#787B84",
"--ck-body-disclaimer-link-hover-color": "#000000",
"--ck-copytoclipboard-stroke": "#CCCCCC",
"--ck-tooltip-background": "#ffffff",
"--ck-tooltip-background-secondary": "#ffffff",
"--ck-tooltip-color": "#999999",
"--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-dropdown-button-color": "#999999",
"--ck-dropdown-button-box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)",
"--ck-dropdown-button-background": "#fff",
"--ck-dropdown-button-hover-color": "#8B8B8B",
"--ck-dropdown-button-hover-background": "#E7E7E7",
"--ck-dropdown-color": "rgba(55, 55, 55, 0.4)",
"--ck-dropdown-box-shadow": "0px 2px 15px rgba(0, 0, 0, 0.15)",
"--ck-alert-color": "#9196A1",
"--ck-alert-background": "#F6F8FA",
"--ck-alert-box-shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.04)",
"--ck-alert-border-radius": "8px",
"--ck-qr-border-radius": "12px",
"--ck-qr-dot-color": "#2E3138",
"--ck-qr-border-color": "#E9EAEC",
"--ck-siwe-border": "#EAEBED",
};
var midnight = {
"--ck-font-family": '"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
"--ck-border-radius": "10px",
"--ck-connectbutton-font-size": "17px",
"--ck-connectbutton-border-radius": "8px",
"--ck-connectbutton-color": "#ffffff",
"--ck-connectbutton-background": "#313235",
"--ck-connectbutton-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
"--ck-connectbutton-hover-background": "#414144",
"--ck-connectbutton-active-background": "#4C4D4F",
"--ck-connectbutton-balance-color": "#ffffff",
"--ck-connectbutton-balance-background": "#1F2023",
"--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px #313235",
"--ck-connectbutton-balance-hover-background": "#313235",
"--ck-connectbutton-balance-active-background": "#414144",
"--ck-primary-button-border-radius": "8px",
"--ck-primary-button-color": "#ffffff",
"--ck-primary-button-background": "rgba(255, 255, 255, 0.08)",
"--ck-primary-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
"--ck-primary-button-hover-background": "rgba(255, 255, 255, 0.2)",
"--ck-secondary-button-border-radius": "8px",
"--ck-secondary-button-color": "#ffffff",
"--ck-secondary-button-background": "#363638",
"--ck-secondary-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
"--ck-secondary-button-hover-background": "#3c3c3e",
"--ck-overlay-background": "rgba(0,0,0,0.4)",
"--ck-modal-box-shadow": `inset 0 0 0 1px #38393C, 0px 2px 4px rgba(0, 0, 0, 0.02)`,
"--ck-focus-color": "#1A88F8",
"--ck-body-color": "#ffffff",
"--ck-body-color-muted": "#8B8F97",
"--ck-body-color-muted-hover": "#ffffff",
"--ck-body-background": "#1F2023",
"--ck-body-background-transparent": "rgba(31, 32, 35, 0)",
"--ck-body-background-secondary": "#313235",
"--ck-body-background-secondary-hover-background": "#e0e4eb",
"--ck-body-background-secondary-hover-outline": "rgba(255, 255, 255, 0.02)",
"--ck-body-background-tertiary": "#313235",
"--ck-tertiary-border-radius": "12px",
"--ck-tertiary-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
"--ck-body-action-color": "#8B8F97",
"--ck-body-divider": "rgba(255,255,255,0.1)",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-color-valid": "#32D74B",
"--ck-body-disclaimer-background": "#2B2D31",
"--ck-body-disclaimer-box-shadow": "none",
"--ck-body-disclaimer-color": "#808183",
"--ck-body-disclaimer-link-color": "#AAABAD",
"--ck-body-disclaimer-link-hover-color": "#ffffff",
"--ck-copytoclipboard-stroke": "#CCCCCC",
"--ck-tooltip-background": "#1F2023",
"--ck-tooltip-background-secondary": "#1F2023",
"--ck-tooltip-color": "#ffffff",
"--ck-tooltip-shadow": " 0 0 0 1px rgba(255, 255, 255, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-dropdown-button-color": "#6C7381",
"--ck-dropdown-button-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
"--ck-dropdown-button-background": "#313235",
"--ck-dropdown-pending-color": "#8B8F97",
"--ck-dropdown-active-color": "#FFF",
"--ck-dropdown-active-static-color": "#FFF",
"--ck-dropdown-active-background": "rgba(255, 255, 255, 0.07)",
"--ck-dropdown-color": "#8B8F97",
"--ck-dropdown-background": "#313235",
"--ck-dropdown-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.03)",
"--ck-dropdown-border-radius": "8px",
"--ck-alert-color": "#8B8F97",
"--ck-alert-background": "#404145",
"--ck-alert-box-shadow": "inset 0 0 0 1px rgba(255, 255, 255, 0.02)",
"--ck-qr-border-radius": "12px",
"--ck-qr-dot-color": "#ffffff",
"--ck-qr-border-color": "rgba(255,255,255,0.1)",
"--ck-recent-badge-border-radius": "32px",
};
var minimal = {
"--ck-font-family": '"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
"--ck-border-radius": "0px",
"--ck-connectbutton-font-size": "17px",
"--ck-connectbutton-border-radius": "0px",
"--ck-connectbutton-color": "#414451",
"--ck-connectbutton-background": "#ffffff",
"--ck-connectbutton-box-shadow": "inset 0 0 0 1px #EBEBEB",
"--ck-connectbutton-hover-color": "#111",
"--ck-connectbutton-hover-box-shadow": "inset 0 0 0 1px #111",
"--ck-connectbutton-balance-color": "#111111",
"--ck-connectbutton-balance-background": "#F7F7F7",
"--ck-connectbutton-balance-box-shadow": "inset 0 0 0 1px #F7F7F7",
"--ck-connectbutton-balance-hover-background": "#f1f1f3",
"--ck-connectbutton-balance-hover-box-shadow": "inset 0 0 0 1px #111",
"--ck-primary-button-border-radius": "0px",
"--ck-primary-button-color": "#111111",
"--ck-primary-button-background": "#ffffff",
"--ck-primary-button-box-shadow": "inset 0 0 0 1px #EBEBEB",
"--ck-primary-button-hover-box-shadow": "inset 0 0 0 1px #111111",
"--ck-secondary-button-border-radius": "0px",
"--ck-secondary-button-color": "#111111",
"--ck-secondary-button-background": "#ffffff",
"--ck-secondary-button-box-shadow": "inset 0 0 0 1px #EBEBEB",
"--ck-secondary-button-hover-box-shadow": "inset 0 0 0 1px #111111",
"--ck-dropdown-button-color": "#999999",
"--ck-dropdown-button-box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.01), 0px 0px 7px rgba(0, 0, 0, 0.05)",
"--ck-dropdown-button-background": "#fff",
"--ck-dropdown-button-hover-color": "#8B8B8B",
"--ck-dropdown-button-hover-background": "#E7E7E7",
"--ck-focus-color": "#1A88F8",
"--ck-modal-box-shadow": `0px 3px 16px rgba(0, 0, 0, 0.08)`,
"--ck-body-color": "#111111",
"--ck-body-color-muted": "#A0A0A0",
"--ck-body-color-muted-hover": "#000000",
"--ck-body-background": "#ffffff",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary": "#f6f7f9",
"--ck-body-background-secondary-hover-background": "#e0e4eb",
"--ck-body-background-secondary-hover-outline": "#4282FF",
"--ck-body-background-tertiary": "#ffffff",
"--ck-tertiary-border-radius": "0px",
"--ck-tertiary-box-shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.04)",
"--ck-body-action-color": "#A0A0A0",
"--ck-body-divider": "#EBEBEB",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-color-valid": "#32D74B",
"--ck-body-disclaimer-background": "#FAFAFA",
"--ck-body-disclaimer-box-shadow": "inset 0 1px 0 0 #ECECEC",
"--ck-body-disclaimer-color": "#9D9D9D",
"--ck-body-disclaimer-link-color": "#6E6E6E",
"--ck-body-disclaimer-link-hover-color": "#000000",
"--ck-copytoclipboard-stroke": "#CCCCCC",
"--ck-tooltip-border-radius": "0px",
"--ck-tooltip-background": "#ffffff",
"--ck-tooltip-background-secondary": "#ffffff",
"--ck-tooltip-color": "#999999",
"--ck-tooltip-shadow": "0px 2px 10px rgba(0, 0, 0, 0.08)",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-dropdown-active-border-radius": "0",
"--ck-dropdown-box-shadow": "0px 2px 15px rgba(0, 0, 0, 0.15)",
"--ck-dropdown-border-radius": "0",
"--ck-alert-color": "rgba(17, 17, 17, 0.4)",
"--ck-alert-background": "#fff",
"--ck-alert-box-shadow": "inset 0 0 0 1px #EBEBEB",
"--ck-alert-border-radius": "0",
"--ck-qr-border-radius": "0px",
"--ck-qr-dot-color": "#111111",
"--ck-qr-border-color": "#EBEBEB",
"--ck-modal-h1-font-weight": "400",
"--ck-modal-heading-font-weight": "400",
"--ck-primary-button-font-weight": "400",
"--ck-recent-badge-top-offset": "0px",
/** Graphics options for our themes, not to be exposed to devs */
/**
'--ck-graphic-primary-color': '#111111',
'--ck-graphic-primary-background': '#ffffff',
'--ck-graphic-primary-box-shadow': 'inset 0 0 0 1px #EBEBEB',
'--ck-graphic-secondary-color': '#DCDDDE',
'--ck-graphic-secondary-background': '#ffffff',
'--ck-graphic-secondary-box-shadow': 'inset 0 0 0 1px #EBEBEB',
'--ck-graphic-compass-color': '#111111',
'--ck-graphic-compass-background': '#ffffff',
'--ck-graphic-compass-box-shadow': 'inset 0 0 0 1px #EBEBEB',
'--ck-graphic-globe-background': '#D9D9D9',
'--ck-graphic-globe-lines': '#ffffff',
'--ck-graphic-globe-box-shadow': 'inset 0 0 0 1px #EBEBEB',
*/
"--ck-siwe-border": "#EBEBEB",
};
var rounded = {
"--ck-font-family": '"Nunito",ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
"--ck-border-radius": "24px",
"--ck-connectbutton-font-size": "17px",
"--ck-connectbutton-font-weight": "700",
"--ck-connectbutton-border-radius": "14px",
"--ck-connectbutton-color": "#000000",
"--ck-connectbutton-background": "#ffffff",
"--ck-connectbutton-box-shadow": "inset 0 0 0 2px #DFE4EC, 0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-hover-background": "#F9FAFB",
"--ck-connectbutton-balance-color": "#414451",
"--ck-connectbutton-balance-background": "#F9FAFB",
"--ck-connectbutton-balance-box-shadow": "0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-balance-hover-background": "#F5F7F9",
"--ck-connectbutton-balance-hover-box-shadow": "0 2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-balance-active-box-shadow": "0 0 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-connectbutton-active-background": "#F5F7F9",
"--ck-connectbutton-active-box-shadow": "inset 0 0 0 2px #CFD7E2, 0 0px 0 0 #CFD7E2, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-primary-button-border-radius": "18px",
"--ck-primary-button-color": "#000000",
"--ck-primary-button-background": "#ffffff",
"--ck-primary-button-box-shadow": "inset 0 0 0 2px #DFE4EC, inset 0 -4px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-primary-button-hover-background": "#F5F7F9",
"--ck-primary-button-hover-box-shadow": "inset 0 0 0 2px #DFE4EC, inset 0 -2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-secondary-button-border-radius": "16px",
"--ck-secondary-button-color": "#000000",
"--ck-secondary-button-background": "#ffffff",
"--ck-secondary-button-box-shadow": "inset 0 0 0 2px #DFE4EC, inset 0 -4px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-secondary-button-hover-background": "#F5F7F9",
"--ck-secondary-button-hover-box-shadow": "inset 0 0 0 2px #DFE4EC, inset 0 -2px 0 0 #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-focus-color": "#1A88F8",
"--ck-modal-box-shadow": `0px 3px 16px rgba(0, 0, 0, 0.08)`,
"--ck-body-color": "#000000",
"--ck-body-color-muted": "#93989F",
"--ck-body-color-muted-hover": "#000000",
"--ck-body-background": "#ffffff",
"--ck-body-background-transparent": "rgba(255,255,255,0)",
"--ck-body-background-secondary": "#f6f7f9",
"--ck-body-background-secondary-hover-background": "#e0e4eb",
"--ck-body-background-secondary-hover-outline": "#4282FF",
"--ck-body-background-tertiary": "#ffffff",
"--ck-tertiary-border-radius": "22px",
"--ck-tertiary-box-shadow": "inset 0 0 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-body-action-color": "#93989F",
"--ck-body-divider": "#DFE4EC",
"--ck-body-color-danger": "#FF4E4E",
"--ck-body-color-valid": "#32D74B",
"--ck-body-disclaimer-background": "#F9FAFB",
"--ck-body-disclaimer-font-size": "14px",
"--ck-body-disclaimer-font-weight": "700",
"--ck-body-disclaimer-color": "#959697",
"--ck-body-disclaimer-link-color": "#646464",
"--ck-body-disclaimer-link-hover-color": "#000000",
"--ck-copytoclipboard-stroke": "#CCCCCC",
"--ck-tooltip-background": "#ffffff",
"--ck-tooltip-background-secondary": "#ffffff",
"--ck-tooltip-color": "#999999",
"--ck-tooltip-shadow": " 0 0 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-spinner-color": "var(--ck-focus-color)",
"--ck-dropdown-button-color": "#999999",
"--ck-dropdown-button-box-shadow": "0 0 0 2px #DFE4EC, 0 2px 0 2px #DFE4EC, 0px 2px 4px rgba(0, 0, 0, 0.02)",
"--ck-dropdown-button-background": "#fff",
"--ck-dropdown-button-hover-color": "#8B8B8B",
"--ck-dropdown-button-hover-background": "#F5F7F9",
"--ck-dropdown-pending-color": "#848D9A",
"--ck-dropdown-active-color": "#000000",
"--ck-dropdown-active-static-color": "#848D9A",
"--ck-dropdown-active-background": "#F5F7F9",
"--ck-dropdown-color": "#848D9A",
"--ck-dropdown-background": "#FFFFFF",
"--ck-dropdown-box-shadow": "0px 2px 15px rgba(0, 0, 0, 0.15)",
"--ck-dropdown-border-radius": "16px",
"--ck-alert-color": "#848D9A",
"--ck-alert-background": "#F5F7F9",
"--ck-qr-border-radius": "24px",
"--ck-qr-dot-color": "#111111",
"--ck-qr-border-color": "#DFE4EC",
"--ck-modal-h1-font-weight": "700",
"--ck-modal-heading-font-weight": "700",
"--ck-primary-button-font-weight": "700",
"--ck-recent-badge-box-shadow": "inset 0 0 0 2px currentColor",
"--ck-recent-badge-top-offset": "0px",
/** Graphics options for our themes, not to be exposed to devs */
/*
'--ck-graphic-primary-color': '#6C7381',
'--ck-graphic-primary-background': '#ffffff',
'--ck-graphic-primary-box-shadow': 'inset 0 0 0 2px #DFE4EC',
'--ck-graphic-secondary-color': '#DFE4EC',
'--ck-graphic-secondary-background': '#ffffff',
'--ck-graphic-secondary-box-shadow': 'inset 0 0 0 2px #DFE4EC',
'--ck-graphic-compass-color': '#ffffff',
'--ck-graphic-compass-background': '#6C7381',
'--ck-graphic-compass-box-shadow': 'inset 0 0 0 2px rgba(0,0,0,0.1)',
'--ck-graphic-globe-background':
'radial-gradient(84.37% 84.37% at 50% 15.63%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, #DFE4EC 0%, #DFE4EC 114.06%), #DFE4EC',
'--ck-graphic-globe-lines': '#ffffff',
'--ck-graphic-globe-box-shadow': 'inset 0 0 0 2px #DFE4EC',
*/
"--ck-siwe-border": "#DFE4EC",
};
var nouns = {
"--ck-font-family": '"PT Root UI",ui-rounded,"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"',
"--ck-border-radius": "24px",
"--ck-connectbutton-font-size": "16px",
"--ck-connectbutton-font-weight": "700",
"--ck-connectbutton-border-radius": "10px",
"--ck-connectbutton-color": "#151C3B",
"--ck-connectbutton-background": "#ffffff",
"--ck-connectbutton-box-shadow": "inset 0 0 0 1px #D6D8E1",
"--ck-connectbutton-hover-background": "#E9EBF3",
"--ck-connectbutton-hover-box-shadow": "inset 0 0 0 1px #D4D8E8",
"--ck-connectbutton-active-background": "#D4D8E8",
"--ck-connectbutton-active-box-shadow": "inset 0 0 0 1px #D4D8E8",
"--ck-connectbutton-balance-color": "#373737",
"--ck-connectbutton-balance-background": "#F6F7F9",
"--ck-connectbutton-balance-box-shadow": "none",
"--ck-connectbutton-balance-hover-background": "#f1f1f3",
"--ck-primary-button-border-radius": "16px",
"--ck-primary-button-color": "#151C3B",
"--ck-primary-button-background": "#ffffff",
"--ck-primary-button-font-weight": "700",
"--ck-primary-button-hover-background": "#DEE1ED",
"--ck-secondary-button-borde