github.com/ethereum-optimism/optimism@v1.7.2/packages/contracts-ts/README.md (about)

     1  ## Contracts TS
     2  
     3  [![codecov](https://codecov.io/gh/ethereum-optimism/optimism/branch/develop/graph/badge.svg?token=0VTG7PG7YR&flag=contracts-bedrock-tests)](https://codecov.io/gh/ethereum-optimism/optimism)
     4  
     5  ABI and Address constants + generated code from [@eth-optimism/contracts-bedrock/](../contracts-bedrock/) for use in TypeScript.
     6  
     7  Much of this package is generated. See [CODE_GEN.md](./CODE_GEN.md) for instructions on how to generate.
     8  
     9  #### @eth-optimism/contracts-ts
    10  
    11  The main entrypoint exports constants related to contracts bedrock as const. As const allows it to be [used in TypeScript with stronger typing than importing JSON](https://github.com/microsoft/TypeScript/issues/32063).
    12  
    13  - Exports contract abis.
    14  - Exports contract addresses
    15  
    16  ```typescript
    17  import {
    18    l2OutputOracleProxyABI,
    19    l2OutputOracleAddresses,
    20  } from '@eth-optimism/contracts-ts'
    21  
    22  console.log(l2OutputOracleAddresses[10], abi)
    23  ```
    24  
    25  Addresses are also exported as an object for convenience.
    26  
    27  ```typescript
    28  import { addresses } from '@eth-optimism/contracts-ts'
    29  
    30  console.log(addresses.l2OutputOracle[10])
    31  ```
    32  
    33  #### @eth-optimism/contracts-ts/react
    34  
    35  - All [React hooks](https://wagmi.sh/cli/plugins/react) `@eth-optimism/contracts-ts/react`
    36  
    37  ```typescript
    38  import { useAddressManagerAddress } from '@eth-optimism/contracts-ts/react'
    39  
    40  const component = () => {
    41    const { data, error, loading } = useAddressManagerAddress()
    42    if (loading) {
    43      return <div>Loading</div>
    44    }
    45    if (err) {
    46      return <div>Error</div>
    47    }
    48    return <div>{data}</div>
    49  }
    50  ```
    51  
    52  #### @eth-optimism/contracts-ts/actions
    53  
    54  - All [wagmi actions](https://wagmi.sh/react/actions) for use in Vanilla JS or non react code
    55  
    56  ```typescript
    57  import { readSystemConfig } from '@eth-optimism/contracts-ts/actions'
    58  console.log(await readSystemConfig())
    59  ```
    60  
    61  #### See Also
    62  
    63  - [Contracts bedrock specs](../../specs/)
    64  - [Wagmi](https://wagmi.sh)