rusk
rusk copied to clipboard
web-wallet: Create `AllocationMeter` component
Create a new reusable UsageIndicator
component for the wallet app. The usage indicator should is a horizontal bar, very similar to a progress indicator, however, the bar is always 100% filled and divided by two regions indicating what percentage the user has allocated something. In the case of the wallet, it is the percentage allocation is between Phoenix and Moonlight.
The usage indicator must support an icon at start and end of the component, which itself should allow for a tooltip explanation.
Initially the color of the component will be green, however, it would make sense to make this customisable via props.
Figma preview
Figma link https://www.figma.com/design/z6UnA0BtMBUKIcCXD975um/Wallet-Extension-(JULY-26th)?node-id=6207-159313&t=ESWrbfcHC0L6Z8QG-0
Also see W3C Meter pattern