import React from 'react'
import { storiesOf } from '@storybook/react'
import Address from './Address'
import Transaction from './Transaction'
import StoryWrapper from 'storybookComponents/StoryWrapper'

storiesOf('Etherscan Links', module)
  .addWithInfo(
    'Addresses',
    `
            This is the basic usage of the Address component. By default all Adresses are **display: block** because
            otherwise **text-overflow: ellipsis** has no effect. To use **display: inline** instead set **inline** prop to true.

            #### Props:
            ---
            - hash: string,
            - children?: Object,
            - inline?: boolean,
            - network?: 'main' | 'ropsten'
          `,
    () => (
      <StoryWrapper>
        <Address hash="0x735782e73a14d061b651efd2d35242e55e9dfc8d" />
        <div style={{ width: '192px' }}>
          <Address hash="0x735782e73a14d061b651efd2d35242e55e9dfc8d" />
        </div>
        <Address hash="0x735782e73a14d061b651efd2d35242e55e9dfc8d">
          Address with a different link text
        </Address>
        <Address
          hash="0x299fd1f7356b9d4bf7b3223ff8f88fe1a818680c66b9259bf207a7138e5ea914"
          network="ropsten"
        >
          Address link pointing to ropsten network
        </Address>
      </StoryWrapper>
    )
  )
  .addWithInfo(
    'Transactions',
    `
          This is the basic usage of the Transaction component. By default all Adresses are **display: block** because
          otherwise **text-overflow: ellipsis** has no effect. To use **display: inline** instead set **inline** prop to true.


          #### Props:
          ---
          - hash: string,
          - children?: Object,
          - inline?: boolean,
          - network?: 'main' | 'ropsten'
        `,
    () => (
      <StoryWrapper>
        <Transaction hash="0x9354a774089c29398f9935d9b8af4f027382744b598e775e93bba3eb759bda40" />
        <div style={{ width: '192px' }}>
          <Transaction hash="0x9354a774089c29398f9935d9b8af4f027382744b598e775e93bba3eb759bda40" />
        </div>
        <Transaction hash="0x9354a774089c29398f9935d9b8af4f027382744b598e775e93bba3eb759bda40">
          Transaction with a different link text
        </Transaction>
        <Transaction
          hash="0x299fd1f7356b9d4bf7b3223ff8f88fe1a818680c66b9259bf207a7138e5ea914"
          network="ropsten"
        >
          Transaction link pointing to ropsten network
        </Transaction>
      </StoryWrapper>
    )
  )
