> ## 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.

# Add Earn to your app

> Make “Earn on your crypto” a one‑click, non‑custodial flow. No Solidity. No protocol maintenance.

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>;
};

<Tip>
  Compass helps you quickly add features like Earn, Borrow, Leverage all through a unified API/SDK. We've built an [example demo](https://wallet-demo-sand.vercel.app/) to show you how it works. Full source code is linked.
</Tip>

## Why teams use Compass

* **Keep users in‑app**: add Earn without sending users to external dapps.
* **Monetize day one**: (optional) embed fees inside the same user‑signed tx.
* **One step, fewer failures**: bundle approvals + deposit into **one atomic transaction**.
* **Lower cost**: typical multi‑step flows see **50–70% lower gas**.
* **Always non‑custodial**: Compass returns **unsigned** payloads; you (or your custodian) sign.
* **Leverage prebuilt data**: use Compass’ **yield statistics, vault metadata (ERC‑4626), prices, APR/APY** and more.
* **One SDK, many features**: the same **TypeScript/Python SDKs** power Earn **and** future DeFi features (Trading, Borrow, Leverage, Monitoring), so you don’t rewrite integrations.

<img src="https://mintcdn.com/compasslabs-f07467e0/xcz0y_akL4AKxR-L/images/Screenshot2025-09-19at19.20.44.png?fit=max&auto=format&n=xcz0y_akL4AKxR-L&q=85&s=91e2e24105447c0cf69a9e3001f04bc9" alt="Screenshot 2025-09-19 at 19.20.44.png" width="2464" height="1186" data-path="images/Screenshot2025-09-19at19.20.44.png" />

## Integration Steps

<Steps>
  <Step title="Choose the right SDK for you" iconType="regular">
    You can call our REST API endpoints directly, but we recommend using our [TypeScript SDK](https://www.npmjs.com/package/@compass-labs/api-sdk) or [Python SDK](https://pypi.org/project/compass_api_sdk/).
  </Step>

  <Step title="Get your API key" iconType="solid">
    All requests to Compass API must include an API key. Signup is free. Please
    contact us at [contact@compasslabs.ai](mailto:contact@compasslabs.ai) for
    support in building a high-performance application.
  </Step>

  <Step title="Start using Compass" iconType="regular">
    We've built an [example demo](https://wallet-demo-sand.vercel.app/) to show you how it works. Full source code is linked.

    {/*     <GithubCodeBlock */}

    {/*       name: "readAaveRates.ts", */}

    {/*       snippetNumber: 1, */}

    {/* /> */}
  </Step>
</Steps>