# TransactionProgress

## Usage <a href="#usage" id="usage"></a>

```jsx
function App() {
  const [visible, setVisible] = useState(false)
  const opener = useRef()

  return (
    <div>
      <div ref={opener}>
        <Button onClick={() => setVisible(true)}>Check transaction</Button>
      </div>
      <TransactionProgress
        transactionHashUrl="https://etherscan.io/tx/0x5c50…2060"
        progress={0.3}
        visible={visible}
        endTime={new Date(Date.now() + 100000)}
        onClose={() => setVisible(false)}
        opener={opener}
        slow
      />
    </div>
  )
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-655a858157a04ec71cc66e2c23e636a26edf4eff%2FSchermata%202022-06-25%20alle%2022.48.33.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `transactionHash` <a href="#transactionhash" id="transactionhash"></a>

* Type: `String`

Hash of transaction which will be opened on Etherscan.

#### `progress` <a href="#progress" id="progress"></a>

* Type: `number`

Progress of transaction.

#### `endTime` <a href="#endtime" id="endtime"></a>

* Type: `Date` object

Estimated end time of transaction.

#### `slow` <a href="#slow" id="slow"></a>

* Type: `Bool`
* Default: `false`

Set to true to inform the user that a transaction is taking longer than expected.

#### `handleClose` <a href="#handleclose" id="handleclose"></a>

* Type: `Function`

Provide a function that handles closing of the component.