Component Hierarchy

Background

One major goal of our component design was to ensure that each component would be easily generalizable to multiple blockchains, therefore maintaining a similar look for pages that display information about USDC on each chain.

Example

Both the Ethereum and Algorand chains have a USDC overview page, located at / and /algorand respectively. These pages both display information such as the privileged role addresses, recent blocks, and recent transactions on each chain. They look visually similar but Algorand has different names and numbers of privileged roles. We'll be using these two chains to explain the component hierarchy and how the components can be generalized to more chains in the future.

Component Design Strategy

We created three layers of abstraction for our components:

1. Chain-specific content
2. Generic blockchain content
3. Generic content

Chain-specific content

Chain-specific content refers to information that is specific to one blockchain. This would be information like the names of the privileged roles on the chain, the data for specific transactions, etc. The logic for fetching this information using web3 or another API is located in the Vue file for the page that it appears on. For example, the names for the privileged roles on Algorand are fetched in src/pages/algorand/index.vue.

async lookupRoles() {
  const roles = await fetchAlgorand({
    request: 'assets',
    param: ALGORAND_USDC_ASSET_ID,
  });

  this.setAddresses('Creator', [roles.asset.params.creator]);
  this.setAddresses('Freeze', [roles.asset.params.freeze]);
  ...
}

These addresses are then shaped into a schema and passed as props into a more generic blockchain component that renders the cards on the page.

data() {
  return {
    roles: [
      {
        name: 'Creator',
        addresses: ['0xabc123'],
        icon: 'owner-icon.svg',
      },
      {
        name: 'Freeze',
        addresses: ['0xdef456'],
        icon: 'pauser-icon.svg',
      },
      ...

<Summary 
  :roles="this.roles"
  ...
/>

Adding support for a new chain would simply mean adding a new route for the chain and then adding logic for fetching chain data in the Nuxt page component for that chain.

src
└── pages
    └── algorand
        └── index.vue  // algorand-specific logic goes here
    └── new_chain
        └── index.vue  // logic for new_chain goes here

Code examples

Ethereum root page

Algorand root page

Ethereum address details page

Algorand address details page

Generic blockchain content

Generic blockchain content refers to the generalized components that are shared across chains. These are components such as Summary.vue (displays the USDC overview page) and AddressDetails.vue (displays the address details section with the balance, roles, etc).

Each of these components defines a prop schema that receives all of the data to be displayed while not performing any API calls itself. Here is an example from Summary.vue:

props: {
  roles  // array of Roles that the given chain has
  transactions  // array of strings representing IDs of transactions to display
  blocks  // array of strings representing IDs of blocks to display
  lookback  // number of blocks from latest that are searched for recent transactions
  limit  // maximum number of transactions displayed
  loading  // boolean representing whether or not data is still being loaded
}

Note: these schema definitions are also included as comments in the code for the component

The USDC overview page for every chain will pass props to the Summary component, which will handle the rendering of the data so that the styles are consistent.

Code examples

Summary.vue

AddressDetails.vue

Generic Content

This category of components refers to the most generic type, such as a Table or a Form. They are primarily for styling purposes, so that different pages that contain a table (/accounts, /transactions, etc.) or a form (/roles/*) can be visually similar. These components will sometimes have more generic child components such as Pagination to modularize the code. They also sometimes define a schema for data to be passed in from their parent components, in a similar way to the generic blockchain components.

Code examples

Table.vue

Form.vue