@layerswap/widget 0.1.4 → 0.1.15

package/README.md

@@ -1,5 +1,80 @@
 
-<br />
-<div align="left">
-  <h1 align="left">Layerswap Widget</h1>
+<div align="center">
+
+[![npm latest package](https://img.shields.io/npm/v/@layerswap/widget/latest.svg)](https://www.npmjs.com/package/@layerswap/widget)
+[![Follow on X](https://img.shields.io/twitter/follow/layerswap.svg?label=follow+Layerswap)](https://x.com/layerswap)
+
 </div>
+
+<h1 align="center">Layerswap Widget</h1>
+
+<img alt="layerswap" src="https://layerswap.io/app/opengraph.jpg" />
+
+## Installation
+
+### Layerswap Widget
+
+Layerswap Widget is available as an [npm package](https://www.npmjs.com/package/@layerswap/widget).
+
+**pnpm:**
+
+```sh
+pnpm add @layerswap/widget wagmi viem zustand @tanstack/react-query
+```
+
+**npm:**
+
+```sh
+npm install @layerswap/widget wagmi viem zustand @tanstack/react-query
+```
+
+**yarn:**
+
+```sh
+yarn add @layerswap/widget wagmi viem zustand @tanstack/react-query
+```
+
+## Getting started with Layerswap Widget
+
+Here is an example of a basic app using Layerswap Widget:
+
+```tsx
+import { LayerswapProvider, Swap } from '@layerswap/widget';
+
+export const WidgetPage = () => {
+  return (
+    <LayerswapProvider>
+      <Swap />
+    </LayerswapProvider>
+  );
+};
+```
+
+You can create your custom wallet provider if you want to use RainbowKit, Dynamic, etc.
+
+```tsx
+import { LayerswapProvider, Swap, WalletHooksProvider } from '@layerswap/widget';
+import useCustomEVM from "../hooks/useCustomEvm";
+
+function CustomHooks ({ children }: { children: ReactNode }) {
+    const customEvm = useCustomEVM()
+    return <WalletHooksProvider overides={{ evm: customEvm }}>
+        {children}
+    </WalletHooksProvider>
+}
+
+export const WidgetPage = () => {
+
+  return (
+    <LayerswapProvider>
+      <CustomHooks>
+        <Swap />
+      <CustomHooks>
+    </LayerswapProvider>
+  );
+};
+```
+
+## Examples
+
+See [examples](/examples) folder in this repository.

package/dist/Models/Theme.d.ts

@@ -1,14 +1,15 @@
 export type ThemeData = {
     backdrop?: string;
-    actionButtonText: string;
-    buttonTextColor: string;
-    logo: string;
-    placeholderText: string;
-    primary: ThemeColor;
+    actionButtonText?: string;
+    buttonTextColor?: string;
+    logo?: string;
+    placeholderText?: string;
+    primary?: ThemeColor;
     secondary?: ThemeColor;
     headerLogo?: string;
-    footerLogo?: string;
     footerLogoHeight?: string;
+    footerSticky?: boolean;
+    borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'extraLarge' | 'default';
 };
 export type ThemeColor = {
     DEFAULT: string;

package/dist/Models/Theme.js

@@ -5,7 +5,7 @@ export const THEME_COLORS = {
         buttonTextColor: '255, 255, 255',
         placeholderText: '140, 152, 192',
         logo: '255, 255, 255',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '46, 236, 255',
             '50': '230, 253, 255',
@@ -43,7 +43,7 @@ export const THEME_COLORS = {
         actionButtonText: '0, 0, 0',
         buttonTextColor: '255, 255, 255',
         logo: '255, 255, 255',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '128, 226, 235',
             '50': '255, 255, 255',
@@ -81,7 +81,7 @@ export const THEME_COLORS = {
         actionButtonText: '255, 255, 255',
         buttonTextColor: '17, 17, 17',
         logo: '255, 0, 147',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '228, 37, 117',
             '50': '248, 200, 220',
@@ -119,7 +119,7 @@ export const THEME_COLORS = {
         actionButtonText: '254, 255, 254',
         buttonTextColor: '228, 229, 240',
         logo: '255, 0, 147',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '228, 37, 117',
             '50': '248, 200, 220',
@@ -156,7 +156,7 @@ export const THEME_COLORS = {
         actionButtonText: '254, 255, 254',
         buttonTextColor: '74, 61, 59',
         logo: '226, 49, 115',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '237, 78, 51',
             '50': '248, 200, 220',
@@ -193,7 +193,7 @@ export const THEME_COLORS = {
         actionButtonText: '255, 255, 255',
         buttonTextColor: '15, 15, 15',
         logo: '15, 15, 15',
-        footerLogo: 'none',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '51, 144, 236',
             '50': '248, 200, 220',
@@ -231,8 +231,8 @@ export const THEME_COLORS = {
         buttonTextColor: '243, 243, 243',
         logo: '15, 15, 15',
         headerLogo: 'none',
-        footerLogo: 'block',
         footerLogoHeight: '20px',
+        borderRadius: 'small',
         primary: {
             DEFAULT: '243, 243, 243',
             '50': '248, 200, 220',

package/dist/Models/WalletProvider.d.ts

@@ -1,5 +1,3 @@
-import { AccountInterface } from 'starknet';
-import { StarknetWindowObject } from 'starknetkit';
 export type InternalConnector = {
     name: string;
     id: string;
@@ -20,8 +18,6 @@ export type Wallet = {
     providerName: string;
     icon: (props: any) => React.JSX.Element;
     metadata?: {
-        starknetAccount?: AccountInterface;
-        wallet?: StarknetWindowObject;
         l1Address?: string;
         deepLink?: string;
     };

package/dist/Models/WalletProvider.js

@@ -1 +1,3 @@
+// import { AccountInterface } from 'starknet';
+// import { StarknetWindowObject } from 'starknetkit';
 export {};

package/dist/components/Buttons/copyButton.js

@@ -1,14 +1,15 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } 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 { useCopyToClipboard } from '@uidotdev/usehooks';
 const CopyButton = ({ className, toCopy, children, iconSize, iconClassName }) => {
-    const [isCopied, setCopied] = useCopyClipboard();
+    const [isCopied, setCopied] = useCopyToClipboard();
     const [isTooltipOpen, setTooltipOpen] = useState(false);
     const handleCopyClick = () => {
-        setCopied(toCopy);
+        setCopied(toCopy.toString());
         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(Copy, { className: iconClassName, width: iconSize ? iconSize : 16, height: iconSize ? iconSize : 16 }), children] })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: isCopied ? "Copied" : "Copy" }) })] }));

package/dist/components/ColorSchema.js

@@ -1,52 +1,86 @@
 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 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 }) => {
-    themeData = themeData || THEME_COLORS.default;
-    return (_jsx(_Fragment, { children: themeData &&
-            _jsx("style", { children: `
-                    :root {
-                        --ls-colors-backdrop:${themeData.backdrop};
-                        --ls-colors-logo: ${themeData.logo};
-                        --ls-colors-primary: ${themeData.primary?.DEFAULT};
-                        --ls-colors-primary-50: ${themeData.primary?.[50]};
-                        --ls-colors-primary-100: ${themeData.primary?.[100]};
-                        --ls-colors-primary-200: ${themeData.primary?.[200]};
-                        --ls-colors-primary-300: ${themeData.primary?.[300]};
-                        --ls-colors-primary-400: ${themeData.primary?.[400]};
-                        --ls-colors-primary-500: ${themeData.primary?.[500]};
-                        --ls-colors-primary-600: ${themeData.primary?.[600]};
-                        --ls-colors-primary-700: ${themeData.primary?.[700]};
-                        --ls-colors-primary-800: ${themeData.primary?.[800]};
-                        --ls-colors-primary-900: ${themeData.primary?.[900]};
+    const fallbackTheme = THEME_COLORS.default;
+    const backdrop = themeData?.backdrop || fallbackTheme.backdrop;
+    const logo = themeData?.logo || fallbackTheme.logo;
+    const actionButtonText = themeData?.actionButtonText || fallbackTheme.actionButtonText;
+    const buttonTextColor = themeData?.buttonTextColor || fallbackTheme.buttonTextColor;
+    const placeholderText = themeData?.placeholderText || fallbackTheme.placeholderText;
+    const headerLogo = themeData?.headerLogo || fallbackTheme.headerLogo;
+    const borderRadius = themeData?.borderRadius || fallbackTheme.borderRadius;
+    const primary = themeData?.primary || fallbackTheme.primary;
+    const secondary = themeData?.secondary || fallbackTheme.secondary;
+    return (_jsx(_Fragment, { children: _jsx("style", { children: `
+                :root {
+                    --ls-border-radius-none: 0px;
+                    --ls-border-radius-sm: ${adjustBorderRadius('small', borderRadius)};
+                    --ls-border-radius-md: ${adjustBorderRadius('medium', borderRadius)};
+                    --ls-border-radius-lg: ${adjustBorderRadius('large', borderRadius)};
+                    --ls-border-radius-xl: ${adjustBorderRadius('extraLarge', borderRadius)};
+                    --ls-border-radius-default: ${adjustBorderRadius('small', borderRadius)};
+
+                    --ls-colors-backdrop: ${backdrop};
+                    --ls-colors-logo: ${logo};
+                    
+                    --ls-colors-primary: ${primary?.DEFAULT};
+                    --ls-colors-primary-50: ${primary?.[50]};
+                    --ls-colors-primary-100: ${primary?.[100]};
+                    --ls-colors-primary-200: ${primary?.[200]};
+                    --ls-colors-primary-300: ${primary?.[300]};
+                    --ls-colors-primary-400: ${primary?.[400]};
+                    --ls-colors-primary-500: ${primary?.[500]};
+                    --ls-colors-primary-600: ${primary?.[600]};
+                    --ls-colors-primary-700: ${primary?.[700]};
+                    --ls-colors-primary-800: ${primary?.[800]};
+                    --ls-colors-primary-900: ${primary?.[900]};
+
+                    --ls-colors-actionButtonText: ${actionButtonText};
+                    --ls-colors-buttonTextColor: ${buttonTextColor};
+                    --ls-colors-text-placeholder: ${placeholderText};
+                    --ls-colors-primary-text: ${primary?.text};
+                    --ls-colors-primary-text-muted: ${primary?.textMuted};
+                    --ls-colors-primary-logoColor: ${logo};
 
-                        --ls-colors-actionButtonText: ${themeData.actionButtonText};
-                        --ls-colors-buttonTextColor: ${themeData.buttonTextColor};
-                        --ls-colors-text-placeholder: ${themeData.placeholderText};
-                        --ls-colors-primary-text: ${themeData.primary?.text};
-                        --ls-colors-primary-text-muted: ${themeData.primary?.textMuted};
-                        --ls-colors-primary-logoColor: ${themeData.logo};
+                    --ls-colors-secondary: ${secondary?.DEFAULT};
+                    --ls-colors-secondary-50: ${secondary?.[50]};
+                    --ls-colors-secondary-100: ${secondary?.[100]};
+                    --ls-colors-secondary-200: ${secondary?.[200]};
+                    --ls-colors-secondary-300: ${secondary?.[300]};
+                    --ls-colors-secondary-400: ${secondary?.[400]};
+                    --ls-colors-secondary-500: ${secondary?.[500]};
+                    --ls-colors-secondary-600: ${secondary?.[600]};
+                    --ls-colors-secondary-700: ${secondary?.[700]};
+                    --ls-colors-secondary-800: ${secondary?.[800]};
+                    --ls-colors-secondary-900: ${secondary?.[900]};
+                    --ls-colors-secondary-950: ${secondary?.[950]};
+                    --ls-colors-secondary-text: ${secondary?.text};
+                }
 
-                        --ls-colors-secondary: ${themeData.secondary?.DEFAULT};
-                        --ls-colors-secondary-50: ${themeData.secondary?.[50]};
-                        --ls-colors-secondary-100: ${themeData.secondary?.[100]};
-                        --ls-colors-secondary-200: ${themeData.secondary?.[200]};
-                        --ls-colors-secondary-300: ${themeData.secondary?.[300]};
-                        --ls-colors-secondary-400: ${themeData.secondary?.[400]};
-                        --ls-colors-secondary-500: ${themeData.secondary?.[500]};
-                        --ls-colors-secondary-600: ${themeData.secondary?.[600]};
-                        --ls-colors-secondary-700: ${themeData.secondary?.[700]};
-                        --ls-colors-secondary-800: ${themeData.secondary?.[800]};
-                        --ls-colors-secondary-900: ${themeData.secondary?.[900]};
-                        --ls-colors-secondary-950: ${themeData.secondary?.[950]};
-                        --ls-colors-secondary-text: ${themeData.secondary?.text};
-                    }
-                    .headerLogo {
-                        display: ${themeData.headerLogo};
-                    }
-                    .footerLogo {
-                        display: ${themeData.footerLogo};
-                        height: ${themeData.footerLogoHeight};
-                    }
-                ` }) }));
+                .headerLogo {
+                    display: ${headerLogo};
+                }
+            ` }) }));
 };
 export default ColorSchema;

package/dist/components/Common/AddressIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import Jazzicon from "@metamask/jazzicon";
 import { useEffect, useRef } from "react";

package/dist/components/Common/AverageCompletionTime.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AverageCompletionTime = ({ avgCompletionTime }) => {
     if (!avgCompletionTime)
-        return;
+        return null;
     const time = avgCompletionTime?.split(':');
     const hours = Number(time[0]);
     const minutes = Number(time[1]);

package/dist/components/Common/CountDownTimer.js

@@ -4,7 +4,7 @@ import { SwapStatus } from "../../Models/SwapStatus";
 import { useIntercom } from "react-use-intercom";
 import { useAuthState } from "../../context/authContext";
 import { TransactionType } from "../../lib/layerSwapApiClient";
-import { datadogRum } from "@datadog/browser-rum";
+// import { datadogRum } from "@datadog/browser-rum";
 const CountdownTimer = ({ initialTime, swap }) => {
     const { email, userId } = useAuthState();
     const { boot, show, update } = useIntercom();
@@ -47,7 +47,7 @@ const CountdownTimer = ({ initialTime, swap }) => {
         const renderingError = new Error("Transaction is taking longer than expected");
         renderingError.name = `LongTransactionError`;
         renderingError.cause = renderingError;
-        datadogRum.addError(renderingError);
+        // datadogRum.addError(renderingError);
     }
     return (_jsx("div", { className: 'flex items-center space-x-1', children: thresholdElapsed && swap.status !== SwapStatus.UserTransferPending ? (_jsxs("div", { children: [_jsx("span", { children: "Transaction is taking longer than expected " }), _jsx("a", { className: 'underline hover:cursor-pointer', onClick: () => startIntercom(), children: "please contact our support." })] })) : countdown === 0 && swap.status !== SwapStatus.Completed ? (_jsx("div", { children: _jsx("span", { children: "Taking a bit longer than expected" }) })) : swap.status === SwapStatus.Completed && (!countdown || countdown === 0) ? ("") : (_jsxs("div", { className: 'text-secondary-text flex items-center', children: [_jsx("span", { children: "Estimated time:" }), _jsx("span", { className: 'text-primary-text ml-0.5', children: countdown ? formatted : _jsx("div", { className: "h-[10px] mt-1 w-16 ml-1 animate-pulse rounded bg-gray-500" }) })] })) }));
 };

package/dist/components/Common/FormattedAverageCompletionTime.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormattedAverageCompletionTime = ({ avgCompletionTime }) => {
     if (!avgCompletionTime)
-        return;
+        return null;
     const parts = avgCompletionTime.split('.');
     const time = parts[0];
     const [hours, minutes, seconds] = time.split(':').map(parseFloat);

package/dist/components/HeaderWithMenu/index.js

@@ -2,12 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useIntercom } from "react-use-intercom";
 import { useAuthState } from "../../context/authContext";
 import IconButton from "../Buttons/iconButton";
-import GoHomeButton from "../utils/GoHome";
 import { ArrowLeft } from 'lucide-react';
-import ChatIcon from "../Icons/ChatIcon";
 import LayerswapMenu from "../LayerswapMenu";
 import { useQueryState } from "../../context/query";
-import { WalletsHeader } from "../Wallet/WalletComponents/ConnectedWallets";
 // const WalletsHeader = dynamic(() => import("../Wallet/WalletComponents/ConnectedWallets").then((comp) => comp.WalletsHeader), {
 //    loading: () => <></>
 // })
@@ -17,10 +14,6 @@ function HeaderWithMenu({ goBack }) {
     const updateWithProps = () => update({ userId, customAttributes: { email: email, } });
     const query = useQueryState();
     return (_jsxs("div", { className: "w-full grid grid-cols-5 px-6 mt-3 pb-2", children: [goBack &&
-                _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }), !query.hideLogo && _jsx("div", { className: 'justify-self-center self-center col-start-2 col-span-3 mx-auto overflow-hidden md:hidden headerLogo', children: _jsx(GoHomeButton, {}) }), _jsxs("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: [_jsx(WalletsHeader, {}), _jsx(IconButton, { className: "relative hidden md:inline", onClick: () => {
-                            boot();
-                            show();
-                            updateWithProps();
-                        }, icon: _jsx(ChatIcon, { className: "h-6 w-6", strokeWidth: "2" }) }), _jsx("div", { className: "fixed-width-container", children: _jsx(LayerswapMenu, {}) })] })] }));
+                _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }), _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "fixed-width-container", children: _jsx(LayerswapMenu, {}) }) })] }));
 }
 export default HeaderWithMenu;

package/dist/components/Input/Address/AddressNote.js

@@ -4,7 +4,8 @@ import CopyButton from "../../Buttons/copyButton";
 import AddressIcon from "../../Common/AddressIcon";
 const AddressNote = ({ partner, values }) => {
     const { to: destination, destination_address } = values;
-    return (destination && destination_address &&
-        _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-700 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center', children: [_jsx("div", { className: 'flex flex-shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] }));
+    return (destination && destination_address ?
+        _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-2xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-700 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center', children: [_jsx("div", { className: 'flex flex-shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] })
+        : null);
 };
 export default AddressNote;

package/dist/components/Input/Address/AddressPicker/AddressWithIcon.js

@@ -5,8 +5,8 @@ import AddressIcon from "../../../Common/AddressIcon";
 import shortenAddress from "../../../utils/ShortenAddress";
 import { History, ExternalLink, Copy, Check, ChevronDown, WalletIcon, Pencil, Link2, Power } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
-import useCopyClipboard from "../../../../hooks/useCopyClipboard";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../shadcn/tooltip";
+import { useCopyToClipboard } from "@uidotdev/usehooks";
 const AddressWithIcon = ({ addressItem, connectedWallet, partner, network, balance }) => {
     const difference_in_days = addressItem?.date ? Math.round(Math.abs(((new Date()).getTime() - new Date(addressItem.date).getTime()) / (1000 * 3600 * 24))) : undefined;
     const maxWalletNameWidth = calculateMaxWidth(String(balance?.amount));
@@ -59,7 +59,7 @@ const calculateMaxWidth = (balance) => {
     }
 };
 export const ExtendedAddress = ({ address, network, addressClassNames, onDisconnect }) => {
-    const [isCopied, setCopied] = useCopyClipboard();
+    const [isCopied, setCopied] = useCopyToClipboard();
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     return (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsxs(Popover, { open: isPopoverOpen, onOpenChange: () => setPopoverOpen(!isPopoverOpen), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "group-hover/addressItem:underline hover:text-secondary-text transition duration-200 no-underline flex gap-1 items-center cursor-pointer", children: [_jsx("p", { className: `block text-sm font-medium ${addressClassNames}`, children: shortenAddress(address) }), _jsx(ChevronDown, { className: "invisible group-hover/addressItem:visible h-4 w-4" })] }) }), _jsx(TooltipContent, { side: "bottom", children: _jsx("p", { children: address }) })] }) }) }), _jsxs(PopoverContent, { className: "w-full p-2 flex flex-col gap-1 items-stretch", side: "top", children: [_jsxs("div", { onClick: (e) => { e.stopPropagation(), setCopied(address); }, className: "hover:text-primary-text px-2 py-1.5 hover:bg-secondary-600 rounded transition-all duartion-200 flex items-center justify-between gap-5 w-full", children: [_jsx("p", { children: "Copy address" }), isCopied ?
                                     _jsx(Check, { className: "h-4 w-4" })

package/dist/components/Input/Address/AddressPicker/ConnectedWallets/ConnectWalletButton.js

@@ -5,11 +5,18 @@ import { useState } from "react";
 const ConnectWalletButton = ({ provider, onConnect, destination }) => {
     const [isLoading, setIsLoading] = useState(false);
     const connect = async () => {
-        setIsLoading(true);
-        const result = await provider.connectWallet();
-        if (onConnect && result)
-            onConnect(result);
-        setIsLoading(false);
+        try {
+            setIsLoading(true);
+            const result = await provider.connectWallet();
+            if (onConnect && result)
+                onConnect(result);
+        }
+        catch (error) {
+            console.error('Error connecting:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
     };
     return _jsx(_Fragment, { children: _jsx("button", { typeof: "button", onClick: connect, type: "button", className: `py-5 px-6 bg-secondary-700 hover:bg-secondary-600 transition-colors duration-200 rounded-xl ${isLoading && 'cursor-progress opacity-80'}`, children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: "Connect your wallet to browse and select from your addresses" }), _jsx("div", { className: "bg-primary-700/30 border-none !text-primary py-2 rounded-lg text-base font-semibold", children: isLoading ?
                                     _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })

package/dist/components/Input/Address/AddressPicker/ExchangeNote.d.ts

@@ -4,5 +4,5 @@ declare const ExchangeNote: ({ destinationAsset, destinationExchange, destinatio
     destinationAsset: Token | undefined;
     destinationExchange: Exchange;
     destination: RouteNetwork | undefined;
-}) => import("react/jsx-runtime").JSX.Element | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ExchangeNote;

package/dist/components/Input/Address/AddressPicker/ExchangeNote.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Info } from "lucide-react";
 const ExchangeNote = ({ destinationAsset, destinationExchange, destination }) => {
     if (!destinationAsset || !destinationExchange || !destination)
-        return;
+        return null;
     return (_jsxs("div", { className: 'text-left p-4 bg-secondary-800 text-primary-text rounded-lg border border-secondary-500 mt-3 w-full', children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Info, { className: 'h-5 w-5 text-primary-600 mr-3' }), _jsxs("label", { className: "block text-sm md:text-base font-medium leading-6", children: ["How to find your ", destinationExchange.display_name, " deposit address"] })] }), _jsxs("ul", { className: "list-disc font-light space-y-1 text-xs md:text-sm mt-2 ml-8 text-primary-text", children: [_jsx("li", { children: "Go to the Deposits page" }), _jsxs("li", { children: [_jsx("span", { children: "Select" }), _jsx("span", { className: "inline-block mx-1", children: _jsxs("span", { className: 'flex gap-1 items-baseline text-sm ', children: [_jsx("img", { src: destinationAsset.logo, alt: "Project Logo", height: "15", width: "15", className: 'rounded-sm' }), _jsx("span", { className: "text-primary-text", children: destinationAsset.symbol })] }) }), _jsx("span", { children: "as asset" })] }), _jsxs("li", { children: [_jsx("span", { children: "Select" }), _jsx("span", { className: "inline-block mx-1", children: _jsxs("span", { className: 'flex gap-1 items-baseline text-sm ', children: [_jsx("img", { src: destination?.logo || '', alt: "Project Logo", height: "15", width: "15", className: 'rounded-sm' }), _jsx("span", { className: "text-primary-text", children: destination?.display_name })] }) }), _jsx("span", { children: "as network" })] })] })] }));
 };
 export default ExchangeNote;

package/dist/components/Input/RouteIcon.js

@@ -7,6 +7,6 @@ const RouteIcon = (props) => {
         return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-1 top-0.5 z-50", children: _jsx(Info, { className: "!w-4 text-primary-text-placeholder hover:text-primary-text icoooooooooon" }) }) }), _jsx(TooltipContent, { children: _jsxs("p", { className: "max-w-72", children: [_jsx("span", { children: "Transfers" }), " ", _jsx("span", { children: direction }), " ", _jsx("span", { children: "this" }), " ", _jsx("span", { children: type }), " ", _jsx("span", { children: "are not available at the moment. Please try later." })] }) })] });
     if (routeNotFound)
         return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-0.5 top-0.5 z-50", children: _jsx(RouteOff, { className: "!w-3 text-primary-text-placeholder hover:text-primary-text icoooooooooon" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "max-w-72", children: "Route unavailable" }) })] });
-    return undefined;
+    return null;
 };
 export default RouteIcon;

package/dist/components/LayerswapMenu/MenuList.js

@@ -1,21 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Gift, Map, ScrollText, LibraryIcon, Shield, Users, MessageSquarePlus } from "lucide-react";
+import { BookOpen, ScrollText, LibraryIcon, Shield } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAuthDataUpdate, useAuthState, UserType } from "../../context/authContext";
 import TokenService from "../../lib/TokenService";
 import { useIntercom } from "react-use-intercom";
-import ChatIcon from "../Icons/ChatIcon";
 import inIframe from "../utils/inIframe";
-import DiscordLogo from "../Icons/DiscordLogo";
-import GitHubLogo from "../Icons/GitHubLogo";
-import SubstackLogo from "../Icons/SubstackLogo";
-import TwitterLogo from "../Icons/TwitterLogo";
-import Popover from "../Modal/popover";
-import YoutubeLogo from "../Icons/YoutubeLogo";
 import Menu from "./Menu";
 import { MenuStep } from "../../Models/Wizard";
-import SendFeedback from "./Feedback";
-import { WalletsMenu } from "../Wallet/WalletComponents/ConnectedWallets";
 const MenuList = ({ goToStep }) => {
     const { email, userType, userId } = useAuthState();
     const { setUserType } = useAuthDataUpdate();
@@ -41,51 +32,6 @@ const MenuList = ({ goToStep }) => {
     const handleCloseFeedback = () => {
         setOpenFeedbackModal(false);
     };
-    return _jsx("div", { className: "text-sm font-medium focus:outline-none h-full", children: _jsxs(Menu, { children: [_jsx(WalletsMenu, {}), _jsxs(Menu.Group, { children: [_jsx(_Fragment, { children: _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }) }), _jsx(_Fragment, { children: !embedded &&
-                                _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Campaigns, "/campaigns"), icon: _jsx(Gift, { className: "h-5 w-5" }), children: "Campaigns" }) })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => {
-                                boot();
-                                show();
-                                updateWithProps();
-                            }, target: "_blank", icon: _jsx(ChatIcon, { strokeWidth: 2, className: "h-5 w-5" }), children: "Help" }), _jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs for Users" }), _jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/user-docs/partners-and-integrations/', target: "_blank", icon: _jsx(Users, { className: "h-5 w-5" }), children: "Docs for Partners" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] }), _jsx(Menu.Group, { children: _jsx(Popover, { opener: _jsx(Menu.Item, { onClick: () => setOpenFeedbackModal(true), target: "_blank", icon: _jsx(MessageSquarePlus, { className: "h-5 w-5" }), children: "Suggest a Feature" }), isNested: true, show: openFeedbackModal, header: "Suggest a Feature", setShow: setOpenFeedbackModal, popoverId: "feedback", children: _jsx("div", { className: "p-0 md:max-w-md", children: _jsx(SendFeedback, { onSend: handleCloseFeedback }) }) }) }), _jsxs("div", { className: "space-y-3 w-full", children: [_jsx("hr", { className: "border-secondary-500" }), _jsx("p", { className: "text-primary-text-muted flex justify-center my-3", children: "Media links & suggestions:" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 justify-center", children: navigation.social.map((item, index) => (_jsx("a", { target: "_blank", href: item.href, className: `flex relative bg-secondary-700 hover:bg-secondary-600 rounded-md cursor-pointer select-none items-center outline-none text-primary-text ${item.className}`, children: _jsxs("div", { className: "p-2 w-full flex justify-center gap-1", children: [_jsx(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("p", { children: item.name })] }) }, index))) })] }) });
-};
-const navigation = {
-    social: [
-        {
-            name: 'Twitter',
-            href: 'https://twitter.com/layerswap/',
-            icon: (props) => TwitterLogo(props),
-            className: 'plausible-event-name=Twitter'
-        },
-        {
-            name: 'GitHub',
-            href: 'https://github.com/layerswap/layerswapapp/',
-            icon: (props) => GitHubLogo(props),
-            className: 'plausible-event-name=GitHub'
-        },
-        {
-            name: 'Discord',
-            href: 'https://discord.com/invite/KhwYN35sHy/',
-            icon: (props) => DiscordLogo(props),
-            className: 'plausible-event-name=Discord'
-        },
-        {
-            name: 'YouTube',
-            href: 'https://www.youtube.com/@layerswaphq/',
-            icon: (props) => YoutubeLogo(props),
-            className: 'plausible-event-name=Youtube'
-        },
-        {
-            name: 'Substack',
-            href: 'https://layerswap.substack.com/',
-            icon: (props) => SubstackLogo(props),
-            className: 'plausible-event-name=Substack'
-        },
-        {
-            name: 'Roadmap',
-            href: 'https://layerswap.ducalis.io/roadmap/summary/',
-            icon: (props) => _jsx(Map, { ...props }),
-            className: 'plausible-event-name=Roadmap'
-        },
-    ]
+    return _jsx("div", { className: "text-sm font-medium focus:outline-none h-full", children: _jsxs(Menu, { children: [_jsx(Menu.Group, { children: _jsx(_Fragment, { children: _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }) }) }), _jsx(Menu.Group, { children: _jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs" }) }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://docs.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] })] }) });
 };
 export default MenuList;

package/dist/components/Pages/404/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Home } from "lucide-react";
 import Navbar from "../../Common/navbar";

package/dist/components/Pages/Auth/Steps/CodeStep/VerifyEmailCode.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MailOpen } from 'lucide-react';
 import { Form, Formik } from 'formik';

package/dist/components/Pages/Auth/index.d.ts

@@ -1,3 +1,3 @@
 import { FC } from "react";
-import { LayerswapContextProps } from "../../../context/LayerswapContext";
+import { LayerswapContextProps } from "../../../context/LayerswapProvider";
 export declare const Auth: FC<LayerswapContextProps>;