Bridge-ui-sdk NPM

bridge-ui-sdk

Horizon Bridge UI SDK

Install

For npm users:

  $ npm install bridge-ui-sdk styled-components --save

For Yarn users:

  $ yarn add bridge-ui-sdk styled-components

Usage

import React from 'react'
import { ExchangeBlock } from 'bridge-ui-sdk'
import 'bridge-ui-sdk/dist/index.css'

({ addressMetamask, addressOneWallet }) => <ExchangeBlock network='testnet' addressMetamask={addressMetamask} addressOneWallet={addressOneWallet} />

You need to do sign nn with your wallets in other blocks. ExchangeBlock will use your wallets through window object.

After wallet sign in (Metamask or OneWallet), your need to set next props to ExchangeBlock

Params

Name	Type	Default	Description
network	`'mainnet'` or `'testnet'`	`'testnet'`	Network type - instead of this type Exchange block will use different configs (smart contract address, validator address etc)
addressMetamask	String		Your Ethereum address with wich you signed in
addressOneWallet	String		Your Harmony address with wich you signed in

Full Example (with wallets sign in)

https://github.com/harmony-one/ethhmy-bridge.ui-sdk/blob/main/example/src/App.tsx

import React, { useEffect, useState } from 'react'
import detectEthereumProvider from '@metamask/detect-provider'

import { ExchangeBlock } from 'bridge-ui-sdk'
import 'bridge-ui-sdk/dist/index.css'

const App = () => {
  const [metamask, setMetamask] = useState<string>()
  const [oneWallet, setOneWallet] = useState<string>()

  useEffect(() => {
    detectEthereumProvider().then((provider: any) => {
      try {
        // @ts-ignore
        if (provider !== window.ethereum) {
          console.error('Do you have multiple wallets installed?')
        }

        if (!provider) {
          alert('Metamask not found')
        }

        provider.on('accountsChanged', (accounts: string[]) =>
          setMetamask(accounts[0])
        )

        provider.on('disconnect', () => {
          setMetamask('')
        })

        provider
          .request({ method: 'eth_requestAccounts' })
          .then(async (accounts: string[]) => {
            setMetamask(accounts[0])
          })
      } catch (e) {
        console.error(e)
      }
    })
  }, [])

  useEffect(() => {
    try {
      // @ts-ignore
      setTimeout(() => {
        // @ts-ignore
        window.onewallet
          .getAccount()
          .then(({ address }: any) => setOneWallet(address))
      }, 3000)
    } catch (e) {
      console.error(e)
    }
  }, [])

  return (
    <ExchangeBlock
      network='testnet'
      addressMetamask={metamask}
      addressOneWallet={oneWallet}
    />
  )
}

export default App