Merge pull request #90 from noxonsu/fixes-15-09-23

fixes 15 09 23
noxonsu · Sep 20, 2023 · 6f79bbc · 6f79bbc
2 parents ec731fe + 336b41e
commit 6f79bbc
Show file tree

Hide file tree

Showing 13 changed files with 279 additions and 163 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -27,6 +27,7 @@
     "prettier/prettier": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": 0,
-    "@typescript-eslint/ban-ts-ignore": "off"
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/no-unused-vars": "off"
   }
 }
diff --git a/src/components/Header/NavList.tsx b/src/components/Header/NavList.tsx
@@ -225,7 +225,7 @@ const StyledNavLink = styled(NavLink).attrs({
 export default function NavList() {
   const { t } = useTranslation()
   const { account, active } = useActiveWeb3React()
-  const { owner, appManagement } = useAppState()
+  const { owner, appManagement, menuLinks } = useAppState()
   const dispatch = useDispatch()
   const [isOwner, setIsOwner] = useState<boolean>(!owner || account?.toLowerCase() === owner?.toLowerCase())
 
@@ -241,6 +241,46 @@ export default function NavList() {
 
   return (
     <>
+      <style>
+        {`
+          .menuLink {
+            display: -webkit-box;
+            display: -webkit-flex;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: start;
+            -webkit-justify-content: flex-start;
+            -ms-flex-pack: start;
+            justify-content: flex-start;
+            -webkit-align-items: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-align-items: left;
+            -webkit-box-align: left;
+            -ms-flex-align: left;
+            align-items: left;
+            outline: none;
+            cursor: pointer;
+            -webkit-text-decoration: none;
+            text-decoration: none;
+            width: 100%;
+            font-weight: 500;
+            color: #cdd1dd;
+            box-sizing: border-box;
+            padding: 1.1rem 0.875rem;
+            line-height: 1rem;
+            margin: 6px 0;
+            height: 48px;
+            position: relative;
+            white-space: nowrap;
+            font-size: 1.3rem;
+          }
+          .menuLink:hover {
+            color: #979dac;
+          }
+        `}
+      </style>
       <HeaderLinks>
         {/*
         <StyledNavLink id={`dashboard-nav-link`} to={'/dashboard'}>
@@ -332,7 +372,15 @@ export default function NavList() {
         <StyledNavLink id={`pool-nav-link`} to={'/pool'}>
           {t('pool')}
         </StyledNavLink>
-
+        {Array.isArray(menuLinks) && menuLinks.length && (
+          <>
+            {menuLinks.map((item, key) => {
+              return (
+                <a className="menuLink" href={item.address} key={key}>{item.title}</a>
+              )
+            })}
+          </>
+        )}
         {active && isOwner && (
           <StyledNavLink id={`settings-nav-link`} to={'/settings'} onClick={openSettings}>
             {t('adminPanel')}

diff --git a/src/components/MenuListFactory/index.tsx b/src/components/MenuListFactory/index.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Box } from 'rebass'
+import { CleanButton, ButtonAdd } from '../Button'
+import { RiCloseFill } from 'react-icons/ri'
+import Accordion from '../Accordion'
+
+const List = styled.ul`
+  margin: 0;
+  padding: 0.4rem;
+  list-style: none;
+`
+
+const Item = styled.li`
+  padding: 0.2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const Overflow = styled.span`
+  overflow-x: auto;
+`
+
+const RemoveButton = styled(CleanButton)`
+  width: auto;
+  padding: 0.3rem;
+`
+
+const NewItemWrapper = styled(Box)`
+  display: flex;
+  align-items: center;
+`
+
+const NewItemInput = styled.input<{ error: boolean }>`
+  border-radius: 0.5rem;
+  margin-right: 0.4rem !important;
+  ${({ error, theme }) => (error ? `border: 2px solid ${theme.red2} !important;` : '')}
+`
+
+export default function MenuListFactory({
+  title,
+  placeholder,
+  isValidItem,
+  items,
+  setItems
+}: {
+  title: string
+  setItems: (callback: any) => void
+  isValidItem: (item: { title: string, address: string } ) => boolean
+  items: any[]
+  placeholder?: string
+}) {
+  const [newItemTitle, setNewItemTitle] = useState<string>('')
+  const [newItemAddress, setNewItemAddress] = useState<string>('')
+
+  const [itemError, setItemError] = useState<boolean>(false)
+
+  const onRemove = (targetIndex: number) => {
+    setItems((prevItems: any[]) => prevItems.filter((_, index) => index !== targetIndex))
+  }
+
+  const onNewItemTitleChange = (event: any) => {
+    setItemError(false)
+    setNewItemTitle(event.target.value)
+  }
+  const onNewItemAddressChange = (event: any) => {
+    setItemError(false)
+    setNewItemAddress(event.target.value)
+  }
+
+  const onAdd = () => {
+    if (isValidItem({title: newItemTitle, address: newItemAddress})) {
+      setItems((prevItems: any[]) => [...prevItems, { title: newItemTitle, address: newItemAddress }])
+      setNewItemTitle('')
+      setNewItemAddress('')
+    } else {
+      setItemError(true)
+    }
+  }
+
+  return (
+    <Accordion title={title}>
+      <List>
+        {items.map((item, index) => (
+          <Item key={index}>
+            <Overflow>{item.title}</Overflow>
+            <Overflow>({item.address})</Overflow>
+            <RemoveButton type="button" onClick={() => onRemove(index)} title="Remove item">
+              <RiCloseFill />
+            </RemoveButton>
+          </Item>
+        ))}
+      </List>
+
+      <NewItemWrapper>
+        <div>Title:</div>
+        <NewItemInput error={itemError} type="text" onChange={onNewItemTitleChange} />
+        <div>Address:</div>
+        <NewItemInput error={itemError} type="text" onChange={onNewItemAddressChange} /> 
+        <ButtonAdd onClick={onAdd} disabled={!newItemTitle || !newItemAddress} />
+      </NewItemWrapper>
+    </Accordion>
+  )
+}
diff --git a/src/hooks/useAppData.ts b/src/hooks/useAppData.ts
@@ -21,6 +21,7 @@ const parseInfo = (info: string) => {
     elementsColorLight: '',
     elementsColorDark: '',
     socialLinks: [],
+    menuLinks: [],
     disableSourceCopyright: false,
     tokenIcons: {},
     appSettings: {
@@ -53,6 +54,7 @@ const parseInfo = (info: string) => {
       elementsColorDark,
       tokenIcons,
       socialLinks,
+      menuLinks,
       disableSourceCopyright,
       appSettings,
     } = crossChainSettings
@@ -72,6 +74,7 @@ const parseInfo = (info: string) => {
     if (elementsColorLight) parsed.elementsColorLight = elementsColorLight
     if (elementsColorDark) parsed.elementsColorDark = elementsColorDark
     if (Array.isArray(socialLinks) && socialLinks.length) parsed.socialLinks = socialLinks
+    if (Array.isArray(menuLinks) && menuLinks.length) parsed.menuLinks = menuLinks
     if (disableSourceCopyright) parsed.disableSourceCopyright = disableSourceCopyright
     parsed.tokenIcons = (tokenIcons && Object.keys(tokenIcons).length) ? tokenIcons : {}
   }

diff --git a/src/pages/Settings/Contracts.tsx b/src/pages/Settings/Contracts.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -316,11 +317,15 @@ export default function Contracts() {
 
   const [routerChainId, setRouterChainId] = useState('')
   const [routerAddress, setRouterAddress] = useState('')
+  const [routerConfirmCount, setRouterConfirmCount] = useState(3)
 
   useEffect(() => {
     if (chainId !== undefined && stateRouterAddress[chainId]) {
       setRouterChainId(String(chainId))
       setRouterAddress(stateRouterAddress[chainId])
+      if (stateAppSettings?.routerConfigs[`${chainId}:${stateRouterAddress[chainId]}`]) {
+        setRouterConfirmCount(stateAppSettings.routerConfigs[`${chainId}:${stateRouterAddress[chainId]}`].confirmations)
+      }
     } else {
       setRouterChainId('')
       setRouterAddress('')
@@ -354,14 +359,14 @@ export default function Contracts() {
       const tx = await routerConfigSigner.setChainConfig(routerChainId, {
         BlockChain: name,
         RouterContract: routerAddress,
-        Confirmations: 3,
+        Confirmations: routerConfirmCount,
         InitialHeight: 0
       })
 
       const receipt = await tx.wait()
 
       if (receipt.status) {
-        dispatch(updateRouterData({ chainId: Number(routerChainId), routerAddress: routerAddress }))
+        dispatch(updateRouterData({ chainId: Number(routerChainId), routerAddress: routerAddress, routerConfirmCount: routerConfirmCount }))
         addTransaction(
           { hash: receipt.transactionHash },
           {
@@ -476,13 +481,16 @@ export default function Contracts() {
     if (selectedContract !== `-`) {
       const {
         chainId,
-        address
+        address,
+        confirmations
       } = appSettings.routerConfigs[selectedContract]
       setRouterChainId(`${chainId}`)
       setRouterAddress(address)
+      setRouterConfirmCount(confirmations)
     } else {
       setRouterChainId(``)
       setRouterAddress(``)
+      setRouterConfirmCount(3)
     }
   }
 
@@ -771,6 +779,12 @@ export default function Contracts() {
                 value={routerAddress}
                 onChange={event => setRouterAddress(event.target.value)}
               />
+              {t('routerConfirmCount')}
+              <Input
+                type="text"
+                value={routerConfirmCount}
+                onChange={event => setRouterConfirmCount(event.target.value)}
+              />
             </OptionLabel>
             {onConfigNetwork ? (
               <ButtonPrimary onClick={setChainConfig} disabled={!canSaveChainConfig}>

diff --git a/src/pages/Settings/FetchMainConfig.tsx b/src/pages/Settings/FetchMainConfig.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ERC20_ABI } from '../../constants/abis/erc20'
@@ -105,6 +106,7 @@ export default function FetchMainConfig({
         // @ts-ignore
         const crosschainTokens: any = {}
         const chainRouters: any = {}
+        const chainRoutersConfirmsCount: any = {}
 
         useMulticall(mainConfigChainId, multicallDataTokenConfigs)
           .then((contractTokenConfigs) => {
@@ -117,6 +119,7 @@ export default function FetchMainConfig({
               switch (method) {
                 case `getChainConfig`:
                   chainRouters[callData.tokenChainId] = aData.RouterContract
+                  chainRoutersConfirmsCount[callData.tokenChainId] = aData.Confirmations.toNumber()
                   break;
                 case `getTokenConfig`:
                   const {
@@ -262,7 +265,8 @@ export default function FetchMainConfig({
                   const chainRouterAddress = chainRouters[chainId]
                   updatedRouterConfigs[`${chainId}:${chainRouterAddress}`] = {
                     address: chainRouterAddress,
-                    chainId
+                    chainId,
+                    confirmations: chainRoutersConfirmsCount[chainId]
                   }
                 })
 

diff --git a/src/pages/Settings/Interface.tsx b/src/pages/Settings/Interface.tsx
@@ -13,6 +13,7 @@ import ColorSelector from '../../components/ColorSelector'
 import InputPanel from '../../components/InputPanel'
 import Toggle from '../../components/Toggle'
 import ListFactory from '../../components/ListFactory'
+import MenuListFactory from '../../components/MenuListFactory'
 import { OptionWrapper } from './index'
 import { updateStorageData } from '../../utils/storage'
 
@@ -71,6 +72,7 @@ export default function Interface() {
     elementsColorLight: stateElementsColorLight,
     elementsColorDark: stateElementsColorDark,
     socialLinks: stateSocialLinks,
+    menuLinks: stateMenuLinks,
     disableSourceCopyright: stateDisableSourceCopyright,
     tokenIcons: stateTokenIcons
   } = useAppState()
@@ -120,6 +122,8 @@ export default function Interface() {
     }
   }
 
+  const [menuLinks, setMenuLinks] = useState<any[]>(stateMenuLinks || [])
+
   const [socialLinks, setSocialLinks] = useState<string[]>(stateSocialLinks)
   const [disableSourceCopyright, setDisableSourceCopyright] = useState<boolean>(stateDisableSourceCopyright)
 
@@ -183,6 +187,7 @@ export default function Interface() {
           elementsColorLight,
           elementsColorDark,
           socialLinks,
+          menuLinks,
           tokenIcons: tokenIconsList,
           disableSourceCopyright
         },
@@ -321,6 +326,16 @@ export default function Interface() {
         />
       </OptionWrapper>
 
+      <OptionWrapper>
+        <MenuListFactory
+          title={t('menuLinks')}
+          items={menuLinks}
+          setItems={setMenuLinks}
+          isValidItem={({ title,  address }) => {
+            return Boolean(validUrl.isUri(address)) && title != ``
+          }}
+        />
+      </OptionWrapper>
       <OptionWrapper>
         <ListFactory
           title={t('socialLinks')}

diff --git a/src/state/application/actions.ts b/src/state/application/actions.ts
@@ -90,6 +90,7 @@ export type AppData = {
   elementsColorLight: string
   elementsColorDark: string
   socialLinks: string[]
+  menuLinks?: any[]
   tokenIcons: any
   disableSourceCopyright: boolean
   apiAddress: string
@@ -101,7 +102,7 @@ export type AppData = {
 
 export type AppDataKeys = keyof AppData
 
-export const updateRouterData = createAction<{ chainId: number; routerAddress: string }>('application/updateRouterData')
+export const updateRouterData = createAction<{ chainId: number; routerAddress: string, routerConfirmCount: number }>('application/updateRouterData')
 export const setAppManagement = createAction<{ status: boolean }>('application/setAppManagement')
 export const retrieveAppData = createAction<null | AppData>('application/retrieveAppData')
 export const updateAppOptions = createAction<{ key: AppDataKeys; value: AppData[AppDataKeys] }[]>(