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]);
  this.setAddresses('Reserve', [roles.asset.params.reserve]);
  this.setAddresses('Clawback', [roles.asset.params.clawback]);
  this.setAddresses('Manager', [roles.asset.params.manager]);
}

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',
      },
      ...

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

Generic blockchain content

Generic blockchain content refers to the generalized components that are shared across chains. These