@zktx.io/walrus-wallet

Installation

npm install @zktx.io/walrus-wallet

yarn add @zktx.io/walrus-wallet

Usage

// https://github.com/zktx-io/walrus-clip-monorepo/tree/main/packages/clip
import { useState } from 'react';

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { WalrusWallet } from '@zktx.io/walrus-wallet';
import { enqueueSnackbar } from 'notistack';

import './App.css';
import '@mysten/dapp-kit/dist/index.css';

import { Home } from './pages/Home';
import { Auth } from './pages/Auth';
import { ICON, WALLET_NAME } from './utils/config';
import { getProviderUrl } from './utils/getProviderUrl';
import { NETWORK } from './utils/config';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/auth',
    element: <Auth />,
  },
]);

const ENOKI_KEY = import.meta.env.VITE_APP_ENOKI_KEY;
const SPONSORED_URL = import.meta.env.VITE_APP_SPONSORED_URL;
const CLIENT_ID = import.meta.env.VITE_APP_CLIENT_ID;

function App() {
  const [activeNetwork, setActiveNetwork] = useState<
    'testnet' | 'mainnet' | 'devnet'
  >(NETWORK);

  const callbackNonce = (nonce: string) => {
    if (nonce && CLIENT_ID) {
      window.location.replace(getProviderUrl(nonce, CLIENT_ID));
    }
  };

  return (
    <WalrusWallet
      name={WALLET_NAME}
      icon={ICON}
      network={activeNetwork}
      sponsored={SPONSORED_URL}
      zklogin={{
        enokey: ENOKI_KEY!,
        callbackNonce: callbackNonce,
      }}
      onEvent={(notification) => {
        enqueueSnackbar(notification.message, {
          variant: notification.variant,
          style: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          },
        });
      }}
    >
      <SuiClientProvider
        networks={{
          mainnet: { url: getFullnodeUrl('mainnet') },
          testnet: { url: getFullnodeUrl('testnet') },
          devnet: { url: getFullnodeUrl('devnet') },
        }}
        defaultNetwork={activeNetwork as 'mainnet' | 'testnet' | 'devnet'}
        onNetworkChange={(network) => {
          setActiveNetwork(network);
        }}
      >
        <WalletProvider autoConnect>
          <RouterProvider router={router} />
        </WalletProvider>
      </SuiClientProvider>
    </WalrusWallet>
  );
}

export default App;

If you don’t want to log in directly in a public place, you can also use QR-based login.

// https://github.com/zktx-io/walrus-clip-monorepo/tree/main/packages/demo
import { useState } from 'react';

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { getFullnodeUrl } from '@mysten/sui/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { WalrusWallet } from '@zktx.io/walrus-wallet';
import { enqueueSnackbar } from 'notistack';

import './App.css';
import '@mysten/dapp-kit/dist/index.css';

import { Home } from './pages/Home';
import { ICON, WALLET_NAME } from './utils/config';
import { NETWORK } from './utils/config';
import { Kiosk } from './pages/Kiosk';
import { GameBoy } from './pages/GameBoy';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: 'kiosk',
    element: <Kiosk />,
  },
  {
    path: 'game',
    element: <GameBoy />,
  },
]);

const SPONSORED_URL = import.meta.env.VITE_APP_SPONSORED_URL;

function App() {
  const [activeNetwork, setActiveNetwork] = useState<
    'testnet' | 'mainnet' | 'devnet'
  >(NETWORK);

  return (
    <WalrusWallet
      name={WALLET_NAME}
      icon={ICON}
      network={activeNetwork}
      sponsored={SPONSORED_URL}
      onEvent={(notification) => {
        enqueueSnackbar(notification.message, {
          variant: notification.variant,
          style: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          },
        });
      }}
    >
      <SuiClientProvider
        networks={{
          mainnet: { url: getFullnodeUrl('mainnet') },
          testnet: { url: getFullnodeUrl('testnet') },
          devnet: { url: getFullnodeUrl('devnet') },
        }}
        defaultNetwork={activeNetwork as 'mainnet' | 'testnet' | 'devnet'}
        onNetworkChange={(network) => {
          setActiveNetwork(network);
        }}
      >
        <WalletProvider autoConnect>
          <RouterProvider router={router} />
        </WalletProvider>
      </SuiClientProvider>
    </WalrusWallet>
  );
}

export default App;

Github

Get started with Walrus clip and learn by GitHub