# Simple Wallet Example

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: 

```jsx
cd plugins/
```

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

```jsx
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:

```json
"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:

```json
"title": "My Simple Wallet"
```

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

```jsx
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.

<figure><img src="/files/ky8W561ZyeAAb9eGko6r" alt=""><figcaption></figcaption></figure>

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:

{% hint style="info" %}
The final Form.js code is included at the bottom of this page
{% endhint %}

{% code overflow="wrap" lineNumbers="true" %}

```jsx
...

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

...
```

{% endcode %}

8. &#x20;Now we can access `coins`, `balance`, and `router` values in the form props.

{% code overflow="wrap" lineNumbers="true" %}

```jsx
...

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

...

}

...
```

{% endcode %}

9. &#x20;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)

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

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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.

<figure><img src="/files/yAMdn9Rd8rv8TaHWq8Tu" alt=""><figcaption></figcaption></figure>

10. &#x20;Import the Button component from the "*hollaex-web-lib*”

```jsx
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.

{% code overflow="wrap" lineNumbers="true" %}

```jsx
...

<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>

...
```

{% endcode %}

13. &#x20;The Final **Form.js** Code is found in the expandable box below:

<details>

<summary>&#x3C;- Click here for <em>Final.js</em> Code</summary>

{% code overflow="wrap" lineNumbers="true" %}

```jsx
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);
```

{% endcode %}

</details>

14. &#x20;With this final *Form.js* you should be able to see the completed simple wallet plugin page&#x20;

<figure><img src="/files/9kxhD1szsLksZQ5PBPKp" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hollaex.com/plugins/develop-plugins/simple-wallet-example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.