Skip to content

Commit

Permalink
working on select networks
Browse files Browse the repository at this point in the history
  • Loading branch information
@priyeshkadbe
priyeshkadbe committed Aug 29, 2023
1 parent 43399f0 commit 3b38b16
Show file tree
Hide file tree
Showing 14 changed files with 205 additions and 193 deletions.
15 changes: 6 additions & 9 deletions src/components/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,19 @@ import {
import { useLogin } from "@/providers/LoginProvider";
import CopyToClipboard from "react-copy-to-clipboard";
import { ToastContainer, toast } from "react-toastify";
import {useWalletState} from "@/providers/WalletProvider"


function HomePage() {
const [selectedOption, setSelectedOption] = useState<string>("tokens"); // Initialize with "tokens"

const [activeModal, setActiveModal] = useState<string | null>(null); // Track the active modal
const [localAddress, setLocalAddress] = useState<string | null>(null);

const {balance,network,account} = useWalletState();
const { balance, network, account,wallet } = useLogin();

useEffect(() => {
// if (wallet!==null) {
// setLocalAddress(wallet.address);
// }
}, [account,balance]);

}, [account, balance,wallet]);

const handleOptionClick = (option: string) => {
setSelectedOption(option);
Expand All @@ -46,7 +44,6 @@ function HomePage() {

const closeModal = () => {
setActiveModal(null);

};

const icons: Record<string, React.ReactNode> = {
Expand Down Expand Up @@ -83,7 +80,7 @@ function HomePage() {
<div className="flex flex-col my-4 justify-center items-center ">
<div className="flex gap-2 py-2 px-4 m-2 bg-gray-700 rounded-full cursor-text">
<h1 className="text-[#b3b3b3] text-xl">
{account?.slice(0, 7)}....{account?.slice(-4)}
{wallet?.address.slice(0, 7)}....{wallet?.address.slice(-4)}
</h1>
{/* <CopyToClipboard
text={localAddress}
Expand All @@ -110,7 +107,7 @@ function HomePage() {
{!localAddress && <p>Please import your wallet</p>}
</div>
<div className="m-2 my-4">
<h1 className="text-3xl text-white">{ balance}</h1>
<h1 className="text-3xl text-white">{balance}</h1>
</div>
<div className="flex gap-12">
{Object.keys(icons).map((key) => (
Expand Down
2 changes: 1 addition & 1 deletion src/components/navbar/dropdown/AccountDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const AccountDropdown: React.FC<AccountProps> = ({ onClose }) => {


<DropDownLayout
title="Account"
title="Select Account"
content={<AccountContent />}
onClose={onClose}
icon={<UserCircleIcon className="h-6 w-6" />}
Expand Down
6 changes: 3 additions & 3 deletions src/components/navbar/dropdown/DropdownButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
}) => {
return (
<button
className="flex flex-col justify-center items-center p-1"
className="flex flex-col justify-center items-center px-4 py-2 md:bg-[#24272a] rounded-xl "
onClick={onClick}
>
<div className="flex gap-2 justify-center items-center">
<h1>{text}</h1>
<div className="flex gap-2 justify-center items-center ">
<h1 className="hidden md:flex ">{text}</h1>
{icon}
</div>
</button>
Expand Down
61 changes: 39 additions & 22 deletions src/components/navbar/dropdown/NetworkDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// NetworkDropdown.tsx
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import DropDownLayout from "./DropDownLayout";
import {
CurrencyRupeeIcon,
Expand All @@ -12,31 +12,55 @@ import {
CurrencyDollarIcon,
} from "@heroicons/react/20/solid";
import AddNewNetwork from "@/components/Networks/AddNewNetwork";
import { useWalletState } from "@/providers/WalletProvider"
import {Ethereum} from "@/svg-icons/Ethereum"
import { Ethereum } from "@/svg-icons/Ethereum";
import { Polygon } from "@/svg-icons/Polygon";
import { useLogin } from "@/providers/LoginProvider";
import networks_const from "@/utils/networks";

interface NetworkProps {
onClose: () => void;
}


const NetworkContent = () => {
const { network, setChainId, chainId } = useLogin();

const {network}=useWalletState()
const [local, setLocal] = useState("");

useEffect(() => {

},[network])
if (network !== null) {
setLocal(network.toString());
}
}, [network]);

return (
<div className="flex flex-col w-full gap-1">
<div className="flex flex-col gap-2">
<div className="overflow-y-auto">
<button className="flex justify-evenly items-start my-2 flex-grow gap-2 p-2 border border-gray-600 w-full">
{/* <div className="h-2 w-2">
{/* <button className="flex justify-evenly items-start my-2 flex-grow gap-2 p-2 border border-gray-600 w-full">
<div className="">
<Ethereum />
</div> */}
<h2 className="text-lg font-medium">{network}</h2>
</button>
</div>
<h2 className="text-lg font-medium">{ local}</h2>
</button> */}
{networks_const.map((val, key) => (
<button
className="flex justify-start items-start my-2 flex-grow gap-2 p-2 border border-gray-600 w-full"
onClick={() => {
setChainId(val.chainId);
console.log("val", val.chainId);
}}
>
<div className="">
<Polygon />
</div>
<h2
className={`text-lg font-medium ${
val.chainId === chainId ? "white" : ""
}`}
>
{val.network}
</h2>
</button>
))}
</div>

<button className="flex justify-center items-center text-blue-500 ">
Expand All @@ -46,18 +70,11 @@ const NetworkContent = () => {
);
};



const NetworkDropdown: React.FC<NetworkProps> = ({ onClose }) => {

const content = () => {

}

return (
<DropDownLayout
title="Network"
content={<NetworkContent/>}
title="Select Network"
content={<NetworkContent />}
onClose={onClose}
icon={<GlobeAltIcon className="h-6 w-6" />}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function Navbar() {
return (
<div>
<div className="bg-[#0d0d0d] flex justify-between items-center px-4 relative py-3 ">
<div className="flex w-full justify-between gap-1">
<div className="flex w-full justify-between gap-1 ">
{Object.keys(icons).map((key) => (
<DropdownButton
text={key}
Expand Down
34 changes: 23 additions & 11 deletions src/components/wallet/create-new/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,21 +105,33 @@ export default function ImportExisting() {
};
// if (isLoading) {
// return (
// <RotatingLines
// strokeColor="grey"
// strokeWidth="5"
// animationDuration="0.75"
// width="96"
// visible={true}
// />
// <div className="flex items-center justify-center">
// <RotatingLines
// strokeColor="white"
// strokeWidth="5"
// animationDuration="0.75"
// width="96"
// visible={true}
// />
// </div>
// );
// }
return (
<div className="bg-[#0d0d0d] h-screen md:flex md:flex-col md:justify-center md:h-[768px] md:w-[768px] md:rounded-lg">
<div>
<Stages currentStep={step} />
{renderForm()}
</div>
{isLoading ? (
<RotatingLines
strokeColor="white"
strokeWidth="5"
animationDuration="0.75"
width="96"
visible={true}
/>
) : (
<>
<Stages currentStep={step} />
{renderForm()}
</>
)}
</div>
);
}
19 changes: 18 additions & 1 deletion src/components/wallet/import-exisiting/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default function ImportExisting() {


const handleSubmit = async () => {

if (password !== null) {
setIsLoading(true);
const isAuth = await signup(secretPhrase, password);
Expand Down Expand Up @@ -110,9 +111,25 @@ export default function ImportExisting() {
) : (
)} */}
<div className="bg-[#0d0d0d] h-screen md:flex md:flex-col md:justify-center md:h-[768px] md:w-[768px] md:rounded-lg">
{/* <div className="bg-[#0d0d0d] h-screen md:flex md:flex-col md:justify-center md:h-[768px] md:w-[768px] md:rounded-lg">
<Stages currentStep={step} />
{renderForm()}
</div> */}
<div className="bg-[#0d0d0d] h-screen md:flex md:flex-col md:justify-center md:items-center md:h-[768px] md:w-[768px] md:rounded-lg">
{isLoading ? (
<RotatingLines
strokeColor="white"
strokeWidth="5"
animationDuration="0.75"
width="96"
visible={true}
/>
) : (
<>
<Stages currentStep={step} />
{renderForm()}
</>
)}
</div>
</div>
);
Expand Down
9 changes: 3 additions & 6 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,15 @@ import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useEffect, useState } from "react";
import Router from "./router";
import { HashRouter } from "react-router-dom";
import { LoginContextProvider,} from "../providers/LoginProvider";
import WalletProvider from "@/providers/WalletProvider";
import { HashRouter } from "react-router-dom";
import { LoginContextProvider } from "../providers/LoginProvider";

export default function App({ Component, pageProps }: AppProps) {
const [render, setRender] = useState(false);
useEffect(() => setRender(true), []);
return render ? (
<LoginContextProvider>
<WalletProvider>
<Component {...pageProps} />
</WalletProvider>
<Component {...pageProps} />
</LoginContextProvider>
) : null;
}
49 changes: 32 additions & 17 deletions src/providers/LoginProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import bcrypt from "bcryptjs";
import CryptoJS from "crypto-js";
import { ethers } from "ethers";
import Cookies from "js-cookie";

import { getProvider } from "@/utils/providers";

interface LoginContextType {
isLoggedIn: boolean;
Expand All @@ -16,6 +16,12 @@ interface LoginContextType {
signOut: () => boolean;
localPassword: string | null;
wallet: Wallet | null;
balance: string | null;
account: string | null;
network: string | null;
setNetwork: (value: string | null) => void;
chainId: number | null;
setChainId: (val: number | null) => void;
}

const LoginContext = React.createContext<LoginContextType | null>(null);
Expand All @@ -35,29 +41,28 @@ export const LoginContextProvider = ({ children }: Props) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isSignup, setSignup] = useState(false);
const [localPassword, setLocalPassword] = useState<string | null>(null);
// const [address, setAddress] = useState<string | null>(null);
const [account, setAccount] = useState<string | null>(null);
const [wallet, setWallet] = useState<Wallet | null>(null);

const [balance, setBalance] = useState<string | null>(null);
const [network, setNetwork] = useState<string | null>(null);
const [chainId, setChainId] = useState<number | null>(1);

useEffect(() => {
const pass = Cookies.get("password"); // Use Cookies.get instead of localStorage.getItem
console.log("localPass", pass);
if (pass !== undefined) {
setSignup(true);
}
}, [localPassword]);
}, [localPassword, chainId]);

const isPasswordPresent = () => {
return Cookies.get("password") !== undefined; // Use Cookies.get instead of localStorage.getItem
};

const createWallet = (mnemonic: string) => {
try {
const provider = new ethers.providers.JsonRpcProvider(
"https://eth-sepolia.g.alchemy.com/v2/D02WgyXewkbCwfutl0IH3dHy01eZRp_L"
);
const provider = getProvider(chainId!);


const wallet = ethers.Wallet.fromMnemonic(mnemonic.toString());
if (wallet.address) {
const data = {
Expand All @@ -70,11 +75,21 @@ export const LoginContextProvider = ({ children }: Props) => {
console.log("data is ", data);
}

const locWallet = new ethers.Wallet(wallet.privateKey, provider)
const locWallet = new ethers.Wallet(wallet.privateKey, provider);

provider.getNetwork().then((val) => {
setNetwork(val.name);

console.log("logoUrl:", val);
});
provider.getBalance(wallet.address).then((val) => {
setBalance(ethers.utils.formatEther(val).toString());
});

console.log("locWallet", locWallet);
provider.getNetwork().then((bal) => {
console.log("balance is :", bal.name)
})
console.log("balance is :", bal.name);
});
return wallet.address;
} catch (error) {
return error;
Expand All @@ -88,10 +103,6 @@ export const LoginContextProvider = ({ children }: Props) => {
const encryptMnemonic = Cookies.get("mnemonic");
console.log("hashPassword:", hashPassword);
console.log("storedHashedPassword:", storedHashedPassword);

// if (storedHashedPassword !== null) {
// return comparePassword(enteredPassword, hashPassword);
// }
const isPasswordValid = comparePassword(enteredPassword, hashPassword);

if (
Expand Down Expand Up @@ -191,6 +202,12 @@ export const LoginContextProvider = ({ children }: Props) => {
signOut,
localPassword,
wallet,
balance,
account,
network,
setNetwork,
chainId,
setChainId,
};

return (
Expand All @@ -208,8 +225,6 @@ export const useLogin = (): LoginContextType => {
return context;
};



const comparePassword = (enteredPassword: string, hashedPassword: string) => {
if (hashedPassword === undefined) {
return false;
Expand Down
Loading

0 comments on commit 3b38b16

Please sign in to comment.