diff --git a/js/ui/package.json b/js/ui/package.json index b50db19..1c08c8a 100644 --- a/js/ui/package.json +++ b/js/ui/package.json @@ -62,6 +62,6 @@ "webpack-dev-server": "4.6.0" }, "engines": { - "node": ">=18.20.0" + "node": ">=18.18.0" } } diff --git a/js/ui/src/App.tsx b/js/ui/src/App.tsx index e169872..73ad17f 100644 --- a/js/ui/src/App.tsx +++ b/js/ui/src/App.tsx @@ -1,17 +1,21 @@ import React from "react"; import { ConnectKitButton, ConnectKitProvider } from "connectkit"; import { SiweMessage } from "siwe"; -import { useAccount, useDisconnect } from "wagmi"; +import { + useAccount, + useDisconnect, + useSignMessage, + useWalletClient, +} from "wagmi"; import Cookies from "js-cookie"; import devfolioLogoFull from "./assets/devfolio-logo-full.svg"; -import connectWallet from './assets/connect-wallet.svg'; -import stepCheck from './assets/step-check.svg'; -import loader from './assets/loader.svg'; -import { useCountdown } from 'usehooks-ts' +import connectWallet from "./assets/connect-wallet.svg"; +import stepCheck from "./assets/step-check.svg"; +import loader from "./assets/loader.svg"; +import { useCountdown } from "usehooks-ts"; - -type ACTION_TYPE = 'signin' | 'signup' | 'connect'; -type STEP_STAGE = 'complete' | 'incomplete'; +type ACTION_TYPE = "signin" | "signup" | "connect"; +type STEP_STAGE = "complete" | "incomplete"; const params = new URLSearchParams(window.location.search); const nonce = params.get("nonce") ?? ""; @@ -19,7 +23,7 @@ const redirect = params.get("redirect_uri") ?? ""; const state = params.get("state") ?? ""; const oidc_nonce = params.get("oidc_nonce") ?? ""; const client_id = params.get("client_id") ?? ""; -const action = params.get("action") as (ACTION_TYPE | undefined) ?? "signin"; +const action = (params.get("action") as ACTION_TYPE | undefined) ?? "signin"; const TITLE: Record = { signin: "Sign in with Ethereum", @@ -31,34 +35,56 @@ const SIGNING_MESSAGE: Record = { signin: `You are signing-in to Devfolio.`, signup: `You are signing-up to Devfolio.`, connect: `You are connecting your Ethereum Wallet to Devfolio.`, -} +}; -const CONNECT_WALLET: Record = { - 'complete': { - header:'Wallet connected', - subText:' is successfully connected' - }, - 'incomplete':{ - header:'Connect wallet', - subText:'Go to your wallet app and accept the connection request' - } -} +const CONNECT_WALLET: Record = + { + complete: { + header: "Wallet connected", + subText: " is successfully connected", + }, + incomplete: { + header: "Connect wallet", + subText: "Go to your wallet app and accept the connection request", + }, + }; -const VERIFY_ADDRESS:Record = { - 'complete': { - header:'Address verified', - subText:'Your wallet address is verified' - }, - 'incomplete':{ - header:'Verify address', - subText:'Verify your address by signing a message' - } -} +const VERIFY_ADDRESS: Record = + { + complete: { + header: "Address verified", + subText: "Your wallet address is verified", + }, + incomplete: { + header: "Verify address", + subText: "Verify your address by signing a message", + }, + }; -const Step = ({isCompleted, isActive, number, header, subText, address}:{isCompleted: boolean; isActive: boolean; number: number;header: string; subText: string; address?: string}) => { +const Step = ({ + isCompleted, + isActive, + number, + header, + subText, + address, +}: { + isCompleted: boolean; + isActive: boolean; + number: number; + header: string; + subText: string; + address?: string; +}) => { return ( -
- {isCompleted ? +
+ {isCompleted ? ( Step Check - : -
-

+ ) : ( +

+

{number}

- } + )}
-

- {header} -

+

{header}

- {address ? `${address.substring(0,6)}...${address.slice(-4)}`:''}{subText} + {address ? `${address.substring(0, 6)}...${address.slice(-4)}` : ""} + {subText}

@@ -87,16 +120,17 @@ const Step = ({isCompleted, isActive, number, header, subText, address}:{isCompl function App() { const account = useAccount(); - const {disconnect} = useDisconnect(); - - const [isVerifyingAddress, setIsVerifyingAddress] = React.useState(false); + const { disconnect } = useDisconnect(); + const walletClient = useWalletClient(); + const { signMessage: wagmiSignMessage } = useSignMessage(); + const [isVerifyingAddress, setIsVerifyingAddress] = + React.useState(false); const [activeStepNumber, setActiveStepNumber] = React.useState(1); - const [count, { startCountdown }] = - useCountdown({ - countStart: 3, - intervalMs: 1000, - }) + const [count, { startCountdown }] = useCountdown({ + countStart: 3, + intervalMs: 1000, + }); const onWalletConnectSuccess = () => { setActiveStepNumber(2); @@ -108,7 +142,7 @@ function App() { setIsVerifyingAddress(false); setActiveStepNumber(3); - } + }; const handleSignInWithEthereum = async (e: React.MouseEvent) => { e.preventDefault(); @@ -132,9 +166,8 @@ function App() { nonce, resources: [redirect], }).prepareMessage(); - const walletClient = await account.connector?.getWalletClient(); - const signature = await walletClient?.signMessage({ + const signature = await wagmiSignMessage({ account: account.address, message: signMessage, }); @@ -150,7 +183,7 @@ function App() { setTimeout(() => { Cookies.set("siwe", JSON.stringify(session), { - expires: expirationTime, + expires: expirationTime, }); window.location.replace( @@ -158,8 +191,8 @@ function App() { state )}&client_id=${encodeURI(client_id)}${encodeURI(oidc_nonce)}` ); - }, 3000) - + }, 3000); + return; } catch (e) { setIsVerifyingAddress(false); @@ -170,7 +203,7 @@ function App() { const handleChangeWallet = async (e: React.MouseEvent) => { e.preventDefault(); await disconnect(); - } + }; React.useEffect(() => { if (typeof account.address === "string" && activeStepNumber === 1) { @@ -179,13 +212,15 @@ function App() { }, [account, activeStepNumber]); React.useEffect(() => { - if(!account.isConnected) { + if (!account.isConnected) { setActiveStepNumber(1); } - }, [account]) + }, [account]); - const walletConnectStage: STEP_STAGE = activeStepNumber === 1 ? 'incomplete' : 'complete'; - const verifyAddressStage: STEP_STAGE = activeStepNumber <= 2 ? 'incomplete' : 'complete'; + const walletConnectStage: STEP_STAGE = + activeStepNumber === 1 ? "incomplete" : "complete"; + const verifyAddressStage: STEP_STAGE = + activeStepNumber <= 2 ? "incomplete" : "complete"; return (
@@ -198,9 +233,9 @@ function App() { />
-

- {TITLE[action]} -

+

+ {TITLE[action]} +

@@ -214,71 +249,115 @@ function App() { />
- - + +
-
- {activeStepNumber === 2 && - <> -

- Change wallet -

- -

- Change wallet -

- - } - { - activeStepNumber === 1 && - + {activeStepNumber === 2 && ( + <> +

+ Change wallet +

+ - )} - - - } - { - activeStepNumber === 3 && - - } +

+ Change wallet +

+ + )} + {activeStepNumber === 1 && ( + + + {({ show, isConnecting }) => ( + + )} + + + )} + {activeStepNumber === 3 && ( + + )}