> For the complete documentation index, see [llms.txt](https://docs.hollaex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hollaex.com/plugins/develop-plugins/simple-wallet-example.md).
# 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.
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. 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. 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
...
{STRINGS['CURRENCY']}
{STRINGS['AMOUNT']}
...
```
{% 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.
10. 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
...
{
Object.entries(coins).map(([key, { display_name, allow_deposit, allow_withdrawal, fullname }]) => {
return (
{display_name}
{fullname}
{balance[`${key.toLowerCase()}_available`] || 0}
);
})
}
...
```
{% endcode %}
13. The Final **Form.js** Code is found in the expandable box below:
<- Click here for Final.js Code
{% 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 (
)
}
const mapContextToProps = ({ strings, activeLanguage, icons, generateId, balance, coins, router }) => ({
strings,
activeLanguage,
icons,
generateId,
balance,
coins,
router,
});
export default withKit(mapContextToProps)(Form);
```
{% endcode %}
14. With this final *Form.js* you should be able to see the completed simple wallet plugin page