@n1xyz/wallet-widget 0.0.1

package/src/Provider/N1WalletProvider.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { Suspense, useCallback, useEffect, useState } from 'react';
+import { N1WalletModal } from '../Modal/N1WalletModal';
+import { WalletError, WalletErrorCode } from '../errors/types';
+import { N1InternalWalletContext, N1WalletContext } from './context';
+import { N1ModalViewMode, N1SessionMode, N1WalletProviderProps } from './types';
+
+const LazyWalletProvider = React.lazy(() =>
+  import('./LazyWalletProvider').then((mod) => ({
+    default: mod.LazyWalletProvider,
+  }))
+);
+
+// Error boundary to catch WalletErrors
+class WalletErrorBoundary extends React.Component<{
+  children: React.ReactNode;
+  onError: (error: WalletError) => void;
+}> {
+  componentDidCatch(error: Error) {
+    if (error instanceof WalletError) {
+      this.props.onError(error);
+    } else {
+      // Convert unknown errors to WalletError
+      this.props.onError(
+        new WalletError(
+          WalletErrorCode.UNKNOWN,
+          error.message || 'An unexpected error occurred',
+          { originalError: error }
+        )
+      );
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export function N1WalletProvider({
+  children,
+  providedSessionMode,
+  appId,
+  darkMode = true,
+  onError,
+}: N1WalletProviderProps) {
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [ntsInterface, setNtsInterface] = useState<any>(null);
+  const [showLogin, setShowLogin] = useState<boolean>(false);
+  const [sessionPubKey, setSessionPubKey] = useState<Uint8Array | null>(null);
+  const [walletPubKey, setWalletPubKey] = useState<Uint8Array | null>(null);
+  const [userChain, setUserChain] = useState<string | null>(null);
+  const [username, setUsername] = useState<string>('');
+  const [signMessageWithSessionKey, setSignMessageWithSessionKey] = useState<
+    ((message: any) => Promise<any>) | null
+  >(null);
+  const [signMessageWithWalletKey, setSignMessageWithWalletKey] = useState<
+    ((message: any) => Promise<any>) | null
+  >(null);
+  const [showSidebar, setShowSidebar] = useState<boolean>(false);
+  const [startClosingLogin, setStartClosingLogin] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [viewMode, setViewMode] = useState<N1ModalViewMode>(
+    N1ModalViewMode.Connect
+  );
+
+  // Log initialization only once on mount
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log('N1WalletProvider initializing');
+  }, []);
+
+  // dynamic
+  const [address, setAddress] = useState<string>('');
+  const [chain, setChain] = useState<string>('');
+  const [dynamicSdkHasLoaded, setDynamicSdkHasLoaded] = useState<any>(null);
+  const [dynamicHandleLogOut, setDynamicHandleLogOut] = useState<any>(null);
+  const [sessionMode, setSessionMode] = useState<N1SessionMode | null>(null);
+  const [dynamicWallet, setDynamicWallet] = useState<any>(null);
+  const [showDynamicWidget, setShowDynamicWidget] = useState<any>(null);
+
+  // Combine SDK loading and initialization into a single effect
+  useEffect(() => {
+    let mounted = true;
+
+    const loadNTSSDK = async () => {
+      // eslint-disable-next-line no-console
+      console.log('Loading NTS SDK');
+
+      if (providedSessionMode === N1SessionMode.Nord) {
+        // eslint-disable-next-line no-console
+        console.log('Nord mode, skipping NTS SDK load');
+        return;
+      }
+
+      try {
+        const { NTSInterface } = await import('@n1xyz/nts-sdk');
+        if (mounted) {
+          // eslint-disable-next-line no-console
+          console.log('NTS SDK loaded successfully');
+          setNtsInterface(new NTSInterface(process.env.NTS_URL!));
+        }
+      } catch (error) {
+        if (mounted) {
+          // eslint-disable-next-line no-console
+          console.error('Error loading NTS SDK:', error);
+        }
+      }
+    };
+
+    loadNTSSDK();
+
+    return () => {
+      mounted = false;
+    };
+  }, [providedSessionMode]);
+
+  // Separate effect to handle loading state based on both SDKs
+  useEffect(() => {
+    const isDynamicReady =
+      dynamicSdkHasLoaded || providedSessionMode === N1SessionMode.Nord;
+    const isNtsReady =
+      ntsInterface || providedSessionMode === N1SessionMode.Nord;
+
+    setLoading(!isDynamicReady || !isNtsReady);
+  }, [dynamicSdkHasLoaded, ntsInterface, providedSessionMode]);
+
+  const handleError = useCallback(
+    (error: WalletError) => {
+      onError?.(error);
+    },
+    [onError]
+  );
+
+  // Simple function to test error handler
+  const throwTestError = async () => {
+    handleError(
+      new WalletError(
+        WalletErrorCode.WALLET_NOT_FOUND,
+        'Test error: No compatible wallet was found'
+      )
+    );
+  };
+
+  return (
+    <WalletErrorBoundary onError={handleError}>
+      <N1WalletContext.Provider
+        value={{
+          address,
+          appId,
+          chain,
+          isConnected,
+          ntsInterface,
+          sessionMode,
+          sessionPubKey,
+          setShowLogin,
+          showLogin,
+          signMessageWithSessionKey,
+          signMessageWithWalletKey,
+          userChain,
+          username,
+          viewMode,
+          walletPubKey,
+          throwTestError,
+        }}
+      >
+        <N1InternalWalletContext.Provider
+          value={{
+            dynamicHandleLogOut,
+            dynamicWallet,
+            loading,
+            dynamicSdkHasLoaded,
+            handleError,
+            setDynamicSdkHasLoaded,
+            setAddress,
+            setChain,
+            setDynamicHandleLogOut,
+            setDynamicWallet,
+            setIsConnected,
+            setLoading,
+            setNtsInterface,
+            setSessionMode,
+            setSessionPubKey,
+            setShowSidebar,
+            setSignMessageWithSessionKey,
+            setSignMessageWithWalletKey,
+            setStartClosingLogin,
+            setUsername,
+            setUserChain,
+            setViewMode,
+            setWalletPubKey,
+            showSidebar,
+            startClosingLogin,
+            showDynamicWidget,
+            setShowDynamicWidget,
+            darkMode,
+          }}
+        >
+          {children}
+          <N1WalletModal />
+          <Suspense fallback={null}>
+            <LazyWalletProvider />
+          </Suspense>
+        </N1InternalWalletContext.Provider>
+      </N1WalletContext.Provider>
+    </WalletErrorBoundary>
+  );
+}

package/src/Provider/context.ts

@@ -0,0 +1,11 @@
+import { N1WalletState } from './types';
+
+import { createContext } from 'react';
+import { N1InternalWalletState } from './types';
+
+const N1WalletContext = createContext<N1WalletState>({} as N1WalletState);
+const N1InternalWalletContext = createContext<N1InternalWalletState>(
+  {} as N1InternalWalletState
+);
+
+export { N1WalletContext, N1InternalWalletContext };

package/src/Provider/hooks.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { N1WalletContext, N1InternalWalletContext } from './context';
+
+export function useN1WalletContext() {
+  const context = useContext(N1WalletContext);
+  if (context === undefined) {
+    throw new Error(
+      'useN1WalletContext must be used within a N1WalletProvider'
+    );
+  }
+  return context;
+}
+
+export function useN1WalletInternalContext() {
+  const context = useContext(N1InternalWalletContext);
+  if (context === undefined) {
+    throw new Error(
+      'useN1WalletInternalContext must be used within a N1WalletProvider'
+    );
+  }
+  return context;
+}

package/src/Provider/icons/CoinbaseWalletIcon.tsx

@@ -0,0 +1,27 @@
+export function CoinbaseWalletIcon() {
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      version="1.2"
+      baseProfile="tiny"
+      id="Layer_1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 1024 1024"
+      overflow="visible"
+      xmlSpace="preserve"
+    >
+      <path
+        fill="#0052FF"
+        d="M512,0L512,0c282.8,0,512,229.2,512,512l0,0c0,282.8-229.2,512-512,512l0,0C229.2,1024,0,794.8,0,512l0,0  C0,229.2,229.2,0,512,0z"
+      />
+      <path
+        fill="#FFFFFF"
+        d="M512.1,692c-99.4,0-180-80.5-180-180s80.6-180,180-180c89.1,0,163.1,65,177.3,150h181.3  c-15.3-184.8-170-330-358.7-330c-198.8,0-360,161.2-360,360s161.2,360,360,360c188.7,0,343.4-145.2,358.7-330H689.3  C675,627,601.2,692,512.1,692z"
+      />
+    </svg>
+  );
+}

package/src/Provider/icons/ConnectionDotsSVG.tsx

@@ -0,0 +1,19 @@
+export function ConnectionDotsSVG() {
+  return (
+    <svg
+      width="56"
+      height="12"
+      viewBox="0 0 56 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="19.5" cy="2.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="36.5" cy="2.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="2.5" cy="2.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="53.5" cy="2.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="12.5" cy="9.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="29.5" cy="9.5" r="2.5" fill="#6e6e6e"></circle>
+      <circle cx="46.5" cy="9.5" r="2.5" fill="#6e6e6e"></circle>
+    </svg>
+  );
+}

package/src/Provider/icons/MetamaskIcon.tsx

@@ -0,0 +1,58 @@
+export function MetamaskIcon() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.5em"
+        height="1.5em"
+        viewBox="0 0 256 240"
+      >
+        <path fill="#e17726" d="M250.066 0L140.219 81.279l20.427-47.9z" />
+        <path
+          fill="#e27625"
+          d="m6.191.096l89.181 33.289l19.396 48.528zM205.86 172.858l48.551.924l-16.968 57.642l-59.243-16.311zm-155.721 0l27.557 42.255l-59.143 16.312l-16.865-57.643z"
+        />
+        <path
+          fill="#e27625"
+          d="m112.131 69.552l1.984 64.083l-59.371-2.701l16.888-25.478l.214-.245zm31.123-.715l40.9 36.376l.212.244l16.888 25.478l-59.358 2.7zM79.435 173.044l32.418 25.259l-37.658 18.181zm97.136-.004l5.131 43.445l-37.553-18.184z"
+        />
+        <path
+          fill="#d5bfb2"
+          d="m144.978 195.922l38.107 18.452l-35.447 16.846l.368-11.134zm-33.967.008l-2.909 23.974l.239 11.303l-35.53-16.833z"
+        />
+        <path
+          fill="#233447"
+          d="m100.007 141.999l9.958 20.928l-33.903-9.932zm55.985.002l24.058 10.994l-34.014 9.929z"
+        />
+        <path
+          fill="#cc6228"
+          d="m82.026 172.83l-5.48 45.04l-29.373-44.055zm91.95.001l34.854.984l-29.483 44.057zm28.136-44.444l-25.365 25.851l-19.557-8.937l-9.363 19.684l-6.138-33.849zm-148.237 0l60.435 2.749l-6.139 33.849l-9.365-19.681l-19.453 8.935z"
+        />
+        <path
+          fill="#e27525"
+          d="m52.166 123.082l28.698 29.121l.994 28.749zm151.697-.052l-29.746 57.973l1.12-28.8zm-90.956 1.826l1.155 7.27l2.854 18.111l-1.835 55.625l-8.675-44.685l-.003-.462zm30.171-.101l6.521 35.96l-.003.462l-8.697 44.797l-.344-11.205l-1.357-44.862z"
+        />
+        <path
+          fill="#f5841f"
+          d="m177.788 151.046l-.971 24.978l-30.274 23.587l-6.12-4.324l6.86-35.335zm-99.471 0l30.399 8.906l6.86 35.335l-6.12 4.324l-30.275-23.589z"
+        />
+        <path
+          fill="#c0ac9d"
+          d="m67.018 208.858l38.732 18.352l-.164-7.837l3.241-2.845h38.334l3.358 2.835l-.248 7.831l38.487-18.29l-18.728 15.476l-22.645 15.553h-38.869l-22.63-15.617z"
+        />
+        <path
+          fill="#161616"
+          d="m142.204 193.479l5.476 3.869l3.209 25.604l-4.644-3.921h-36.476l-4.556 4l3.104-25.681l5.478-3.871z"
+        />
+        <path
+          fill="#763e1a"
+          d="M242.814 2.25L256 41.807l-8.235 39.997l5.864 4.523l-7.935 6.054l5.964 4.606l-7.897 7.191l4.848 3.511l-12.866 15.026l-52.77-15.365l-.457-.245l-38.027-32.078zm-229.628 0l98.326 72.777l-38.028 32.078l-.457.245l-52.77 15.365l-12.866-15.026l4.844-3.508l-7.892-7.194l5.952-4.601l-8.054-6.071l6.085-4.526L0 41.809z"
+        />
+        <path
+          fill="#f5841f"
+          d="m180.392 103.99l55.913 16.279l18.165 55.986h-47.924l-33.02.416l24.014-46.808zm-104.784 0l-17.151 25.873l24.017 46.808l-33.005-.416H1.631l18.063-55.985zm87.776-70.878l-15.639 42.239l-3.319 57.06l-1.27 17.885l-.101 45.688h-30.111l-.098-45.602l-1.274-17.986l-3.32-57.045l-15.637-42.239z"
+        />
+      </svg>
+    </>
+  );
+}

package/src/Provider/icons/PhantomIcon.tsx

@@ -0,0 +1,26 @@
+export function PhantomIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 1200 1200"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_2800_140397)">
+        <rect width="1200" height="1200" fill="#9886E5" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M516.641 777.604C466.226 854.856 381.747 952.618 269.335 952.618C216.194 952.618 165.098 930.741 165.098 835.714C165.098 593.704 495.521 219.066 802.1 219.066C976.509 219.066 1046 340.071 1046 477.484C1046 653.865 931.544 855.54 817.77 855.54C781.661 855.54 763.948 835.714 763.948 804.267C763.948 796.063 765.311 787.175 768.036 777.604C729.202 843.918 654.261 905.446 584.089 905.446C532.992 905.446 507.103 873.315 507.103 828.194C507.103 811.787 510.51 794.696 516.641 777.604ZM930.877 472.714C930.877 512.755 907.253 532.776 880.826 532.776C853.998 532.776 830.775 512.755 830.775 472.714C830.775 432.673 853.998 412.653 880.826 412.653C907.253 412.653 930.877 432.673 930.877 472.714ZM780.73 472.714C780.73 512.755 757.105 532.776 730.678 532.776C703.851 532.776 680.627 512.755 680.627 472.714C680.627 432.673 703.851 412.653 730.678 412.653C757.105 412.653 780.73 432.673 780.73 472.714Z"
+          fill="#FFFDF8"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2800_140397">
+          <rect width="1200" height="1200" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/Provider/icons/UserIcon.tsx

@@ -0,0 +1,15 @@
+export function UserIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 20.25a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/Provider/icons/WalletConnectIcon.tsx

@@ -0,0 +1,15 @@
+export function WalletConnectIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="#388eff"
+        d="M4.913 7.519c3.915-3.831 10.26-3.831 14.174 0l.471.461a.483.483 0 0 1 0 .694l-1.611 1.577a.252.252 0 0 1-.354 0l-.649-.634c-2.73-2.673-7.157-2.673-9.887 0l-.694.68a.255.255 0 0 1-.355 0L4.397 8.719a.482.482 0 0 1 0-.693l.516-.507Zm17.506 3.263l1.434 1.404a.483.483 0 0 1 0 .694l-6.466 6.331a.508.508 0 0 1-.709 0l-4.588-4.493a.126.126 0 0 0-.178 0l-4.589 4.493a.508.508 0 0 1-.709 0L.147 12.88a.483.483 0 0 1 0-.694l1.434-1.404a.508.508 0 0 1 .709 0l4.589 4.493c.05.048.129.048.178 0l4.589-4.493a.508.508 0 0 1 .709 0l4.589 4.493c.05.048.128.048.178 0l4.589-4.493a.507.507 0 0 1 .708 0Z"
+      />
+    </svg>
+  );
+}

package/src/Provider/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { N1WalletProvider } from './N1WalletProvider';
+export { useN1WalletContext, useN1WalletInternalContext } from './hooks';

package/src/Provider/types.ts

@@ -0,0 +1,77 @@
+import type { WalletError } from '../errors/types';
+
+export enum N1ModalViewMode {
+  Connect,
+  CreateSession,
+  Signing,
+  CreatingUser,
+  Success,
+  NoWhitelist,
+}
+
+export enum N1SessionMode {
+  Nord,
+  NTS,
+}
+
+export interface N1WalletProviderProps {
+  children: React.ReactNode;
+  providedSessionMode: N1SessionMode;
+  appId: string;
+  darkMode?: boolean;
+  onError?: (error: WalletError) => void;
+}
+
+export interface N1WalletState {
+  address: string;
+  appId: string | null;
+  chain: string;
+  isConnected: boolean;
+  ntsInterface: any;
+  sessionMode: N1SessionMode | null;
+  sessionPubKey: Uint8Array | null;
+  setShowLogin: (show: boolean) => void;
+  showLogin: boolean;
+  signMessageWithSessionKey: ((message: any) => Promise<any>) | null;
+  signMessageWithWalletKey: ((message: any) => Promise<any>) | null;
+  userChain: string | null;
+  username: string;
+  viewMode: N1ModalViewMode;
+  walletPubKey: Uint8Array | null;
+  throwTestError: () => Promise<void>;
+}
+
+export interface N1InternalWalletState {
+  dynamicHandleLogOut: any;
+  dynamicWallet: any;
+  loading: boolean;
+  dynamicSdkHasLoaded: any;
+  handleError: (error: WalletError) => void;
+  setDynamicSdkHasLoaded: (loaded: any) => void;
+  setAddress: (address: string) => void;
+  setChain: (chain: string) => void;
+  setDynamicHandleLogOut: (handler: any) => void;
+  setDynamicWallet: (wallet: any) => void;
+  setIsConnected: (connected: boolean) => void;
+  setLoading: (loading: boolean) => void;
+  setNtsInterface: (nts: any) => void;
+  setSessionMode: (mode: N1SessionMode | null) => void;
+  setSessionPubKey: (key: Uint8Array) => void;
+  setShowSidebar: (show: boolean) => void;
+  setSignMessageWithSessionKey: React.Dispatch<
+    React.SetStateAction<((message: any) => Promise<any>) | null>
+  >;
+  setSignMessageWithWalletKey: React.Dispatch<
+    React.SetStateAction<((message: any) => Promise<any>) | null>
+  >;
+  setStartClosingLogin: (closing: boolean) => void;
+  setUsername: (username: string) => void;
+  setUserChain: (chain: string) => void;
+  setViewMode: (mode: N1ModalViewMode) => void;
+  setWalletPubKey: (key: Uint8Array) => void;
+  showSidebar: boolean;
+  startClosingLogin: boolean;
+  showDynamicWidget: any;
+  setShowDynamicWidget: (show: any) => void;
+  darkMode: boolean;
+}

package/src/WidgetButton/N1ConnectButton.tsx

@@ -0,0 +1,72 @@
+import BlockiesSvg from 'blockies-react-svg';
+import React, { useEffect, useState } from 'react';
+import {
+  useN1WalletContext,
+  useN1WalletInternalContext,
+} from '../Provider/hooks';
+import { logger } from '../utils/logger';
+
+export function N1ConnectButton(_props: {
+  label: string;
+  children?: React.ReactNode;
+}) {
+  const { isConnected, setShowLogin, address } = useN1WalletContext();
+  const [toOpen, setToOpen] = useState(false);
+  const { setShowSidebar, loading, darkMode, showSidebar } =
+    useN1WalletInternalContext();
+  const addressText =
+    isConnected && address.substring(0, 9) + '...' + address.slice(-3);
+
+  const showLoginFn = () => {
+    setShowLogin(true);
+  };
+
+  useEffect(() => {
+    if (!loading && toOpen) {
+      showLoginFn();
+      setToOpen(false);
+    }
+  }, [loading]);
+
+  return (
+    <div className={darkMode ? 'dark' : ''}>
+      <div className="flex">
+        {!isConnected && !loading && (
+          <div
+            className="rounded-xl shadow cursor-pointer px-3 py-2 duration-300 hover:bg-stone-100 text-sm flex items-center justify-center h-10 min-w-24 group-hover:opacity-80 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200 border border-neutral-200 dark:border-neutral-700"
+            onClick={showLoginFn}
+          >
+            <span className="font-bold mr-0.5">Connect</span>
+          </div>
+        )}
+        {loading && !isConnected && (
+          <div
+            className="rounded-xl shadow cursor-pointer px-3 py-2 duration-300 hover:opacity-80 text-sm flex items-center justify-center h-10 min-w-24 group-hover:opacity-80 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200 border border-neutral-200 dark:border-neutral-700"
+            onClick={() => setToOpen(true)}
+          >
+            <span className="font-bold mr-0.5">Connect</span>
+          </div>
+        )}
+        {isConnected && (
+          <div className="relative group">
+            <div
+              className="rounded-xl shadow cursor-pointer px-3 py-2 duration-300 hover:opacity-80 text-sm flex items-center justify-start h-10 min-w-24 group-hover:opacity-80 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200 border border-neutral-200 dark:border-neutral-700"
+              onClick={() => {
+                logger.debug('ShowSidebar');
+                setShowSidebar(true);
+              }}
+            >
+              <div className="h-6 w-6 rounded-full">
+                <BlockiesSvg
+                  address={address}
+                  className="drop-shadow w-full h-full rounded-full"
+                />
+              </div>
+              <div className="ml-2">{addressText}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/LazyLoadWrapper.tsx

@@ -0,0 +1,19 @@
+import React, { Suspense, ComponentType } from 'react';
+
+interface LazyLoadWrapperProps {
+  component: ComponentType<any>;
+  fallback?: React.ReactNode;
+  props?: Record<string, any>;
+}
+
+export function LazyLoadWrapper({
+  component: Component,
+  fallback = <></>,
+  props = {},
+}: LazyLoadWrapperProps) {
+  return (
+    <Suspense fallback={fallback}>
+      <Component {...props} />
+    </Suspense>
+  );
+}

package/src/config.ts

@@ -0,0 +1,2 @@
+export const PUBLIC_DISCORD_CLIENT_ID = '1197692401939136573';
+export const PUBLIC_DISCORD_APP_URI = 'jSUqXiay1C2PM3hzSY8KdXnX8aEKiISn';

package/src/errors/types.ts

@@ -0,0 +1,49 @@
+export enum WalletErrorCode {
+  CONNECTION_FAILED = 'CONNECTION_FAILED',
+  WALLET_NOT_FOUND = 'WALLET_NOT_FOUND',
+  USER_REJECTED = 'USER_REJECTED',
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  INVALID_CHAIN = 'INVALID_CHAIN',
+  UNKNOWN = 'UNKNOWN',
+  TRANSACTION_FAILED = 'TRANSACTION_FAILED',
+}
+
+export class WalletError extends Error {
+  constructor(
+    public code: WalletErrorCode,
+    message: string,
+    public details?: Record<string, any>
+  ) {
+    super(message);
+    this.name = 'WalletError';
+  }
+
+  // Helper method to convert to a format that can be easily displayed
+  toDisplayFormat() {
+    return {
+      title: this.getErrorTitle(),
+      message: this.message,
+      code: this.code,
+      details: this.details ? JSON.stringify(this.details, null, 2) : undefined,
+    };
+  }
+
+  private getErrorTitle(): string {
+    switch (this.code) {
+      case WalletErrorCode.CONNECTION_FAILED:
+        return 'Connection Failed';
+      case WalletErrorCode.WALLET_NOT_FOUND:
+        return 'Wallet Not Found';
+      case WalletErrorCode.USER_REJECTED:
+        return 'Action Rejected';
+      case WalletErrorCode.NETWORK_ERROR:
+        return 'Network Error';
+      case WalletErrorCode.INVALID_CHAIN:
+        return 'Invalid Chain';
+      case WalletErrorCode.TRANSACTION_FAILED:
+        return 'Transaction Failed';
+      default:
+        return 'Wallet Error';
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import './main.css';
+export { N1WalletProvider } from './Provider/N1WalletProvider';
+export { N1ModalViewMode } from './Provider/types';
+export { N1ConnectButton } from './WidgetButton/N1ConnectButton';
+export { useN1WalletContext } from './Provider/hooks';

package/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utils/lazyLoad.ts

@@ -0,0 +1,12 @@
+import { lazy } from 'react';
+
+export function lazyLoad(
+  importFunc: () => Promise<{ [key: string]: any }>,
+  name = 'default'
+) {
+  return lazy(() =>
+    importFunc().then((module) => ({
+      default: module[name],
+    }))
+  );
+}