Frontend update

AvailX · Feb 17, 2024 · a513870 · a513870
1 parent e4a30d1
commit a513870
Show file tree

Hide file tree

Showing 54 changed files with 3,287 additions and 1,234 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,7 @@
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
     "@mui/x-date-pickers": "^6.18.1",
-    "@walletconnect/web3wallet": "^1.10.0",
+    "@walletconnect/web3wallet": "^1.10.1",
     "axios": "^1.5.1",
     "conf": "^12.0.0",
     "date-fns": "^3.2.0",
@@ -43,7 +43,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-i18next": "^8.1.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^3.0.0",
     "internal-ip": "^7.0.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1"

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -21,7 +21,11 @@
             "password1": "Passwords do not match.",
             "password2": "Password must be at least 12 characters long.",
             "username": "Username is already taken.",
-            "signup": "Failed to create account, please try again."
+            "signup": "Failed to create account, please try again.",
+            "passwordLength":"Password must be at least 12 characters long.",
+            "passwordCapital":"Password must contain at least one capital letter.",
+            "passwordSpecial":"Password must contain at least one special character.",
+            "passwordMismatch":"Passwords do not match."
             },
         "success": "Wallet created successfully!"
         }
@@ -78,7 +82,11 @@
 
     "recover":{
         "title":"Input your secret recovery phrase to recover your wallet.",
-        "recover":"Recover"
+        "recover":"Recover",
+        "secure":{
+            "title": "Secure your account",
+            "button": "Secure"
+        }
     },
 
     "home":{
@@ -125,7 +133,7 @@
                 "zero-amount": "Please enter an amount greater than 0"
             }
         },
-        "success": "Transaction sent successfully!",
+            "success": "Transaction sent successfully!",
             "info": "Transfer in progress...",
             "private-balance": "Private Balance",
             "public-balance": "Public Balance",
@@ -181,7 +189,7 @@
             "this-week": "This Week",
             "this-month": "This Month"
         },
-        "no-acitvities": " No Acitivity yet, get out there and explore!",
+        "no_acitvities": " No Acitivity yet, get out there and explore!",
         "loading": "Loading...",
         "load-more": "Load More",
         "messages": {
@@ -230,6 +238,10 @@
         "transfer":{
             "title":"Confirm this transaction",
             "subtitle": "By confirming the transaction, you will be sending X asset to Y"
+        },
+        "logout":{
+            "title":"Are you sure you want to log out ?",
+            "description":"You will need to input your password to log back in."
         }
     },
 

diff --git a/frontend/public/locales/it/translation.json b/frontend/public/locales/it/translation.json
@@ -7,7 +7,7 @@
       "username": "Nome utente (Opzionale)",
       "password": "Password",
       "confirmPassword": "Conferma Password",
-      "CTAButton": "Prendilo.",
+      "CTAButton": "Possederlo.",
       "terms": {
         "part1": "Iscrivendoti accetti i",
         "part2": "Termini di Servizio",

diff --git a/frontend/public/wallet-connect-screens/wallet-connect.js b/frontend/public/wallet-connect-screens/wallet-connect.js
@@ -21,7 +21,7 @@ document.getElementById('fee-switch').addEventListener('change', (event) => {
 document.querySelector('.btn.approve').addEventListener('click', async () => {
     const eventName = request.method + '-approved';
     console.log(eventName);
-    if (request.method === 'createRequestEvent') {
+    if (request.method === 'create-request-event') {
         await emit(eventName, { message: request.approveResponse, feeOption: feeOption });
     }else{
     await emit(eventName, { message: request.approveResponse });

diff --git a/frontend/src/assets/dapps/dapps.ts b/frontend/src/assets/dapps/dapps.ts
@@ -15,10 +15,10 @@ export interface Dapp {
 export const dapps: Dapp[] = [
     {
         name: "Arcane Finance",
-        description: "Arcane Finance is a decentralized finance platform that allows you to earn interest on your assets.",
-        url: "https://dev.arcane.finance",
+        description: "Arcane Finance is a fully private non-custodial decentralized exchange enabling fully confidential DeFi on Aleo.",
+        url: "https://arcane.finance",
         img: arcane,
-        tags: ["finance", "interest"]
+        tags: ["finance"]
     },
     {
         name: 'Staking.xyz',
@@ -30,16 +30,16 @@ export const dapps: Dapp[] = [
     {
         name: 'ANS',
         description: 'An Aleo domain for your account - ANS is where domain naming meets privacy.',
-        url: 'https://testnet3.aleonames.id/',
+        url: 'https://testnet3.aleonames.id/account',
         img: ans,
         tags: ['domains']
     },
     {
         name: 'ShadowFi',
-        description: 'ShadowFi is a decentralized And private liquidity marketplace',
-        url: 'https://www.shadowfi.com',
+        description: 'Shadow Finance is a Decentralized and Private Liquidity Marketplace',
+        url: 'https://app.shadowfi.xyz/',
         img: shadowfi,
-        tags: ['liquidity', 'marketplace']
+        tags: ['finance']
     }
 ];
 
diff --git a/frontend/src/browser/nova_browser.tsx b/frontend/src/browser/nova_browser.tsx
@@ -19,6 +19,7 @@ import { Title2Text } from '../components/typography/typography';
 import { useWalletConnectManager } from "../context/WalletConnect";
 
 import { useTranslation } from 'react-i18next';
+import { useScan } from '../context/ScanContext';
 
 //alerts
 import { ErrorAlert,SuccessAlert,WarningAlert,InfoAlert } from '../components/snackbars/alerts';
@@ -43,17 +44,36 @@ const Browser: React.FC<BrowserProps> = ({ initialUrl, theme = 'light',handleDap
   const [previousUrls, setPreviousUrls] = useState<string[]>([]);
   const [wcURL, setWcURL] = useState<string>('');
   const [connected, setConnected] = useState<boolean>(false);
+  const [showMenu, setShowMenu] = useState<boolean>(false);
 
   //alert states
   const [errorAlert, setErrorAlert] = useState(false);
   const [successAlert, setSuccessAlert] = useState(false);
   const [warningAlert, setWarningAlert] = useState(false);
   const [infoAlert, setInfoAlert] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
+  const { startScan, endScan } = useScan();
 
   const {walletConnectManager} = useWalletConnectManager();
+
   const { t } = useTranslation();
 
+  const handleConnected = () => {
+    walletConnectManager.pair(wcURL).catch(()=>{
+      setAlertMessage('Error connecting');
+      setErrorAlert(true);
+    });
+    sessionStorage.setItem('connected', 'true');
+  }
+
+  const getConnectState = () => {
+    const connected = sessionStorage.getItem('connected');
+    if (connected === 'true') {
+      return true;
+    }
+    return false;
+  }
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputUrl(event.target.value);
   };
@@ -62,11 +82,14 @@ const Browser: React.FC<BrowserProps> = ({ initialUrl, theme = 'light',handleDap
     setWcURL(event.target.value);
   };
 
-  const handleInputSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ const handleInputSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (inputUrl) {
+    if (inputUrl && inputUrl !== url && inputUrl !== '') {
       setPreviousUrls([...previousUrls, url]);
       setUrl(inputUrl);
+      setShowMenu(false);
+
+      sessionStorage.setItem('activeUrl', inputUrl);
     }
   };
 
@@ -81,11 +104,19 @@ const Browser: React.FC<BrowserProps> = ({ initialUrl, theme = 'light',handleDap
   }
 
   const handleBack = () => {
-    // Logic for back action
+
     setUrl(previousUrls[previousUrls.length - 1]);
     setInputUrl(previousUrls[previousUrls.length - 1]);
     setPreviousUrls(previousUrls.slice(0, previousUrls.length - 1));
 
+    if (previousUrls.length === 0) {
+      setInputUrl('');
+      setUrl('');
+      sessionStorage.removeItem('activeUrl');
+      setShowMenu(true);
+      console.log('showMenu', showMenu);
+    }
+
   };
 
   const handleReload = () => {
@@ -95,27 +126,56 @@ const Browser: React.FC<BrowserProps> = ({ initialUrl, theme = 'light',handleDap
     if (iframe) {
      iframe.src = inputUrl;
     }
+
   };
 
   const handleDappSelect = (url: string) => {
     setInputUrl(url);
     setUrl(url);
+    setShowMenu(false);
+
 
     const iframe = document.querySelector('iframe');
     if (iframe) {
-     iframe.src = inputUrl;
+     iframe.src = url;
+     sessionStorage.setItem('activeUrl', url);
     }
   }
 
   React.useEffect(() => {
-    listen('connected', (event) => {
+
+    //check for active url in session storage
+    const activeUrl = sessionStorage.getItem('activeUrl');
+    console.log('activeUrl', activeUrl);
+    if (activeUrl) {
+      setUrl(activeUrl);
+      setInputUrl(activeUrl);
+    }
+
+    const connected = getConnectState();
+    setConnected(connected);
+
+    const unlisten_connected =listen('connected', (event) => {
       setConnected(true);
     });
 
-    listen('disconnected', (event) => {
+    const unlisten_disconnected = listen('disconnected', (event) => {
       setConnected(false);
     });
+
+    const unlisten_wc_transaction_start = listen('wc_transaction_start', (event) => {
+      startScan();
+    })
+
+    const unlisten_wc_transaction_end = listen('wc_transaction_end', (event) => {
+      endScan();
+    })
 
+    return () => {
+       unlisten_connected.catch(() => {});
+      unlisten_disconnected.catch(() => {});
+    };
+
   }, []);
 
 
@@ -175,9 +235,8 @@ const Browser: React.FC<BrowserProps> = ({ initialUrl, theme = 'light',handleDap
               boxShadow: '0 0 8px 2px rgba(0, 255, 170, 0.8)',
             },
           }}
-            onClick={() => { connected? handleDisconnect():walletConnectManager.pair(wcURL) }}
-            disabled= {connected}
-          > {connected? t("browser.connected"):t("browser.connect")}</Button>
+          onClick={() => { connected? handleDisconnect():handleConnected()}}
+          > {connected? t("browser.message.success.disconnect"):t("browser.connect")}</Button>
         </Toolbar>
       </AppBar>
       {url !== '' &&

diff --git a/frontend/src/components/assets/asset.tsx b/frontend/src/components/assets/asset.tsx
@@ -37,6 +37,7 @@ type SlideProp = {
 const Asset: React.FC<AssetType & SlideProp> = ({ image_ref, symbol, total,balance, value,onClick }) => {
 
   const formatNumber = (num: number) => {
+    num = Math.round((num + Number.EPSILON) * 100) / 100;
     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
 }
 

diff --git a/frontend/src/components/backup/backup_dialog.tsx b/frontend/src/components/backup/backup_dialog.tsx
@@ -43,16 +43,16 @@ const BackupDialog: React.FC<BackupDrawerProps> = ({ open, onClose}) => {
 
     updateBackupFlag(response).then(()=>{
       if (response) {
-        setMessage(t("messages.enabled"));
+        setMessage(t("backup.messages.enabled"));
       }else{
-        setMessage(t("messages.disabled"));
+        setMessage(t("backup.messages.disabled"));
       }
       setSuccess(true);
       onClose();
 
     }).catch((error)=>{
       console.log(error);
-      setMessage(t("messages.error"));
+      setMessage(t("backup.messages.error"));
       setError(true);
     });
 
@@ -91,7 +91,7 @@ const BackupDialog: React.FC<BackupDrawerProps> = ({ open, onClose}) => {
 
       <Box sx={{width:'100%',display:'flex',flexDirection:'row',mt:'3%',justifyContent:'center'}}>
       <BodyText500 sx={{color:'#FFF'}}>{t("backup.subtitle.part1")}</BodyText500>
-      <BodyText500  sx={{color:'#a2a2a2',ml:'1%'}}>{t("backup.subtitle.part1")} </BodyText500>
+      <BodyText500  sx={{color:'#a2a2a2',ml:'1%'}}>{t("backup.subtitle.part2")} </BodyText500>
       </Box>
 
       <img src={backup} style={{ width: "60%",height:'auto',marginTop:'5%',alignSelf:'center'}}/>
@@ -101,8 +101,8 @@ const BackupDialog: React.FC<BackupDrawerProps> = ({ open, onClose}) => {
       </BodyText>
 
       <Box sx={{display:'flex',flexDirection:'row',alignSelf:'center',width:'55%',justifyContent:'space-between',mt:'5%'}}>
-      <CTAButton onClick={() => handleBackupChoise(false)} text={t("backup.disabled")} width='35%'/>
-      <CTAButton onClick={() => handleBackupChoise(true)} text={t("backup.enabled")} width='35%'/>
+      <CTAButton onClick={() => handleBackupChoise(false)} text={t("backup.nobackup")} width='35%'/>
+      <CTAButton onClick={() => handleBackupChoise(true)} text={t("backup.backup")} width='35%'/>
       </Box>
     </Drawer>
   );

diff --git a/frontend/src/components/balance.tsx b/frontend/src/components/balance.tsx
@@ -5,6 +5,8 @@ import { alpha } from "@mui/material";
 const Balance = ({props} : {props: {balance: number}}) => {
     //format number so that every 3 digits is seperated by a comma
      const formatNumber = (num: number) => {
+        //round the number to 2 decimal places
+            num = Math.round((num + Number.EPSILON) * 100) / 100;
          return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
      }
 

diff --git a/frontend/src/components/dialogs/delete.tsx b/frontend/src/components/dialogs/delete.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
 import * as mui from "@mui/material";
 
-import CloseIcon from '@mui/icons-material/Close';
-
 import { delete_util } from "../../services/authentication/auth";
 import { ErrorAlert, SuccessAlert } from "../snackbars/alerts";
 import { useNavigate } from "react-router-dom";