Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:completed import contract now need to create too. #19

Merged
merged 2 commits into from
Apr 28, 2024
Merged

feat:completed import contract now need to create too. #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3b06f2
feat:removed dark theme on import wallet
13x54n Apr 28, 2024
b3f1315
status:working on creating wallet
13x54n Apr 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 160 additions & 0 deletions src/components/create-wallet/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
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 CreateWallet({ open, setOpen, setHasWallet, setWallet }) {
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isTermsAccepted, setIsTermAccepted] = useState(false);
const cancelButtonRef = useRef(null);

// Define a helper function to encrypt the private key
const decryptPrivateKey = (privateKey, encryptionKey) => {
const encryptedPrivateKey = CryptoJS.AES.encrypt(privateKey, encryptionKey).toString();
setHasWallet(true);
return encryptedPrivateKey;
};

const handleWalletCreate = () => {
let wallet = ethers.Wallet.createRandom();

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)
}
};

return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
className="relative z-[1101]"
initialFocus={cancelButtonRef}
onClose={setOpen}
>
<Transition.Child
as={Fragment}
enter="ease-in-out duration-400"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-400"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity importWalletModal__container__glassEffect" />
</Transition.Child>

<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<Dialog.Title
as="h2"
className="text-xl mb-4 font-semibold leading-6 text-gray-900"
>
💵 Create Account
</Dialog.Title>

<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-semibold text-gray-900 mt-2"
>
Password
</label>
<input
value={password}
onChange={(e) => 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"
placeholder="S3cr3t@123"
required
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-semibold text-gray-900 mt-2"
>
Confirm Password
</label>
<input
value={confirmPassword}
onChange={(e) => setConfirmPassword(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"
placeholder="S3cr3t@123"
required
/>
</div>

<div className="mt-2 flex items-start gap-3">
<input
id="default-checkbox"
type="checkbox"
value={isTermsAccepted}
onChange={(e) => {
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 focus:ring-2"
/>
<p className="text-sm text-gray-500">
As per our{' '}
<a className="border-b-2" href="">
User Terms and Conditions
</a>
, we don't store any sensitive informations of users. Every wallet
imported on our platform are safe and non-custodial wallet.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto"
onClick={() => handleWalletCreate()}
>
Create
</button>
<button
type="button"
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
onClick={() => setOpen(false)}
ref={cancelButtonRef}
>
Cancel
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
}
10 changes: 5 additions & 5 deletions src/components/import-wallet/import-wallet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default function ImportWallet({ open, setOpen, setHasWallet, setWallet })
<div>
<label
htmlFor="privateKey"
className="block mb-2 text-sm font-semibold text-gray-900 dark:text-white mt-2"
className="block mb-2 text-sm font-semibold text-gray-900 mt-2"
>
Private Key
</label>
Expand All @@ -92,15 +92,15 @@ export default function ImportWallet({ open, setOpen, setHasWallet, setWallet })
onChange={(e) => 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"
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"
placeholder="tv68bkkk985765...095"
required
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-semibold text-gray-900 dark:text-white mt-2"
className="block mb-2 text-sm font-semibold text-gray-900 mt-2"
>
Password
</label>
Expand All @@ -109,7 +109,7 @@ export default function ImportWallet({ open, setOpen, setHasWallet, setWallet })
onChange={(e) => 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"
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"
placeholder="Password"
required
/>
Expand All @@ -123,7 +123,7 @@ export default function ImportWallet({ open, setOpen, setHasWallet, setWallet })
onChange={(e) => {
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"
className="mt-1 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
/>
<p className="text-sm text-gray-500">
As per our{' '}
Expand Down
13 changes: 12 additions & 1 deletion src/sections/web3/view/web3-view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { Avatar, Container, Grid, Stack, Typography } from '@mui/material';
import React, { useState } from 'react';
import CreateWallet from 'src/components/create-wallet';
import { CardBody, CardContainer, CardItem } from 'src/components/evervault-card/evervault-card';
import ImportWallet from 'src/components/import-wallet';
import BalanceSlider from 'src/components/slider';

export default function Web3Page() {
// @dev wallet collection
const [isImportWalletModalOpen, setIsImportWalletModalOpen] = useState(false);
const [isCreateWalletModalOpen, setIsCreateWalletModalOpen] = useState(false);
const [hasWallet, setHasWallet] = useState(false);
const [wallet, setWallet] = useState();

Expand Down Expand Up @@ -38,7 +40,7 @@ export default function Web3Page() {
}, []);

return (
<Container className="bg-white p-4 rounded-lg">
<Container>
{!hasWallet && (
<ImportWallet
setHasWallet={setHasWallet}
Expand All @@ -47,6 +49,14 @@ export default function Web3Page() {
setWallet={setWallet}
/>
)}
{!hasWallet && (
<CreateWallet
setHasWallet={setHasWallet}
open={isCreateWalletModalOpen}
setOpen={setIsCreateWalletModalOpen}
setWallet={setWallet}
/>
)}
{!hasWallet && (
<div style={{ display: 'flex', gap: 4 }}>
<Typography variant="h2">🌍</Typography>
Expand Down Expand Up @@ -118,6 +128,7 @@ export default function Web3Page() {
<CardItem
translateZ={20}
as="button"
onClick={() => setIsCreateWalletModalOpen(true)}
className="px-4 py-3 rounded-xl bg-black text-white text-sm font-semibold cursor-pointer"
>
Generate Wallet
Expand Down
Loading