@lidofinance/ui-primitives
v0.46.0
Published
UI primitives (client-side: components, constants, hooks)
Downloads
206
Readme
@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