From 23b2c67d27b29a2264530406dcb0531236dc6479 Mon Sep 17 00:00:00 2001 From: 13x54n <13x54r@gmail.com> Date: Sun, 28 Apr 2024 05:22:12 -0400 Subject: [PATCH] feat:swap dex designed added --- .env.example | 0 package.json | 1 + .../import-wallet/import-wallet.jsx | 124 +++++- src/components/slider/index.jsx | 45 +++ src/sections/error/not-found-view.jsx | 2 +- src/sections/web3/view/web3-view.jsx | 358 +++++++++++++----- 6 files changed, 425 insertions(+), 105 deletions(-) create mode 100644 .env.example create mode 100644 src/components/slider/index.jsx diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json index 7585382..c0473f9 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@mui/material": "^5.14.12", "apexcharts": "^3.43.0", "clsx": "^2.1.1", + "crypto-js": "^4.2.0", "date-fns": "^2.30.0", "ethers": "^6.12.0", "framer-motion": "^11.1.7", diff --git a/src/components/import-wallet/import-wallet.jsx b/src/components/import-wallet/import-wallet.jsx index 736caed..faeca71 100644 --- a/src/components/import-wallet/import-wallet.jsx +++ b/src/components/import-wallet/import-wallet.jsx @@ -1,14 +1,51 @@ -import { Fragment, useRef } from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' -import './styles/style.css' +import { Fragment, useRef, useState } from 'react'; +import { Dialog, Transition } from '@headlessui/react'; +// import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'; +import { ethers } from 'ethers'; +import './styles/style.css'; +import CryptoJS from 'crypto-js'; -export default function ImportWallet({open, setOpen}) { - const cancelButtonRef = useRef(null) +export default function ImportWallet({ open, setOpen, setHasWallet, setWallet }) { + const [privateKey, setPrivateKey] = useState(''); + const [password, setPassword] = useState(''); + const [isTermsAccepted, setIsTermAccepted] = useState(false); + const cancelButtonRef = useRef(null); + + // Define a helper function to encrypt the private key + const encryptPrivateKey = (privateKey, encryptionKey) => { + const encryptedPrivateKey = CryptoJS.AES.encrypt(privateKey, encryptionKey).toString(); + setHasWallet(true) + return encryptedPrivateKey; + }; + + const handleImportWalletUsingPrivateKey = () => { + if (isTermsAccepted && privateKey && password) { + let wallet = new ethers.Wallet(privateKey); + + if (wallet?.address) { + const encrypted = encryptPrivateKey(privateKey, password); + setWallet(wallet) + window.localStorage.setItem(import.meta.env.VITE_WEB3_WALLET, JSON.stringify(wallet)) + window.localStorage.setItem(import.meta.env.VITE_ENCRYPTED_PRIVATE_KEY_LOCATION, encrypted) + setPrivateKey("") + setPassword("") + setIsTermAccepted(false) + setOpen(false) + window.localStorage.setItem(import.meta.env.VITE_IS_WALLET_AUTHENTICATED, true) + } + }else{ + console.log("Message: Every field is required!") + } + }; return ( - +
-
-
- - Deactivate account + + 💵 Import Account -
+ +
+ + setPrivateKey(e.target.value)} + type="password" + id="privateKey" + className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" + placeholder="tv68bkkk985765...095" + required + /> +
+
+ + setPassword(e.target.value)} + type="password" + id="password" + className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" + placeholder="Password" + required + /> +
+ +
+ { + setIsTermAccepted(e.target.checked); + }} + className="mt-1 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" + />

- Are you sure you want to deactivate your account? All of your data will be permanently - removed. This action cannot be undone. + As per our{' '} + + User Terms and Conditions + + , we don't store any sensitive informations of users. Every wallet + imported on our platform are safe and non-custodial wallet.

@@ -54,10 +140,10 @@ export default function ImportWallet({open, setOpen}) {
- ) + ); } diff --git a/src/components/slider/index.jsx b/src/components/slider/index.jsx new file mode 100644 index 0000000..590c1f6 --- /dev/null +++ b/src/components/slider/index.jsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Slider from '@mui/material/Slider'; + +const marks = [ + { + value: 0, + label: '0%', + }, + { + value: 25, + label: '25%', + }, + { + value: 50, + label: '50%', + }, + { + value: 75, + label: '75%', + }, + { + value: 100, + label: '100%', + }, +]; + +function valuetext(value) { + return `${value}%`; +} + +export default function BalanceSlider() { + return ( + + + + ); +} diff --git a/src/sections/error/not-found-view.jsx b/src/sections/error/not-found-view.jsx index 6d9d885..9871f43 100644 --- a/src/sections/error/not-found-view.jsx +++ b/src/sections/error/not-found-view.jsx @@ -53,7 +53,7 @@ export default function NotFoundView() { { + const encryptedKey = window.localStorage.getItem( + import.meta.env.VITE_ENCRYPTED_PRIVATE_KEY_LOCATION + ); + const _hasWallet = window.localStorage.getItem(import.meta.env.VITE_IS_WALLET_AUTHENTICATED); + + if (encryptedKey != undefined && _hasWallet) { + setHasWallet(true); + const _wallet = JSON.parse(window.localStorage.getItem(import.meta.env.VITE_WEB3_WALLET)); + setWallet(_wallet); + } + }, [hasWallet]); + + // @dev gas estimation + const [gasInfo, setGasInfo] = useState(); + + React.useEffect(() => { + fetch( + `https://api.etherscan.io/api?module=gastracker&action=gasoracle&apikey=${ + import.meta.env.VITE_ETHERSCAN_API_KEY + }` + ) + .then((res) => res.json()) + .then((res) => setGasInfo(res.result?.suggestBaseFee)) + .catch((error) => console.log(error)); + }, []); + return ( - - { - isImportWalletModalOpen && - } -
- 🌍 - - Web 3.0 - Welcome to the world of decentralization. 🎉 - -
+ + {!hasWallet && ( + + )} + {!hasWallet && ( +
+ 🌍 + + Web 3.0 + Welcome to the world of decentralization. 🎉 + +
+ )} -
- - - - 💵 Import Wallet - - - Hover over this card to unleash the power of CSS perspective - - - thumbnail - -
- setIsImportWalletModalOpen(true)} - > - Import using Private Key + {!hasWallet && ( +
+ + + + 💵 Import Wallet - - Learn More → + + Hover over this card to unleash the power of CSS perspective -
- - - - - - 🪛 Create Wallet - - - Hover over this card to unleash the power of CSS perspective - - - thumbnail - -
- - Generate Wallet + + thumbnail + +
+ setIsImportWalletModalOpen(true)} + > + Import using Private Key + + + Learn More → + +
+ + + + + + 🪛 Create Wallet - - Learn More → + + Hover over this card to unleash the power of CSS perspective + + thumbnail + +
+ + Generate Wallet + + + Learn More → + +
+ + +
+ )} + + {hasWallet && ( +
+
+ + 📜 TTT Swap + +
+ +
+

+ {wallet?.address.substring(0, 10) + + '...' + + wallet?.address.substring(wallet?.address.length - 3, wallet?.address.length)} +

+ + Sepolia + + + + + + +
+
+
+ + 🌍 Web 3.0 + +
+
+ +
+
+ + You Pay + +
+ setFromAmount(e.target.value)} + className="w-[80%] focus:outline-none focus:ring-0 bg-transparent text-4xl" + placeholder="0" + /> +
+ +

ETH

+
+
+
+ + $12 + + + Balance: 0 + +
+
+ +
+ + You Receive + +
+ setToAmount(e.target.value)} + className="w-[80%] focus:outline-none focus:ring-0 bg-transparent text-4xl" + placeholder="0" + /> +
+ +

TTT

+
+
+
+ + $12 + + + Balance: 0 + +
- - -
+ + + + + +
+ + 💵 1 TTT = 0.001 WETH + + + ⛽ {gasInfo} GWEI + +
+ + + Terms of Service + +
+
+ )} ); }