@n1xyz/wallet-widget 0.0.1 → 0.0.4

package/src/Modal/BackButton.tsx

@@ -1,23 +0,0 @@
-import { useN1WalletInternalContext } from '../Provider/hooks';
-import React from 'react';
-import { N1ModalViewMode } from '../Provider/types';
-
-export function BackButton(props: { onClick?: () => void }) {
-  const { setViewMode, dynamicHandleLogOut } = useN1WalletInternalContext();
-
-  function back() {
-    // todo: disconnect
-    console.log('back');
-    dynamicHandleLogOut();
-    setViewMode(N1ModalViewMode.Connect);
-  }
-
-  return (
-    <button
-      className="w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700"
-      onClick={props.onClick || back}
-    >
-      Back
-    </button>
-  );
-}

package/src/Modal/ConnectView.tsx

@@ -1,88 +0,0 @@
-import { useN1WalletInternalContext } from '../Provider/hooks';
-import { ModalHeader } from './ModalHeader';
-import { WalletError, WalletErrorCode } from '../errors/types';
-import { IoMdWallet } from 'react-icons/io';
-import clsx from 'clsx';
-
-export function ConnectView() {
-  const { showDynamicWidget, handleError } = useN1WalletInternalContext();
-
-  const handleConnect = async () => {
-    try {
-      if (!showDynamicWidget) {
-        handleError(
-          new WalletError(
-            WalletErrorCode.CONNECTION_FAILED,
-            'Wallet connection not ready',
-            { reason: 'Dynamic SDK not initialized' }
-          )
-        );
-        return;
-      }
-      showDynamicWidget(true);
-    } catch (error) {
-      if (error instanceof WalletError) {
-        handleError(error);
-      } else {
-        handleError(
-          new WalletError(
-            WalletErrorCode.CONNECTION_FAILED,
-            'Failed to connect to wallet',
-            { originalError: error }
-          )
-        );
-      }
-    }
-  };
-
-  return (
-    <div className="rounded-[25px] shadow-lg w-96 p-5 bg-white dark:bg-neutral-900 dark:text-stone-200">
-      <ModalHeader />
-      <div className="my-2">
-        <div className="space-y-2">
-          <AnimatedArrowButton
-            onClick={handleConnect}
-            buttonClassName="w-full py-4 border rounded-[18px] text-white bg-neutral-900 dark:bg-white dark:text-black cursor-pointer hover:opacity-80 transition-all flex items-center justify-center group"
-          >
-            <IoMdWallet className="ml-4 mr-2 w-5 h-5" />
-            Continue with Wallet
-          </AnimatedArrowButton>
-          <button
-            className="w-full py-4 border rounded-[18px] bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 cursor-not-allowed"
-            disabled
-          >
-            Continue with Google (soon)
-          </button>
-          <button
-            className="w-full py-4 border rounded-[18px] bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 cursor-not-allowed"
-            disabled
-          >
-            Continue with Email (soon)
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AnimatedArrowButton({
-  children,
-  onClick,
-  buttonClassName,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-  buttonClassName?: string;
-}) {
-  return (
-    <button
-      className={clsx(buttonClassName, 'flex flex-row')}
-      onClick={onClick}
-    >
-      {children}
-      <span className="ml-4 opacity-0 transform translate-x-[-10px] transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
-        →
-      </span>
-    </button>
-  );
-}

package/src/Modal/CreateSessionView.tsx

@@ -1,242 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  useN1WalletContext,
-  useN1WalletInternalContext,
-} from '../Provider/hooks';
-import { ModalHeader } from './ModalHeader';
-import { N1ModalViewMode } from '../Provider/types';
-import { BackButton } from './BackButton';
-import {
-  createWebSession,
-  generateSessionKeyPair,
-  getUser,
-  storeSessionKeysInLocalStorage,
-} from '../Logic/utils';
-import { signEd25519 } from '@n1xyz/nts-sdk';
-import { logger } from '../utils/logger';
-import { WalletError, WalletErrorCode } from '../errors/types';
-
-export function CreateSessionView() {
-  const [NTSComponents, setNTSComponents] = useState<any>(null);
-  const [keyPair, setKeyPair] = useState<{
-    publicKey: Uint8Array;
-    privateKey: Uint8Array;
-  } | null>(null);
-
-  const {
-    setViewMode,
-    setUsername,
-    setStartClosingLogin,
-    setIsConnected,
-    dynamicWallet,
-    handleError,
-    setSessionPubKey,
-    setSignMessageWithSessionKey,
-    dynamicHandleLogOut,
-    setDynamicWallet,
-    setAddress,
-    setSignMessageWithWalletKey,
-  } = useN1WalletInternalContext();
-
-  const { ntsInterface, walletPubKey, address } = useN1WalletContext();
-
-  // Initialize NTS SDK and generate key pair
-  useEffect(() => {
-    const loadNTSSDK = async () => {
-      try {
-        const { Transaction, AdminAction, CoreApps } = await import(
-          '@n1xyz/nts-sdk'
-        );
-        setNTSComponents({ Transaction, AdminAction, CoreApps });
-        const newKeyPair = await generateSessionKeyPair();
-        setKeyPair(newKeyPair);
-      } catch (error) {
-        handleError(
-          new WalletError(
-            WalletErrorCode.CONNECTION_FAILED,
-            'Failed to initialize NTS SDK',
-            { originalError: error }
-          )
-        );
-      }
-    };
-    loadNTSSDK();
-  }, [handleError]);
-
-  const signWithWallet = async (msg: string): Promise<Uint8Array> => {
-    console.log('zooooooooooooooo', msg);
-    try {
-      if (!dynamicWallet) {
-        throw new WalletError(
-          WalletErrorCode.WALLET_NOT_FOUND,
-          'Wallet not found for signing'
-        );
-      }
-
-      if (dynamicWallet.chain === 'SOL') {
-        const signature = await dynamicWallet.signMessage(msg);
-        const binaryString = atob(signature);
-        const signatureUint8Array = new Uint8Array(binaryString.length);
-        for (let i = 0; i < binaryString.length; i++) {
-          signatureUint8Array[i] = binaryString.charCodeAt(i);
-        }
-        return signatureUint8Array;
-      }
-
-      const sig = (await dynamicWallet.signMessage(msg)) as string;
-      logger.debug('Wallet signature received', { signature: sig });
-      return Uint8Array.from(Buffer.from(sig.slice(2), 'hex'));
-    } catch (error) {
-      throw new WalletError(
-        WalletErrorCode.USER_REJECTED,
-        'Failed to sign message with wallet',
-        { originalError: error }
-      );
-    }
-  };
-
-  const handleSign = async () => {
-    logger.debug('handleSign');
-
-    if (!NTSComponents || !keyPair) {
-      logger.warn('Required components not initialized');
-      return;
-    }
-
-    setViewMode(N1ModalViewMode.Signing);
-
-    try {
-      const sessionKeyHex = Buffer.from(keyPair.publicKey).toString('hex');
-      logger.debug('Generated session key', { sessionKey: sessionKeyHex });
-
-      // Create and sign transaction that registers the session key with Core
-      const transactionData = {
-        appId: NTSComponents.CoreApps.Admin,
-        action: NTSComponents.AdminAction.addSessionKey,
-        framework: 'ts',
-        data: [
-          {
-            sessionKey: sessionKeyHex,
-            appId: 'hub',
-          },
-        ],
-      };
-
-      setSignMessageWithWalletKey(signWithWallet);
-      const tx = new NTSComponents.Transaction(transactionData, walletPubKey!);
-      await tx.signWithWalletFunction(signWithWallet);
-      try {
-        const txRes = await ntsInterface.sendTransaction(
-          tx,
-          tx.signature!,
-          walletPubKey
-        );
-        if (txRes.success) {
-          logger.debug('txRes', txRes);
-        } else {
-          logger.debug('txRes', txRes);
-          throw new WalletError(
-            WalletErrorCode.TRANSACTION_FAILED,
-            'Transaction failed'
-          );
-        }
-      } catch (_) {
-        throw new WalletError(
-          WalletErrorCode.TRANSACTION_FAILED,
-          'Transaction did not succeed'
-        );
-      }
-
-      // Create session signing function
-      const signFn = async (message: Uint8Array) => {
-        try {
-          return await signEd25519(message, keyPair.privateKey as Uint8Array);
-        } catch (_) {
-          console.log('error', _);
-          throw _;
-        }
-      };
-
-      // Store session keys
-      logger.debug('Storing session keys');
-      storeSessionKeysInLocalStorage({
-        privKey: keyPair.privateKey as Uint8Array,
-        walletPublicKey: address,
-        chainName: dynamicWallet!.chain,
-      });
-      setSessionPubKey(keyPair.publicKey);
-      setSignMessageWithSessionKey(() => signFn);
-
-      // Initialize web session with Argus who verifies that the session is
-      // registered with Core, and if so, grants you access to its user metadata db
-      await createWebSession(signFn, keyPair.publicKey, walletPubKey);
-
-      // Check for existing user
-      // TODO: handle case for auth.users, currently user.name is a wallet_only_users namespacing
-      const user = await getUser();
-      if (user?.name) {
-        logger.info('Existing user found, completing login');
-        setUsername(user.name);
-        localStorage.setItem(`n1_${address}_username`, user.name);
-        setStartClosingLogin(true);
-        setIsConnected(true);
-      } else {
-        logger.info('No user found, transitioning to user creation');
-        setViewMode(N1ModalViewMode.CreatingUser);
-      }
-    } catch (error: any) {
-      logger.error('Session creation failed:', error);
-      if (error.name === 'WalletError') {
-        handleError(error);
-      } else {
-        handleError(
-          new WalletError(
-            WalletErrorCode.CONNECTION_FAILED,
-            'Failed to create session',
-            { originalError: JSON.stringify(error) }
-          )
-        );
-      }
-
-      setViewMode(N1ModalViewMode.CreateSession);
-    }
-  };
-
-  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"
-          alt="Session creation illustration"
-        />
-      </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-black disabled:opacity-50 disabled:cursor-not-allowed"
-            onClick={handleSign}
-            disabled={!NTSComponents || !keyPair}
-          >
-            Authenticate
-          </button>
-          <BackButton
-            onClick={() => {
-              logger.debug('BackButton clicked');
-              // Log out wallet
-              setDynamicWallet(null);
-              setAddress('');
-              dynamicHandleLogOut();
-
-              // Set view mode to connect
-              setViewMode(N1ModalViewMode.Connect);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/Modal/CreateUserView.tsx

@@ -1,195 +0,0 @@
-import BlockiesSvg from 'blockies-react-svg';
-import { useState } from 'react';
-import { getPseudoName } from '../Logic/getPseudoName';
-import { createUser } from '../Logic/utils';
-import {
-  useN1WalletContext,
-  useN1WalletInternalContext,
-} from '../Provider/hooks';
-import { N1ModalViewMode } from '../Provider/types';
-import { WalletError, WalletErrorCode } from '../errors/types';
-import { logger } from '../utils/logger';
-import { ModalHeader } from './ModalHeader';
-
-export function CreateUserView() {
-  const {
-    setViewMode,
-    setIsConnected,
-    setUsername,
-    setStartClosingLogin,
-    handleError,
-  } = useN1WalletInternalContext();
-  const { address } = useN1WalletContext();
-
-  const close = () => {
-    setStartClosingLogin(true);
-  };
-
-  const [usernameLocal, setUsernameLocalLocal] = useState(
-    getPseudoName(address)
-  );
-  const [error, setError] = useState('');
-
-  // TODO: not sure what this is for??? so i commented it out for now
-  // useEffect(() => {
-  //   const initializeSession = async () => {
-  //     try {
-  //       logger.debug("Initializing session");
-  //       logger.debug("signMessageWithSessionKey", signMessageWithSessionKey);
-  //       logger.debug("sessionPubKey", sessionPubKey);
-  //       logger.debug("walletPubKey", walletPubKey);
-  //       // Silently return if session keys are not available yet
-  //       if (!signMessageWithSessionKey || !sessionPubKey || !walletPubKey) {
-  //         return;
-  //       }
-
-  //       await createWebSession(
-  //         signMessageWithSessionKey,
-  //         sessionPubKey,
-  //         walletPubKey
-  //       );
-
-  //       const user = await getUser();
-  //       if (user) {
-  //         const usernameDb = user.name;
-  //         setIsConnected(true);
-  //         setUsername(usernameDb);
-  //         localStorage.setItem("n1_" + address + "_username", usernameDb);
-  //       }
-  //     } catch (error) {
-  //       if (error instanceof WalletError) {
-  //         handleError(error);
-  //       } else {
-  //         handleError(
-  //           new WalletError(
-  //             WalletErrorCode.UNKNOWN,
-  //             "Failed to initialize user session",
-  //             { originalError: error }
-  //           )
-  //         );
-  //       }
-  //     }
-  //   };
-
-  //   initializeSession();
-  // }, [
-  //   signMessageWithSessionKey,
-  //   sessionPubKey,
-  //   walletPubKey,
-  //   address,
-  //   setIsConnected,
-  //   setUsername,
-  //   setViewMode,
-  //   handleError,
-  // ]);
-
-  function validateUsername() {
-    if (!usernameLocal) {
-      setError('Username cannot be blank.');
-      return false;
-    }
-    if (!/^[a-zA-Z0-9-]+$/.test(usernameLocal)) {
-      setError('Username must be alphanumeric.');
-      return false;
-    }
-    setError('');
-    return true;
-  }
-
-  async function handleCreate() {
-    logger.debug('Creating User');
-
-    try {
-      // TODO: why is this here?
-      // await createWebSession(
-      //   signMessageWithSessionKey,
-      //   sessionPubKey,
-      //   walletPubKey
-      // );
-
-      if (!validateUsername()) {
-        return;
-      }
-
-      await createUser(usernameLocal);
-      setViewMode(N1ModalViewMode.Success);
-      setIsConnected(true);
-      setUsername(usernameLocal);
-      localStorage.setItem('n1_' + address + '_username', usernameLocal);
-    } catch (error) {
-      if (error instanceof WalletError) {
-        handleError(error);
-      } else {
-        handleError(
-          new WalletError(WalletErrorCode.UNKNOWN, 'Failed to create user', {
-            originalError: error,
-          })
-        );
-      }
-    }
-  }
-
-  return (
-    <div className="rounded-[25px] shadow-lg p-5 m-4 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-stone-200">
-      <ModalHeader />
-      <div className="flex flex-col items-center justify-center">
-        <div className="flex mb-2 justify-center sm:justify-between w-full flex-wrap max-w-screen">
-          <div className="flex flex-col">
-            <div className="w-80 h-80 sm:w-48 sm:h-48 rounded-[25px] flex items-center justify-center relative bg-neutral-100 dark:bg-neutral-800">
-              <div className="overflow-hidden rounded-lg w-80 h-80 sm:w-48 sm:h-48 p-2">
-                <BlockiesSvg
-                  address={address}
-                  className="drop-shadow w-full h-full rounded-[20px]"
-                />
-              </div>
-            </div>
-            <div className="my-4 w-80 sm:w-48 p-2 border rounded-[15px] text-sm duration-300 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700">
-              You are creating an account that you can use across all N1.
-            </div>
-          </div>
-
-          {/* Username Input */}
-          <div className="w-80 flex flex-col items-center sm:items-end justify-between h-full my-2">
-            <div className="flex flex-col relative bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 rounded-[15px] border w-72">
-              <input
-                type="text"
-                id="username"
-                placeholder="Enter your username"
-                value={usernameLocal}
-                onChange={(e) => setUsernameLocalLocal(e.target.value)}
-                className={`p-3 py-4 outline-none focus:ring focus:ring-orange-200 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-stone-200 rounded-[15px] border ${error ? 'border-red-500' : 'border-neutral-200 dark:border-neutral-700'}`}
-              />
-              <div className="p-2 flex w-full justify-between text-xs text-neutral-500 dark:text-neutral-400">
-                <span className="font-bold">Username:</span> {usernameLocal}
-              </div>
-              <div className="px-2 pb-2 flex w-full justify-between text-xs text-neutral-500 dark:text-neutral-400">
-                <span className="font-bold">Wallet:</span>{' '}
-                {address.substring(0, 9) + '...' + address.slice(-3)}
-              </div>
-            </div>
-            {error && (
-              <div className="mt-2 w-72 p-2 text-red-600 bg-red-100 dark:bg-red-900/20 dark:text-red-400 border border-red-400 rounded-[15px] text-center">
-                {error}
-              </div>
-            )}
-
-            <button
-              className="my-4 w-72 py-4 border rounded-[15px] text-white bg-neutral-900 dark:bg-white dark:text-black cursor-pointer duration-300 hover:opacity-80"
-              onClick={handleCreate}
-            >
-              Create
-            </button>
-            <div className="w-72">
-              <button
-                className="w-full py-4 border rounded-[18px] cursor-pointer duration-300 hover:opacity-80 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700 hover:opacity-80"
-                onClick={close}
-              >
-                Close
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/Modal/ModalHeader.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { useN1WalletInternalContext } from '../Provider/hooks';
-
-export function ModalHeader() {
-  const { setStartClosingLogin } = useN1WalletInternalContext();
-  const close = () => {
-    setStartClosingLogin(true);
-  };
-  return (
-    <div className="flex items-center justify-between mb-4">
-      <div className="flex items-center gap-4">
-        <div className="w-10">
-          <svg
-            viewBox="0 0 236 125"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g clipPath="url(#clip0_239_935)">
-              <path
-                d="M181.737 0H152.268V29.4694H181.737V0Z"
-                fill="currentColor"
-              />
-              <path
-                d="M57.0683 0H29.4694L0 29.4694V124.674H29.4694V29.4694H44.8619L140.066 124.674H181.74L86.5377 29.4694L57.0683 0Z"
-                fill="currentColor"
-              />
-              <path
-                d="M206.531 29.4694V124.674H236.001V0L206.531 29.4694Z"
-                fill="currentColor"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_239_935">
-                <rect width="236" height="124.674" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
-        </div>
-        <h2 className="text-lg text-neutral-900 dark:text-stone-200">
-          Sign in with N1
-        </h2>
-      </div>
-      <button
-        onClick={close}
-        className="text-neutral-400 hover:text-neutral-800 dark:text-neutral-500 dark:hover:text-neutral-300 cursor-pointer text-3xl rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 h-10 w-10 p-1 flex items-center justify-center"
-      >
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1 13L13 1M1 1L13 13"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          ></path>
-        </svg>
-      </button>
-    </div>
-  );
-}