Reimagining Web3 Interactions: How Gaia Powers Smart Token Creation on Linea with MetaMask Delegation Toolkit

// Creating a smart account for the user (delegator)
const delegatorSmartAccount = await toMetaMaskSmartAccount({
  client: publicClient,  // Connection to the blockchain
  implementation: Implementation.Hybrid,  // Account implementation type
  deployParams: [address, [], [], []],  // Parameters for account initialization
  deploySalt: createSalt(),  // Unique identifier for deterministic deployment
  signatory: { walletClient },  // Connection to user's wallet for signing
});

// Creating a smart account for Gaia (delegate)
const aiPrivateKey = generatePrivateKey();  // Generate a new private key for the AI
const aiAccount = privateKeyToAccount(aiPrivateKey);  // Create an EOA from the private key

const aiSmartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.Hybrid,
  deployParams: [aiAccount.address, [], [], []],
  deploySalt: createSalt(),
  signatory: { account: aiAccount },  // AI's account will sign its transactions
});

// Define strict boundaries for what Gaia can do
const caveats = createCaveatBuilder(delegatorAccount.environment)
  // Only allow interaction with our factory contract
  .addCaveat("allowedTargets", [FACTORY_CONTRACT_ADDRESS])
  // Prevent ETH spending entirely
  .addCaveat("valueLte", BigInt(0))
  // Only allow calling the createToken function
  .addCaveat("allowedMethods", [CREATE_TOKEN_SELECTOR]);

// Create the delegation with these restrictions
const newDelegation = createRootDelegation(
  aiDelegateAccount.address,  // Who receives permission (Gaia)
  delegatorAccount.address,   // Who grants permission (User)
  caveats,                    // The restrictions
  BigInt(createSalt())        // Unique identifier
);

// Sign the delegation with the user's account
const signature = await delegatorAccount.signDelegation({
  delegation: newDelegation
});

// Store a delegation in the service
const delegationStorageClient = new DelegationStorageClient({
  apiKey: process.env.NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY!,
  apiKeyId: process.env.NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY_ID!,
  environment: DelegationStorageEnvironment.dev,
});

// Store the delegation in the delegation storage service
const storedDelegation = await delegationStorageClient.storeDelegation(signedDelegation);

// Delegation Storage Singleton
let delegationStorageInstance: DelegationStorageClient | null = null;


// Helper function to log storage configuration
const logStorageConfig = (apiKey?: string, apiKeyId?: string) => {
 console.group("=== Delegation Storage Configuration ===");
 console.log("API Key format check:", {
   exists: !!apiKey,
   length: apiKey?.length,
   firstChars: apiKey?.substring(0, 4),
   lastChars: apiKey?.substring(apiKey.length - 4),
   hasSpecialChars: apiKey?.match(/[^a-zA-Z0-9]/) ? true : false,
 });
 console.log("API Key ID format check:", {
   exists: !!apiKeyId,
   length: apiKeyId?.length,
   firstChars: apiKeyId?.substring(0, 4),
   lastChars: apiKeyId?.substring(apiKeyId.length - 4),
   hasSpecialChars: apiKeyId?.match(/[^a-zA-Z0-9]/) ? true : false,
 });
 console.log("Environment:", DelegationStorageEnvironment.dev);
 console.log(
   "Running on:",
   typeof window !== "undefined" ? "client" : "server"
 );
 console.groupEnd();
};


/**
* Gets the delegation storage client, initializing it if necessary
* @returns A configured DelegationStorageClient instance
*/
export const getDelegationStorageClient = (): DelegationStorageClient => {
 if (!delegationStorageInstance) {
   const apiKey = process.env.NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY;
   const apiKeyId = process.env.NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY_ID;


   logStorageConfig(apiKey, apiKeyId);


   if (!apiKey || !apiKeyId) {
     throw new Error("Delegation storage API key and key ID are required");
   }


   try {
     delegationStorageInstance = new DelegationStorageClient({
       apiKey,
       apiKeyId,
       environment: DelegationStorageEnvironment.dev,
       fetcher:
         typeof window !== "undefined" ? window.fetch.bind(window) : undefined,
     });
     console.log("DelegationStorageClient initialized successfully");
   } catch (error) {
     console.error("Error creating DelegationStorageClient:", error);
     throw error;
   }
 }
 return delegationStorageInstance;
};


/**
* Stores a delegation in the delegation storage service
* @param delegation The delegation to store
* @returns The result of the store operation
*/
export const storeDelegation = async (delegation: DelegationStruct) => {
 try {
   console.group("=== Storing Delegation ===");
   console.log("Delegation details:", {
     delegate: delegation.delegate,
     delegator: delegation.delegator,
     hasSignature: !!delegation.signature,
     salt: delegation.salt.toString(),
   });


   const delegationStorageClient = getDelegationStorageClient();
   const result = await delegationStorageClient.storeDelegation(delegation);


   console.log("Delegation stored successfully:", result);
   console.groupEnd();
   return result;
 } catch (error: any) {
   console.error("Delegation storage error:", {
     name: error.name,
     message: error.message,
     status: error.status,
     details: error.details,
     stack: error.stack,
   });
   console.groupEnd();
   throw error;
 }
};


/**
* Retrieves a delegation chain by its hash
* @param hash The hash of the delegation chain to retrieve
* @returns The delegation chain
*/
export const getDelegationChain = async (hash: Hex) => {
 try {
   console.log("Fetching delegation chain for hash:", hash);
   const delegationStorageClient = getDelegationStorageClient();
   const result = await delegationStorageClient.getDelegationChain(hash);
   console.log("Delegation chain fetched:", result);
   return result;
 } catch (error) {
   console.error("Error fetching delegation chain:", error);
   throw error;
 }
};


/**
* Fetches delegations for a specific address
* @param address The address to fetch delegations for
* @param filter Whether to fetch given or received delegations
* @returns The delegations for the address
*/
export const fetchDelegations = async (
 address: Hex,
 filter: DelegationStoreFilter
) => {
 try {
   console.log(
     "Fetching delegations for address:",
     address,
     "filter:",
     filter
   );
   const delegationStorageClient = getDelegationStorageClient();
   const result = await delegationStorageClient.fetchDelegations(
     address,
     filter
   );
   console.log("Delegations fetched:", result);
   return result;
 } catch (error) {
   console.error("Error fetching delegations:", error);
   throw error;
 }
};


/**
* Gets delegation info from session storage (if available)
* @returns The delegation info or null if not found
*/
export const getDelegationInfoFromSession = () => {
 if (typeof window === "undefined") return null;


 try {
   const delegationInfoStr = sessionStorage.getItem("aiDelegateInfo");
   if (!delegationInfoStr) return null;


   return JSON.parse(delegationInfoStr);
 } catch (error) {
   console.error("Error retrieving delegation info from session:", error);
   return null;
 }
};


/**
* Gets the full delegation from session storage (if available)
* @returns The full delegation or null if not found
*/
export const getFullDelegationFromSession = () => {
 if (typeof window === "undefined") return null;


 try {
   const delegationStr = sessionStorage.getItem("delegation");
   if (!delegationStr) return null;


   const delegation = JSON.parse(delegationStr);


   // Convert string salt back to BigInt
   if (delegation && typeof delegation.salt === "string") {
     delegation.salt = BigInt(delegation.salt);
   }


   return delegation;
 } catch (error) {
   console.error("Error retrieving delegation from session:", error);
   return null;
 }
};


/**
* Clears delegation info from session storage
*/
export const clearDelegationSession = () => {
 if (typeof window === "undefined") return;


 sessionStorage.removeItem("aiDelegateInfo");
 sessionStorage.removeItem("delegation");
 sessionStorage.removeItem("aiDelegatePrivateKey");
};



const createTokenTool = createTool({""});


export const tools = {
 createToken: createTokenTool,
};

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "./BaseERC20Token.sol";

contract ERC20Factory {
    address public owner;
    mapping(address => bool) public tokenExists;
    address[] public allTokens;

    event TokenCreated(
        address indexed tokenAddress,
        string name,
        string symbol,
        uint256 initialSupply,
        address owner
    );

    constructor() {
        owner = msg.sender;
    }

    function createToken(
        string memory name,
        string memory symbol,
        uint256 initialSupply
    ) external returns (address) {
        BaseERC20Token newToken = new BaseERC20Token(
            name,
            symbol,
            initialSupply,
            msg.sender
        );

        address tokenAddress = address(newToken);
        tokenExists[tokenAddress] = true;
        allTokens.push(tokenAddress);

        emit TokenCreated(
            tokenAddress,
            name,
            symbol,
            initialSupply,
            msg.sender
        );

        return tokenAddress;
    }

    function getAllTokens() external view returns (address[] memory) {
        return allTokens;
    }

    function getTokenCount() external view returns (uint256) {
        return allTokens.length;
    }
}

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract BaseERC20Token is ERC20, Ownable {
    constructor(
        string memory name,
        string memory symbol,
        uint256 initialSupply,
        address owner
    ) ERC20(name, symbol) Ownable(owner) {
        _mint(owner, initialSupply * (10 ** decimals()));
    }
}

export const Chat = () => {
  const { address } = useAccount();
  const [delegationEnabled, setDelegationEnabled] = useState(false);

  // Check if delegation is set up
  useEffect(() => {
    const checkDelegation = () => {
      const delegateInfo = sessionStorage.getItem('aiDelegateInfo');
      setDelegationEnabled(!!delegateInfo);
    };

    checkDelegation();
    window.addEventListener('storage', checkDelegation);

    return () => {
      window.removeEventListener('storage', checkDelegation);
    };
  }, []);

  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      initialMessages: [
        {
          role: "system",
          content: `You have connected your wallet successfully. Your wallet address is ${address}. ${
            delegationEnabled
              ? "You have delegated token creation permissions to me. I can deploy ERC20 tokens on your behalf through a factory contract. Just ask me to create a token and specify the name, symbol, and initial supply."
              : "You can delegate token creation permissions to me using the delegation manager above. Once set up, I'll be able to create custom ERC20 tokens for you with limited permissions."
          }`,
          id: "system",
        },
      ],
    });

  // Render chat interface and handle responses
  return (
    <div className="h-full w-full space-y-4 max-w-3xl">
      <div className="border h-full max-h-96 rounded-md p-4 space-y-6 justify-end overflow-y-scroll">
        {messages.map((message) => (
          <div key={message.id}>
            {/* Render user and AI messages */}
            {message.role === "user" ? (
              <div className="flex w-full justify-start">
                <div className="w-fit max-w-md bg-gray-800 text-gray-50 rounded-md p-2">
                  <strong>User:</strong> {message.content}
                </div>
              </div>
            ) : (
              <div className="flex w-full justify-end">
                <div className="w-fit max-w-md bg-gray-100 text-gray-900 rounded-md p-2">
                  <strong>AI:</strong> {message.content}
                </div>
              </div>
            )}

            {/* Handle tool invocation results */}
            <div>
              {message.toolInvocations?.map((toolInvocation) => {
                const { toolName, toolCallId, state } = toolInvocation;
                if (state === "result" && toolName === "deployERC20") {
                  const { result } = toolInvocation;
                  return (
                    <div key={toolCallId} className="p-3 my-2 rounded">
                      {result.success ? (
                        <div className="bg-green-50 border border-green-200 p-3 rounded">
                          <h3 className="font-bold text-green-800">Token Deployed Successfully!</h3>
                          <div className="mt-2 space-y-1">
                            <p><strong>Name:</strong> {result.tokenName}</p>
                            <p><strong>Symbol:</strong> {result.tokenSymbol}</p>
                            <p><strong>Address:</strong> {result.tokenAddress}</p>
                            <p className="mt-2">
                              <a
                                href={`https://sepolia.etherscan.io/tx/${result.transactionHash}`}
                                target="_blank"
                                className="text-blue-600 underline"
                              >
                                View transaction on Etherscan
                              </a>
                            </p>
                          </div>
                        </div>
                      ) : (
                        <div className="bg-red-50 border border-red-200 p-3 rounded">
                          <h3 className="font-bold text-red-800">Token Deployment Failed</h3>
                          <p className="text-red-700 mt-1">
                            {result.error}
                          </p>
                        </div>
                      );
                    </div>
                  );
                }
              })}
            </div>
          </div>
        ))}
      </div>

      <form className="flex gap-3" onSubmit={handleSubmit}>
        <Input
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
        <Button type="submit">Send</Button>
      </form>
    </div>
  );
};

// Send a user operation instead of a regular transaction
const userOpHash = await bundlerClient.sendUserOperation({
  account: aiSmartAccount,
  calls: [
    {
      to: aiSmartAccount.address,
      data: redeemDelegationCalldata,
    },
  ],
});

keccak256("createToken(string,string,uint256)").substring(0, 10)
// Results in something like: "0x45ba7a0f"