vort_x-components v1.1.0

Introduction

Vortex Components are a suite of React Components using features from Vortex.

Documentation

Vortex

Embark Demonstration

Truffle Demonstration

Contribution

Installation

npm install --save vort_x vort_x-components

Get started

For Embark Users ...

import {
    VortexGate,
    VortexWeb3Loaded,
    VortexWeb3Loading,
    VortexWeb3LoadError,
    VortexWeb3NetworkError,
    VortexWeb3Locked,
    VortexMetamaskLoader
} from 'vort_x-components';
import Web3 from 'web3'; // 1.0.0-beta.34+ is preferable :)
import SimpleStorageContractInstance from 'Embark/contracts/SimpleStorage';
import * as Chains from '../chains.json';


...


<VortexGate

    // Configure your contracts
    contracts={{
        type: 'embark',
        embark_contracts: {
            SimpleStorage: SimpleStorageContract
        },
        chains: Chains,
        preloaded_contracts: [
            "SimpleStorage"
        ]
    }}

    // Provide a custom Web3 loader
    loader={VortexMetamaskLoader(Web3)}

    // Configure your IPFS Endpoint
    ipfs_config={{
        host: 'ipfs.infura.io',
        port: '5001',
        options: {
            protocol: 'https'
        }
    }}


    // Configure your backlink endpoint
    backlink_config={{
         url: {
             "mainnet": "wss://mainnet.infura.io/ws",
             "default": "ws://localhost:8545/ws"
         }
    }}>

    <VortexWeb3Loaded>
        // Renders this when everything went well.
    </VortexWeb3Loaded>

    <VortexWeb3Loading>
        // Renders this when web3 is still loading.
    </VortexWeb3Loading>

    <VortexWeb3LoadError>
        // Renders this when an error occured while loading web3.
    </VortexWeb3LoadError>

    <VortexWeb3NetworkError>
        // Renders this if the contracts are not on the current network
    </VortexWeb3NetworkError>

    <VortexWeb3Locked>
        // Renders this if the wallet provider (Metamask, Mist) is locked
    </VortexWeb3Locked>

</VortexGate>

... and for Truffle Users.

import {
    VortexGate,
    VortexWeb3Loaded,
    VortexWeb3Loading,
    VortexWeb3LoadError,
    VortexWeb3NetworkError,
    VortexWeb3Locked,
    VortexMetamaskLoader
} from 'vort_x-components';
import Web3 from 'web3'; // 1.0.0-beta.34+ is preferable :)
import SimpleStorage from '../build/contracts/SimpleStorage.json'


...


<VortexGate

    // Configure your contracts
    contracts={{
        type: 'truffle',
        truffle_contracts: [SimpleStorage],
        preloaded_contracts: ["SimpleStorage"],
        network_contracts: [SimpleStorage]
    }}

    // Provide a custom Web3 loader
    loader={VortexMetamaskLoader(Web3)}

    // Configure your IPFS Endpoint
    ipfs_config={{
        host: 'ipfs.infura.io',
        port: '5001',
        options: {
            protocol: 'https'
        }
    }}


    // Configure your backlink endpoint
    backlink_config={{
         url: {
             "mainnet": "wss://mainnet.infura.io/ws",
             "default": "ws://localhost:8545/ws"
         }
    }}>

    <VortexWeb3Loaded>
        // Renders this when everything went well.
    </VortexWeb3Loaded>

    <VortexWeb3Loading>
        // Renders this when web3 is still loading.
    </VortexWeb3Loading>

    <VortexWeb3LoadError>
        // Renders this when an error occured while loading web3.
    </VortexWeb3LoadError>

    <VortexWeb3NetworkError>
        // Renders this if the contracts are not on the current network
    </VortexWeb3NetworkError>

    <VortexWeb3Locked>
        // Renders this if the wallet provider (Metamask, Mist) is locked
    </VortexWeb3Locked>

</VortexGate>