STONEm Front-end Development Update: Wallet Manager Screen.

Repository

https://github.com/stonecoinproject/stonem-frontend

Pull Request

https://github.com/stonecoinproject/stonem-frontend/pull/47

Continuing with the development of the STONE masternodes web-client, our previous update added the masternodes manager screen alongside some very vital constructs and reusable architectural patterns. This is the last screen prototype and is consequently the milestone for the v0.1.0 release of the client.

Changes / New Features.

• Implement wallet management dashboard screen.
• Utilize existing documented architectural patterns to keep code footprint minimal.

Details.

This screen has pretty exciting to work on. The philosophy of continuously reusable micro-components has been a boon. The wallet manager is accessible on the route /wallets.

As asserted earlier, the core philosophy when building this client, the goal is not to build extremely rapidly but to build with an eye for the future while minimizing technical debt.

In keeping in line with the above stated goal, one must ensure we keep code duplication to a minimum as code duplication presents an opportunity to step back and refactor.

We could reduce code duplication by reducing duplicates to their base data structures and reusing a singular component to render them.

As an example, the below transactions list is highlighted. To reduce duplication:

1. Suitable data-sets had to be created as sample data.
2. The <TransactionItem /> component had to be created alongside sub-components.

In tackling the first problem, all information was distilled into the below data set. Also the transactionData contract was enforced.

type transactionData = {
  /** Amount the transaction cost. */
  amount: string,
  /** A string representing the file name of the transaction vendor brand. */
  brand: string,
  /** Date the transaction was initiated */
  date: string,
  /** Time the transaction was initiated */
  time: string,
  /** The title assigned to this transaction. */
  title: string,
  /** Meta information for this transaction. */
  meta: transactionDataMeta[],
};

const transactionData:transactionData = [
  { amount: '+6.00 STONE', brand: 'stone-logo.png', date: '07:39', time: '24/07/2018', title: 'MN Reward',
    meta: [
      { key: 'Status', value: '2833 confirmations' },
      { key: 'From', value: 'SkK9a0u332fy7xWumTmqJLJmXTL2E' },
      { key: 'Credit', value: '+6.00 STONE' },
      { key: 'Transaction fee', value: '-0.0057640 STONE' },
      { key: 'Net amount', value: '+6.0057640 STONE' },
      { key: 'Transaction ID', value: '23918921bcf6c792aff' },
    ],
  },
  { amount: '-10.000 TRC', brand: 'terracoin-logo.png', date: '19:21', time: '22/07/2018',
    title: 'Instant Send',
    meta: [
      { key: 'Status', value: '3783 confirmations' },
      { key: 'To', value: 'ZkK9a0u332fy7xWfmemTJLJmXTL2Q' },
      { key: 'Credit', value: '-10.00 TRC' },
      { key: 'Transaction fee', value: '-0.0057640 TRC' },
      { key: 'Net amount', value: '-10.0057640 TRC' },
      { key: 'Transaction ID', value: '32218921bcf6c792aff' },
    ],
  },
  { amount: '+6.00 STONE', brand: 'stone-logo.png', date: '07:39', time: '24/07/2018', title: 'MN Reward',
    meta: [
      { key: 'Status', value: '2833 confirmations' },
      { key: 'From', value: 'SkK9a0u332fy7xWumTmqJLJmXTL2E' },
      { key: 'Credit', value: '+6.00 STONE' },
      { key: 'Transaction fee', value: '-0.0057640 STONE' },
      { key: 'Net amount', value: '+6.0057640 STONE' },
      { key: 'Transaction ID', value: '23918921bcf6c792aff' },
    ],
  },
  { amount: '+3.00 TRC', brand: 'terracoin-logo.png', date: '07:39', time: '24/07/2018', title: 'MN Reward',
    meta: [
      { key: 'Status', value: '2833 confirmations' },
      { key: 'From', value: 'SkK9a0u332fy7xWumTmqJLJmXTL2E' },
      { key: 'Credit', value: '+3.00 TRC' },
      { key: 'Transaction fee', value: '-0.0057640 TRC' },
      { key: 'Net amount', value: '+3.0057640 TRC' },
      { key: 'Transaction ID', value: '23918921bcf6c792aff' },
    ],
  },
  { amount: '+6.00 STONE', brand: 'stone-logo.png', date: '07:39', time: '24/07/2018', title: 'MN Reward',
    meta: [
      { key: 'Status', value: '2833 confirmations' },
      { key: 'From', value: 'SkK9a0u332fy7xWumTmqJLJmXTL2E' },
      { key: 'Credit', value: '+6.00 STONE' },
      { key: 'Transaction fee', value: '-0.0057640 STONE' },
      { key: 'Net amount', value: '+6.0057640 STONE' },
      { key: 'Transaction ID', value: '23918921bcf6c792aff' },
    ],
  },
  { amount: '+3.00 TRC', brand: 'terracoin-logo.png', date: '07:39', time: '24/07/2018', title: 'MN Reward',
    meta: [
      { key: 'Status', value: '2833 confirmations' },
      { key: 'From', value: 'SkK9a0u332fy7xWumTmqJLJmXTL2E' },
      { key: 'Credit', value: '+3.00 TRC' },
      { key: 'Transaction fee', value: '-0.0057640 TRC' },
      { key: 'Net amount', value: '+3.0057640 TRC' },
      { key: 'Transaction ID', value: '23918921bcf6c792aff' },
    ],
  },
];

Next, the <TransactionItem /> component was created. This component leverages the <ToggleProvider /> render props component introduced in the previous pull to provide a schema-agnostic expandable panel for the transaction meta-information.

/**
 * Displays information about a masternode transaction.
 *
 * @param {String} Object.amount            -  Amount the transaction cost.
 * @param {String} Object.brand             -  A string representing the file name of the transaction vendor brand.
 * @param {String} Object.date              -  Date the transaction was initiated.
 * @param {String} Object.hasNegativeIndex  -  Does this transaction amount possess a negative sign.
 * @param {String} Object.title             -  The title assigned to this transaction.
 * @param {String} Object.time              -  Time the transaction was initiated.
 *
 * @returns {React.ReactNode}
 */
const transactionItem:React.SFC<transactionItemProps> = ({
  amount,
  brand,
  children,
  date,
  hasNegativeIndex,
  title,
  time,
  ...props }) => (
  <ToggleProvider
    render={({
      isOn,
      doToggle,
    }) => (
    <Card
      border={2}
      borderColor={ isOn ? theme.colors.blue : theme.colors.bordergray}
      borderRadius={theme.radiusSizes[1]}
      p={3}
      onClick={doToggle}
      style={{
        cursor: 'pointer',
      }}
      {...props}
    >
     // ....

The nodes in the data-sets were then iterated upon to create the transactions list saving us probably thousands of keystrokes of copious copying. The children elements passed to WalletTransactionManager are only displayed when the transaction list item is clicked.

{app.transactionData.map((transaction, index) => {
  const {
    amount,
    brand,
    date,
    meta,
    time,
    title,
  } = transaction;

  return (
    <WalletManagerTransactionItem
      amount={amount}
      brand={require(`../IncomeStatsSuite/${brand}`)}
      date={date}
      hasNegativeIndex={amount[0] === '-'}
      key={index}
      time={time}
      title={title}
      mb={2}
    >
      <Box py={3}>
        {meta.map((metadata, i) => {
          const {
            key,
            value,
          } = metadata;
          return (
            <Flex
              key={i}
              mb={2}
            >
              <Text
                fontSize={2}
                fontWeight={'600'}
                mr={2}
              >
                {key}:
              </Text>
              <Text fontSize={3}>{value}</Text>
            </Flex>
          );
        })}
      </Box>
    </WalletManagerTransactionItem>
  );
})}

Pictured below is the code health analysis from Code Climate. Possible next approach is a refactor to take care of code smells and duplication.

What's next?

• Provide further code documentation for existing components.
• Refactor existing code for improved code health ratings.
• Add authentication and coin node creation functionality.

Github Account

https://github.com/creatrixity