@n1xyz/wallet-widget 0.0.1 → 0.0.4

package/src/Modal/N1WalletModal.tsx

@@ -1,275 +0,0 @@
-import React, { useEffect, useState, lazy, Suspense } from 'react';
-import {
-  useN1WalletContext,
-  useN1WalletInternalContext,
-} from '../Provider/hooks';
-import {
-  createWebSession,
-  getSessionKeysFromLocalStorage,
-  getUser,
-} from '../Logic/utils';
-import { getEd25519PublicKey, signEd25519, bs58Decode } from '@n1xyz/nts-sdk';
-import { N1ModalViewMode } from '../Provider/types';
-import { logger } from '../utils/logger';
-import { WalletError, WalletErrorCode } from '../errors/types';
-
-// Lazy load components
-const ConnectView = lazy(() =>
-  import('./ConnectView').then((mod) => ({ default: mod.ConnectView }))
-);
-const CreateSessionView = lazy(() =>
-  import('./CreateSessionView').then((mod) => ({
-    default: mod.CreateSessionView,
-  }))
-);
-const SigningView = lazy(() =>
-  import('./SigningView').then((mod) => ({ default: mod.SigningView }))
-);
-const CreateUserView = lazy(() =>
-  import('./CreateUserView').then((mod) => ({ default: mod.CreateUserView }))
-);
-const SuccessView = lazy(() =>
-  import('./SuccessView').then((mod) => ({ default: mod.SuccessView }))
-);
-const N1Sidebar = lazy(() =>
-  import('./Sidebar/N1Sidebar').then((mod) => ({ default: mod.N1Sidebar }))
-);
-const NoWhitelistView = lazy(() =>
-  import('./NoWhitelistView').then((mod) => ({ default: mod.NoWhitelistView }))
-);
-
-const LoadingFallback = () => (
-  <div className="flex items-center justify-center w-full h-full">
-    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
-  </div>
-);
-
-export function N1WalletModal() {
-  const { showLogin, setShowLogin, viewMode } = useN1WalletContext();
-
-  const {
-    setViewMode,
-    setUsername,
-    setSessionPubKey,
-    setSignMessageWithSessionKey,
-    setIsConnected,
-    setWalletPubKey,
-    setStartClosingLogin,
-    startClosingLogin,
-    setLoading,
-    setAddress,
-    dynamicWallet,
-    dynamicSdkHasLoaded,
-    darkMode,
-    handleError,
-    showSidebar,
-  } = useN1WalletInternalContext();
-
-  const [showLoginAnimation, setShowLoginAnimation] = useState(false);
-
-  // Handle loading state
-  useEffect(() => {
-    if (dynamicSdkHasLoaded || dynamicWallet) {
-      setLoading(false);
-    }
-  }, [dynamicSdkHasLoaded, dynamicWallet]);
-
-  // Initialize session when wallet is connected
-  useEffect(() => {
-    logger.debug('N1WalletModal attempt to call initializeSession...');
-
-    const initializeSession = async () => {
-      // If wallet is not connected, or not in connect mode, skip
-      if (!dynamicWallet || viewMode !== N1ModalViewMode.Connect) {
-        return;
-      }
-
-      // Wallet is connected or we're in connect mode
-      // TODO: make this clearer/ more organized
-      try {
-        logger.debug('Initialize Session...');
-
-        if (dynamicWallet) {
-          // Check whitelist status first
-          const response = await fetch(
-            'https://argus-1g4n.onrender.com/api/db/verifyWhitelist',
-            {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({ address: dynamicWallet.address }),
-            }
-          );
-
-          const whitelistData = await response.json();
-
-          if (!whitelistData.isWhitelisted) {
-            logger.info('Wallet not whitelisted');
-            setViewMode(N1ModalViewMode.NoWhitelist);
-            return;
-          }
-        }
-
-        logger.group('Session Initialization');
-        console.log('Session Initialization started');
-        try {
-          // Get wallet public key
-          const walletPubKey =
-            dynamicWallet.chain === 'SOL'
-              ? bs58Decode(dynamicWallet.address)
-              : Uint8Array.from(
-                  Buffer.from(dynamicWallet.address.slice(2), 'hex')
-                );
-          setWalletPubKey(walletPubKey);
-
-          // Check for existing session
-          const sessionData = getSessionKeysFromLocalStorage(
-            dynamicWallet.address
-          );
-          if (!sessionData) {
-            logger.info(
-              'No existing session found, transitioning to CreateSession'
-            );
-            setViewMode(N1ModalViewMode.CreateSession);
-            return;
-          }
-          logger.debug('Session time', sessionData.createdAt);
-          logger.debug(
-            'Session time',
-            new Date(sessionData.createdAt).getTime()
-          );
-          logger.debug('Current time', Date.now());
-          if (
-            new Date(sessionData.createdAt).getTime() <
-            Date.now() - 1000 * 60 * 60 * 24 * 30
-          ) {
-            logger.info('Session expired');
-            // TODO: create a welcome back view + allow them to logout
-            // Since we know the wallet already, we only need a new session key
-            setViewMode(N1ModalViewMode.CreateSession);
-            return;
-          }
-
-          // Initialize session with existing keys
-          const sessionPubKey = await getEd25519PublicKey(
-            sessionData.ed25519PrivateKey
-          );
-          logger.debug('Initializing with existing session key');
-          setSessionPubKey(sessionPubKey);
-
-          const signFn = async (message: Uint8Array) => {
-            console.log('zhoooooo');
-            console.log('signFn called', {
-              message,
-              stack: new Error().stack, // This will show the call stack
-            });
-            return await signEd25519(message, sessionData.ed25519PrivateKey);
-          };
-          console.log('zeeeeebrta');
-          setSignMessageWithSessionKey(() => signFn);
-          setAddress(dynamicWallet.address);
-
-          // Create web session and get user data
-          await createWebSession(signFn, sessionPubKey, walletPubKey);
-          const user = await getUser();
-          const storedUsername = localStorage.getItem(
-            `n1_${dynamicWallet.address}_username`
-          );
-
-          if (user?.name || storedUsername) {
-            logger.info('User found, completing login');
-            const username = user?.name || storedUsername;
-            setIsConnected(true);
-            setUsername(username!);
-            localStorage.setItem(
-              `n1_${dynamicWallet.address}_username`,
-              username!
-            );
-            setStartClosingLogin(true);
-          } else {
-            logger.info('No user found, transitioning to CreateUser');
-            setViewMode(N1ModalViewMode.CreatingUser);
-          }
-        } catch (error) {
-          logger.error('Session initialization failed:', error);
-          handleError(
-            new WalletError(
-              WalletErrorCode.CONNECTION_FAILED,
-              'Failed to initialize session',
-              { originalError: error }
-            )
-          );
-        } finally {
-          logger.groupEnd();
-        }
-      } catch (error) {
-        logger.error('Whitelist check failed:', error);
-        handleError(
-          new WalletError(
-            WalletErrorCode.CONNECTION_FAILED,
-            'Failed to check whitelist',
-            { originalError: error }
-          )
-        );
-      }
-    };
-
-    initializeSession();
-  }, [dynamicWallet, dynamicSdkHasLoaded, viewMode]);
-
-  // Handle modal visibility
-  useEffect(() => {
-    if (showLogin) {
-      setStartClosingLogin(false);
-      setShowLoginAnimation(true);
-    }
-  }, [showLogin]);
-
-  useEffect(() => {
-    if (startClosingLogin) {
-      setShowLoginAnimation(false);
-      const timeout = setTimeout(() => {
-        setShowLogin(false);
-        setStartClosingLogin(false);
-      }, 700);
-      return () => clearTimeout(timeout);
-    }
-  }, [startClosingLogin, setShowLogin, setStartClosingLogin]);
-
-  if (!showLogin && !showSidebar) return null;
-
-  console.log('SHOW', showSidebar);
-
-  return (
-    <div className={darkMode ? 'dark' : ''}>
-      {showLogin && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div
-            className={`duration-500 ease-in-out font-monument w-screen h-screen fixed top-0 left-0 flex items-center justify-center z-100 ${
-              showLoginAnimation ? 'opacity-100' : 'opacity-0'
-            }`}
-            style={{
-              backgroundColor: 'rgba(0, 0, 0, 0.5)',
-              backdropFilter: 'blur(4px)',
-            }}
-          >
-            <Suspense fallback={<LoadingFallback />}>
-              {viewMode === N1ModalViewMode.Connect && <ConnectView />}
-              {viewMode === N1ModalViewMode.CreateSession && (
-                <CreateSessionView />
-              )}
-              {viewMode === N1ModalViewMode.Signing && <SigningView />}
-              {viewMode === N1ModalViewMode.CreatingUser && <CreateUserView />}
-              {viewMode === N1ModalViewMode.Success && <SuccessView />}
-              {viewMode === N1ModalViewMode.NoWhitelist && <NoWhitelistView />}
-            </Suspense>
-          </div>
-        </div>
-      )}
-      <Suspense fallback={<LoadingFallback />}>
-        <N1Sidebar />
-      </Suspense>
-    </div>
-  );
-}

package/src/Modal/NoWhitelistView.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import {
-  useN1WalletInternalContext,
-  useN1WalletContext,
-} from '../Provider/hooks';
-import { N1ModalViewMode } from '../Provider/types';
-import { ModalHeader } from './ModalHeader';
-
-export function NoWhitelistView() {
-  const { setViewMode, dynamicHandleLogOut, setIsConnected } =
-    useN1WalletInternalContext();
-  const { address } = useN1WalletContext();
-
-  function disconnect() {
-    // TODO: create a util function for disconnecting and clearing local storage
-    dynamicHandleLogOut();
-    if (typeof window !== 'undefined') {
-      localStorage.clear();
-      if ('caches' in window) {
-        caches.keys().then(function (cacheNames) {
-          cacheNames.forEach(function (cacheName) {
-            caches.delete(cacheName);
-          });
-        });
-      }
-      window.location.reload();
-    }
-
-    setViewMode(N1ModalViewMode.Connect);
-    setIsConnected(false);
-  }
-
-  const addressText = address
-    ? `${address.substring(0, 6)}...${address.slice(-4)}`
-    : '';
-
-  return (
-    <div className="rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200">
-      <ModalHeader />
-      <div className="mt-6 text-center">
-        <p className="text-lg mb-4">Sorry, your wallet is not whitelisted.</p>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
-          N1 is currently available only for our early developer access program.
-          Please reach out to us if you&apos;d like to join.
-        </p>
-        <button
-          onClick={() => window.open('https://tally.so/r/wM8KRg', '_blank')}
-          className="w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 text-white bg-neutral-900 dark:bg-white dark:text-black mb-4"
-        >
-          Request Early Access
-        </button>
-        <button
-          onClick={disconnect}
-          className="w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800"
-        >
-          Disconnect {addressText}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/Modal/Sidebar/N1Sidebar.tsx

@@ -1,172 +0,0 @@
-import BlockiesSvg from 'blockies-react-svg';
-import { useEffect, useState } from 'react';
-import { N1ModalViewMode } from '../../Provider/types';
-import {
-  useN1WalletContext,
-  useN1WalletInternalContext,
-} from '../../Provider/hooks';
-
-export function N1Sidebar(_: any) {
-  const [closing, setClosing] = useState(false);
-  const { username, isConnected, address } = useN1WalletContext();
-  const {
-    setShowSidebar,
-    showSidebar,
-    setStartClosingLogin,
-    dynamicHandleLogOut,
-  } = useN1WalletInternalContext();
-  const addressText =
-    isConnected && address.substring(0, 9) + '...' + address.slice(-3);
-
-  const { setViewMode, setIsConnected } = useN1WalletInternalContext();
-
-  function disconnect() {
-    dynamicHandleLogOut();
-    setViewMode(N1ModalViewMode.Connect);
-    setIsConnected(false);
-    setClosing(true);
-    setStartClosingLogin(true);
-  }
-
-  useEffect(() => {
-    if (showSidebar) {
-      setClosing(false);
-    }
-  }, [showSidebar]);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (closing) {
-      timeout = setTimeout(() => {
-        setShowSidebar(false);
-        setClosing(false);
-      }, 700);
-    }
-    return () => clearTimeout(timeout);
-  }, [closing, setShowSidebar]);
-
-  return (
-    <div
-      className={
-        'fixed inset-0 bg-neutral-400/45 dark:bg-neutral-700/45 h-screen w-screen duration-500 ease-in-out z-[9999] flex items-center justify-end py-3 backdrop-blur-sm ' +
-        (!showSidebar && 'hidden pointer-events-none') +
-        (closing ? ' opacity-0' : ' opacity-100')
-      }
-    >
-      {showSidebar && (
-        <div
-          className={'w-screen h-screen fixed top-0 left-0'}
-          onClick={() => setClosing(true)}
-        />
-      )}
-      {showSidebar && (
-        <div
-          className={
-            'relative h-full py-6 pl-6 pr-8 bg-white dark:bg-neutral-900 shadow-xl border-2 border-neutral-200 dark:border-neutral-700 rounded-l-2xl rounded-b-2xl rounded-t-2xl duration-500 ease-in-out overflow-hidden ' +
-            (closing ? 'translate-x-full' : 'translate-x-0')
-          }
-        >
-          <div className={'flex flex-col'}>
-            <div className="flex w-full mb-4">
-              <div className="w-16 h-16 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center justify-center relative">
-                <div className="overflow-hidden rounded-full w-16 h-16">
-                  <BlockiesSvg
-                    address={address}
-                    className="drop-shadow w-full h-full rounded-[20px]"
-                  />
-                </div>
-              </div>
-              <div className={'flex flex-col pl-3 py-2'}>
-                <div
-                  className={
-                    'font-extrabold text-neutral-900 dark:text-stone-200'
-                  }
-                >
-                  {username}
-                </div>
-                <div
-                  className={
-                    'font-extrabold text-neutral-400 dark:text-neutral-500'
-                  }
-                >
-                  {addressText}
-                </div>
-              </div>
-            </div>
-
-            {/* <div
-              className={
-                "mt-4 rounded-2xl flex flex-col items-center justify-center h-24 w-full p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 border-neutral-200 dark:border-neutral-700 border text-neutral-700 dark:text-neutral-300 cursor-pointer"
-              }
-            >
-              <div
-                className={"bg-orange-400 rounded-sm h-4 w-4 mb-2 rotate-45"}
-              ></div>
-              <div className={"font-bold"}>Hub</div>
-              <div className={"text-xs"}>Go to N1 Hub</div>
-            </div> */}
-            {/* <div
-              className={
-                "mt-4 rounded-2xl flex flex-col items-center justify-center h-24 w-full p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 border-neutral-200 dark:border-neutral-700 border text-neutral-700 dark:text-neutral-300 cursor-pointer"
-              }
-            >
-              <div
-                className={"bg-blue-400 rounded-sm h-4 w-4 mb-2 rotate-45"}
-              ></div>
-              <div className={"font-bold"}>Swap</div>
-              <div className={"text-xs"}>Go to N1 Hub</div>
-            </div> */}
-
-            <div
-              className={
-                'mt-4 rounded-2xl flex flex-col items-center justify-center h-24 w-full p-2 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 border-neutral-200 dark:border-neutral-700 border text-neutral-700 dark:text-neutral-300 cursor-pointer'
-              }
-              onClick={disconnect}
-            >
-              <div
-                className={'bg-red-400 rounded-sm h-4 w-4 mb-2 rotate-45'}
-              ></div>
-              <div className={'font-bold'}>Disconnect</div>
-              <div className={'text-xs'}>Log out from the application</div>
-            </div>
-
-            <div
-              className={
-                'justify-center w-full flex text-xs mt-8 mb-6 items-center'
-              }
-            >
-              <div
-                className={'h-0.5 bg-neutral-300 dark:bg-neutral-700 w-16 mx-2'}
-              ></div>
-              <div
-                className={'text-neutral-600 dark:text-neutral-400 font-bold'}
-              >
-                Other apps
-              </div>
-              <div
-                className={'h-0.5 bg-neutral-300 dark:bg-neutral-700 w-16 mx-2'}
-              ></div>
-            </div>
-            <div className={'flex flex-col gap-y-2'}>
-              <div className="cursor-pointer flex flex-col flex-shrink-0 mr-6 w-full h-48 bg-neutral-900 dark:bg-black rounded-xl overflow-hidden relative">
-                <div
-                  className={
-                    'absolute flex flex-row items-center justify-between bottom-0 w-full bg-gradient-to-t px-5 py-3 from-neutral-900 dark:from-black'
-                  }
-                >
-                  <div className="flex flex-row gap-3 items-center">
-                    <div className="w-10 h-10 relative rounded-lg overflow-hidden"></div>
-                    <div className="flex flex-col leading-none">
-                      <div className="text-white">Nos</div>
-                      <div className="text-neutral-200">Perp Dex</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/Modal/SigningView.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ModalHeader } from './ModalHeader';
-
-export function SigningView() {
-  return (
-    <div className="rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200">
-      {/* Header */}
-      <ModalHeader />
-
-      <div className="flex flex-col items-center justify-center">
-        <div className="animate-spin-slow w-16 h-16 border-4 rounded-full border-neutral-200 dark:border-neutral-700 border-t-neutral-900 dark:border-t-white" />
-        <p className="text-sm mb-4 mt-6 text-neutral-500 dark:text-neutral-400">
-          Please sign the message to authenticate
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/Modal/SuccessView.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { ModalHeader } from './ModalHeader';
-import { useN1WalletInternalContext } from '../Provider/hooks';
-
-export function SuccessView() {
-  const { setViewMode, setStartClosingLogin } = useN1WalletInternalContext();
-  const close = () => {
-    setStartClosingLogin(true);
-  };
-
-  return (
-    <div className="rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200">
-      <ModalHeader />
-
-      <div className={'rounded-[25px] overflow-hidden mb-4'}>
-        <img
-          src={
-            'https://cdn.midjourney.com/17b152e3-2c93-4d00-b4cc-860d787a4994/0_2.png'
-          }
-          className={'w-full'}
-        />
-      </div>
-
-      <div className="my-2">
-        <div className="space-y-2">
-          <button
-            className="w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 text-white bg-neutral-900 dark:bg-white dark:text-neutral-900"
-            onClick={close}
-          >
-            Success! Continue
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/Provider/LazyWalletProvider.tsx

@@ -1,136 +0,0 @@
-import { useEffect, useState, useRef } from 'react';
-import { useN1WalletInternalContext } from './hooks';
-import { logger } from '../utils/logger';
-
-const getSettings = (darkMode: boolean) => ({
-  initialAuthenticationMode: 'connect-only',
-  environmentId: '9a47561c-6a0b-4a5b-ace1-12621c11cebd',
-  theme: {
-    mode: darkMode ? 'dark' : 'light',
-  },
-  events: {
-    onAuthSuccess: (args: any) => {
-      console.log('onAuthSuccess was called', args);
-    },
-  },
-});
-
-function DynamicContextConsumer({ children }: { children: any }) {
-  const {
-    setDynamicWallet,
-    setAddress,
-    setDynamicSdkHasLoaded,
-    setShowDynamicWidget,
-    darkMode,
-    setDynamicHandleLogOut,
-  } = useN1WalletInternalContext();
-
-  const [DynamicContext, setDynamicContext] = useState<any>(null);
-  const showAuthFlowRef = useRef<((show: boolean) => void) | null>(null);
-
-  useEffect(() => {
-    import('@dynamic-labs/sdk-react-core').then(({ useDynamicContext }) => {
-      setDynamicContext(() => useDynamicContext);
-    });
-  }, []);
-
-  // Set up a stable widget function that uses the ref
-  useEffect(() => {
-    setShowDynamicWidget(() => (show: boolean) => {
-      if (showAuthFlowRef.current) {
-        showAuthFlowRef.current(show);
-      }
-    });
-  }, [setShowDynamicWidget]);
-
-  if (!DynamicContext) {
-    return <>{children}</>;
-  }
-
-  const DynamicComponent = () => {
-    const { primaryWallet, sdkHasLoaded, setShowAuthFlow, handleLogOut } =
-      DynamicContext();
-
-    // Store setShowAuthFlow in ref to avoid re-renders
-    useEffect(() => {
-      showAuthFlowRef.current = setShowAuthFlow;
-    }, [setShowAuthFlow]);
-
-    useEffect(() => {
-      if (primaryWallet?.address) {
-        logger.debug('Primary wallet found');
-        setDynamicWallet(primaryWallet);
-        setAddress(primaryWallet.address);
-      } else {
-        logger.debug('No primary wallet found');
-        setDynamicWallet(null);
-        setAddress('');
-      }
-    }, [primaryWallet]);
-
-    useEffect(() => {
-      if (sdkHasLoaded) {
-        setDynamicSdkHasLoaded(true);
-      }
-    }, [sdkHasLoaded]);
-
-    // Set the logout handler
-    useEffect(() => {
-      if (handleLogOut) {
-        setDynamicHandleLogOut(() => handleLogOut);
-      }
-    }, [handleLogOut]);
-
-    return <>{children}</>;
-  };
-
-  return <DynamicComponent />;
-}
-
-function LazyInternal(props: { children: any }) {
-  const [Provider, setProvider] = useState<any>(null);
-  const [walletConnectors, setWalletConnectors] = useState<any[]>([]);
-  const { darkMode } = useN1WalletInternalContext();
-
-  useEffect(() => {
-    const loadDynamicDeps = async () => {
-      try {
-        const [
-          { DynamicContextProvider },
-          { EthereumWalletConnectors },
-          { SolanaWalletConnectors },
-        ] = await Promise.all([
-          import('@dynamic-labs/sdk-react-core'),
-          import('@dynamic-labs/ethereum'),
-          import('@dynamic-labs/solana'),
-        ]);
-
-        setProvider(() => DynamicContextProvider);
-        setWalletConnectors([EthereumWalletConnectors, SolanaWalletConnectors]);
-      } catch (error) {
-        console.error('Failed to load Dynamic dependencies:', error);
-      }
-    };
-
-    loadDynamicDeps();
-  }, []);
-
-  if (!Provider || walletConnectors.length === 0) {
-    return null;
-  }
-
-  const dynamicSettings = {
-    ...getSettings(darkMode),
-    walletConnectors,
-  };
-
-  return (
-    <Provider settings={dynamicSettings}>
-      <DynamicContextConsumer>{props.children}</DynamicContextConsumer>
-    </Provider>
-  );
-}
-
-export function LazyWalletProvider({ children }: any) {
-  return <LazyInternal>{children}</LazyInternal>;
-}