@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/README.md

@@ -19,19 +19,19 @@ Layerswap Widget is available as an [npm package](https://www.npmjs.com/package/
 **pnpm:**
 
 ```sh
-pnpm add @layerswap/widget wagmi viem zustand @tanstack/react-query
+pnpm add @layerswap/widget zustand
 ```
 
 **npm:**
 
 ```sh
-npm install @layerswap/widget wagmi viem zustand @tanstack/react-query
+npm install @layerswap/widget zustand
 ```
 
 **yarn:**
 
 ```sh
-yarn add @layerswap/widget wagmi viem zustand @tanstack/react-query
+yarn add @layerswap/widget zustand
 ```
 
 ## Getting started with Layerswap Widget

package/dist/esm/Models/Exchange.js

@@ -0,0 +1,4 @@
+export class Exchange {
+}
+export class ExchangeNetwork {
+}

package/dist/esm/Models/InitialSettings.js

@@ -0,0 +1,50 @@
+export class PersistantQueryParams {
+    constructor() {
+        this.swapId = "";
+        this.from = "";
+        this.to = "";
+        this.fromExchange = "";
+        this.lockFrom = false;
+        this.lockTo = false;
+        this.lockFromAsset = false;
+        this.lockToAsset = false;
+        this.destination_address = "";
+        this.fromAsset = "";
+        this.toAsset = "";
+        this.hideRefuel = false;
+        this.hideAddress = false;
+        this.hideFrom = false;
+        this.hideTo = false;
+        this.amount = "";
+        this.externalId = "";
+        this.signature = "";
+        this.timestamp = "";
+        this.apiKey = "";
+        this.balances = "";
+        this.account = "";
+        this.actionButtonText = "";
+        this.theme = "";
+        this.appName = "";
+        this.depositMethod = "";
+        this.hideDepositMethod = false;
+        this.hideLogo = false;
+        this.sameAccountNetwork = "";
+        this.lockAddress = false;
+        this.clientId = "";
+        // Obsolate
+        this.sourceExchangeName = "";
+        this.destNetwork = "";
+        this.lockNetwork = false;
+        this.lockExchange = false;
+        this.addressSource = "";
+        this.asset = "";
+        this.lockAsset = false;
+        this.destAddress = "";
+    }
+}
+export class InitialSettings extends PersistantQueryParams {
+    constructor() {
+        super(...arguments);
+        this.coinbase_redirect = "";
+    }
+}

package/dist/esm/Models/LayerSwapAppSettings.js

@@ -0,0 +1,8 @@
+export class LayerSwapAppSettings {
+    constructor(settings) {
+        this.networks = settings.networks;
+        this.sourceExchanges = settings.sourceExchanges || [];
+        this.sourceRoutes = settings.sourceRoutes || [];
+        this.destinationRoutes = settings.destinationRoutes || [];
+    }
+}

package/dist/esm/Models/LayerSwapAuth.js

@@ -0,0 +1,2 @@
+export class AuthGetCodeResponse {
+}

package/dist/esm/Models/Network.js

@@ -0,0 +1,24 @@
+export var NetworkType;
+(function (NetworkType) {
+    NetworkType["EVM"] = "evm";
+    NetworkType["Starknet"] = "starknet";
+    NetworkType["Solana"] = "solana";
+    NetworkType["Cosmos"] = "cosmos";
+    NetworkType["StarkEx"] = "starkex";
+    NetworkType["ZkSyncLite"] = "zksynclite";
+    NetworkType["TON"] = "ton";
+    NetworkType["Fuel"] = "fuel";
+    NetworkType["Bitcoin"] = "bitcoin";
+})(NetworkType || (NetworkType = {}));
+export class Network {
+}
+export class NetworkWithTokens extends Network {
+}
+export class NetworkRoute extends Network {
+}
+export class Token {
+}
+export class NetworkRouteToken extends Token {
+}
+export class Metadata {
+}

package/dist/esm/Models/SwapStatus.js

@@ -0,0 +1,13 @@
+export var SwapStatus;
+(function (SwapStatus) {
+    SwapStatus["Created"] = "created";
+    SwapStatus["UserTransferPending"] = "user_transfer_pending";
+    SwapStatus["UserTransferDelayed"] = "user_transfer_delayed";
+    SwapStatus["LsTransferPending"] = "ls_transfer_pending";
+    SwapStatus["Completed"] = "completed";
+    SwapStatus["Failed"] = "failed";
+    SwapStatus["Expired"] = "expired";
+    SwapStatus["Cancelled"] = "cancelled";
+    SwapStatus["PendingRefund"] = "pending_refund";
+    SwapStatus["Refunded"] = "refunded";
+})(SwapStatus || (SwapStatus = {}));

package/dist/esm/Models/Theme.js

@@ -0,0 +1,179 @@
+export const THEME_COLORS = {
+    "imxMarketplace": {
+        backdrop: "0, 121, 133",
+        buttonTextColor: '255, 255, 255',
+        tertiary: '140, 152, 192',
+        logo: '255, 255, 255',
+        footerLogo: 'none',
+        primary: {
+            DEFAULT: '46, 236, 255',
+            '100': '209, 251, 255',
+            '200': '168, 247, 255',
+            '300': '128, 243, 255',
+            '400': '87, 240, 255',
+            '500': '46, 236, 255',
+            '600': '0, 232, 255',
+            '700': '0, 172, 189',
+            '800': '0, 121, 133',
+            '900': '0, 70, 77',
+            'text': '255, 255, 255',
+        },
+        secondary: {
+            DEFAULT: '17, 29, 54',
+            '100': '46, 59, 147',
+            '200': '35, 42, 112',
+            '300': '32, 41, 101',
+            '400': '28, 39, 89',
+            '500': '22, 37, 70',
+            '600': '20, 33, 62',
+            '700': '17, 29, 54',
+            '800': '15, 25, 47',
+            '900': '12, 21, 39',
+            'text': '209, 251, 255',
+        },
+    },
+    "light": {
+        tertiary: '134, 134, 134',
+        buttonTextColor: '17, 17, 17',
+        logo: '255, 0, 147',
+        footerLogo: 'none',
+        primary: {
+            DEFAULT: '228, 37, 117',
+            '100': '246, 182, 209',
+            '200': '241, 146, 186',
+            '300': '237, 110, 163',
+            '400': '232, 73, 140',
+            '500': '228, 37, 117',
+            '600': '166, 51, 94',
+            '700': '136, 17, 67',
+            '800': '147, 8, 99',
+            '900': '196, 153, 175',
+            'text': '17, 17, 17',
+        },
+        secondary: {
+            DEFAULT: '240, 240, 240',
+            '100': '46, 59, 147',
+            '200': '134, 134, 134',
+            '300': '139, 139, 139',
+            '400': '177, 177, 177',
+            '500': '218, 218, 218',
+            '600': '223, 223, 223',
+            '700': '240, 240, 240',
+            '800': '243, 244, 246',
+            '900': '250, 248, 248',
+            'text': '108, 108, 108',
+        },
+    },
+    "default": {
+        backdrop: "62, 18, 64",
+        tertiary: '118, 128, 147',
+        buttonTextColor: '228, 229, 240',
+        logo: '255, 0, 147',
+        footerLogo: 'none',
+        borderRadius: 'small',
+        warning: {
+            Foreground: '255, 201, 74',
+            Background: '47, 43, 29',
+        },
+        error: {
+            Foreground: '255, 97, 97',
+            Background: '46, 27, 27',
+        },
+        success: {
+            Foreground: '89, 224, 125',
+            Background: '14, 43, 22',
+        },
+        primary: {
+            DEFAULT: '204, 45, 93',
+            '100': '255, 148, 176',
+            '200': '245, 103, 141',
+            '300': '235, 84, 129',
+            '400': '229, 64, 114',
+            '500': '204, 45, 93',
+            '600': '178, 29, 74',
+            '700': ' 143, 23, 59',
+            '800': '89, 14, 37',
+            '900': '46, 7, 19',
+            'text': '225, 227, 230',
+        },
+        secondary: {
+            DEFAULT: '17, 29, 54',
+            '100': '60, 72, 97',
+            '200': '52, 63, 87',
+            '300': '40, 50, 71',
+            '400': '31, 40, 61',
+            '500': '23, 31, 49',
+            '600': '18, 25, 41',
+            '700': '14, 21, 36',
+            '800': '11, 17, 31',
+            '900': '7, 12, 23',
+            'text': '163, 173, 194',
+        },
+    },
+    "ton": {
+        tertiary: '134, 134, 134',
+        buttonTextColor: '15, 15, 15',
+        logo: '15, 15, 15',
+        footerLogo: 'none',
+        primary: {
+            DEFAULT: '51, 144, 236',
+            '100': '246, 182, 209',
+            '200': '241, 146, 186',
+            '300': '237, 110, 163',
+            '400': '232, 73, 140',
+            '500': '45, 148, 229',
+            '600': '166, 51, 94',
+            '700': '136, 17, 67',
+            '800': '45, 148, 229',
+            '900': '51, 144, 236',
+            'text': '15, 15, 15',
+        },
+        secondary: {
+            DEFAULT: '240, 240, 240',
+            '100': '199, 201, 206',
+            '200': '208, 210, 211',
+            '300': '212, 214, 219',
+            '400': '220, 222, 226',
+            '500': '227, 230, 233',
+            '600': '229, 231, 235',
+            '700': '241, 243, 245',
+            '800': '243, 244, 246',
+            '900': '250, 248, 248',
+            'text': '106, 119, 133',
+        },
+    },
+    "immutable": {
+        tertiary: '182, 182, 182',
+        buttonTextColor: '19, 19, 19',
+        logo: '187, 187, 187',
+        headerLogo: 'none',
+        footerLogo: 'block',
+        footerLogoHeight: '20px',
+        primary: {
+            DEFAULT: '243, 243, 243',
+            '100': '255, 255, 255',
+            '200': '255, 255, 255',
+            '300': '255, 255, 255',
+            '400': '255, 255, 255',
+            '500': '243, 243, 243',
+            '600': '215, 215, 215',
+            '700': '187, 187, 187',
+            '800': '159, 159, 159',
+            '900': '131, 131, 131',
+            'text': '243, 243, 243',
+        },
+        secondary: {
+            DEFAULT: '37, 37, 37',
+            '100': '119, 119, 119',
+            '200': '98, 98, 98',
+            '300': '78, 78, 78',
+            '400': '57, 57, 57',
+            '500': '37, 37, 37',
+            '600': '13, 13, 13',
+            '700': '13, 13, 13',
+            '800': '13, 13, 13',
+            '900': '0, 0, 0',
+            'text': '182, 182, 182',
+        },
+    }
+};

package/dist/esm/Models/Wizard.js

@@ -0,0 +1,44 @@
+export var SwapCreateStep;
+(function (SwapCreateStep) {
+    SwapCreateStep["MainForm"] = "MainForm";
+    SwapCreateStep["PendingSwaps"] = "PendingSwaps";
+    SwapCreateStep["AuthorizeCoinbaseWithdrawal"] = "AuthorizeCoinbaseWithdrawal";
+    SwapCreateStep["OffRampOAuth"] = "OffRampOAuth";
+    SwapCreateStep["ApiKey"] = "ApiKey";
+    SwapCreateStep["ActiveSwapLimit"] = "ActiveSwapLimit";
+    SwapCreateStep["Error"] = "Error";
+})(SwapCreateStep || (SwapCreateStep = {}));
+export var SwapWithdrawalStep;
+(function (SwapWithdrawalStep) {
+    SwapWithdrawalStep["Withdrawal"] = "Withdrawal";
+    SwapWithdrawalStep["CoinbaseManualWithdrawal"] = "CoinbaseManualWithdrawal";
+    SwapWithdrawalStep["SwapProcessing"] = "SwapProcessing";
+    SwapWithdrawalStep["ProcessingWalletTransaction"] = "ProcessingWalletTransaction";
+    SwapWithdrawalStep["Success"] = "Success";
+    SwapWithdrawalStep["Failed"] = "Failed";
+    SwapWithdrawalStep["Error"] = "Error";
+    SwapWithdrawalStep["Delay"] = "Delay";
+    SwapWithdrawalStep["OffRampWithdrawal"] = "OffRampWithdrawal";
+    SwapWithdrawalStep["WithdrawFromImtblx"] = "WithdrawFromImtblx";
+    SwapWithdrawalStep["WithdrawFromStarknet"] = "WithdrawFromStarknet";
+    SwapWithdrawalStep["SelectWithdrawalType"] = "SelectWithdrawalType";
+    SwapWithdrawalStep["CoinbaseInternalWithdrawal"] = "CoinbaseInternalWithdrawal";
+})(SwapWithdrawalStep || (SwapWithdrawalStep = {}));
+export var MenuStep;
+(function (MenuStep) {
+    MenuStep["Menu"] = "Menu";
+    MenuStep["Transactions"] = "Transactions";
+    MenuStep["TransactionDetails"] = "Transaction Details";
+    MenuStep["Campaigns"] = "Campaigns";
+    MenuStep["CampaignDetails"] = "Campaign Details";
+})(MenuStep || (MenuStep = {}));
+export const ExchangeAuthorizationSteps = {
+    "api_credentials": SwapCreateStep.ApiKey,
+    "o_auth2": SwapCreateStep.AuthorizeCoinbaseWithdrawal
+};
+export const OfframpExchangeAuthorizationSteps = {
+    "api_credentials": SwapCreateStep.ApiKey,
+    "o_auth2": SwapCreateStep.OffRampOAuth
+};
+export class WizardStep {
+}

package/dist/esm/Models/index.js

@@ -0,0 +1,9 @@
+export * from './Balance';
+export * from './Network';
+export * from './LayerSwapSettings';
+export * from './ApiResponse';
+export * from './Exchange';
+export * from './ApiError';
+export * from './InitialSettings';
+export * from './Theme';
+export * from './Partner';

package/dist/esm/components/Buttons/connectButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useWallet from "../../hooks/useWallet";
+import { useConnectModal } from "../Wallet/WalletModal";
+const ConnectButton = ({ children, className, }) => {
+    const { providers } = useWallet();
+    const filteredProviders = providers.filter(p => !!p.autofillSupportedNetworks);
+    const { connect } = useConnectModal();
+    return (_jsx("button", { onClick: async () => { await connect(); }, type: "button", "aria-label": "Connect wallet", disabled: filteredProviders.length == 0, className: `${className} disabled:opacity-50 disabled:cursor-not-allowed enabled:active:animate-press-down`, children: children }));
+};
+export default ConnectButton;

package/dist/esm/components/Buttons/copyButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { classNames } from '../utils/classNames';
+import useCopyClipboard from '../../hooks/useCopyClipboard';
+import { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../shadcn/tooltip';
+import CopyIcon from '../Icons/CopyIcon';
+const CopyButton = ({ className, toCopy, children, iconSize, iconClassName }) => {
+    const [isCopied, setCopied] = useCopyClipboard();
+    const [isTooltipOpen, setTooltipOpen] = useState(false);
+    const handleCopyClick = () => {
+        setCopied(toCopy);
+        setTooltipOpen(true);
+    };
+    return (_jsxs(Tooltip, { open: isTooltipOpen, onOpenChange: setTooltipOpen, children: [_jsx(TooltipTrigger, { children: _jsx("div", { className: classNames(className), onClick: handleCopyClick, children: isCopied ? (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(Check, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) : (_jsxs("div", { className: "flex items-center gap-1 cursor-pointer", children: [_jsx(CopyIcon, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));
+};
+export default CopyButton;

package/dist/esm/components/Buttons/iconButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../utils/classNames';
+const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    const theirProps = props;
+    return (_jsx("div", { className: "fixed-width-container max-sm:bg-secondary-500 max-sm:rounded-lg max-sm:p-0.5", children: _jsxs("button", { ...theirProps, type: "button", className: classNames("active:animate-press-down py-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-hidden rounded-lg items-center", className), children: [_jsx("div", { className: 'mx-1.5', children: _jsx("div", { children: icon }) }), _jsx("span", { className: "sr-only", children: "Icon description" })] }) }));
+});
+export default IconButton;

package/dist/esm/components/Buttons/index.js

@@ -0,0 +1,2 @@
+export { default as SubmitButton } from "./submitButton";
+export { default as SecondaryButton } from "./secondaryButton";

package/dist/esm/components/Buttons/secondaryButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import SpinIcon from "../Icons/spinIcon";
+const SecondaryButton = (props) => {
+    const { className, isLoading, children, ...buttonProps } = props;
+    const size = props.size || 'md';
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: props.disabled || isLoading, className: clsx('rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-buttonTextColor shadow-xs cursor-pointer disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative flex items-center justify-center space-x-2', className, {
+            'px-2 py-1 text-xs': size === 'xs',
+            'px-2 py-1 text-sm': size === 'sm',
+            'px-2.5 py-1.5 text-sm': size === 'md',
+            'px-3 py-2 text-sm': size === 'lg',
+            'px-3.5 py-2.5 text-sm rounded-xl': size === 'xl',
+        }), children: [isLoading && _jsx(SpinIcon, { className: "animate-spin h-4 w-4" }), _jsx("span", { children: children })] }));
+};
+export default SecondaryButton;

package/dist/esm/components/Buttons/submitButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SpinIcon from "../Icons/spinIcon";
+import clsx from "clsx";
+export class SubmitButtonProps {
+    constructor() {
+        this.buttonStyle = 'filled';
+        this.size = 'medium';
+        this.text_align = 'center';
+        this.button_align = 'left';
+    }
+}
+const SubmitButton = ({ isDisabled, isSubmitting, icon, children, type, onClick, buttonStyle = 'filled', size = 'medium', text_align = 'center', button_align = 'left', className, style }) => {
+    return (_jsxs("button", { disabled: isDisabled || isSubmitting, type: type, onClick: onClick, style: style, className: clsx('enabled:active:animate-press-down text-primary focus:outline-none focus:ring-0 items-center space-x-1 disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative w-full flex justify-center font-medium rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out', {
+            className,
+            'text-primary-buttonTextColor bg-primary-500': buttonStyle === 'filled',
+            'py-4 px-4': size === 'large',
+            'py-3 px-2 md:px-3': size === 'medium',
+            'py-1.5 px-1.5': size === 'small',
+        }), children: [_jsxs("span", { className: `${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`, children: [(!isDisabled && !isSubmitting) && icon, isSubmitting ?
+                        _jsx(SpinIcon, { className: "animate-spin h-5 w-5" })
+                        : null] }), _jsx("span", { className: `grow ${text_align === 'left' ? 'text-left' : 'text-center'}`, children: children })] }));
+};
+const text_styles = {
+    'mltln-text-light': {
+        primary: 'text-primary',
+        secondary: 'text-primary-100'
+    },
+    'mltln-text-dark': {
+        primary: 'text-primary',
+        secondary: 'text-primary-600'
+    }
+};
+export const DoubleLineText = ({ primaryText, secondarytext, colorStyle, reversed }) => {
+    return _jsxs("div", { className: `leading-3 flex ${reversed ? 'flex-col-reverse' : 'flex-col'}`, children: [_jsx("div", { className: `text-xs ${text_styles[colorStyle].secondary}`, children: secondarytext }), _jsx("div", { className: `${text_styles[colorStyle].primary}`, children: primaryText })] });
+};
+export default SubmitButton;

package/dist/esm/components/Buttons/toggleButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '@headlessui/react';
+import { classNames } from '../utils/classNames';
+export class ToggleButtonProps {
+}
+const ToggleButton = ({ onChange, value, disabled = false }) => {
+    return (_jsxs(Switch, { checked: value, onChange: onChange, disabled: disabled, className: classNames(value ? 'bg-primary-500' : 'bg-secondary-800', 'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden'), children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsxs("span", { className: classNames(value ? 'translate-x-5 bg-primary-text' : 'bg-secondary-400 translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full shadow-sm transform ring-0 transition ease-in-out duration-200'), children: [_jsx("span", { className: classNames(value ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-2 w-2 text-primary-text-tertiary", viewBox: "0 0 8 8", fill: "none", children: _jsx("path", { fill: "currentColor", strokeLinejoin: "round", d: "M1.51601 0.459928C1.44892 0.391517 1.36852 0.337587 1.27977 0.301468C1.19102 0.265349 1.0958 0.247807 1.00001 0.249928C0.799761 0.248203 0.606481 0.323367 0.46001 0.459928C0.32345 0.606399 0.248285 0.799679 0.25001 0.999928C0.25001 1.20293 0.32001 1.37493 0.46001 1.51593L2.94601 3.99993L0.46201 6.48393C0.393238 6.55085 0.338937 6.63117 0.30247 6.71993C0.266004 6.80869 0.248149 6.90399 0.25001 6.99993C0.25001 7.20293 0.32001 7.38293 0.46001 7.53993C0.61701 7.67993 0.79701 7.74993 1.00001 7.74993C1.20301 7.74993 1.37501 7.67993 1.51601 7.53993L4.00001 5.05393L6.48401 7.53793C6.62501 7.67793 6.79701 7.74893 7.00001 7.74893C7.20301 7.74893 7.38301 7.67893 7.54001 7.53893C7.67657 7.39246 7.75173 7.19918 7.75001 6.99893C7.75213 6.90313 7.73459 6.80792 7.69847 6.71917C7.66235 6.63042 7.60842 6.55002 7.54001 6.48293L5.05401 3.99993L7.53801 1.51593C7.67801 1.37493 7.74901 1.20293 7.74901 0.999928C7.75073 0.799679 7.67557 0.606399 7.53901 0.459928C7.39254 0.323367 7.19926 0.248203 6.99901 0.249928C6.90321 0.247807 6.808 0.265349 6.71925 0.301468C6.6305 0.337587 6.5501 0.391517 6.48301 0.459928L4.00001 2.94593L1.51601 0.460928V0.459928Z" }) }) }), _jsx("span", { className: classNames(value ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'), "aria-hidden": "true", children: _jsx("svg", { className: "h-3 w-3 text-primary-800", fill: "currentColor", viewBox: "0 0 12 12", children: _jsx("path", { d: "M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" }) }) })] })] }));
+};
+export default ToggleButton;

package/dist/esm/components/ColorSchema.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { THEME_COLORS } from "../Models/Theme";
+const BORDER_RADIUS_VALUES = {
+    small: 6,
+    medium: 8,
+    large: 12,
+    extraLarge: 16
+};
+const mergeWithFallback = (themeData, fallbackTheme) => {
+    if (!themeData)
+        return fallbackTheme;
+    const deepMerge = (target, source) => {
+        if (source === null || source === undefined)
+            return target;
+        if (target === null || target === undefined)
+            return source;
+        if (typeof source === 'object' && typeof target === 'object') {
+            const result = { ...target };
+            for (const key in source) {
+                result[key] = source[key] !== undefined ? deepMerge(target[key], source[key]) : target[key];
+            }
+            return result;
+        }
+        return source !== undefined ? source : target;
+    };
+    return deepMerge(fallbackTheme, themeData);
+};
+const adjustBorderRadius = (key, borderRadiusType) => {
+    if (borderRadiusType === 'none')
+        return '0';
+    const values = {
+        small: { small: 4, medium: 6, large: 8, extraLarge: 10 },
+        medium: { small: 6, medium: 8, large: 10, extraLarge: 12 },
+        large: { small: 8, medium: 10, large: 12, extraLarge: 14 },
+        extraLarge: { small: 10, medium: 12, large: 14, extraLarge: 16 },
+    };
+    const selected = values[borderRadiusType];
+    if (!selected) {
+        return `${BORDER_RADIUS_VALUES[key]}px`;
+    }
+    return `${selected[key]}px`;
+};
+const ColorSchema = ({ themeData }) => {
+    const fallbackTheme = THEME_COLORS.default;
+    const mergedTheme = mergeWithFallback(themeData, fallbackTheme);
+    return (_jsx(_Fragment, { children: _jsx("style", { children: `
+                :root {
+                    --ls-border-radius-none: 0px;
+                    --ls-border-radius-sm: ${adjustBorderRadius('small', mergedTheme.borderRadius)};
+                    --ls-border-radius-md: ${adjustBorderRadius('medium', mergedTheme.borderRadius)};
+                    --ls-border-radius-lg: ${adjustBorderRadius('large', mergedTheme.borderRadius)};
+                    --ls-border-radius-xl: ${adjustBorderRadius('extraLarge', mergedTheme.borderRadius)};
+                    --ls-border-radius-full: 9999px;
+                    --ls-border-radius-default: ${adjustBorderRadius('small', mergedTheme.borderRadius)};
+
+                    --ls-colors-backdrop: ${mergedTheme.backdrop};
+                    --ls-colors-logo: ${mergedTheme.logo};
+                    --ls-colors-primary: ${mergedTheme.primary.DEFAULT};
+                    --ls-colors-primary-100: ${mergedTheme.primary[100]};
+                    --ls-colors-primary-200: ${mergedTheme.primary[200]};
+                    --ls-colors-primary-300: ${mergedTheme.primary[300]};
+                    --ls-colors-primary-400: ${mergedTheme.primary[400]};
+                    --ls-colors-primary-500: ${mergedTheme.primary[500]};
+                    --ls-colors-primary-600: ${mergedTheme.primary[600]};
+                    --ls-colors-primary-700: ${mergedTheme.primary[700]};
+                    --ls-colors-primary-800: ${mergedTheme.primary[800]};
+                    --ls-colors-primary-900: ${mergedTheme.primary[900]};
+
+                    --ls-colors-buttonTextColor: ${mergedTheme.buttonTextColor};
+                    --ls-colors-text-tertiary: ${mergedTheme.tertiary};
+                    --ls-colors-primary-text: ${mergedTheme.primary.text};
+
+                    --ls-colors-secondary: ${mergedTheme.secondary?.DEFAULT};
+                    --ls-colors-secondary-100: ${mergedTheme.secondary?.[100]};
+                    --ls-colors-secondary-200: ${mergedTheme.secondary?.[200]};
+                    --ls-colors-secondary-300: ${mergedTheme.secondary?.[300]};
+                    --ls-colors-secondary-400: ${mergedTheme.secondary?.[400]};
+                    --ls-colors-secondary-500: ${mergedTheme.secondary?.[500]};
+                    --ls-colors-secondary-600: ${mergedTheme.secondary?.[600]};
+                    --ls-colors-secondary-700: ${mergedTheme.secondary?.[700]};
+                    --ls-colors-secondary-800: ${mergedTheme.secondary?.[800]};
+                    --ls-colors-secondary-900: ${mergedTheme.secondary?.[900]};
+                    --ls-colors-secondary-text: ${mergedTheme.secondary?.text};
+
+                    --ls-color-warning-foreground: ${mergedTheme.warning?.Foreground}
+                    --ls-colors-warning-background: ${mergedTheme.warning?.Background}
+                    --ls-color-error-foreground: ${mergedTheme.error?.Foreground}
+                    --ls-colors-error-background: ${mergedTheme.error?.Background}
+                    --ls-color-success-foreground: ${mergedTheme.success?.Foreground}
+                    --ls-colors-success-background: ${mergedTheme.success?.Background}
+                }
+                .headerLogo {
+                    display: ${mergedTheme.headerLogo};
+                }
+                .footerLogo {
+                    display: ${mergedTheme.footerLogo};
+                    height: ${mergedTheme.footerLogoHeight};
+                }
+            ` }) }));
+};
+export default ColorSchema;

package/dist/esm/components/Common/AddressIcon/colors.mjs

@@ -0,0 +1,12 @@
+export default [
+    '#01888C', // teal
+    '#FC7500', // bright orange
+    '#034F5D', // dark teal
+    '#F73F01', // orangered
+    '#FC1960', // magenta
+    '#C7144C', // raspberry
+    '#F3C100', // goldenrod
+    '#1598F2', // lightning blue
+    '#2465E1', // sail blue
+    '#F19E02', // gold
+];

package/dist/esm/components/Common/AddressIcon/index.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Jazzicon from "./jazzicon.mjs";
+import { useEffect, useRef } from "react";
+const AddressIcon = ({ address, size, className, rounded }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (address && ref.current) {
+            ref.current.innerHTML = "";
+            const iconElement = Jazzicon(size, parseInt(address.slice(2, 10), 16));
+            if (iconElement) {
+                iconElement.style.display = 'block';
+                iconElement.style.width = "100%";
+                iconElement.style.height = "100%";
+                iconElement.style.borderRadius = rounded || "3px";
+                ref.current.appendChild(iconElement);
+            }
+        }
+    }, [address, size]);
+    return _jsx("div", { className: className, ref: ref });
+};
+export default AddressIcon;