npm i opstack-kit Bridging hooks for OP Stack Chains

npm i opstack-kit | is a toolkit for all upgrades. To easily connect and interact with the OP-Stack (Superchain) 📖: https://opstack-kit.pages.dev 🧑‍💻: https://github.com/opstack-kit

opstack-kit

Bridging hooks for OP Stack Chains

Features

• Simplifies cross L1 & L2 interactions

Installation

• Additional libraries

  • opstack-kit-chains

npm i opstack-kit

or

pnpm i opstack-kit

or

bun i opstack-kit

or

yarn add opstack-kit

Example

Opstack Kit works with OP Stack chains. By adding opstack-kit-chains You can add "opstack-kit-chains" a network at this.

For this example, we use useWriteDepositETH To quickly deposit ETH to your L2 in just one click.

::: code-group

import { useWriteDepositETH } from 'opstack-kit'

const { writeDepositETH } = useWriteDepositETH()

return (
<button
    onClick={() =>
      // It should be on the correct L1 network with l2ChainId to start the transaction.
      writeDepositETH({ 
        args: {
          to: '0x215db47f1B2ae03ec45024Cf62ce82879b137469', // your addres
          amount: 1n, // amount ETH (n = gwei)
          // Others call args  
            // gasLimit: 21000n,
            // data: '0x',
        },
        l2ChainId: 11155420, // Your OP Stack chains by main/config.ts with "opstack-kit-chains"
      },
      {
          onSuccess: (data) => {
              console.log('Deposit successful', data);
          },
          onError: (error) => {
              console.error('Error during deposit', error);
          },
          onSettled: (data, error) => {
              console.log('Deposit has been settled', { data, error });
          }
      }
    )}
  >
    Deposit ETH
</button>
)

// main.ts
import { sepolia, optimismSepolia } from 'opstack-kit-chains'

...
...
...
const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: import.meta.env.VITE_SOME_KEY,
  chains: [sepolia, optimismSepolia],
  ssr: true,
});

---------------------------------------------------------
// config.ts
import { createConfig, http } from 'wagmi'
import { sepolia, optimismSepolia } from 'opstack-kit-chains'

export const config = createConfig({
  chains: [sepolia, optimismSepolia],
  transports: {
    [sepolia.id]: http(),
    [optimismSepolia.id]: http(),
  },
})

:::

Check out the Configuring for more.

Donate

0xB6Be617b1D6fE5DbdD21A6AcFD9e97A35ddCEfF5