Step by step with other JavaScript-based applications

1. install @compilot/web-sdk and @compilot/web-sdk-wallet-wagmi.

   yarn

   yarn add @compilot/web-sdk
   yarn add @compilot/web-sdk-wallet-wagmi 

   npm

   npm install @compilot/web-sdk
   npm install @compilot/web-sdk-wallet-wagmi 

   pnpm

   pnpm add @compilot/web-sdk
   pnpm add @compilot/web-sdk-wallet-wagmi 

2. Create the file compilot-config.ts and define the challenge function.

   export const generateChallenge = async (params: any) => {
       const res = await fetch("yourApiUrl/yourApiEndpoint", {
           method: "POST",
           headers: {
               "Content-Type": "application/json",
           },
           body: JSON.stringify(params),
       });
   
       return res.json();
    };

3. Create the configuration object. In Web3 mode you need a wallet adapter to interact with the customer's wallet. You can use the provided wallet adapter for Wagmi, or create a custom wallet adapter.

   Wagmi

   This example uses wallet connect and the file main.ts handles Wagmi configuration.

   import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi";
   import { mainnet, arbitrum } from "viem/chains";
   import { reconnect } from "@wagmi/core";
   
   // 1. Get a project ID at https://cloud.walletconnect.com
   const projectId = "YOUR_PROJECT_ID";
   
   // 2. Create wagmiConfig
   const metadata = {
     name: "Web3 JS",
     description: "AppKit Example",
     url: "https://web3modal.com", // origin must match your domain & subdomain.
     icons: ["https://avatars.githubusercontent.com/u/37784886"],
   };
   
   const chains = [mainnet, arbitrum] as const;
   export const config = defaultWagmiConfig({
     chains,
     projectId,
     metadata,
   });
   reconnect(config);
   
   // 3. Create modal
   const modal = createWeb3Modal({
     wagmiConfig: config,
     projectId,
   });

   Custom

   import { createAuthAdapter, createConfig, Web3Wallet } from "@compilot/web-sdk"; // you may also use react-sdk here
   const customWalletConfig: Web3Wallet = {
   /**
   * The namespace of the wallet.
   * When using "eip155" (Ethereum), additional wallet methods must be implemented.
   */
   namespace: "cardano",
   /**
   * Fetch the user address of the wallet
   */
   getAddress: async () => {
    const { userAddress } = await getWallet();
    return userAddress;
    },
   /**
    * Ask the user to sign a text message
    */
    sign: async ({ message }) => {
     const { wallet } = await getWallet();
     // some wallets must pre-process the message before signing
     const signedMessage = preProcess(message);
     const { signature, publicKey } = await customSignMessage(
       signedMessage,
       wallet,
     );
     return {
       message,
       signature,
       signerPublicKey: publicKey,
       signedMessage: signedMessage,
      };
    },
    /**
    * Check if the wallet is connected
    */
    isConnected: async () => {
       const wallet = await getWallet();
       return Boolean(wallet);
     },
    };
    const authAdapter = createAuthAdapter({
     wallet: customWalletConfig,
     generateChallenge,
     });
    const config = createConfig({ authAdapter });

4. Define the open widget function to get access to the ComPilot Widget in app.

       import { createWagmiWalletAdapter } from "@compilot/web-sdk-wallet-wagmi ";
       import { createWeb3AuthAdapter, createConfig,openWidget, watchWidgetVisibleState } from "@compilot/web-sdk";
       import { generateChallenge } from "./compilot-config.ts";
       import { config } from "./main";
   
       const walletAdapter = createWagmiWalletAdapter(config);
       const authAdapter = createWeb3AuthAdapter({ generateChallenge, wallet: walletAdapter });
       const compilotConfig = createConfig({ authAdapter });
       onclick = () => {
         openWidget(compilotConfig);
       };

5. Use the getters and watchers provided by the Web SDK to interact with the ComPilot Widget.

     <button onclick="onclick">Open widget</button>

   Standard actions include utility functions like openWidget(config) and closeWidget(config);

   Getters include utility functions like isLoading(config) and isOpen(config);`.

   const loading = isLoading(config);

   const open = isOpen(config);

   Watchers (callback-based actions or getters) include watchWidgetVisibleState().

   watchWidgetVisibleState(config, {
     onChange (isVisible) => {
       console.log("Widget is visible: ", isVisible);
     }
   });

   All of the functions are listed in Web SDK.

Example

• Web3 mode using JavaScript