Simple Wallet Example

In this example we will see how a front-end specific plugin is created, which will display an additional wallet page

In this start-to-finish example, we will add a page that

1. From the HollaEx root directory, in your terminal, access the plugins folder with:

cd plugins/

2. Run the following command within this plugins directory to initialize the plugin with the name my-simple-wallet:

npm run add:plugin --plugin=my-simple-wallet --type=page

3. From your file explorer find the view.json file (located at plugins/src/plugins/my-simple-wallet/views/view/view.json) and update the path value to:

"path": "/my-simple-wallet"

4. From your file explorer find the view.json file (located at plugins/src/plugins/my-simple-wallet/assets/strings.json) and update the path value to:

"title": "My Simple Wallet"

5. Back to the terminal and run the following command on the plugins directory to start the development mode:

npm start --plugin=my-simple-wallet

6. In the browser, navigate to localhost:3000 in the address bar on our exchange's sidebar we will see a newly added Simple Wallet tab on the sidebar, and opening this we will see a plain page with the name of the plugin.

7. First, we will get the required information from the kit and supply it to the Form.js component using the coins, balance, and router values from context:

The final Form.js code is included at the bottom of this page

...

const mapContextToProps = ({ strings, activeLanguage, icons, generateId, balance, coins, router }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  balance,
  coins,
  router,
});

...

8. Now we can access coins, balance, and router values in the form props.

...

const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  balance,
  coins,
  router,
}) => {

...

}

...

9. Now we can use this data and add a table to the simple wallet page that displays different assets with the corresponding user balance for each asset. We will also provide two buttons to navigate to the deposit and withdrawal page.

Replace the following code (which created the plain page we saw in the last image)

{STRINGS.formatString(STRINGS[generateId('content')], STRINGS[generateId('title')])} 

in the Form.js component with the following table component:

...
              <table className="table-wrapper">
                <thead>
                  <tr className="border-bottom">
                    <th>
                      {STRINGS['CURRENCY']}
                    </th>
                    <th />
                    <th>
                      {STRINGS['AMOUNT']}
                    </th>
                    <th />
                    <th />
                    <th />
                  </tr>
                </thead>
              </table>
...

10. Back in the browser, on refresh we will see the above code reflected on the Simple Wallet page as a simple table with a header as below by refreshing the page.

10. Import the Button component from the "hollaex-web-lib”

import { IconTitle, Button } from 'hollaex-web-lib';

12. To add content to the table by mapping the coins object and displaying information for each row. The router and balance objects are used for displaying user balance and navigating to other pages respectively.

...

<tbody>
                {
                  Object.entries(coins).map(([key, { display_name, allow_deposit, allow_withdrawal, fullname }]) => {
                    return (
                      <tr key={key} className="border-bottom" >
                        <td className="bold">{display_name}</td>
                        <td className="secondary-text">{fullname}</td>
                        <td>{balance[`${key.toLowerCase()}_available`] || 0}</td>
                        <td />
                        <td>
                          <div>
                            <Button
                              label={STRINGS['WALLET_BUTTON_BASE_DEPOSIT']}
                              onClick={() => router.push(`wallet/${key}/deposit`)}
                              disabled={!allow_deposit}
                            />
                          </div>
                        </td>
                        <td>
                          <div>
                            <Button
                              label={STRINGS['WALLET_BUTTON_BASE_WITHDRAW']}
                              onClick={() => router.push(`wallet/${key}/withdraw`)}
                              disabled={!allow_withdrawal}
                            />
                          </div>
                        </td>
                      </tr>
                    );
                  })
                }
</tbody>

...

13. The Final Form.js Code is found in the expandable box below:

<- Click here for Final.js Code

import React from 'react';
import { IconTitle, Button } from 'hollaex-web-lib';
import { withKit } from 'components/KitContext';

const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  balance,
  coins,
  router,
}) => {

    return (
      <div className="presentation_container apply_rtl verification_container">
        <IconTitle
          stringId={generateId('title')}
          text={STRINGS[generateId('title')]}
          textType="title"
          iconPath={ICONS['SIDEBAR_HELP']}
        />
        <form className="d-flex flex-column w-100 verification_content-form-wrapper">
          <div className="verification-form-panel mt-3 mb-5">
            <div className="my-4 py-4">
              <table className="table-wrapper">
                <thead>
                  <tr className="border-bottom">
                    <th>
                      {STRINGS['CURRENCY']}
                    </th>
                    <th />
                    <th>
                      {STRINGS['AMOUNT']}
                    </th>
                    <th />
                    <th />
                    <th />
                  </tr>
                </thead>

                <tbody>
                {
                  Object.entries(coins).map(([key, { display_name, allow_deposit, allow_withdrawal, fullname }]) => {
                    return (
                      <tr key={key} className="border-bottom" >
                        <td className="bold">{display_name}</td>
                        <td className="secondary-text">{fullname}</td>
                        <td>{balance[`${key.toLowerCase()}_available`] || 0}</td>
                        <td />
                        <td>
                          <div>
                            <Button
                              label={STRINGS['WALLET_BUTTON_BASE_DEPOSIT']}
                              onClick={() => router.push(`wallet/${key}/deposit`)}
                              disabled={!allow_deposit}
                            />
                          </div>
                        </td>
                        <td>
                          <div>
                            <Button
                              label={STRINGS['WALLET_BUTTON_BASE_WITHDRAW']}
                              onClick={() => router.push(`wallet/${key}/withdraw`)}
                              disabled={!allow_withdrawal}
                            />
                          </div>
                        </td>
                      </tr>
                    );
                  })
                }
                </tbody>
              </table>
            </div>
          </div>
        </form>
      </div>
    )
}

const mapContextToProps = ({ strings, activeLanguage, icons, generateId, balance, coins, router }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  balance,
  coins,
  router,
});

export default withKit(mapContextToProps)(Form);

14. With this final Form.js you should be able to see the completed simple wallet plugin page