From 61a0e5bbfb5ea7cd3c52c9c92972c8ee8a604024 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 2 Mar 2022 16:34:03 +0000
Subject: [PATCH] add token pool selector

---
 .../src/components/TokenPoolSelector.tsx      | 43 ++++++++++++++-----
 nym-wallet/src/components/index.ts            |  1 +
 nym-wallet/src/pages/bond/BondForm.tsx        |  8 +++-
 .../src/pages/undelegate/UndelegateForm.tsx   |  2 +-
 nym-wallet/src/utils/index.ts                 |  4 ++
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/nym-wallet/src/components/TokenPoolSelector.tsx b/nym-wallet/src/components/TokenPoolSelector.tsx
index 6a00050e13..6251272483 100644
--- a/nym-wallet/src/components/TokenPoolSelector.tsx
+++ b/nym-wallet/src/components/TokenPoolSelector.tsx
@@ -1,18 +1,39 @@
-import { ListItem, ListItemText, Select } from '@mui/material'
-import React, { useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent } from '@mui/material'
+import { ClientContext } from '../context/main'
 
-type TPool = 'balance' | 'locked'
+type TPoolOption = 'balance' | 'locked' | ''
 
-export const TokenPoolSelector: React.FC<{ onSelect: (pool: TPool) => void }> = ({ onSelect }) => {
-  const [value, setValue] = useState<TPool>()
+export const TokenPoolSelector: React.FC<{ onSelect: (pool: TPoolOption) => void }> = ({ onSelect }) => {
+  const [value, setValue] = useState<TPoolOption>('')
+  const {
+    userBalance: { tokenAllocation, balance },
+    currency,
+  } = useContext(ClientContext)
+
+  useEffect(() => {
+    if (value !== '') {
+      onSelect(value)
+    }
+  }, [value])
+
+  const handleChange = (e: SelectChangeEvent) => setValue(e.target.value as TPoolOption)
 
   return (
-    <>
-      <Select label="Token Pool" value={value}>
-        <ListItem>
-          <ListItemText primary="Balance" secondary="123 nymt" />
-        </ListItem>
+    <FormControl fullWidth>
+      <InputLabel>Token pool</InputLabel>
+      <Select label="Token Pool" onChange={handleChange} value={value}>
+        <MenuItem value="balance">
+          <ListItemText
+            primary="Balance"
+            secondary={`${balance?.printable_balance}`}
+            secondaryTypographyProps={{ sx: { textTransform: 'uppercase' } }}
+          />
+        </MenuItem>
+        <MenuItem value="locked">
+          <ListItemText primary="Locked" secondary={`${tokenAllocation?.locked} ${currency?.major}`} />
+        </MenuItem>
       </Select>
-    </>
+    </FormControl>
   )
 }
diff --git a/nym-wallet/src/components/index.ts b/nym-wallet/src/components/index.ts
index 3b7e6f20a5..e2f4d2138e 100644
--- a/nym-wallet/src/components/index.ts
+++ b/nym-wallet/src/components/index.ts
@@ -15,3 +15,4 @@ export * from './ClientAddress'
 export * from './InfoToolTip'
 export * from './Nav'
 export * from './Title'
+export * from './TokenPoolSelector'
diff --git a/nym-wallet/src/pages/bond/BondForm.tsx b/nym-wallet/src/pages/bond/BondForm.tsx
index 5d32b7d11d..5fb885f93b 100644
--- a/nym-wallet/src/pages/bond/BondForm.tsx
+++ b/nym-wallet/src/pages/bond/BondForm.tsx
@@ -19,7 +19,7 @@ import { bond, majorToMinor } from '../../requests'
 import { validationSchema } from './validationSchema'
 import { Gateway, MixNode } from '../../types'
 import { ClientContext } from '../../context/main'
-import { Fee } from '../../components'
+import { Fee, TokenPoolSelector } from '../../components'
 
 type TBondFormFields = {
   withAdvancedOptions: boolean
@@ -176,6 +176,12 @@ export const BondForm = ({
             />
           </Grid>
 
+          {userBalance.originalVesting && (
+            <Grid item xs={12}>
+              <TokenPoolSelector onSelect={(pool) => console.log(pool)} />
+            </Grid>
+          )}
+
           <Grid item xs={12} sm={6}>
             <TextField
               {...register('amount')}
diff --git a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx b/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
index 7584a6da6e..607ea15975 100644
--- a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
+++ b/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react'
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Autocomplete, Button, CircularProgress, FormControl, Grid, TextField, Typography } from '@mui/material'
+import { Box, Autocomplete, Button, CircularProgress, FormControl, Grid, TextField } from '@mui/material'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { validationSchema } from './validationSchema'
 import { EnumNodeType, TDelegation, TFee } from '../../types'
diff --git a/nym-wallet/src/utils/index.ts b/nym-wallet/src/utils/index.ts
index 84db65a968..bf1de2efd0 100644
--- a/nym-wallet/src/utils/index.ts
+++ b/nym-wallet/src/utils/index.ts
@@ -121,6 +121,10 @@ export const currencyMap = (network?: Network) => {
       currency.minor = 'UNYMT'
       currency.major = 'NYMT'
       break
+    case 'QA':
+      currency.minor = 'UNYMT'
+      currency.major = 'NYMT'
+      break
   }
 
   return currency