STONEm Front-end Development Update: Wallet Manager Screen.

2개월 전

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
Sort Order:  trending
  • Good article and great progress.
  • Please do more smaller commits to have a good separation of concerns.
  • I look forward to less hard coded data in the next releases

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @helo! Keep up the good work!

Hi @creatrixity!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @creatrixity!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @creatrixity! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 12000 upvotes. Your next target is to reach 13000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Do not miss the last post from @steemitboard:

SteemWhales has officially moved to SteemitBoard Ranking
SteemitBoard - Witness Update

Support SteemitBoard's project! Vote for its witness and get one more award!