From 5866d89f3f5a876db2d238c7a4f1d75c5339920d Mon Sep 17 00:00:00 2001
From: Haroune | Quadratic
 <118889688+haroune-mohammedi@users.noreply.github.com>
Date: Thu, 18 Jan 2024 12:42:46 +0100
Subject: [PATCH] docs: update abiwan guides (#922)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: update abiwan guide

* docs: add a section about abiwan in the connect contract guide

* Update www/docs/guides/connect_contract.md

---------

Co-authored-by: Ivan Pavičić <ivan.pavicic@live.com>
---
 .../guides/automatic_cairo_ABI_parsing.md     | 49 ++++++++++++-------
 www/docs/guides/connect_contract.md           |  7 +++
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/www/docs/guides/automatic_cairo_ABI_parsing.md b/www/docs/guides/automatic_cairo_ABI_parsing.md
index f0a5b8a65..ce5b65ae7 100644
--- a/www/docs/guides/automatic_cairo_ABI_parsing.md
+++ b/www/docs/guides/automatic_cairo_ABI_parsing.md
@@ -19,7 +19,7 @@ First, you need to wrap your ABI in a array and export it as a `const`.
 Example:
 
 ```js
-export const tAbi = [
+export const ABI = [
   {
     type: 'function',
     name: 'increase_balance',
@@ -35,35 +35,48 @@ export const tAbi = [
 ] as const;
 ```
 
-Later on, to use it in our code, we have 2 options.
-
-### Option 1
+Later on, to use it in our code:
 
 ```js
-import { tAbi } from '../__mocks__/hello';
-import { TypedContract } from '../src';
+import { Contract, RpcProvider, constants } from 'starknet';
+
+const address = "YOUR_ADDRESS_HERE";
+const provider = new RpcProvider({ nodeUrl: `${yourNodeUrl}` });
+const contract = new Contract(ABI, address, provider).typedv2(ABI);
 
-let cairo1Contract: TypedContract<typeof tAbi>; // tAbi is your Cairo contract ABI
+// Notice the autocompletion and typechecking in your editor
+const result = await contract.increase_balance(100);
 ```
 
-After that, you can use `cairo1Contract` in your code as you would before, but with autocomplete and type checking!
+After that, you can use `contract` in your code as you would before, but with autocompletion and typechecking!
 
-For example:
+### Generate `abi.ts` from the contract class
 
-```js
-const tx = await cairo1Contract.increase_balance(100);
+If you have your contract class in a Json file, you can use the abiwan CLI to generate the `abi.ts` typescript file
+
+```bash
+npx abi-wan-kanabi --input /path/to/contract_class.json --output /path/to/abi.ts
 ```
 
-### Option 2
+### Usage for deployed contracts
 
-```js
-import { tAbi } from '../__mocks__/hello';
+Let's say you want to interact with the [Ekubo: Core](https://starkscan.co/contract/0x00000005dd3d2f4429af886cd1a3b08289dbcea99a294197e9eb43b0e0325b4b) contract
+
+You need to first get the **ABI** of the contract and export it in a typescript file, you can do so using one command combining both [`starkli`](https://github.com/xJonathanLEI/starkli) (tested with version 0.2.3) and `npx abi-wan-kanabi`:
 
-// ...
+```bash
+starkli class-at "0x00000005dd3d2f4429af886cd1a3b08289dbcea99a294197e9eb43b0e0325b4b" --network mainnet | npx abi-wan-kanabi --input /dev/stdin --output abi.ts
+```
 
-let cairo1Contract = new Contract(compiledHelloSierra.abi, dd.deploy.contract_address, account);
+```typescript
+import { Contract, RpcProvider, constants } from "starknet";
+import { ABI } from "./abi";
 
-let cairo1ContractTyped = cairo1Contract.typed(tAbi);
+const address = "0x00000005dd3d2f4429af886cd1a3b08289dbcea99a294197e9eb43b0e0325b4b";
+const provider = new RpcProvider({ nodeUrl: constants.NetworkName.SN_MAIN });
+const contract = new Contract(ABI, address, provider).typedv2(ABI);
 
-cairo1ContractTyped.test_bool();
+// Notice the types inferred for the parameter and the returned value
+const primary_inteface_id = contract.get_primary_interface_id()
+const protocol_fees_collected = contract.get_protocol_fees_collected('0x1')
 ```
diff --git a/www/docs/guides/connect_contract.md b/www/docs/guides/connect_contract.md
index 660e9c272..d4ef7dff8 100644
--- a/www/docs/guides/connect_contract.md
+++ b/www/docs/guides/connect_contract.md
@@ -42,6 +42,7 @@ const compiledContract = json.parse(fs.readFileSync("./compiledContracts/test.js
 // initialize provider
 const provider = new RpcProvider({ nodeUrl: `${myNodeUrl}` });
 
+
 // initialize deployed contract
 const testAddress = "0x7667469b8e93faa642573078b6bf8c790d3a6184b2a1bb39c5c923a732862e1";
 const compiledTest = json.parse(fs.readFileSync("./compiledContracts/test.json").toString("ascii"));
@@ -49,3 +50,9 @@ const compiledTest = json.parse(fs.readFileSync("./compiledContracts/test.json")
 // connect the contract
 const myTestContract = new Contract(compiledTest.abi, testAddress, provider);
 ```
+
+## Typechecking and autocompletion
+
+If you want to have typechecking and autocompletion for your contracts functions calls and catch typing errors early, you can use Abiwan! 
+
+See [this guide](./automatic_cairo_ABI_parsing.md) for more details.