From 6c98a705b544dfcd2e2a5dfb9703b440547c336d Mon Sep 17 00:00:00 2001 From: codemonkey-sagar Date: Sat, 27 Apr 2024 21:05:42 -0400 Subject: [PATCH 1/2] Eslint changes fix --- src/middleware/apiMiddleware.js | 25 ++++++++++--------- src/utils/authUtils.js | 44 ++++++++++++++++----------------- 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/middleware/apiMiddleware.js b/src/middleware/apiMiddleware.js index 6ee7216..6e3a2f9 100644 --- a/src/middleware/apiMiddleware.js +++ b/src/middleware/apiMiddleware.js @@ -1,27 +1,28 @@ -import { refreshToken, getSession, isTokenExpired } from '../utils/authUtils'; +import { getSession, refreshToken, isTokenExpired } from '../utils/authUtils'; export const apiMiddleware = async (endpoint, options = {}) => { - const backendUrl = process.env.REACT_APP_BACKEND_URL || "https://backend-service-rojjrgeqna-ue.a.run.app/"; - let url = new URL(endpoint, backendUrl); + const backendUrl = + process.env.REACT_APP_BACKEND_URL || 'https://backend-service-rojjrgeqna-ue.a.run.app/'; + const url = new URL(endpoint, backendUrl); // Ensure options.headers is an object options.headers = options.headers || {}; // Append query parameters if present if (options.params) { - Object.keys(options.params).forEach(key => url.searchParams.append(key, options.params[key])); + Object.keys(options.params).forEach((key) => url.searchParams.append(key, options.params[key])); } // Handle token in headers const session = getSession(); if (session.accessToken && isTokenExpired(session.accessTokenExpiry)) { const success = await refreshAccessToken(backendUrl); - if (!success) throw new Error("Failed to refresh token. Please log in again."); + if (!success) throw new Error('Failed to refresh token. Please log in again.'); } // Set Authorization header if access token is valid if (session.accessToken) { - options.headers['Authorization'] = `Bearer ${session.accessToken}`; + options.headers.Authorization = `Bearer ${session.accessToken}`; } // Execute the request @@ -30,13 +31,13 @@ export const apiMiddleware = async (endpoint, options = {}) => { // Retry once if the first attempt fails due to an expired token if (response.status === 401) { const success = await refreshAccessToken(backendUrl); - if (!success) throw new Error("Failed to refresh token on retry. Please log in again."); + if (!success) throw new Error('Failed to refresh token on retry. Please log in again.'); // Refresh the session details after successful token refresh const newSession = getSession(); - options.headers['Authorization'] = `Bearer ${newSession.accessToken}`; + options.headers.Authorization = `Bearer ${newSession.accessToken}`; // Retry the fetch with the new token - response = await fetch(url, options); + response = await fetch(url, options); } return response; @@ -45,9 +46,9 @@ export const apiMiddleware = async (endpoint, options = {}) => { async function refreshAccessToken(backendUrl) { try { // Assume refreshToken returns true on success - return await refreshToken(backendUrl); + return await refreshToken(backendUrl); } catch (error) { - console.error("Error refreshing token:", error); - return false; + console.error('Error refreshing token:', error); + return false; } } diff --git a/src/utils/authUtils.js b/src/utils/authUtils.js index 286e1ef..416a251 100644 --- a/src/utils/authUtils.js +++ b/src/utils/authUtils.js @@ -30,39 +30,39 @@ export const getSession = () => ({ }); // Attempts to refresh the access token using the refresh token -export const refreshToken = async (backendUrl) => { +export const refreshTokens = async (backendUrl) => { const { refreshToken, refreshTokenExpiry } = getSession(); // Check if the refresh token is valid if (!refreshToken || new Date() >= new Date(refreshTokenExpiry)) { - clearSession(); - throw new Error('Refresh token is expired or not available. Please log in again.'); + clearSession(); + throw new Error('Refresh token is expired or not available. Please log in again.'); } try { - const response = await fetch(`${backendUrl}api/token_refresh`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ refresh_token: refreshToken }), - }); + const response = await fetch(`${backendUrl}api/token_refresh`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ refresh_token: refreshToken }), + }); - if (!response.ok) { - throw new Error('Failed to refresh access token'); - } + if (!response.ok) { + throw new Error('Failed to refresh access token'); + } - const data = await response.json(); + const data = await response.json(); - setSession({ - access_token: data.data.access_token, - refresh_token: data.data.refresh_token, // Use new refresh token if provided - access_token_expiry: data.data.access_token_expiry, - refresh_token_expiry: data.data.refresh_token_expiry || refreshTokenExpiry, // Use existing expiry if new one isn't provided - }); + setSession({ + access_token: data.data.access_token, + refresh_token: data.data.refresh_token, // Use new refresh token if provided + access_token_expiry: data.data.access_token_expiry, + refresh_token_expiry: data.data.refresh_token_expiry || refreshTokenExpiry, // Use existing expiry if new one isn't provided + }); - return data.data.access_token; // Return the new access token + return data.data.access_token; // Return the new access token } catch (error) { - console.error('Error refreshing token:', error); - clearSession(); // Clear session on failure - throw error; // Re-throw the error for handling elsewhere + console.error('Error refreshing token:', error); + clearSession(); // Clear session on failure + throw error; // Re-throw the error for handling elsewhere } }; From f0a2f009192a6f9a977446454e6329267eb13c46 Mon Sep 17 00:00:00 2001 From: 13x54n <13x54r@gmail.com> Date: Sat, 27 Apr 2024 22:15:48 -0400 Subject: [PATCH 2/2] feature: glassomorphism added on import wallet --- package.json | 3 + .../evervault-card/evervault-card.jsx | 2 +- .../import-wallet/import-wallet.jsx | 78 +++++++++++++++++++ src/components/import-wallet/index.js | 1 + src/components/import-wallet/styles/style.css | 8 ++ .../import-wallet/styles/style.css.map | 1 + .../import-wallet/styles/style.scss | 8 ++ src/sections/web3/view/web3-view.jsx | 30 ++++--- 8 files changed, 118 insertions(+), 13 deletions(-) create mode 100644 src/components/import-wallet/import-wallet.jsx create mode 100644 src/components/import-wallet/index.js create mode 100644 src/components/import-wallet/styles/style.css create mode 100644 src/components/import-wallet/styles/style.css.map create mode 100644 src/components/import-wallet/styles/style.scss diff --git a/package.json b/package.json index 0788734..7585382 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,15 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@faker-js/faker": "^8.1.0", + "@headlessui/react": "^1.7.19", + "@heroicons/react": "^2.1.3", "@iconify/react": "^4.1.1", "@mui/lab": "^5.0.0-alpha.147", "@mui/material": "^5.14.12", "apexcharts": "^3.43.0", "clsx": "^2.1.1", "date-fns": "^2.30.0", + "ethers": "^6.12.0", "framer-motion": "^11.1.7", "history": "^5.3.0", "lodash": "^4.17.21", diff --git a/src/components/evervault-card/evervault-card.jsx b/src/components/evervault-card/evervault-card.jsx index 81fe52f..a84880c 100644 --- a/src/components/evervault-card/evervault-card.jsx +++ b/src/components/evervault-card/evervault-card.jsx @@ -88,7 +88,7 @@ export const CardItem = ({ }; return ( - + {children} ); diff --git a/src/components/import-wallet/import-wallet.jsx b/src/components/import-wallet/import-wallet.jsx new file mode 100644 index 0000000..736caed --- /dev/null +++ b/src/components/import-wallet/import-wallet.jsx @@ -0,0 +1,78 @@ +import { Fragment, useRef } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' +import './styles/style.css' + +export default function ImportWallet({open, setOpen}) { + const cancelButtonRef = useRef(null) + + return ( + + + +
+ + +
+
+ + +
+
+
+
+
+ + Deactivate account + +
+

+ Are you sure you want to deactivate your account? All of your data will be permanently + removed. This action cannot be undone. +

+
+
+
+
+
+ + +
+ + +
+
+
+ + ) +} diff --git a/src/components/import-wallet/index.js b/src/components/import-wallet/index.js new file mode 100644 index 0000000..3d0ab53 --- /dev/null +++ b/src/components/import-wallet/index.js @@ -0,0 +1 @@ +export { default } from './import-wallet'; diff --git a/src/components/import-wallet/styles/style.css b/src/components/import-wallet/styles/style.css new file mode 100644 index 0000000..d19fa99 --- /dev/null +++ b/src/components/import-wallet/styles/style.css @@ -0,0 +1,8 @@ +.importWalletModal__container__glassEffect { + /* From https://css.glass */ + background: rgba(255, 255, 255, 0.1); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(8.7px); + -webkit-backdrop-filter: blur(8.7px); +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/components/import-wallet/styles/style.css.map b/src/components/import-wallet/styles/style.css.map new file mode 100644 index 0000000..b583706 --- /dev/null +++ b/src/components/import-wallet/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,2BAAA;EACA,oCAAA;EACA,mBAAA;EACA,yCAAA;EACA,4BAAA;EACA,oCAAA;ACCF","file":"style.css"} \ No newline at end of file diff --git a/src/components/import-wallet/styles/style.scss b/src/components/import-wallet/styles/style.scss new file mode 100644 index 0000000..5c2e33d --- /dev/null +++ b/src/components/import-wallet/styles/style.scss @@ -0,0 +1,8 @@ +.importWalletModal__container__glassEffect { + /* From https://css.glass */ + background: rgba(255, 255, 255, 0.1); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(8.7px); + -webkit-backdrop-filter: blur(8.7px); +} diff --git a/src/sections/web3/view/web3-view.jsx b/src/sections/web3/view/web3-view.jsx index 1e12231..60377f4 100644 --- a/src/sections/web3/view/web3-view.jsx +++ b/src/sections/web3/view/web3-view.jsx @@ -1,10 +1,15 @@ import { Container, Stack, Typography } from '@mui/material'; -import React from 'react'; +import React, { useState } from 'react'; import { CardBody, CardContainer, CardItem } from 'src/components/evervault-card/evervault-card'; +import ImportWallet from 'src/components/import-wallet'; export default function Web3Page() { + const [isImportWalletModalOpen, setIsImportWalletModalOpen] = useState(false) return ( + { + isImportWalletModalOpen && + }
🌍 @@ -13,9 +18,9 @@ export default function Web3Page() {
-
- - +
+ + 💵 Import Wallet @@ -31,28 +36,29 @@ export default function Web3Page() { alt="thumbnail" /> -
+
setIsImportWalletModalOpen(true)} > - Import Account using Private Key + Import using Private Key Learn More →
- - + + 🪛 Create Wallet @@ -68,7 +74,7 @@ export default function Web3Page() { alt="thumbnail" /> -
+
Learn More →