metadata: {"title": "Opstack Kit", "logoImg": "bafkreifzh254jz3jzuxqw3upnzj2f7io27qzmb3abebnm5a652f4xwi6su", "website": "https://opstack-kit.pages.dev", "bannerImg": "bafkreifxx4qgnhchsoacjdhd7gvpkdhl7j43tf457f2zwwklotmum64nsi", "createdAt": 1722501046054, "userGithub": "nidz-the-fact", "credentials": {"twitter": {"type": ["VerifiableCredential"], "proof": {"jws": "eyJhbGciOiJFZERTQSIsImNyaXQiOlsiYjY0Il0sImI2NCI6ZmFsc2V9..VYFAulSzdBi0v6Qzy-cagz0x7pAcVmX4OiIcTJisKdyDdzZ36U_1i19WuBW_sgXtyY7DSL0cd1lM-LEtcN0vCQ", "type": "Ed25519Signature2018", "created": "2024-08-01T14:22:11.234Z", "proofPurpose": "assertionMethod", "verificationMethod": "did:key:z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC#z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC"}, "issuer": "did:key:z6MkghvGHLobLEdj1bgRLhS4LPGJAvbMA1tn2zcRyqmYU5LC", "@context": ["https://www.w3.org/2018/credentials/v1"], "issuanceDate": "2024-08-01T14:22:11.234Z", "expirationDate": "2024-10-30T14:22:11.234Z", "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"}
name: Opstack Kit