rusk icon indicating copy to clipboard operation
rusk copied to clipboard

web-wallet: Create `AllocationMeter` component

Open kieranhall opened this issue 6 months ago • 0 comments

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 Image

Figma link https://www.figma.com/design/z6UnA0BtMBUKIcCXD975um/Wallet-Extension-(JULY-26th)?node-id=6207-159313&t=ESWrbfcHC0L6Z8QG-0

Also see W3C Meter pattern

kieranhall avatar Aug 05 '24 11:08 kieranhall