From b5f7b1bde85540e4f07b02cfd8349b20a226e1f6 Mon Sep 17 00:00:00 2001 From: Elias Tazartes Date: Thu, 7 Nov 2024 18:20:01 +0100 Subject: [PATCH 1/2] docs: add kakarot v1 docs (very light) --- docs/pages/docs/kakarot-connectors.mdx | 94 ++++++++++++++++++++++++++ docs/sidebar.ts | 9 +++ 2 files changed, 103 insertions(+) create mode 100644 docs/pages/docs/kakarot-connectors.mdx diff --git a/docs/pages/docs/kakarot-connectors.mdx b/docs/pages/docs/kakarot-connectors.mdx new file mode 100644 index 00000000..6851e582 --- /dev/null +++ b/docs/pages/docs/kakarot-connectors.mdx @@ -0,0 +1,94 @@ +# Overview + +Kakarot is a provable EVM built on the Cairo ZK-VM, Starkware's turing complete and efficient ZK-VM. For more information, visit Kakarot's [documentation](https://docs.kakarot.org/starknet/architecture/understanding-kakarot). + +Kakarot on Starknet allows for EVM applications to interact with Starknet as well as interoperability between EVM tools and Cairo dApps. + +import { Callout } from "vocs/components"; + + + starknet-react/kakarot is currently in preview. If you experience any issue, + feel free to open an issue on + [GitHub](https://github.com/apibara/starknet-react/tree/main/packages/kakarot). + + +Kakarot connectors allows EVM wallet users (non-Snaps Metamask, Rabby, Subwallet EVM, Phantom EVM) to connect to Starknet dApps (i.e. developped in Cairo) with an EVM wallet. +It is a set of connectors based on [wagmi](https://wagmi.sh/) EVM connectors. + +The library is able to detect EVM connectors that the user has installed on their browser based on [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963). + +## Getting Started + +:::code-group + +```bash [npm] +npm add @starknet-react/kakarot +``` + +```bash [pnpm] +pnpm add @starknet-react/kakarot +``` + +::: + +Here is an example code snippet to add Kakarot connectors in a dApp. + +```tsx twoslash +import React from "react"; +import { + StarknetConfig, + useInjectedConnectors, + argent, + braavos, + publicProvider, + voyager, +} from "@starknet-react/core"; +import { sepolia, mainnet } from "@starknet-react/chains"; +import { Chain } from "@starknet-react/chains"; +import { kakarotConnectors } from "@starknet-react/kakarot"; + +export function StarknetProvider({ + children, + defaultChain, +}: { + children: React.ReactNode; + defaultChain: Chain; +}) { + const chains = [sepolia, mainnet]; + const provider = publicProvider(); + console.log("provider", provider); + const { connectors } = useInjectedConnectors({ + // Show these connectors if the user has no connector installed. + recommended: [argent(), braavos(), ...kakarotConnectors(provider)], + // Hide recommended connectors if the user has any connector installed. + includeRecommended: "always", + // Randomize the order of the connectors. + order: "alphabetical", + }); + + return ( + + {children} + + ); +} +``` + +## How It Works + +When using Kakarot on Starknet, users manipulate two addresses: + +- their EVM address (associated with their EOA's signing key or their ERC-4337 account); +- an underlying Starknet account which address is derived from the user's EVM address. It can be queried using kakarot core smart contract's method `get_starknet_address(address evm_address)` + +Wallet interaction: + +1. User connects their EVM wallet, the Kakarot Core smart contract deployed on Starknet resolves the Starknet address associated to the user's EVM account. +1. Upon performing an action on a Starknet dApp with the Kakarot connector, a transaction targeting the [Kakarot Multicall Cairo Precompile](https://github.com/kkrt-labs/kakarot/blob/main/cairo_zero/kakarot/precompiles/kakarot_precompiles.cairo#L85) that will perform the expected call is generated. +1. User is able to see their underlying Starknet address with the Kakarot connector, as well as access their transaction status and data. diff --git a/docs/sidebar.ts b/docs/sidebar.ts index 21c2ae52..7697caf7 100644 --- a/docs/sidebar.ts +++ b/docs/sidebar.ts @@ -170,5 +170,14 @@ export const sidebar = { }, ], }, + { + text: "Kakarot", + items: [ + { + text: "Kakarot Connectors", + link: "/docs/kakarot-connectors", + }, + ], + }, ], } as const satisfies Sidebar; From 0d15ba1e1576b5df3baf1099311ad1749eb75c5c Mon Sep 17 00:00:00 2001 From: Elias Tazartes Date: Thu, 7 Nov 2024 18:33:13 +0100 Subject: [PATCH 2/2] fix type for get_starknet_address signature --- docs/pages/docs/kakarot-connectors.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/docs/kakarot-connectors.mdx b/docs/pages/docs/kakarot-connectors.mdx index 6851e582..e6b98617 100644 --- a/docs/pages/docs/kakarot-connectors.mdx +++ b/docs/pages/docs/kakarot-connectors.mdx @@ -85,7 +85,7 @@ export function StarknetProvider({ When using Kakarot on Starknet, users manipulate two addresses: - their EVM address (associated with their EOA's signing key or their ERC-4337 account); -- an underlying Starknet account which address is derived from the user's EVM address. It can be queried using kakarot core smart contract's method `get_starknet_address(address evm_address)` +- an underlying Starknet account which address is derived from the user's EVM address. It can be queried using kakarot core smart contract's method `get_starknet_address(felt evm_address)` Wallet interaction: