Educational visualization of a fee split -- a horizontal stacked bar with
proportional segments, plus a label and Wei amount under each. Pairs with
Web3.Ui.FeeBreakdown (which is the equivalent table view); use this one
when you want a hero-tier "where does my fee go?" graphic on a marketing
page or trade modal.
The bar segments are sized by basis points; total bps does not need to
sum to 10000 (the bar is normalized to its own total).
Each Slice accepts an optional kind string -- emitted as a CSS class
suffix (web3-feeflow__seg--<kind>) so the consumer can color the
segments by recipient type without inline styles.
Web3.Ui.FeeFlowDiagram.view []
{ gross = tradeFee
, symbol = "PLS"
, decimals = 18
, width = 480
, height = 24
, slices =
[ { label = "veToken holders", bps = 3000, kind = Just "ve" }
, { label = "stakers", bps = 3000, kind = Just "stakers" }
, { label = "floor pool", bps = 2000, kind = Just "floor" }
, { label = "buy & burn", bps = 1000, kind = Just "burn" }
, { label = "treasury", bps = 1000, kind = Just "treasury" }
]
}CSS classes: web3-feeflow, web3-feeflow__bar, web3-feeflow__seg,
web3-feeflow__seg--<kind>, web3-feeflow__legend,
web3-feeflow__legend-item, web3-feeflow__legend-swatch,
web3-feeflow__legend-label, web3-feeflow__legend-amount.
The fee being split, the bar's pixel geometry, and the segments.
One fee segment. kind becomes the CSS modifier suffix; pass
Nothing for a default-colored segment.
Render the diagram (bar + legend).