fix: add callout sections (#3)

content/sdk/00.index.md

@@ -18,4 +18,4 @@ These SDKs, available in various programming languages, streamline the process o
   - Improves developer experience by simplifying account management and enabling features
     like multi-signature wallets and on-chain governance.
 
-![my image](/images/sdk/test.png)
+![docs](/images/sdk/docs.png)

content/sdk/10.js/00.ethers/v5/03.providers.md

@@ -14,15 +14,12 @@ Two providers are available:
 - [`Web3Provider`](#web3provider): Extends the zkSync Era [`Provider`](#provider) class to make it more compatible
   with Web3 wallets.
 
-> - Use the [`Web3Provider`](#web3provider) for browser integrations.
-> - Access the latest [provider.ts code](https://github.com/zksync-sdk/zksync-ethers/blob/ethers-v5/src/provider.ts)
-in the zkSync Era GitHub repo.
+::callout{icon="i-heroicons-light-bulb"}
+Use the [`Web3Provider`](#web3provider) for browser integrations.
+::
 
 ## `Provider`
 
-> - This doc details zkSync Era specific methods.
-> - Ethers implementations link to the [Ethers Providers documentation](https://docs.ethers.org/v5/api/providers/).
-
 ### `constructor`
 
 Returns a zkSync Era `Provider` object.
@@ -1147,9 +1144,9 @@ console.log(`L1 chain ID: ${await provider.l1ChainId()}`);
 Returns the L1 token address equivalent for a L2 token address as they are not equal.
 ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 
@@ -1175,9 +1172,9 @@ console.log(`L1 token address: ${await provider.l1TokenAddress("0x3e7676937A7E96
 Returns the L2 token address equivalent for a L1 token address as they are not equal.
 ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 

content/sdk/10.js/00.ethers/v5/04.accounts.md

@@ -217,11 +217,9 @@ Returns L1 bridge contracts.
 async getL1BridgeContracts(): Promise<{ erc20: IL1Bridge; weth: IL1Bridge }>
 ```
 
-:::note
-
+::callout{icon="i-heroicons-light-bulb"}
 There is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
-
-:::
+::
 
 #### Example
 
@@ -450,9 +448,9 @@ const ethWallet = wallet.ethWallet();
 
 Returns the L2 token address equivalent for a L1 token address as they are not equal. ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 
@@ -1789,7 +1787,7 @@ const browserProvider = new Web3Provider(window.ethereum);
 const signer = Signer.from(browserProvider.getSigner(), Provider.getDefaultProvider(types.Network.Sepolia));
 
 const tokenL2 = "0x6a4Fb925583F7D4dF82de62d98107468aE846FD1";
-await wallet.withdraw({
+await signer.withdraw({
   token: tokenL2,
   amount: 10_000_000,
   paymasterParams: utils.getPaymasterParams(paymaster, {
@@ -1846,11 +1844,9 @@ Returns L1 bridge contracts.
 async getL1BridgeContracts(): Promise<{ erc20: IL1Bridge; weth: IL1Bridge }>
 ```
 
-:::note
-
-there is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
-
-:::
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+There is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
+::
 
 ### Example
 
@@ -1910,9 +1906,9 @@ console.log(await signer.getBalanceL1(tokenL1));
 
 Returns the L2 token address equivalent for a L1 token address as they are not equal. ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 

content/sdk/10.js/00.ethers/v5/07.utils.md

@@ -179,7 +179,9 @@ export const NONCE_HOLDER_ADDRESS = "0x0000000000000000000000000000000000008003"
 - Use a large amount of gas per pubdata for signing on layer 2.
 - The amount ensures any reasonable limit is accepted.
 
-> The operator is NOT required to use the actual value and can use any value up to that signed by the user.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+The operator is NOT required to use the actual value and can use any value up to that signed by the user.
+::
 
 ```typescript
 export const DEFAULT_GAS_PER_PUBDATA_LIMIT = 50000;
@@ -201,12 +203,13 @@ Converts the address that submitted a transaction to the inbox on L1 to the `msg
 
 Returns the `msg.sender` of the L1->L2 transaction as the `address` of the contract that initiated the transaction.
 
-:::tip More info
+::callout{icon="i-heroicons-light-bulb"}
+More info
 
-1. During a normal transaction, if contract A calls contract B, the `msg.sender` is A.
-2. During L1->L2 communication, if an EOA X calls contract B, the `msg.sender` is X.
-3. During L1->L2 communication, if a contract A calls contract B, the `msg.sender` is `applyL1ToL2Alias(A)`.
-   :::
+- During a normal transaction, if contract A calls contract B, the `msg.sender` is A.
+- During L1->L2 communication, if an EOA X calls contract B, the `msg.sender` is X.
+- During L1->L2 communication, if a contract A calls contract B, the `msg.sender` is `applyL1ToL2Alias(A)`.
+::
 
 #### Inputs
 
@@ -244,7 +247,7 @@ Throws an error if it is not.
 async function checkBaseCost(baseCost: ethers.BigNumberish, value: ethers.BigNumberish | Promise<ethers.BigNumberish>): Promise<void>;
 ```
 
-### Example
+#### Example
 
 ```ts
 const baseCost = 100;
@@ -260,7 +263,9 @@ try {
 
 Generates a future-proof contract address using salt plus bytecode which allows determination of an address before deployment.
 
-> The zkSync Era implementation is slightly different from Ethereum.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+The zkSync Era implementation is slightly different from Ethereum.
+::
 
 #### Inputs
 
@@ -282,9 +287,9 @@ const address = utils.create2Address("0x36615Cf349d7F6344891B1e7CA7C72883F5dc049
 // address = "0x29bac3E5E8FFE7415F97C956BFA106D70316ad50"
 ```
 
-:::tip
+::callout{icon="i-heroicons-light-bulb"}
 The `prefix` is equal to `keccak256("zksyncCreate")`.
-:::
+::
 
 ### `createAddress`
 
@@ -327,10 +332,9 @@ function eip712TxHash(transaction: any, ethSignature?: EthereumSignature): strin
 
 Returns an estimation of L2 gas required for token bridging via the default ERC20 bridge.
 
-::: tip More info
-
-- See the [default bridges documentation](https://docs.zksync.io/build/developer-reference/bridging-asset.md#default-bridges)
-  :::
+::callout{icon="i-heroicons-light-bulb" to="https://docs.zksync.io/build/developer-reference/bridging-asset.md#default-bridges"}
+Check out the default bridges documentation.
+::
 
 #### Inputs
 
@@ -659,7 +663,7 @@ Parses an EIP712 transaction from a payload.
 export function parseTransaction(payload: ethers.BytesLike): ethers.Transaction;
 ```
 
-### Example
+#### Example
 
 ```ts
 import { types } from "zksync-ethers";

content/sdk/10.js/00.ethers/v6/00.getting-started.md

@@ -1,8 +1,8 @@
 # Getting Started
 
-::: info
+::callout
 Take a look at [migration guide](migration.md) if you are migrating from `zksync-web3`.
-:::
+::
 
 This is a short introduction to `zksync-ethers` SDK, but covers many of the most common operations
 that developers require and provides a starting point for those newer to zkSync Era.

content/sdk/10.js/00.ethers/v6/03.providers.md

@@ -14,15 +14,12 @@ Two providers are available:
 - [`BrowserProvider`](#browserprovider): Extends the zkSync Era [`Provider`](#provider) class to
   make it more compatible with Web3 wallets.
 
-> - Use the [`BrowserProvider`](#browserprovider) for browser integrations.
-> - Access the latest [provider.ts code](https://github.com/zksync-sdk/zksync-ethers/blob/main/src/provider.ts)
-    in the zkSync Era GitHub repo.
+::callout{icon="i-heroicons-light-bulb"}
+Use the [`BrowerProvider`](#browserprovider) for browser integrations.
+::
 
 ## `Provider`
 
-> - This doc details zkSync Era specific methods.
-> - Ethers implementations link to the [Ethers Providers documentation](https://docs.ethers.org/v6/api/providers/).
-
 ### `constructor`
 
 Returns a zkSync Era `Provider` object.
@@ -1165,9 +1162,9 @@ console.log(`L1 chain ID: ${await provider.l1ChainId()}`);
 
 Returns the L1 token address equivalent for a L2 token address as they are not equal. ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 
@@ -1192,9 +1189,9 @@ console.log(`L1 token address: ${await provider.l1TokenAddress("0x3e7676937A7E96
 
 Returns the L2 token address equivalent for a L1 token address as they are not equal. ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 

content/sdk/10.js/00.ethers/v6/04.accounts.md

@@ -215,11 +215,9 @@ Returns L1 bridge contracts.
 async getL1BridgeContracts(): Promise<{ erc20: IL1Bridge; weth: IL1Bridge }>
 ```
 
-:::note
-
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 There is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
-
-:::
+::
 
 #### Example
 
@@ -1771,9 +1769,9 @@ const browserProvider = new BrowserProvider(window.ethereum);
 const signer = Signer.from(await browserProvider.getSigner(), Number((await browserProvider.getNetwork()).chainId), Provider.getDefaultProvider(types.Network.Sepolia));
 
 const tokenL2 = "0x6a4Fb925583F7D4dF82de62d98107468aE846FD1";
-const tx = await signer.withdraw({
+await signer.withdraw({
   token: tokenL2,
-  amount: 10_000_000,
+  amount: 10_000_000n,
 });
 ```
 
@@ -1789,7 +1787,7 @@ const browserProvider = new BrowserProvider(window.ethereum);
 const signer = Signer.from(await browserProvider.getSigner(), Number((await browserProvider.getNetwork()).chainId), Provider.getDefaultProvider(types.Network.Sepolia));
 
 const tokenL2 = "0x6a4Fb925583F7D4dF82de62d98107468aE846FD1";
-const tx = await wallet.withdraw({
+await signer.withdraw({
   token: tokenL2,
   amount: 10_000_000n,
   paymasterParams: utils.getPaymasterParams(paymaster, {
@@ -1846,11 +1844,9 @@ Returns L1 bridge contracts.
 async getL1BridgeContracts(): Promise<{ erc20: IL1Bridge; weth: IL1Bridge }>
 ```
 
-:::note
-
-there is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
-
-:::
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+There is no separate Ether bridge contract, [Main contract](./accounts.md#getmaincontract) is used instead.
+::
 
 ### Example
 
@@ -1911,9 +1907,9 @@ console.log(await signer.getBalanceL1(tokenL1));
 
 Returns the L2 token address equivalent for a L1 token address as they are not equal. ETH's address is set to zero address.
 
-:::warning
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
 Only works for tokens bridged on default zkSync Era bridges.
-:::
+::
 
 #### Inputs
 

content/sdk/10.js/00.ethers/v6/07.utils.md

@@ -179,7 +179,9 @@ export const NONCE_HOLDER_ADDRESS = "0x0000000000000000000000000000000000008003"
 - Use a large amount of gas per pubdata for signing on layer 2.
 - The amount ensures any reasonable limit is accepted.
 
-> The operator is NOT required to use the actual value and can use any value up to that signed by the user.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+The operator is NOT required to use the actual value and can use any value up to that signed by the user.
+::
 
 ```typescript
 export const DEFAULT_GAS_PER_PUBDATA_LIMIT = 50_000;
@@ -201,12 +203,13 @@ Converts the address that submitted a transaction to the inbox on L1 to the `msg
 
 Returns the `msg.sender` of the L1->L2 transaction as the `address` of the contract that initiated the transaction.
 
-:::tip More info
+::callout{icon="i-heroicons-light-bulb"}
+More info
 
-1. During a normal transaction, if contract A calls contract B, the `msg.sender` is A.
-2. During L1->L2 communication, if an EOA X calls contract B, the `msg.sender` is X.
-3. During L1->L2 communication, if a contract A calls contract B, the `msg.sender` is `applyL1ToL2Alias(A)`.
-   :::
+- During a normal transaction, if contract A calls contract B, the `msg.sender` is A.
+- During L1->L2 communication, if an EOA X calls contract B, the `msg.sender` is X.
+- During L1->L2 communication, if a contract A calls contract B, the `msg.sender` is `applyL1ToL2Alias(A)`.
+::
 
 #### Inputs
 
@@ -260,7 +263,9 @@ try {
 
 Generates a future-proof contract address using salt plus bytecode which allows determination of an address before deployment.
 
-> The zkSync Era implementation is slightly different from Ethereum.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+The zkSync Era implementation is slightly different from Ethereum.
+::
 
 #### Inputs
 
@@ -282,9 +287,9 @@ const address = utils.create2Address("0x36615Cf349d7F6344891B1e7CA7C72883F5dc049
 // address = "0x29bac3E5E8FFE7415F97C956BFA106D70316ad50"
 ```
 
-:::tip
+::callout{icon="i-heroicons-light-bulb"}
 The `prefix` is equal to `keccak256("zksyncCreate")`.
-:::
+::
 
 ### `createAddress`
 
@@ -327,7 +332,9 @@ function eip712TxHash(transaction: any, ethSignature?: EthereumSignature): strin
 
 Returns an estimation of L2 gas required for token bridging via the default ERC20 bridge.
 
-> See the [default bridges documentation](https://docs.zksync.io/build/developer-reference/bridging-asset.md#default-bridges)
+::callout{icon="i-heroicons-light-bulb", to="https://docs.zksync.io/build/developer-reference/bridging-asset.md#default-bridges"}
+Check out the default bridges documentation.
+::
 
 #### Inputs
 

content/sdk/10.js/00.ethers/v6/11.migration.md

@@ -1,13 +1,12 @@
 # Migration from `zksync-web3`
 
-::: tip Note on v5 and v6
+::callout{icon="i-heroicons-light-bulb"}
+Note on v5 and v6
 
-This migration notes apply to `zksync-ethers v6`.
-
-If you're using v5, you don't need to do any changes in your code as `zksync-ethers v5` uses `ethers v5`
+- This migration notes apply to `zksync-ethers v6`.
+- If you're using v5, you don't need to do any changes in your code as `zksync-ethers v5` uses `ethers v5`
 similar to the deprecated `zksync-web3`.
-
-:::
+::
 
 This guide provides some high-level differences between `zksync-web3`/`zksync-ethers v5` and `zksync-ethers v6`
 for those who are familiar with `zksync-web3` and need a quick primer. `zksync-ethers v6` has several differences