@lidofinance/ui-primitives

@lidofinance/ui-primitives

Widget UI primitives: components, hooks.

This component abstracted from the blockchain network, other words you can use it for any widgets for any blockchains.

Installation

• React 17 || 18

yarn add @lidofinance/ui-primitives

# and additional
yarn add next@^12.3.0 styled-components@^5.3.5 @lidofinance/lido-ui@^3.6.1

Using

Wallet components

You can make wallet components (like in image below) via @lidofinance/ui-primitives package.

Example based on Eth:

The design you can find on Figma https://www.figma.com/file/pmtFrBp0z1RvzdfcHaV2fn/Widget-UI-Guide?node-id=2-3256&t=VZj5YPwLffneQwE1-0

// `useWeb3` and other imports what is out of context here
import {
  WalletCard,
  WalletCardRow,
  WalletCardBalance,
  WalletCardAccount,
  WalletFallback,
} from '@lidofinance/ui-primitives'
import { Divider } from '@lidofinance/lido-ui'

const EthWalletCard: EthWalletCardComponent = (props) => {
  // `account`, `openModal` and other what is out of context here

  return (
    <WalletCard {...props}>
      <WalletCardRow>
        <WalletCardBalance
          title="Eth balance"
          loading={false}
          value={'100.00 ETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
        <WalletCardAccount account={account} onClickCb={openModal} />
      </WalletCardRow>
      <Divider />
      <WalletCardRow>
        <WalletCardBalance
          small
          title="Token balance"
          loading={false}
          value={'1000.00 stETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
        <WalletCardBalance
          small
          title="Token balance"
          loading={false}
          value={'1000.00 wstETH'}
          extra={'Extra content here'}
        >Children content here</WalletCardBalance>
      </WalletCardRow>
    </WalletCard>
  )
}

const EthWalletCardWrapper: EthWalletCardComponent = (props) => {
  const { active } = useWeb3()
  return active ? <EthWalletCard {...props} /> : <WalletFallback {...props} />
}

export default EthWalletCardWrapper