React-LightWallet

This module is a visual representation (based on a React component) of the eth-lightwallet project. It is supposed to be used by other projects as an easy way to enable the features that the eth-lightwallet provides.

This component is highly configurable through CSS styles and, once mounted, will automatically enable sending transactions from any eth-lightwallet account.

It is constituted of a main DIV tag (configurable through the property mainDivClassName) inside which we have two more divs: one for the buttons (property buttonsDivClassName) and other to present the addresses (radio buttons) of the wallet (property addressesDivClassName).

Two buttons are always shown in their div area: one to create a new wallet and other to load a saved wallet. If a wallet is loaded (using either of previous button), one third button is shown: create a new address in the wallet.

The buttons are configurable through the property buttonClassName. The labels of the buttons are also configurable (see below for a list of all configuration options).

In the addresses div are, we show one radio button for each wallet address loaded. User can select which address he want's to use for sending transaction. When user changes the selected address, the react component that contains this component receives a event through the onChangeSelectedAddress with the address selected.

Installation

Install it using npm install react-lightwallet.

After that, you can start using this component in your project:

var LightWallet = require('react-lightwallet');

Configuration

The following properties can be passed to this react component to configure its look and feel (feel free to suggest other configurations if you feel the need for it):

• mainDivClassName (default: ''): the CSS style that should be used for the main div, i.e., the div that contains all the components.

• mainDivStyle (default: ''): Use this property if you want to use CSS the React way.

• buttonsDivClassName (default: ''): the CSS style of the div that contains the buttons.

• buttonsDivStyle (default: ''): Use this property if you want to use CSS the React way.

• addressesDivClassName (default: ''): the CSS style of the div that contains the addresses options.

• addressesDivStyle (default: ''): Use this property if you want to use CSS the React way.

• addressClassName (default: ''): the CSS style that will be used in the label that shows each address option.

• addressStyle (default: ''): Use this property if you want to use CSS the React way.

• radioClassName (default: ''): the CSS style that will be used in the radio buttons of each address option.

• radioStyle (default: ''): Use this property if you want to use CSS the React way.

• buttonClassName (default: ''): the CSS style taht will be used in the buttons.

• buttonStyle (default: ''): Use this property if you want to use CSS the React way.

• showAddresses (default: 'true'): Option to hide the addresses options in case one wants to present the wallet addresses in a different way other than radio buttons (the radio buttons will also be a configuration option in next version).

• showAddressesAboveButtons (default: 'false'): If true, the addresses options are shown above the buttons instead of below.

• enableHookedWeb3Provider (default: 'false'): If true, enables the HookedWeb3Provider to intercept transactions sent from one of the light wallets account. In practice, this means that if you enable this options, you gain automatic transactions routing for your project.

• web3RPCAddress (defaut: 'http://localhost:8545'): If HookedWeb3Provider is enabled, this property sets the web3 RPC address to be used.

• loadWalletButtonLabel (default: 'Load'): the label to be used in the button used to load a saved light wallet.

• newWalletButtonLabel (default: 'New Wallet'): the label to be used in the button used to create a new light wallet.

• newAddressButtonLabel (default: 'New Address'): the label to be used in the button used to create a new address into the current light wallet.

• saveWalletButtonLabel (default: 'Save'): the label to be used in the button used to save a wallet to disk.

• saveKeystoreToDiskAfterChanges (default: 'false'): if true, every time that the light wallet changes (create a new wallet or create a new address) it will be saved to user's disk.

• saveKeystoreToLocalStorageAfterChanges (default: 'false'): if true, every time that the light wallet changes (create a new wallet or create a new address) it will be saved to localStorage (user's browser).

• allowReplaceWallet (default: 'false'): if true, even with a already loaded wallet, will show buttons for loading a wallet and create new wallet. In either case, the current wallet is REPLACED (!!!) by the new one.

• showAddressBalance (default: 'false'): if true, appends the address balance in front of it.

• sendBalanceOnAddressChange (default: 'false'): If true, will send the balance through the property onChangeSelectedAddress as a second parameter.

• maxAddressLengthToShow (default: show all): number of characters to show for each address option.

• numberOfDecimalsForBalance (default: '5'): number of decimals to show for the address balance if option showAddressBalance is enabled.

• getBalanceErrorMessage (default: 'Node not running'): specifies a message to be show in case the balance could not be retrieved for the addresses. This message will stay in the same place as the balance.

• labelBeforeAddresses (default: 'Using address:'): the label that should be show before showing the addresses options.

• reusePasswordInSession (default: 'false'): if true, wallet password will be asked just in the first transaction. After that, the password is stored in component state and reused in other transactions.

• passwordPopupForm (default: 'window.prompt'): if this property is specified, it will be used to ask the user for password whenever is needed. This property should be a function that receives two parameters: the first one tells which kind of password is being asked (create wallet or (new address or sign transaction)). This parameter is important because the message shown asking for password to create a wallet should be different from the message shown asking to sign transaction or add new address to the wallet. The second parameter is a callback function that receives the password as parameter. If this property (passwordPopupForm) is not specified, the native javascript function window.prompt will be used. See example usage in the sample-app folder.

• onChangeSelectedAddress (event): function that is called whenever the user change his selected address. It receives the selected address as parameter and, if sendBalanceOnAddressChange is true, will also send the balance as second parameter.

• onChangeKeystore (event): function that is called whenever a change in keystore is detected. It receives the keystore as parameter.

• prefix0xWhenShowingAddresses (default: 'true'): If true, will append the heading 0x when showing addresses. The address parameter of the function onChangeSelectedAddress will also be affected.

Sample code

The example below is a simple code that shows the react-lightwallet component to the user. After selecting an address, the user can send a transaction using selected address.

var LightWallet = require('react-lightwallet');

module.exports = React.createClass({

    getInitialState: function() {
        return {address: null};
    },
    
    onChangeSelectedAddress: function(address) {
        this.setState({address: address});
    },

    sendTransaction: function() {
        // Here you can send a transaction normally as you would do using
        // a node account. The HookedWeb3Provider will intercept the transaction
        // and in case the sender address is a light wallet one, it will
        // manually sign the transaction using the pk available on the keystore
        // and broadcast the transaction using your node.
        web3.eth.sendTransaction({
            from: this.state.address.
            to: <some address>,
            value: Math.pow(10,18)
        }, function(err, hash) {
            if (err) {
                console.log('Error sending transaction: ' + err);
            } else {
                console.log('Transaction has been sent: ' + hash);
            }
        });
            
    }

    render: function() {
        <LightWallet 
            onChangeSelectedAddress        = {this.onChangeSelectedAddress}
            enableHookedWeb3Provider       = 'true'
            showAddressBalance             = 'true'
            saveKeystoreToDiskAfterChanges = 'true'
        />
        <button onClick={this.sendTransaction}>Send!</button>
    }

});

Sample app

This project comes with a sample app that can be found at sample-app folder. It's a simple app that shows the react-lightwallet at work.

Installing and building

Follow the commands below to install and build the sample app:

cd sample-app
npm install
gulp browserify

After that, open public/index.html and have fun ;)