tezos-wallet-component

Tezos Wallet React Component

Tezos Wallet React Component aims to provide a responsive and flexible wallet component for Tezos dapps created using React. It is a pure UI component and does not bind to any particular wallet. All state and wallet interactions must be handled by the user. It aims to be modular and pluggable in how it handles menu items where components are passed as children.

See example below.

Lots of room for improvements! HELP WANTED!!

Install

npm install --save tezos-wallet-component

Usage

import { 
  TezosWallet,
  TezosWalletMenuDisconnect 
} from 'tezos-wallet-component'
import 'tezos-wallet-component/dist/index.css'

const App = () => {
  const [showMenu, setShowMenu] = useState(false)
  const [wallet, setWallet] = useState(null)

  const mockWallet = {
    address: 'tz1UZZnrre9H7KzAufFVm7ubuJh5cCfjGwam',
    balance: 125000
  }

  const handleConnectWallet = (selectedNetwork) => {
    setWallet(mockWallet)
  }

  const handleDisconnectWallet = () => {
    setWallet(null)
    setShowMenu(false)
  }

  return (
    <div style={{ display: 'flex' }}>
      <TezosWallet
        address={wallet?.address}
        balance={wallet?.balance}
        showMenu={showMenu}
        onToggleMenu={() => setShowMenu(!showMenu)}
        onConnectWallet={handleConnectWallet}
       >
        <TezosWalletMenuDisconnect onClick={handleDisconnectWallet} />
      </TezosWallet>
    </div>
  )
}

Props

address         - The wallet address. If this is null or undefined the "Connect wallet" is displayed.
balance         - The wallet balance.
showMenu        - Indicates wether the menu should be shown.
onToggleMenu    - Function called when appropriate parts of the UI is clicked for a open/close menu action.
onConnectWallet - Function called when appropriate parts in the UI is clicked for a wallet connect action.
networks        - List of networks the dapp supports connecting to. Requires a list of objects with *type* and *label* fields. Will be passed as callback to onConnectWallet.
formatBalance   - Function to format balance if you want to change how it is presented.
hideBalance     - Boolean to indicate if you want to hide balance (this might currently screw up media query layouts)
hideSpacer      - Boolean to indicate if you want to hide spacer between balance and identity image (this might currently screw up media query layouts)
hideIdImage     - Boolean to indicate if you want to hide identity image (this might currently screw up media query layouts)
hideAddress     - Boolean to indicate if you want to hide address (this might currently screw up media query layouts)
ipfsBase        - Base URL to get ipfs content (used for TezID profile image) - default https://gateway.ipfs.io/ipfs
tezIDProfile    - Object - TezID profile information from TezID Avatar API

Develop

npm install
npm run storybook

License

MIT © asbjornenge