set getters and update functions for messenger configuration

chain4travel · Sep 11, 2024 · b1f52d3 · b1f52d3
1 parent 900bd0f
commit b1f52d3
Show file tree

Hide file tree

Showing 19 changed files with 5,629 additions and 3,450 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.0.1",
         "@testing-library/user-event": "^14.1.1",
+        "@types/big.js": "^6.2.2",
         "@types/ethereum-protocol": "^1.0.5",
         "@types/jest": "^27.4.1",
         "@types/lodash": "^4.14.189",
@@ -81,11 +82,11 @@
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^4.3.1",
         "webpack-merge": "^5.8.0",
-        "yup": "^0.32.11"
+        "yup": "^0.32.11",
+        "ethers": "^6.13.2"
     },
     "dependencies": {
         "big.js": "^6.2.1",
-        "ethers": "^6.13.2",
         "react": "^18.2.0",
         "react-circle-flags": "^0.0.18",
         "react-dom": "^18.2.0",

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,35 +1,33 @@
 import { InputAdornment, Typography } from '@mui/material'
 import TextField from '@mui/material/TextField' // Import TextField if using Material-UI
-import React from 'react'
+import React, { useMemo } from 'react'
+import { actionTypes, usePartnerConfigurationContext } from '../helpers/partnerConfigurationContext'
 
-const Input = ({
-    label,
-    value,
-    onChange,
-    placeholder,
-    type = 'text',
-    fullWidth = false,
-    variant = 'outlined',
-    error = true,
-    helperText = '',
-    endIcon = null,
-    ...rest
-}) => {
+const Input = ({ variant = 'outlined', ...rest }) => {
+    const { state, dispatch } = usePartnerConfigurationContext()
+    const error = useMemo(() => {
+        if (!state.balance) return true
+        let balance = parseFloat(state.balance)
+        if (balance < 100) return true
+        else return false
+    }, [state])
     return (
         <TextField
-            label={label}
-            value={value}
-            onChange={onChange}
-            placeholder={placeholder}
-            type={type}
-            fullWidth={fullWidth}
-            variant={variant}
+            value={state.balance}
+            onChange={e => {
+                dispatch({
+                    type: actionTypes.UPDATE_BALANCE,
+                    payload: {
+                        newValue: e.target.value,
+                    },
+                })
+            }}
+            type="number"
             error={error}
-            helperText={helperText}
             InputProps={{
                 sx: {
                     '& input': {
-                        fontSize: '16px', // Equivalent to Typography body2
+                        fontSize: '16px',
                     },
                 },
                 startAdornment: (
@@ -40,10 +38,10 @@ const Input = ({
                             color: theme => theme.palette.text.primary,
                         }}
                     >
-                        <Typography variant="body2">C-Chain Balance:</Typography>
+                        <Typography variant="body2">Prefund Amount:</Typography>
                     </InputAdornment>
                 ),
-                endAdornment: true ? (
+                endAdornment: error ? (
                     <InputAdornment position="end" sx={{ width: 'fit-contnet' }}>
                         <svg
                             width="24"

diff --git a/src/components/MainButton.tsx b/src/components/MainButton.tsx
@@ -1,26 +1,35 @@
-import { Button, Typography } from '@mui/material'
+import { Button, CircularProgress, SvgIconTypeMap, Typography } from '@mui/material'
+import { OverridableComponent } from '@mui/material/OverridableComponent'
 import * as React from 'react'
 
 function MainButton({
     variant,
     onClick,
     children,
     style,
+    disabled,
+    loading,
+    endIcon,
 }: {
     variant: 'contained' | 'outlined'
     onClick?: React.MouseEventHandler<HTMLButtonElement>
     children: React.ReactNode
     style?: React.CSSProperties
+    disabled?: boolean
+    loading?: boolean
+    endIcon?: any
 }) {
     return (
         <Button
+            disabled={disabled || loading}
             variant={variant}
             onClick={onClick}
+            endIcon={endIcon}
             sx={{
                 borderRadius: '8px',
                 padding: '10px 16px',
                 backgroundColor: variant === 'outlined' ? 'transparent' : 'secondary.main',
-                color: variant === 'outlined' ? 'secondary.main' : 'white',
+                color: theme => theme.palette.text.primary,
                 borderColor: variant === 'outlined' ? theme => theme.palette.grey[600] : '',
                 boxShadow: 'none',
                 borderWidth: '1px',
@@ -33,7 +42,26 @@ function MainButton({
                 ...style,
             }}
         >
-            <Typography variant="caption" fontWeight={600}>
+            {loading && (
+                <CircularProgress
+                    size={24}
+                    sx={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        marginTop: '-12px',
+                        marginLeft: '-12px',
+                    }}
+                />
+            )}
+            <Typography
+                variant="caption"
+                fontWeight={600}
+                sx={{
+                    visibility: loading ? 'hidden' : 'visible',
+                    color: theme => theme.palette.text.primary,
+                }}
+            >
                 {children}
             </Typography>
         </Button>