Create UI Components for Petnames and Images

[samsiegart]

What is the Problem Being Solved?

With the powerbox extension, petnames/images can be rendered visibly to the user inside dapps without the dapp being able to read the real petname. This requires attaching certain attributes to DOM nodes and calling powerbox.expandPetdata() (example). There should be web components available to developers to easily render petnames/images inside their dapps.

Description of the Design

Create two web components in https://github.com/Agoric/agoric-sdk/tree/master/packages/web-components called petname and petimage. Both components will work by accepting a single property, powerbox-id, which will cause them to render like:

<div data-powerbox-target="img-if-known" data-powerbox-id="AG.1">AG.1</div>

The web components should call powerbox.expandPetdata() automatically whenever they are rendered or updated, and log a warning to the console if the extension is not found.

Security Considerations

The powerbox extension itself is responsible for using closed shadow DOM so that the dapp cannot access the petnames. Also, the components should inherit the width of their parent elements so that the dapp cannot infer the characters using non-monospace fonts.

Test Plan

Components should be unit tested to verify that they render the appropriate DOM structure to work with the extension and invoke powerbox.expandPetdata() when rendered.

[samsiegart]

cc @michaelfig

[samsiegart]

Also, the components should inherit the width of their parent elements so that the dapp cannot infer the characters using non-monospace fonts.

I realized the powerbox extension, not the component, has to be entirely responsible for protecting against this as well. A bad dapp could simply fork the components to get around this otherwise.