init playground with default values

add more default values

env updates

nym-wallet/src/components/RewardsPlayground/Inputs.tsx

@@ -3,42 +3,62 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Button, Grid, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { inputValidationSchema } from './inputsValidationSchema';
+import { useBondingContext } from 'src/context';
 
-export type InputValues = {
+export type InputFields = {
   label: string;
   name: 'profitMargin' | 'uptime' | 'bond' | 'delegations' | 'operatorCost';
   isPercentage?: boolean;
 }[];
 
-export const Inputs = ({
-  inputValues,
-  onCalculate,
-}: {
-  inputValues: InputValues;
-  onCalculate: () => Promise<void>;
-}) => {
+export type calculateArgs = {
+  bond: string;
+  delegations: string;
+};
+
+const inputFields: InputFields = [
+  { label: 'Profit margin', name: 'profitMargin', isPercentage: true },
+  { label: 'Operator cost', name: 'operatorCost' },
+  { label: 'Bond', name: 'bond' },
+  { label: 'Delegations', name: 'delegations' },
+  { label: 'Uptime', name: 'uptime', isPercentage: true },
+];
+
+export const Inputs = ({ onCalculate }: { onCalculate: (args: calculateArgs) => Promise<void> }) => {
+  const { bondedNode } = useBondingContext();
+
+  const handleCalculate = (args: calculateArgs) => {
+    onCalculate({ bond: args.bond, delegations: args.delegations });
+  };
+
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(inputValidationSchema),
-    defaultValues: { profitMargin: '', uptime: '', bond: '', delegations: '', operatorCost: '' },
+    defaultValues: {
+      profitMargin: bondedNode?.profitMargin || '',
+      uptime: 100,
+      bond: bondedNode?.bond.amount || '',
+      delegations: '',
+      operatorCost: '',
+    },
   });
 
   return (
     <Grid container spacing={3}>
-      {inputValues.map((input) => (
+      {inputFields.map((field) => (
         <Grid item xs={12} lg={2}>
           <TextField
-            {...register(input.name)}
+            {...register(field.name)}
             fullWidth
-            label={input.label}
-            name={input.name}
-            error={Boolean(errors[input.name])}
-            helperText={errors[input.name]?.message}
+            label={field.label}
+            name={field.name}
+            error={Boolean(errors[field.name])}
+            helperText={errors[field.name]?.message}
             InputProps={{
-              endAdornment: <Typography sx={{ color: 'grey.600' }}>{input.isPercentage ? '%' : 'NYM'}</Typography>,
+              endAdornment: <Typography sx={{ color: 'grey.600' }}>{field.isPercentage ? '%' : 'NYM'}</Typography>,
             }}
           />
         </Grid>
@@ -47,7 +67,7 @@ export const Inputs = ({
         <Button
           variant="contained"
           disableElevation
-          onClick={handleSubmit(onCalculate)}
+          onClick={handleSubmit(handleCalculate)}
           size="large"
           fullWidth
           disabled={Boolean(Object.keys(errors).length)}

nym-wallet/src/components/RewardsPlayground/inputsValidationSchema.ts

@@ -6,7 +6,6 @@ export const inputValidationSchema = Yup.object().shape({
     .required()
     .test('Profit margin must be a number between 0 and 100', (value) => {
       const stringValueToNumber = Math.round(Number(value));
-      console.log(isLessThan(stringValueToNumber, 101));
       if (stringValueToNumber && isGreaterThan(stringValueToNumber, -1) && isLessThan(stringValueToNumber, 101))
         return true;
       return false;

nym-wallet/src/pages/bonding/node-settings/apy-playground/index.tsx

@@ -1,20 +1,19 @@
 import React, { useState } from 'react';
-import { Box, Button, Card, CardContent, CardHeader, Grid, TextField, Typography } from '@mui/material';
+import { Box, Card, CardContent, CardHeader, Grid, Typography } from '@mui/material';
 import { ResultsTable } from 'src/components/RewardsPlayground/ResultsTable';
 import { computeMixnodeRewardEstimation } from 'src/requests';
 import { NodeDetails } from 'src/components/RewardsPlayground/NodeDetail';
-import { Inputs, InputValues } from 'src/components/RewardsPlayground/Inputs';
+import { Inputs, calculateArgs } from 'src/components/RewardsPlayground/Inputs';
+import { useBondingContext } from 'src/context';
+import { useDelegationContext } from 'src/context/delegations';
 
 const MAJOR_AMOUNT_FOR_CALCS = 1000;
 
 export const ApyPlayground = () => {
-  const [inputValues, setInputValues] = useState<InputValues>([
-    { label: 'Profit margin', name: 'profitMargin', isPercentage: true },
-    { label: 'Operator cost', name: 'operatorCost' },
-    { label: 'Bond', name: 'bond' },
-    { label: 'Delegations', name: 'delegations' },
-    { label: 'Uptime', name: 'uptime', isPercentage: true },
-  ]);
+  const { bondedNode } = useBondingContext();
+  const { totalDelegations } = useDelegationContext();
+
+  console.log(totalDelegations);
 
   const [results, setResults] = useState({
     total: { daily: '-', monthly: '-', yearly: '-' },
@@ -22,16 +21,14 @@ export const ApyPlayground = () => {
     delegator: { daily: '-', monthly: '-', yearly: '-' },
   });
 
-  const getInputValue = (inputName: string) => inputValues.find((input) => input.name === inputName);
-
-  const handleCalculate = async () => {
+  const handleCalculate = async ({ bond, delegations }: calculateArgs) => {
     try {
       const res = await computeMixnodeRewardEstimation({
-        identity: 'DLdMKLPywEy1vnu3yPrtXvzY7fw1puiiHpA9n9UQatiQ',
-        uptime: 0,
+        identity: 'HsnGQDiTL9hfY4ZkCBWoVFDdVDQWXKaK9ojXSkmUT44z',
+        uptime: 10,
         isActive: true,
-        pledgeAmount: Math.floor(0 * 1_000_000),
-        totalDelegation: Math.floor(0 * 1_000_000),
+        pledgeAmount: Math.floor(+bond * 1_000_000),
+        totalDelegation: Math.floor(+delegations * 1_000_000),
       });
 
       const operatorReward = (res.estimated_operator_reward / 1_000_000) * 24; // epoch_reward * 1 epoch_per_hour * 24 hours
@@ -80,7 +77,7 @@ export const ApyPlayground = () => {
           }
         />
         <CardContent>
-          <Inputs inputValues={inputValues} onCalculate={handleCalculate} />
+          <Inputs onCalculate={handleCalculate} />
         </CardContent>
       </Card>
       <Grid container spacing={3}>