create formatters to construct complex chain structures

[ipapandinas]

Is your feature request related to a problem? Please describe.

Some helpers parameters use chain structures that are complex to set.

e.g. setMarketplaceConfiguration has 4 parameters COMMISSION_FEE, LISTING_FEE, ACCOUNT_LIST, OFFCHAIN_DATA.

For example, a SET action on COMMISSION_FEE looks like:

{
    [MarketplaceConfigAction.Set]: { [MarketplaceConfigFeeType.Flat]: Number(123) },
}

Describe the solution you'd like

It would be easier to have proper formatters for each chain structure. A new file src > xxx > formatters.tsx can be added for each helper category in need.

e.g. In src > marketplace > formatters.tsx create:

• formatFee (used for COMMISSION_FEE & LISTING_FEE)
• formatAccountList (used for ACCOUNT_LIST)
• formatOffchainData (used for OFFCHAIN_DATA)

type FeeTypeType<T> = T extends MarketplaceConfigAction.Set ? MarketplaceConfigFeeType : undefined;
type FeeType<T> = T extends MarketplaceConfigAction.Set ? BN | number : undefined;

export function formatFee <T extends MarketplaceConfigAction>(action: T, feeType: FeeTypeType<T>, fee: FeeType<T>): CommissionFeeType | ListingFeeType => {
  if (action === MarketplaceConfigAction.Set) {
    return ({
      [action]: { [feeType]: fee },
    })
  }

  return action
}

Describe alternatives you've considered

We are currently using custom types to ensure the structure is correct but it is still not friendly enough for new users.

Additional context

A formatters tab can be added to the E2E-test-dApp for documentation. It will also help developers to generate the correct structure.