Use-confluxportal NPM

Getting Started

Easiest option is installing the package from npm with;

# via npm
npm i use-confluxportal
# or via yarn
yarn add use-confluxportal

Usage

Wrap your App component with ConfluxStateProvider

import React                     from 'react';
import ReactDOM                  from 'react-dom';
import { ConfluxStateProvider }  from "use-confluxportal";
import App                       from './App';

ReactDOM.render(
    <ConfluxStateProvider>
      <App />
    </ConfluxStateProvider>
  document.getElementById('root')
);

import your hook to your App component

import { useEffect } from 'react';
import { useConfluxPortal } from 'use-confluxportal'

function App() {
  const { connect, confluxState } = useConfluxPortal()
  //...

call connect async method

function App() {
  const { connect, confluxState } = useConfluxPortal()
  
  useEffect(() => {
    if (confluxState.isAvailable && !confluxState.isConnected) {
      (async () => {
        try {
          const accounts = await connect(window.conflux)
          console.log(accounts)
        } catch (error) {
          console.log(error)
        }
      })()
    }
  }, [])
}

Now you can reach all information under confluxState object; (they will be updated in case of any change in metamask)

// all connected Conflux accounts 
// account: Array [ "cfx:aap1sr0zpz40km8y7t6g72t6m8rcxf5uva709sbwef0x68bbaeb98ac22e9e6516fb35c8d27ded05bc0607" ]

// current connected chain id and name 
// chain: Object { id: "1029", name: "mainnet" }

// shows if Conflux Portal Extension is whether exist or not in the user's browser
// isAvailable: true

// shows if connection is established with at least one conflux account
// isConnected: true

use AccountModal

import { AccoutsModal } from 'use-confluxportal'

function App() {
  const { connect, confluxState, openAccountModal, closeAccountModal } = useConfluxPortal()

  return (
    <div>
      <button onClick={openAccountModal}>
          {
            confluxState.account ? confluxState.account : '连接钱包'
          }
        </button>
        <AccoutsModal />
    </div>
  )
}