https://github.com/digixglobal/react-trezor-container
React Trezor Container
https://github.com/digixglobal/react-trezor-container
Last synced: 3 months ago
JSON representation
React Trezor Container
- Host: GitHub
- URL: https://github.com/digixglobal/react-trezor-container
- Owner: DigixGlobal
- Created: 2018-06-08T01:51:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T08:13:33.000Z (about 2 years ago)
- Last Synced: 2024-10-19T22:16:44.364Z (8 months ago)
- Language: JavaScript
- Size: 265 KB
- Stars: 0
- Watchers: 8
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Trezor Container
React Component that implements [Trezor Connect](https://github.com/trezor/connect)
## Features
- Public Address retrieval
- Returns an HD wallet that allows you to retrieve public addresses based ond the provided path
- Transactions
- `signTransaction`
- `sigMessage`
- `getAddress`
- `getAddresses` option for pulling addresses based on the specified path (defaults to first account if not provided)
- `expect` option for validating address
- `onReady` event handler for triggering actions
## Example
- Getting addresses
```
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Message } from 'semantic-ui-react';
import TrezorContainer from '@digix/react-trezor-container';
import TrezorAddressList from './trezor_keystore_address_list';
import TrezorKeystoreAddressItem from './trezor_keystore_address_item';
export default class TrezorKeystoreCreationForm extends Component {
constructor(props) {
super(props);
this.renderItem = this.renderItem.bind(this);
this.handleItemChange = this.handleItemChange.bind(this);
this.renderContainer = this.renderContainer.bind(this);
}
handleItemChange(e) {
const { name, value } = e;
const { enabled } = value;
const addresses = (this.props.formData || {}).addresses || {};
if (!enabled && addresses) {
delete addresses[name];
this.props.formChange({ name: 'addresses', value: { ...addresses } });
} else {
const update = {
networks: (addresses[name] || {}).networks || this.props.formData.networks,
tokens: (addresses[name] || {}).tokens || this.props.formData.tokens,
...value,
};
this.props.formChange({ name: 'addresses', value: { ...addresses, [name]: { ...addresses[name], ...update } } });
}
}
renderContainer({ renderItems }) {
const count = Object.values(this.props.formData.addresses || {}).filter(a => a.enabled).length;
return (
Select addresses to enable
{count} enabled
{renderItems()}
);
}
renderError({ error }) {
return ;
}
renderItem(item) {
if (!item.address) {
return (
Getting Address Info...
);
}
const data = ((this.props.formData || {}).addresses || {})[item.kdPath] || {};
return ;
}
render() {
const { renderContainer, renderItem } = this;
// return ;
return (
(
)}
getAddresses={props => }
/>
);
}
}
TrezorKeystoreCreationForm.propTypes = {
formData: PropTypes.object.isRequired,
formChange: PropTypes.func.isRequired,
};
```
- Signing Transaction
```
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Message } from 'semantic-ui-react';
import TrezorContainer from '@digix/react-trezor-container';
export default class TrezorKeystoreTransactionSigner extends Component {
constructor(props) {
super(props);
this.handleSign = this.handleSign.bind(this);
this.state = { signed: false };
}
handleSign({ signTransaction }) {
const { txData, address, hideTxSigningModal } = this.props;
const { kdPath } = address;
signTransaction(kdPath, txData, hideTxSigningModal)
.then((signedTx) => {
this.setState({ signed: true });
hideTxSigningModal({ signedTx });
})
.catch(error => this.setState({ error }));
}
renderError() {
const { error } = this.state;
return ;
}
render() {
const { kdPath, address } = this.props.address;
const { error } = this.state;
if (error) {
return this.renderError();
}
const { signed } = this.state;
return (
(
)}
/>
);
}
}
TrezorKeystoreTransactionSigner.propTypes = {
hideTxSigningModal: PropTypes.func.isRequired,
address: PropTypes.object.isRequired,
txData: PropTypes.object.isRequired,
};
```
# TODO
- Bitcoin support