{"type": "project", "title": "Opstack Kit", "logoImg": "bafkreifzh254jz3jzuxqw3upnzj2f7io27qzmb3abebnm5a652f4xwi6su", "website": "https://opstack-kit.pages.dev", "bannerImg": "bafkreifxx4qgnhchsoacjdhd7gvpkdhl7j43tf457f2zwwklotmum64nsi", "createdAt": 1722499247920, "userGithub": "nidz-the-fact", "credentials": {"twitter": {"type": ["VerifiableCredential"], "proof": {"jws": "eyJhbGciOiJFZERTQSIsImNyaXQiOlsiYjY0Il0sImI2NCI6ZmFsc2V9..b6lVgWtAXFrk3GWH-5J5i3jLGkQlEMedFVJPGMYwPsfuGcfX0OJJ9tSyTVGU-9VZYAQSDiwZ1UK-46xZYERJCw", "type": "Ed25519Signature2018", "created": "2024-08-01T07:45:45.772Z", "proofPurpose": "assertionMethod", "verificationMethod": "did:key:z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC#z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC"}, "issuer": "did:key:z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC", "@context": ["https://www.w3.org/2018/credentials/v1"], "issuanceDate": "2024-08-01T07:45:45.772Z", "expirationDate": "2024-10-30T07:45:45.772Z", "credentialSubject": {"id": "did:pkh:eip155:1:0xB6Be617b1D6fE5DbdD21A6AcFD9e97A35ddCEfF5", "hash": "v0.0.0:vzML2M+g8QSj89XPP7YfGzAz/HqyQVoG2Jd2JiqmvYE=", "@context": [{"hash": "https://schema.org/Text", "provider": "https://schema.org/Text"}], "provider": "ClearTextTwitter#opstackkit"}}}, "description": "npm i opstack-kit\nBridging hooks for OP Stack Chains\n\nnpm i opstack-kit | is a toolkit for all upgrades. To easily connect and interact with the OP-Stack (Superchain)\n\ud83d\udcd6: https://opstack-kit.pages.dev\n\ud83e\uddd1\u200d\ud83d\udcbb: https://github.com/opstack-kit\n\n---\n\n# opstack-kit\n\nBridging hooks for OP Stack Chains\n\n## Features\n\n- Simplifies cross L1 & L2 interactions\n\n## Installation\n- #### Additional libraries\n  - ##### [opstack-kit-chains](https://opstack-kit.pages.dev/docs/opstack-kit-chains.html)\n\n```bash [npm]\nnpm i opstack-kit\n```\nor\n```bash [pnpm]\npnpm i opstack-kit\n```\nor\n```bash [bun]\nbun i opstack-kit\n```\nor\n```yarn\nyarn add opstack-kit\n```\n\n## Example\n\nOpstack Kit works with OP Stack chains. \nBy adding [opstack-kit-chains](https://opstack-kit.pages.dev/docs/opstack-kit-chains.html) You can add \"opstack-kit-chains\" a network at [this](https://github.com/opstack-kit/opstack-kit-chains/pulls).\n\n\nFor this example, we use [useWriteDepositETH](https://opstack-kit.pages.dev/docs/hooks/L1/useWriteDepositETH.html) To quickly deposit ETH to your L2 in just one click.\n\n::: code-group\n\n```tsx [app.tsx]\nimport { useWriteDepositETH } from 'opstack-kit'\n\nconst { writeDepositETH } = useWriteDepositETH()\n\nreturn (\n<button\n    onClick={() =>\n      // It should be on the correct L1 network with l2ChainId to start the transaction.\n      writeDepositETH({ \n        args: {\n          to: '0x215db47f1B2ae03ec45024Cf62ce82879b137469', // your addres\n          amount: 1n, // amount ETH (n = gwei)\n          // Others call args  \n            // gasLimit: 21000n,\n            // data: '0x',\n        },\n        l2ChainId: 11155420, // Your OP Stack chains by main/config.ts with \"opstack-kit-chains\"\n      },\n      {\n          onSuccess: (data) => {\n              console.log('Deposit successful', data);\n          },\n          onError: (error) => {\n              console.error('Error during deposit', error);\n          },\n          onSettled: (data, error) => {\n              console.log('Deposit has been settled', { data, error });\n          }\n      }\n    )}\n  >\n    Deposit ETH\n</button>\n)\n```\n\n```ts [main/config.ts]\n// main.ts\nimport { sepolia, optimismSepolia } from 'opstack-kit-chains'\n\n...\n...\n...\nconst config = getDefaultConfig({\n  appName: 'My RainbowKit App',\n  projectId: import.meta.env.VITE_SOME_KEY,\n  chains: [sepolia, optimismSepolia],\n  ssr: true,\n});\n\n---------------------------------------------------------\n// config.ts\nimport { createConfig, http } from 'wagmi'\nimport { sepolia, optimismSepolia } from 'opstack-kit-chains'\n\nexport const config = createConfig({\n  chains: [sepolia, optimismSepolia],\n  transports: {\n    [sepolia.id]: http(),\n    [optimismSepolia.id]: http(),\n  },\n})\n```\n\n:::\n\nCheck out the [Configuring](https://opstack-kit.pages.dev/docs/configuration.html) for more.\n\n## Donate\n```EVM [EVM]\n0xB6Be617b1D6fE5DbdD21A6AcFD9e97A35ddCEfF5\n```", "logoImgData": {}, "bannerImgData": {}, "projectGithub": "opstack-kit", "projectTwitter": "opstackkit"}
Opstack Kit
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](https://opstack-kit.pages.dev/docs/opstack-kit-chains.html)

```bash [npm]
npm i opstack-kit
```
or
```bash [pnpm]
pnpm i opstack-kit
```
or
```bash [bun]
bun i opstack-kit
```
or
```yarn
yarn add opstack-kit
```

## Example

Opstack Kit works with OP Stack chains. 
By adding [opstack-kit-chains](https://opstack-kit.pages.dev/docs/opstack-kit-chains.html) You can add "opstack-kit-chains" a network at [this](https://github.com/opstack-kit/opstack-kit-chains/pulls).


For this example, we use [useWriteDepositETH](https://opstack-kit.pages.dev/docs/hooks/L1/useWriteDepositETH.html) To quickly deposit ETH to your L2 in just one click.

::: code-group

```tsx [app.tsx]
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>
)
```

```ts [main/config.ts]
// 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](https://opstack-kit.pages.dev/docs/configuration.html) for more.

## Donate
```EVM [EVM]
0xB6Be617b1D6fE5DbdD21A6AcFD9e97A35ddCEfF5
```
Opstack Kit