intrepidshape/elm-web3-ui/2.4.0

NOTE: the latest version is 4.0.0

Web3.Ui.SecurityCard

Render a Trustpilot-style security pre-flight card for a smart contract, summarising static-analysis findings (Slither, Aderyn, Mythril, ...).

Design intent (informed by the dapp-gen UX research brief):

  • Never a single Pass/Fail verdict. Always a breakdown of finding counts by severity. Static analyzers have known false-positive rates; presenting a single pass/fail invites misinterpretation.
  • Top-3 most-severe findings surface inline so a user has actionable information without clicking into a long report.
  • The "request human audit" CTA is always available -- the card is a funnel, not a substitute, and that framing protects everyone (the auditor, the user, and the contract author).

The component is stateless like every primitive in this lib -- the caller owns the Findings record and the Stubbed flag (set to Yes when no analysis has run, e.g. an Etherscan-only fetch where no NatSpec or sources are available).

Web3.Ui.SecurityCard.view []
    { findings =
        Web3.Ui.SecurityCard.findings
            { critical = 0
            , high = 2
            , medium = 5
            , low = 11
            , info = 8
            }
    , topFindings =
        [ { severity = High
          , title = "Centralization risk -- onlyOwner can mint"
          , tool = "slither"
          }
        , { severity = High
          , title = "Reentrancy in withdraw()"
          , tool = "slither"
          }
        , { severity = Medium
          , title = "Missing zero-address check in setOracle"
          , tool = "aderyn"
          }
        ]
    , toolVersions = [ ( "slither", "0.10.4" ), ( "aderyn", "0.5.1" ) ]
    , stubbed = NotStubbed
    , reportUrl = Just "/dapp/1/0x.../report"
    , onRequestAudit = Just RequestAudit
    }

CSS classes follow BEM: web3-security-card, web3-security-card__head, web3-security-card__counts, web3-security-card__count, web3-security-card__count--critical / --high / --medium / --low / --info, web3-security-card__findings, web3-security-card__finding, web3-security-card__finding-severity, web3-security-card__finding-title, web3-security-card__finding-tool, web3-security-card__tools, web3-security-card__actions, web3-security-card__disclaimer.

view : List (Attribute msg) -> Config msg -> Html msg

Render the card.

type alias Config msg =
{ findings : Findings
, topFindings : List Finding
, toolVersions : List ( String, String )
, stubbed : Stubbed
, reportUrl : Maybe String
, onRequestAudit : Maybe msg
}

Configuration for view.

Per-severity counts.

{ critical : Int
, high : Int
, medium : Int
, low : Int
, info : Int
}

Construct a Findings value.

type alias Finding =
{ severity : Severity
, title : String
, tool : String
}

One specific finding from a tool.

= Critical
| High
| Medium
| Low
| Info

Severity stops.

type Stubbed
= NotStubbed
| Yes String

Whether real analysis ran or the card is rendering the "not-available" state. Etherscan-only fetches don't carry the metadata needed for analysis, and during early development the analyser may be stubbed.