add token pool selector

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

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'

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')}

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'

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