From f7ebe14799f7681b2c0bc9fd8eb5ecd9d5bb3242 Mon Sep 17 00:00:00 2001
From: Teto Gomez <terencio17@rocketmail.com>
Date: Wed, 22 Feb 2023 20:47:05 -0600
Subject: [PATCH 1/2] fix: fix issues related to delegator page

---
 public/locales/cn/common.json            | 10 +++++--
 public/locales/en/common.json            | 10 +++++--
 public/locales/es/common.json            | 10 +++++--
 public/locales/ko/common.json            | 10 +++++--
 src/components/AuthUAL/index.tsx         |  9 ++----
 src/components/CountdownTimer/index.tsx  | 36 +++++++++++++++++++++---
 src/components/CountdownTimer/styles.ts  | 24 ++++++++++++++++
 src/components/Sidebar/index.tsx         |  4 ++-
 src/hooks/useCountdown/index.ts          | 11 ++++++--
 src/hooks/useUAL/index.tsx               | 35 ++++++++++++++---------
 src/pages/delegator/DelegatorActions.tsx | 31 ++++++++++++++++----
 src/pages/delegator/styles.ts            | 11 +++++++-
 src/utils/smart-proxy.ts                 | 11 ++++++--
 13 files changed, 166 insertions(+), 46 deletions(-)
 create mode 100644 src/components/CountdownTimer/styles.ts

diff --git a/public/locales/cn/common.json b/public/locales/cn/common.json
index b1e5a9a..84cbec2 100644
--- a/public/locales/cn/common.json
+++ b/public/locales/cn/common.json
@@ -11,6 +11,10 @@
   "searchName": "按名称搜索",
   "buttonLabel": "委托票权",
   "buttonLabelDelegate": "委托",
+  "days": "days",
+  "hrs": "hrs",
+  "mins": "mins",
+  "secs": "secs",
   "routes": {
     "/": "主页",
     "voters": "投票成员",
@@ -142,13 +146,15 @@
     "yourRewards": "Your Rewards",
     "legend": "The reward isn't activated now. If you want to urge BPs to activate direct inflation reward, please indicate how much inflation should be dedicated system-wide none-vote-buy reward. Choose: 0%, 0.25%, 0.5%, 0.75%, 1%.",
     "delegateVoteMessage": "Vote Delegaded Successfully",
+    "undelegateVoteMessage": "Vote Undelegaded Successfully",
     "somethingWrong": "Something went wrong, try again.",
     "claimMessage": "Reward Claimed",
     "recipientMessage": "Recipient Changed",
     "account": "Account",
     "active": "Active",
-    "undelegate": "Undelegate",
+    "undelegated": "Undelegate",
     "signupMessage": "Your account needs one more step to access this page, please click on the validate button to continue.",
-    "distributionLabel": "Estimated time to next distribution"
+    "distributionLabel": "Estimated time to next distribution",
+    "close": "Close"
   }
 }
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index f758117..4640ccc 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -11,6 +11,10 @@
   "searchName": "Search by name",
   "buttonLabel": "Delegate Vote",
   "buttonLabelDelegate": "Delegate",
+  "days": "days",
+  "hrs": "hrs",
+  "mins": "mins",
+  "secs": "secs",
   "routes": {
     "/": "Home",
     "voters": "Members",
@@ -142,13 +146,15 @@
     "yourRewards": "Your Rewards",
     "legend": "The reward isn't activated now. If you want to urge BPs to activate direct inflation reward, please indicate how much inflation should be dedicated system-wide none-vote-buy reward. Choose: 0%, 0.25%, 0.5%, 0.75%, 1%.",
     "delegateVoteMessage": "Vote Delegaded Successfully",
+    "undelegateVoteMessage": "Vote Undelegaded Successfully",
     "somethingWrong": "Something went wrong, try again.",
     "claimMessage": "Reward Claimed",
     "recipientMessage": "Recipient Changed",
     "account": "Account",
     "active": "Active",
-    "undelegate": "Undelegate",
+    "undelegated": "Undelegate",
     "signupMessage": "Your account needs one more step to access this page, please click on the validate button to continue.",
-    "distributionLabel": "Estimated time to next distribution"
+    "distributionLabel": "Estimated time to next distribution",
+    "close": "Close"
   }
 }
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 7d05702..e22ef73 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -11,6 +11,10 @@
   "searchName": "Buscar por nombre",
   "buttonLabel": "Delegar voto",
   "buttonLabelDelegate": "Delegar",
+  "days": "días",
+  "hrs": "hrs",
+  "mins": "mins",
+  "secs": "segs",
   "routes": {
     "/": "Hogar",
     "voters": "Miembros",
@@ -142,13 +146,15 @@
     "yourRewards": "Tus recompensas",
     "legend": "La recompensa no está activada ahora. Si desea instar a los BP a activar la recompensa de inflación directa, indique cuánta inflación debe dedicarse a la recompensa de compra sin voto en todo el sistema. Elija: 0%, 0.25% , 0,5%, 0,75%, 1%.",
     "delegateVoteMessage": "Voto Delegado Exitosamente",
+    "undelegateVoteMessage": "Voto sin Delegar Exitosamente",
     "somethingWrong": "Algo salió mal, inténtalo de nuevo",
     "claimMessage": "Recompensa Reclamada",
     "recipientMessage": "Destinatario cambiado",
     "account": "Cuenta",
     "active": "Activo",
-    "undelegado": "Anular el delegado",
+    "undelegated": "Anular el delegado",
     "signupMessage": "Tu cuenta necesita un paso más para poder acceder a esta página, por favor has click en en boton de validar para poder continuar.",
-    "distributionLabel": "tiempo estimado para la siguiente distribución"
+    "distributionLabel": "tiempo estimado para la siguiente distribución",
+    "close": "Cerrar"
   }
 }
diff --git a/public/locales/ko/common.json b/public/locales/ko/common.json
index 3a63a96..b8ca26d 100644
--- a/public/locales/ko/common.json
+++ b/public/locales/ko/common.json
@@ -11,6 +11,10 @@
   "searchName": "이름으로 찾기",
   "buttonLabel": "투표 위임",
   "buttonLabelDelegate": "투표",
+  "days": "days",
+  "hrs": "hrs",
+  "mins": "mins",
+  "secs": "secs",
   "routes": {
     "/": "메인",
     "voters": "투표자 조회",
@@ -143,13 +147,15 @@
     "yourRewards": "Your Rewards",
     "legend": "The reward isn't activated now. If you want to urge BPs to activate direct inflation reward, please indicate how much inflation should be dedicated system-wide none-vote-buy reward. Choose: 0%, 0.25%, 0.5%, 0.75%, 1%.",
     "delegateVoteMessage": "Vote Delegaded Successfully",
+    "undelegateVoteMessage": "Vote Undelegaded Successfully",
     "somethingWrong": "Something went wrong, try again.",
     "claimMessage": "Reward Claimed",
     "recipientMessage": "Recipient Changed",
     "account": "Account",
     "active": "Active",
-    "undelegate": "Undelegate",
+    "undelegated": "Undelegate",
     "signupMessage": "Your account needs one more step to access this page, please click on the validate button to continue.",
-    "distributionLabel": "Estimated time to next distribution"
+    "distributionLabel": "Estimated time to next distribution",
+    "close": "Close"
   }
 }
diff --git a/src/components/AuthUAL/index.tsx b/src/components/AuthUAL/index.tsx
index d8438aa..d3f16ef 100644
--- a/src/components/AuthUAL/index.tsx
+++ b/src/components/AuthUAL/index.tsx
@@ -1,6 +1,6 @@
-import { Button, Spinner } from '@edenia/ui-kit'
+import { Button } from '@edenia/ui-kit'
 import { useTranslation } from 'next-i18next'
-import { useState, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import useAuthUAL from './useAuthUAL.hook'
 import useStyles from './styles'
@@ -10,19 +10,16 @@ const AuthButton: React.FC<{
   setMessage(value: any): void
 }> = ({ btnLabel, setMessage }) => {
   const [{ state }, { login }] = useAuthUAL()
-  const [loader, setLoader] = useState<boolean>(false)
   const { t } = useTranslation()
   const classes = useStyles()
 
   const handleLogin = async () => {
-    setLoader(true)
     await login('anchor')
   }
 
   useEffect(() => {
     if (state?.validUser === undefined || state?.validUser) return
 
-    setLoader(false)
     setMessage({
       severity: 'warning',
       message: t('home.noEdenMember'),
@@ -35,8 +32,6 @@ const AuthButton: React.FC<{
       {!state?.ual?.activeUser && (
         <Button onClick={handleLogin} label={btnLabel} variant='primary' />
       )}
-      <p />
-      {loader && <Spinner />}
     </div>
   )
 }
diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index b8a7714..50c60dd 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -1,23 +1,51 @@
 import React from 'react'
+import { useTranslation } from 'next-i18next'
 import { Box } from '@mui/material'
 
 import useCountdown from 'hooks/useCountdown'
 import { PopoverMessage } from 'components'
 
+import useStyle from './styles'
+
 const CountdownTimer = ({
   date,
-  style,
   distributionLabel
 }: {
   date: number
-  style: string
+  style?: string
   distributionLabel: string
 }): JSX.Element => {
   const [days, hours, minutes, seconds] = useCountdown(date)
+  const { t } = useTranslation()
+  const classes = useStyle()
 
   return (
-    <Box display='flex' alignItems='center'>
-      <span className={style}>{`${days}:${hours}:${minutes}:${seconds} `}</span>
+    <Box className={classes.countdownContainer}>
+      {!!days && (
+        <>
+          <Box className={classes.timeItemBox}>
+            <span className={classes.items}>{days}</span>
+            <span className={classes.labels}>{t('days')}</span>
+          </Box>
+          <span className={classes.separator}>:</span>
+        </>
+      )}
+      <Box className={classes.timeItemBox}>
+        <span className={classes.items}>{hours}</span>
+        <span className={classes.labels}>{t('hrs')}</span>
+      </Box>
+      <span className={classes.separator}>:</span>
+
+      <Box className={classes.timeItemBox}>
+        <span className={classes.items}>{minutes}</span>
+        <span className={classes.labels}>{t('mins')}</span>
+      </Box>
+      <span className={classes.separator}>:</span>
+
+      <Box className={classes.timeItemBox}>
+        <span className={classes.items}>{seconds}</span>
+        <span className={classes.labels}>{t('secs')}</span>
+      </Box>
       <PopoverMessage message={distributionLabel} />
     </Box>
   )
diff --git a/src/components/CountdownTimer/styles.ts b/src/components/CountdownTimer/styles.ts
new file mode 100644
index 0000000..c72bf4e
--- /dev/null
+++ b/src/components/CountdownTimer/styles.ts
@@ -0,0 +1,24 @@
+import { makeStyles } from '@mui/styles'
+
+const useStyle = makeStyles(theme => ({
+  timeItemBox: {
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  countdownContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: `0 ${theme.spacing(1)}`
+  },
+  items: { fontSize: 17, lineHeight: 'initial', marginTop: '7px' },
+  separator: { fontSize: 17, lineHeight: 'initial', margin: '0 2px' },
+  labels: {
+    fontSize: 9,
+    textTransform: 'lowercase',
+    marginTop: '-3px',
+    lineHeight: 'initial'
+  }
+}))
+
+export default useStyle
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index fae1119..6571bc0 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -1,5 +1,4 @@
 import React, { memo, useEffect, useState, useRef, useCallback } from 'react'
-import Image from 'next/image'
 import {
   Drawer,
   DrawerProps,
@@ -231,6 +230,9 @@ const Sidebar: React.FC<SidebarType> = ({ onClose, props }) => {
                 placement='bottom-start'
                 transition
                 disablePortal
+                nonce={undefined}
+                onResize={undefined}
+                onResizeCapture={undefined}
               >
                 {({ TransitionProps, placement }) => (
                   <Grow
diff --git a/src/hooks/useCountdown/index.ts b/src/hooks/useCountdown/index.ts
index 839e384..fbe61c2 100644
--- a/src/hooks/useCountdown/index.ts
+++ b/src/hooks/useCountdown/index.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 const getReturnValues = countDown => {
-  if (countDown < 0) return [0, 0, 0, 0]
+  if (countDown < 0) return [0, '00', '00', '00']
 
   const days = Math.floor(countDown / (1000 * 60 * 60 * 24))
   const hours = Math.floor(
@@ -10,10 +10,15 @@ const getReturnValues = countDown => {
   const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
   const seconds = Math.floor((countDown % (1000 * 60)) / 1000)
 
-  return [days, hours, minutes, seconds]
+  return [
+    days,
+    hours < 10 ? `0${hours}` : hours,
+    minutes < 10 ? `0${minutes}` : minutes,
+    seconds < 10 ? `0${seconds}` : seconds
+  ]
 }
 
-const useCountdown = (targetDate: number): Array<number> => {
+const useCountdown = (targetDate: number): Array<number | string> => {
   const countDownDate = new Date(targetDate).getTime()
   const [countDown, setCountDown] = useState(
     countDownDate - new Date().getTime()
diff --git a/src/hooks/useUAL/index.tsx b/src/hooks/useUAL/index.tsx
index e8547b5..e0c77b6 100644
--- a/src/hooks/useUAL/index.tsx
+++ b/src/hooks/useUAL/index.tsx
@@ -22,21 +22,27 @@ const useLightUAL = ({ appName, chains, authenticators }: UALType) => {
   const [loading, setLoading] = useState(false)
 
   const login = (type: string) => {
-    const ual = new UAL(chains, appName, authenticators)
-    const { availableAuthenticators } = ual.getAuthenticators()
-
-    const authenticator = getAuthenticatorInstance(
-      type,
-      availableAuthenticators
-    )
+    try {
+      const ual = new UAL(chains, appName, authenticators)
+      const { availableAuthenticators } = ual.getAuthenticators()
+
+      const authenticator = getAuthenticatorInstance(
+        type,
+        availableAuthenticators
+      )
+
+      setLoading(true)
+      const response = authenticateWithoutAccountInput({
+        ual,
+        appName,
+        availableAuthenticators,
+        authenticator
+      })
 
-    setLoading(true)
-    authenticateWithoutAccountInput({
-      ual,
-      appName,
-      availableAuthenticators,
-      authenticator
-    })
+      console.log({ response })
+    } catch (error) {
+      console.log('error from login', error)
+    }
   }
 
   const restart = () => {
@@ -167,6 +173,7 @@ const useLightUAL = ({ appName, chains, authenticators }: UALType) => {
         })
         setLoading(false)
       } catch (err) {
+        console.log('error from authenticateWithoutAccountInput')
         setLoading(false)
       }
     },
diff --git a/src/pages/delegator/DelegatorActions.tsx b/src/pages/delegator/DelegatorActions.tsx
index df2e001..5e673bf 100644
--- a/src/pages/delegator/DelegatorActions.tsx
+++ b/src/pages/delegator/DelegatorActions.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, ReactNode, useEffect } from 'react'
 import { Button } from '@edenia/ui-kit'
-import { TextField, AlertColor } from '@mui/material'
+import { TextField, AlertColor, Button as ButtonMUI } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 import clsx from 'clsx'
 import {
@@ -103,10 +103,11 @@ const DelegatorAction: React.FC<DelegateBody> = ({
     setNextDistribution(DATE_FORMATED)
   }, [setNextDistribution])
 
-  const delegateVote = async () => {
+  const delegateVote = async (isUndelegate = false) => {
     try {
       const delegateVoteTrx = smartProxyUtil.buildDelegateTransaction(
-        state?.ual?.activeUser?.accountName
+        state?.ual?.activeUser?.accountName,
+        isUndelegate
       )
 
       await state?.ual?.activeUser?.signTransaction(delegateVoteTrx, {
@@ -116,7 +117,9 @@ const DelegatorAction: React.FC<DelegateBody> = ({
       })
       setMessage({
         severity: 'success',
-        message: t('delegator.delegateVoteMessage'),
+        message: isUndelegate
+          ? t('delegator.undelegateVoteMessage')
+          : t('delegator.delegateVoteMessage'),
         visible: true
       })
       setTimeout(async () => {
@@ -183,7 +186,7 @@ const DelegatorAction: React.FC<DelegateBody> = ({
 
   const undelegateVote = () => {
     try {
-      console.log('undelegate vote')
+      delegateVote(true)
     } catch (error) {
       console.error(error)
     }
@@ -285,7 +288,7 @@ const DelegatorAction: React.FC<DelegateBody> = ({
         {userVoteForProxy ? (
           <Button
             onClick={undelegateVote}
-            label={t('delegator.undelegate')}
+            label={t('delegator.undelegated')}
             variant='primary'
             externalStyles={clsx(classes.btnAction, {
               [classes.outlinedBtnRed]: true
@@ -317,11 +320,27 @@ const DelegatorAction: React.FC<DelegateBody> = ({
             <TextField
               id='recipient-basic'
               label={t('account')}
+              placeholder='edenprxfunds'
               variant='outlined'
               size='small'
               value={recipient}
               onChange={inputOnChange}
             />
+            <ButtonMUI
+              onClick={() => setShowSubmit(false)}
+              variant='text'
+              sx={{
+                marginRight: `16px`,
+                color: '#C5283D',
+                textTransform: 'capitalize',
+                borderColor: '#C5283D',
+                '& .MuiSvgIcon-root': {
+                  fontSize: 16
+                }
+              }}
+            >
+              {t('delegator.close')}
+            </ButtonMUI>
             <Button
               onClick={chanceReceipt}
               label={t('delegator.submit')}
diff --git a/src/pages/delegator/styles.ts b/src/pages/delegator/styles.ts
index cb1412d..254061a 100644
--- a/src/pages/delegator/styles.ts
+++ b/src/pages/delegator/styles.ts
@@ -121,7 +121,16 @@ const Styles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     '& .MuiTextField-root': {
-      marginRight: theme.spacing(4)
+      marginRight: theme.spacing(2),
+      height: 36
+    },
+    '& .MuiFormLabel-root': {
+      fontSize: 16,
+      marginTop: -4
+    },
+    '& .MuiInputBase-root': {
+      fontSize: 16,
+      height: 36
     }
   },
   claimBox: {
diff --git a/src/utils/smart-proxy.ts b/src/utils/smart-proxy.ts
index 3bd6ce9..ad3b686 100644
--- a/src/utils/smart-proxy.ts
+++ b/src/utils/smart-proxy.ts
@@ -68,11 +68,18 @@ export const buildTransaction = ({
   }
 }
 
-export const buildDelegateTransaction = (voter: string): Transaction => {
+export const buildDelegateTransaction = (
+  voter: string,
+  undelegate = false
+): Transaction => {
   return buildTransaction({
     actor: voter,
     action: 'voteproducer',
-    data: { voter, proxy: sdkConfig.edenSmartProxyContract, producers: [] },
+    data: {
+      voter,
+      proxy: undelegate ? '' : sdkConfig.edenSmartProxyContract,
+      producers: []
+    },
     contract: sdkConfig.eosioContract
   })
 }

From 8459ac889f5004a91c90032c32b96e5d49d2ecbd Mon Sep 17 00:00:00 2001
From: Teto Gomez <terencio17@rocketmail.com>
Date: Sat, 25 Feb 2023 14:15:52 -0600
Subject: [PATCH 2/2] fix: code review changes

---
 src/hooks/useUAL/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/hooks/useUAL/index.tsx b/src/hooks/useUAL/index.tsx
index e0c77b6..4cb26d2 100644
--- a/src/hooks/useUAL/index.tsx
+++ b/src/hooks/useUAL/index.tsx
@@ -32,14 +32,12 @@ const useLightUAL = ({ appName, chains, authenticators }: UALType) => {
       )
 
       setLoading(true)
-      const response = authenticateWithoutAccountInput({
+      authenticateWithoutAccountInput({
         ual,
         appName,
         availableAuthenticators,
         authenticator
       })
-
-      console.log({ response })
     } catch (error) {
       console.log('error from login', error)
     }