Partner Config: create and manage CMAccount

package.json

@@ -32,14 +32,16 @@
         "@emotion/styled": "^11.10.5",
         "@mdi/js": "^7.0.96",
         "@mdi/react": "^1.6.1",
-        "@reduxjs/toolkit": "^1.8.1",
-        "@testing-library/dom": "^8.19.0",
         "@mui/icons-material": "^5.15.11",
         "@mui/material": "^5.15.11",
         "@mui/system": "^5.15.11",
+        "@reduxjs/toolkit": "^1.8.1",
+        "@testing-library/dom": "^8.19.0",
         "@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",
         "@types/node": "^17.0.25",
@@ -61,6 +63,7 @@
         "formik": "^2.2.9",
         "framer-motion": "^8.4.3",
         "html-webpack-plugin": "^5.3.2",
+        "json-loader": "^0.5.7",
         "lodash": "^4.17.21",
         "path": "^0.12.7",
         "postcss": "^8.2.1",
@@ -79,9 +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",
         "react": "^18.2.0",
         "react-circle-flags": "^0.0.18",
         "react-dom": "^18.2.0"

public/index.html

@@ -12,7 +12,7 @@
         />
         <title>Camino Suite Application</title>
 
-        <meta property="og:image" content="/preview.png" />
+        <meta property="og:image" content="/preview.jpg" />
         <meta
             property="og:title"
             content="Camino Suite Camino Suite Application: Your Gateway to Revolutionary Travel"
@@ -32,7 +32,7 @@
             name="twitter:description"
             content="Camino Suite for everything Camino by Chain4Travel."
         />
-        <meta name="twitter:image" content="/preview.png" />
+        <meta name="twitter:image" content="/preview.jpg" />
         <meta name="twitter:image:alt" content="Camino Suite Application" />
 
         <link rel="preconnect" href="https://cdn.jsdelivr.net" />

src/@types/partners.ts

@@ -4,13 +4,15 @@ export interface PartnerDataType {
 }
 
 export interface AttributesType {
+    cChainAddress?: string
     contactEmail?: string
     companyName?: string
     companyCountry?: string
     companyWebsite?: string
     contactFirstname?: string
     contactLastname?: string
     contactPhone?: string
+    pChainAddresses?: string[]
     pChainAddress?: string
     companyShortDescription?: string
     companyLongDescription?: string

src/components/Alert.tsx

@@ -0,0 +1,93 @@
+import { Box, SxProps, Typography } from '@mui/material'
+import React from 'react'
+
+const Alert = ({
+    variant,
+    title,
+    content,
+    sx,
+}: {
+    variant: 'info' | 'negative' | 'warning'
+    title?: string
+    content: string
+    sx?: SxProps
+}) => {
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                gap: '14px',
+                padding: '16px',
+                border: '1px solid',
+                borderColor:
+                    variant === 'info'
+                        ? 'rgba(0, 133, 255, 0.5)'
+                        : variant === 'warning'
+                        ? 'rgba(229, 162, 31, 0.5)'
+                        : 'rgba(229, 67, 31, 0.5)',
+                background:
+                    variant === 'info'
+                        ? 'rgba(0, 133, 255, 0.05)'
+                        : variant === 'warning'
+                        ? 'rgba(229, 162, 31, 0.05)'
+                        : 'rgba(229, 67, 31, 0.05)',
+                borderRadius: '6px',
+                maxWidth: '350px',
+                ...sx,
+                ...(!title && { alignItems: 'center' }),
+            }}
+        >
+            <Box sx={{ ...(!title && { display: 'flex', alignItems: 'center' }) }}>
+                {variant === 'info' && (
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22ZM11 7H13V9H11V7ZM14 17H10V15H11V13H10V11H13V15H14V17Z"
+                            fill="#0085FF"
+                        />
+                    </svg>
+                )}
+                {variant === 'negative' && (
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"
+                            fill="#E5431F"
+                        />
+                    </svg>
+                )}
+                {variant === 'warning' && (
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" fill="#E5A21F" />
+                    </svg>
+                )}
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                {title && (
+                    <Typography variant="body2" fontWeight={600}>
+                        {title}
+                    </Typography>
+                )}
+                {content && <Typography variant="caption">{content}</Typography>}
+            </Box>
+        </Box>
+    )
+}
+
+export default Alert

src/components/CamInput.tsx

@@ -0,0 +1,137 @@
+import Big from 'big.js'
+import BN from 'bn.js'
+import React, { useCallback, useEffect, useState } from 'react'
+
+Big.PE = 32
+
+function bnToBig(val, denomination) {
+    return new Big(val.toString()).div(Math.pow(10, denomination))
+}
+
+function bigToBN(val, denomination) {
+    return new BN(val.mul(Math.pow(10, denomination)).toString())
+}
+
+const DecimalInput = ({
+    denomination = 0,
+    max = null,
+    min = 0,
+    step = null,
+    placeholder,
+    value,
+    initial = null,
+    onChange,
+}) => {
+    const [val, setVal] = useState(bnToString(initial))
+
+    const bnToString = useCallback(
+        val => {
+            return val ? bnToBig(val, denomination).toString() : null
+        },
+        [denomination],
+    )
+
+    const stringToBN = useCallback(
+        strVal => {
+            return bigToBN(new Big(strVal), denomination)
+        },
+        [denomination],
+    )
+
+    const maxNumBN = max
+    const maxNumString = bnToString(maxNumBN)
+
+    const stepNum = (() => {
+        if (!step) {
+            if (denomination >= 2) {
+                return 0.01
+            } else {
+                return Math.pow(10, -denomination)
+            }
+        }
+        try {
+            return bnToString(step)
+        } catch (e) {
+            console.error(e)
+            return '0.01'
+        }
+    })()
+
+    useEffect(() => {
+        if (!val) {
+            onChange(new BN(0))
+            return
+        }
+        try {
+            let splitVal = val.toString().split('.')
+            let wholeVal = splitVal[0]
+            let denomVal = splitVal[1]
+            if (denomVal) {
+                if (denomVal.length > denomination) {
+                    let newDenom = denomVal.substring(0, denomination)
+                    setVal(`${wholeVal}.${newDenom}`)
+                    return
+                }
+            }
+        } catch (e) {
+            console.log(e)
+        }
+        if (parseFloat(val) < min) {
+            setVal(min.toString())
+            return
+        }
+        let valBn = stringToBN(val)
+        onChange(valBn)
+    }, [val, denomination, min, onChange, stringToBN])
+
+    useEffect(() => {
+        setVal(bnToString(value))
+    }, [value, bnToString])
+
+    const handleChange = e => {
+        setVal(e.target.value)
+    }
+
+    const handleBlur = () => {
+        // If number is above max amount, correct it
+        const valBig = Big(val || '0')
+        const valBN = bigToBN(valBig, denomination)
+        if (maxNumBN != null) {
+            if (valBN.gt(maxNumBN)) {
+                setVal(bnToString(maxNumBN))
+            }
+        }
+    }
+
+    const maxout = () => {
+        if (maxNumBN != null) {
+            setVal(bnToString(maxNumBN))
+        }
+    }
+
+    const clear = () => {
+        setVal(undefined)
+    }
+
+    return (
+        <input
+            type="number"
+            inputMode="decimal"
+            placeholder={placeholder}
+            value={val}
+            min={min}
+            max={maxNumString}
+            step={stepNum}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            style={{
+                textAlign: 'right',
+                outline: 'none',
+                WebkitAppearance: 'none',
+                MozAppearance: 'textfield',
+            }}
+        />
+    )
+}
+
+export default DecimalInput