> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compasslabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# ZeroDev

> Learn how to use Compass API SDK with ZeroDev for smart account operations.

export const GithubCodeBlock = ({typescript, python}) => {
  const [typescriptCode, setTypescriptCode] = useState("");
  const [pythonCode, setPythonCode] = useState("");
  function removeWhitespace(strings, x) {
    return strings.map(str => {
      let count = 0;
      let i = 0;
      while (i < str.length && count < x && str[i] === " ") {
        count++;
        i++;
      }
      return str.slice(i);
    });
  }
  function cropToSnippet({text, from, to}) {
    const lines = text.split("\n");
    let result = [];
    let isCollecting = false;
    for (const line of lines) {
      if (line.trim() === from) {
        isCollecting = true;
        continue;
      }
      if (line.trim() === to) {
        break;
      }
      if (isCollecting) {
        result.push(line);
      }
    }
    const whitespaceToDelete = result[0].length - result[0].trimStart().length;
    result = removeWhitespace(result, whitespaceToDelete);
    return result.join("\n");
  }
  function removeSnippetComments(code) {
    return code.replace(/(\/\/|#) SNIPPET (START|END) \d+(\n|$)/g, "");
  }
  useEffect(() => {
    if (!typescript) return;
    fetch(typescript.url).then(response => response.text()).then(text => {
      let code = text;
      if (typescript.snippetNumber) {
        code = cropToSnippet({
          text,
          from: `// SNIPPET START ${typescript.snippetNumber}`,
          to: `// SNIPPET END ${typescript.snippetNumber}`
        });
      } else {
        code = removeSnippetComments(code);
      }
      setTypescriptCode(code);
    }).catch(error => {
      console.error("Error loading file:", error);
    });
  }, [typescript]);
  useEffect(() => {
    if (!python) return;
    fetch(python.url).then(response => response.text()).then(text => {
      let code = text;
      if (python.snippetNumber) {
        code = cropToSnippet({
          text,
          from: `# SNIPPET START ${python.snippetNumber}`,
          to: `# SNIPPET END ${python.snippetNumber}`
        });
      } else {
        code = removeSnippetComments(code);
      }
      setPythonCode(code);
    }).catch(error => {
      console.error("Error loading file:", error);
    });
  }, [python]);
  if (!python && !typescript) return null;
  if (!python) {
    return <CodeBlock language="typescript" filename={typescript.name} expandable={typescript?.numOfLinesExpandable ? "true" : null} lines="true" icon="https://upload.wikimedia.org/wikipedia/commons/f/f5/Typescript.svg" code={typescriptCode} children={typescriptCode || !typescript?.numOfLinesExpandable || <div style={{
      whiteSpace: "pre-wrap"
    }}>
        {Array(typescript?.numOfLinesExpandable).fill("-").map(x => x).join("\n")}
      </div>} />;
  }
  if (!typescript) {
    return <CodeBlock language="python" filename={python.name} expandable={python?.numOfLinesExpandable ? "true" : null} lines="true" icon="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" code={pythonCode} children={pythonCode || !python?.numOfLinesExpandable || <div style={{
      whiteSpace: "pre-wrap"
    }}>
        {Array(python?.numOfLinesExpandable).fill("-").map(x => x).join("\n")}
      </div>} />;
  }
  return <CodeGroup>
  <CodeBlock language="typescript" filename={typescript.name} expandable={typescript?.numOfLinesExpandable ? "true" : null} lines="true" icon="https://upload.wikimedia.org/wikipedia/commons/f/f5/Typescript.svg" code={typescriptCode} children={typescriptCode || !typescript?.numOfLinesExpandable || <div style={{
    whiteSpace: "pre-wrap"
  }}>
          {Array(typescript?.numOfLinesExpandable).fill("-").map(x => x).join("\n")}
        </div>} />
  <CodeBlock language="python" filename={python.name} expandable={python?.numOfLinesExpandable ? "true" : null} lines="true" icon="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" code={pythonCode} children={pythonCode || !python?.numOfLinesExpandable || <div style={{
    whiteSpace: "pre-wrap"
  }}>
          {Array(python?.numOfLinesExpandable).fill("-").map(x => x).join("\n")}
        </div>} />
</CodeGroup>;
};

## Using Compass API with ZeroDev Smart Accounts

This guide demonstrates how to integrate Compass API SDK with ZeroDev to create and use smart accounts for DeFi operations. The combination enables:

* Account abstraction features
* Gas fee abstraction (pay in any token)
* Simplified DeFi operations
* Enhanced security through smart account features

## Prerequisites

<Steps>
  <Step title="Install Dependencies">
    Install the required packages:

    ```bash theme={"system"}
    npm install @compass-labs/api-sdk @zerodev/sdk @zerodev/ecdsa-validator viem
    ```
  </Step>

  <Step title="Set Environment Variables">
    Create a `.env` file in your project root:

    ```bash theme={"system"}
    # .env
    ZERODEV_RPC="your_zerodev_rpc_url"
    COMPASS_API_KEY="your_compass_api_key"
    ```
  </Step>
</Steps>

## Implementation Guide

<Steps>
  <Step title="Import dependencies and initialize clients">
    First, import the necessary dependencies, load your environment variables, and initialize the public client and entry point.

    <GithubCodeBlock
      typescript={{
name: "index.ts",
url: "https://raw.githubusercontent.com/CompassLabs/api_usecases/main/v0/smart_accounts/zerodev/src/index.ts",
snippetNumber: 1,
}}
    />
  </Step>

  <Step title="Create signer, validator, kernel account, and paymaster">
    Set up the signer, ECDSA validator, kernel account, paymaster, and kernel
    client. This step prepares your smart account for batched DeFi operations.

    <GithubCodeBlock
      typescript={{
name: "index.ts",
url: "https://raw.githubusercontent.com/CompassLabs/api_usecases/main/v0/smart_accounts/zerodev/src/index.ts",
snippetNumber: 2,
}}
    />
  </Step>

  <Step title="Create and prepare batched operations">
    Use the Compass API SDK to create batched DeFi operations (e.g., allowance
    increase and Aave supply). Convert the result to the format expected by the
    kernel client.

    <GithubCodeBlock
      typescript={{
name: "index.ts",
url: "https://raw.githubusercontent.com/CompassLabs/api_usecases/main/v0/smart_accounts/zerodev/src/index.ts",
snippetNumber: 3,
}}
    />
  </Step>

  <Step title="Send batched operations and handle result">
    Send the batched user operation and wait for confirmation. The script will print the transaction hash and confirmation receipt, or an error if the operation fails.

    <GithubCodeBlock
      typescript={{
name: "index.ts",
url: "https://raw.githubusercontent.com/CompassLabs/api_usecases/main/v0/smart_accounts/zerodev/src/index.ts",
snippetNumber: 4,
}}
    />
  </Step>
</Steps>

## Full Code

Here is the full script from the tutorial. Copy and paste in your code editor and play around!

<GithubCodeBlock
  typescript={{
name: "index.ts",
url: "https://raw.githubusercontent.com/CompassLabs/api_usecases/main/v0/smart_accounts/zerodev/src/index.ts",
}}
  numOfLinesExpandable={125}
/>

## Common Operation Examples

Here are some examples of different DeFi operations you can perform:

### Token Swaps

```typescript theme={"system"}
{
  body: {
    actionType: "UNISWAP_BUY_EXACTLY",
    tokenIn: "WETH",
    tokenOut: "USDC",
    fee: "0.01",
    amountOut: 1.5,
    amountInMaximum: 1.6,
    wrapEth: true,
  }
}
```

### Lending Operations

```typescript theme={"system"}
{
  body: {
    actionType: "AAVE_SUPPLY",
    amount: 1000,
    asset: "USDC",
  }
}
```

### Token Approvals

```typescript theme={"system"}
{
  body: {
    actionType: "ALLOWANCE_INCREASE",
    amount: 1000,
    token: "WETH",
    contract_name: "UniswapV3Router",
  }
}
```

## Resources

<CardGroup cols={2}>
  <Card title="Compass API Docs" icon="compass" href="https://docs.compasslabs.ai/v1/api-reference/smart-account/get-smart-account-batched-user-operations">
    Access detailed API documentation and references
  </Card>

  <Card title="ZeroDev Docs" icon="book" href="https://docs.zerodev.app">
    Learn more about ZeroDev's smart account features
  </Card>

  <Card title="GitHub Examples" icon="github" href="https://github.com/CompassLabs/api_usecases/tree/main/v0/smart_accounts/zerodev">
    View more code examples and implementations
  </Card>
</CardGroup>