+ (undefined);
+
+ const { walletProvider: web3modalProvider } = useWeb3ModalProvider();
+ const web3modalAccount = useWeb3ModalAccount();
+
+ useEffect(() => {
+ if (!web3modalAccount.isConnected) {
+ _internalSync({ address: undefined, chain: undefined, provider: undefined });
+ }
+ }, [web3modalAccount.isConnected]);
+
+ useEffect(() => {
+ if (web3modalAccount.isConnected) {
+ const { address, chainId } = web3modalAccount;
+
+ if (address) {
+ if (!connectedAddress) {
+ setConnectedAddress(address);
+ } else if (connectedAddress !== address) {
+ navigateToPage("home");
+ }
+ }
+
+ const chain = chainId ? "0x" + chainId.toString(16) : undefined;
+
+ _internalSync({
+ provider: web3modalProvider,
+ address,
+ chain,
+ });
+ }
+ }, [web3modalAccount.isConnected, web3modalProvider, web3modalAccount.address, web3modalAccount.chainId]);
+
+ return null;
+};
+
+export const WalletStoreManager = ({ children }: { children: React.ReactNode }) => {
+ // Don't add anything here that will cause a re-render of this component
+
+ return (
+ <>
+ {/* Render this component in parallel so it can't cause the whole app to re-render */}
+ {
- const toast = useToast();
-
- const disconnectWallet = useWalletStore((state) => state.disconnect);
+ const { disconnect: disconnectWallet } = useDisconnect();
const chain = useWalletStore((state) => state.chain);
const [dbAccessTokenStatus, setDbAccessTokenStatus] = useState("idle");
@@ -59,15 +51,6 @@ export const useDatastoreConnection = () => {
}
}, [chain, dbAccessTokenStatus]);
- const handleConnectionError = useCallback(
- async (sessionKey: string, dbCacheTokenKey: string) => {
- await disconnectWallet();
- window.localStorage.removeItem(sessionKey);
- window.localStorage.removeItem(dbCacheTokenKey);
- },
- [disconnectWallet]
- );
-
const getPassportDatabaseAccessToken = async (did: DID): Promise => {
let nonce = null;
try {
@@ -99,8 +82,6 @@ export const useDatastoreConnection = () => {
const loadDbAccessToken = useCallback(async (address: string, did: DID) => {
const dbCacheTokenKey = `dbcache-token-${address}`;
- // TODO: if we load the token from the localstorage we should validate it
- // let dbAccessToken = window.localStorage.getItem(dbCacheTokenKey);
let dbAccessToken = null;
// Here we try to get an access token for the Passport database
@@ -115,24 +96,25 @@ export const useDatastoreConnection = () => {
// @ts-ignore
window.localStorage.setItem(dbCacheTokenKey, dbAccessToken);
setDbAccessToken(dbAccessToken || undefined);
- const status = dbAccessToken ? "connected" : "failed";
setDbAccessTokenStatus("connected");
} catch (error) {
setDbAccessTokenStatus("failed");
- // Should we logout the user here? They will be unable to write to passport
const msg = `Error getting access token for did: ${did}`;
+ console.error("Error getting access token for did:", error);
datadogRum.addError(msg);
+
+ throw error;
}
}, []);
const connect = useCallback(
async (address: string, provider: Eip1193Provider) => {
if (address) {
- let sessionKey = "";
- let dbCacheTokenKey = "";
-
try {
+ // This is to fix issues with extensions that inject old versions of Buffer
+ globalThis.Buffer = Buffer;
+
const accountId = new AccountId({
// We always use chain id 1 for now for all sessions, to avoid users
// switching networks and not see their stamps any more
@@ -140,79 +122,22 @@ export const useDatastoreConnection = () => {
address,
});
const authMethod = await EthereumWebAuth.getAuthMethod(provider, accountId);
- // Sessions will be serialized and stored in localhost
- // The sessions are bound to an ETH address, this is why we use the address in the session key
- sessionKey = `didsession-${address}`;
- dbCacheTokenKey = `dbcache-token-${address}`;
- // const sessionStr = window.localStorage.getItem(sessionKey);
- // let session: DIDSession | undefined = undefined;
- // try {
- // if (sessionStr) {
- // session = await DIDSession.fromSession(sessionStr);
- // }
- // } catch (error) {
- // console.log("Error parsing session from localStorage:", error);
- // window.localStorage.removeItem(sessionKey);
- // }
-
- // if (
- // true
- // // || // Hotfix: Hardcoding this here, as we always want a session created by DIDSession.get ... (at least for now)
- // // !session ||
- // // session.isExpired ||
- // // session.expireInSecs < 3600 ||
- // // !session.hasSession ||
- // // Date.now() - new Date(session?.cacao?.p?.iat).getTime() >
- // // MAX_VALID_DID_SESSION_AGE - BUFFER_TIME_BEFORE_EXPIRATION
- // ) {
- // // session = await DIDSession.authorize(authMethod, { resources: ["ceramic://*"] });
- // // Store the session in localstorage
- // // window.localStorage.setItem(sessionKey, session.serialize());
- // }
-
- // Extensions which inject the Buffer library break the
- // did-session library, so we need to remove it
- if (globalThis.Buffer) {
- datadogLogs.logger.warn("Buffer library is injected, setting to undefined", {
- buffer: `${globalThis.Buffer}`,
- });
- globalThis.Buffer = undefined as any;
- console.log(
- "Warning: Buffer library is injected! This will be overwritten in order to avoid conflicts with did-session."
- );
- } else {
- console.log("Buffer library is not injected (this is good)");
- }
+
let session: DIDSession = await DIDSession.get(accountId, authMethod, { resources: ["ceramic://*"] });
if (session) {
await loadDbAccessToken(address, session.did);
setDid(session.did);
- // session.isExpired looks like a static variable so this looks like a bug,
- // but isExpired is a getter, so it's actually checking the current status
- // whenever checkSessionIsValid is called
setCheckSessionIsValid(() => () => !session.isExpired);
}
} catch (error) {
- await handleConnectionError(sessionKey, dbCacheTokenKey);
- toast({
- duration: 6000,
- isClosable: true,
- render: (result: any) => (
- ;
+// Managed by ./WalletStoreManager
const walletStore = create<{
- connect: (callback: ConnectCallback) => Promise;
- disconnect: () => Promise;
- setChain: (chain: string) => Promise;
+ _internalSync: (params: InternalSyncParams) => void;
provider?: Eip1193Provider;
- error?: any;
chain?: string;
address?: string;
}>((set) => ({
chain: undefined,
address: undefined,
provider: undefined,
- error: undefined,
- connect: async (callback: ConnectCallback) => {
- if (!isServerOnMaintenance()) {
- try {
- const previouslyUsedWalletLabel = getPreviouslyUsedWalletLabel();
- const connectOptions = previouslyUsedWalletLabel
- ? {
- autoSelect: {
- label: previouslyUsedWalletLabel,
- disableModals: true,
- },
- }
- : undefined;
- let wallet = (await onboard.connectWallet(connectOptions))[0];
-
- if (!wallet) {
- // This error can be caused if the user changed the wallet he is using in the mean time,
- // for example he switched from MM -> Rabby
- // So let's try first without the previouslyUsedWalletLabel
- console.debug(
- "No wallet selected when trying to connect with `previouslyUsedWalletLabel`. Retrying without it."
- );
-
- wallet = (await onboard.connectWallet())[0];
- }
-
- if (!wallet) {
- throw new Error("No wallet selected");
- }
-
- window.localStorage.setItem("previouslyUsedWalletLabel", wallet.label);
-
- const walletData = parseWeb3OnboardWallet(wallet);
-
- set({ ...walletData });
- await callback(walletData.address, walletData.provider);
- } catch (e) {
- console.error("Error connecting wallet", e);
- set({ error: e });
- }
- }
- },
- disconnect: async () => {
- const previouslyUsedWalletLabel = getPreviouslyUsedWalletLabel();
- let error;
- try {
- await onboard.disconnectWallet({
- label: previouslyUsedWalletLabel || "",
- });
- } catch (e) {
- error = e;
- console.error("Error disconnecting wallet", e);
- }
- window.localStorage.setItem("previouslyUsedWalletLabel", "");
-
- set({ address: undefined, chain: undefined, provider: undefined, error });
- },
- setChain: async (chainId: string) => {
- const success = await onboard.setChain({ chainId });
- if (success) set({ chain: chainId });
- else console.error("Error setting chain");
- return success;
+ _internalSync: async (params: InternalSyncParams) => {
+ // Only to be used as bridge between web3modal and walletStore, in WalletStoreManager
+ // Could be removed when switching to wagmi, since we'll probably go ahead and change
+ // all the hooks at that point and likely even get rid of the walletStore
+ set(params);
},
}));
-const parseWeb3OnboardWallet = (wallet: WalletState) => {
- const address = wallet?.accounts?.[0]?.address;
- const chain = wallet?.chains?.[0]?.id;
- const provider = wallet?.provider;
- return { address, chain, provider };
-};
-
-onboard.state.select("wallets").subscribe((wallets) => {
- if (wallets.length) {
- const walletState = walletStore.getState();
- // Disconnect if the wallet has been changed
- if (walletState.address && walletState.address !== wallets?.[0]?.accounts?.[0]?.address) {
- walletState.disconnect();
- return;
- }
- }
- walletStore.setState(parseWeb3OnboardWallet(wallets[0]));
-});
-
// Export as hook
export const useWalletStore = walletStore;
diff --git a/app/hooks/useCustomization.tsx b/app/hooks/useCustomization.tsx
index e66788b19..dbc18d5f4 100644
--- a/app/hooks/useCustomization.tsx
+++ b/app/hooks/useCustomization.tsx
@@ -77,6 +77,8 @@ export const useSetCustomizationKey = (): ((customizationKey: string | undefined
console.error("Failed to load customization config", e);
setCustomizationConfig(DEFAULT_CUSTOMIZATION);
}
+ } else {
+ setCustomizationConfig(DEFAULT_CUSTOMIZATION);
}
},
[setCustomizationConfig]
diff --git a/app/hooks/useLoginFlow.tsx b/app/hooks/useLoginFlow.tsx
new file mode 100644
index 000000000..fbba4d9ae
--- /dev/null
+++ b/app/hooks/useLoginFlow.tsx
@@ -0,0 +1,150 @@
+// --- React Methods
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// --- Shared data context
+import { useWalletStore } from "../context/walletStore";
+
+// --- Components
+import { checkShowOnboard } from "../utils/helpers";
+import { useDatastoreConnectionContext } from "../context/datastoreConnectionContext";
+import { useToast } from "@chakra-ui/react";
+import { DoneToastContent } from "../components/DoneToastContent";
+import { useNavigateToPage } from "../hooks/useCustomization";
+
+import {
+ useDisconnect,
+ useWeb3Modal,
+ useWeb3ModalAccount,
+ useWeb3ModalError,
+ useWeb3ModalEvents,
+ useWeb3ModalState,
+} from "@web3modal/ethers/react";
+import { datadogRum } from "@datadog/browser-rum";
+
+type LoginStep = "NOT_STARTED" | "PENDING_WALLET_CONNECTION" | "PENDING_DATABASE_CONNECTION" | "DONE";
+
+// Isolate login status updates and some workaround logic for web3modal
+export const useLoginFlow = (): {
+ loginStep: LoginStep;
+ isLoggingIn: boolean;
+ signIn: () => void;
+} => {
+ const address = useWalletStore((state) => state.address);
+ const provider = useWalletStore((state) => state.provider);
+ const { error } = useWeb3ModalError();
+ const { isConnected } = useWeb3ModalAccount();
+ const { open: web3ModalIsOpen } = useWeb3ModalState();
+ const { disconnect } = useDisconnect();
+ const { dbAccessTokenStatus } = useDatastoreConnectionContext();
+ const [enabled, setEnabled] = useState(false);
+ const [loginStep, setLoginStep] = useState("NOT_STARTED");
+ const { open: openWeb3Modal } = useWeb3Modal();
+ const { connect: connectDatastore } = useDatastoreConnectionContext();
+ const isConnectingToDatabaseRef = useRef(false);
+ const toast = useToast();
+ const navigateToPage = useNavigateToPage();
+ const web3modalEvent = useWeb3ModalEvents();
+
+ const initiateLogin = useCallback(() => {
+ setEnabled(true);
+ }, []);
+
+ const resetLogin = useCallback(() => {
+ setEnabled(false);
+ }, []);
+
+ useEffect(() => {
+ if (web3modalEvent.data.event === "MODAL_CLOSE" && web3modalEvent.data.properties.connected === false) {
+ resetLogin();
+ }
+ }, [web3modalEvent, resetLogin]);
+
+ const showConnectionError = useCallback(
+ (e: any) => {
+ toast({
+ duration: 6000,
+ isClosable: true,
+ render: (result: any) => (
+ /components/$1",
"^@/pages/(.*)$": "/pages/$1",
+ "@web3modal/ethers/react": "/__mocks__/web3modalMock.js",
},
setupFilesAfterEnv: ["/jest.setup.ts"],
setupFiles: ["jest-localstorage-mock"],
diff --git a/app/jest.setup.ts b/app/jest.setup.ts
index e53fca8f4..d5cdde59a 100644
--- a/app/jest.setup.ts
+++ b/app/jest.setup.ts
@@ -2,32 +2,3 @@ import "@testing-library/jest-dom";
import { TextDecoder, TextEncoder } from "util";
global.TextDecoder = TextDecoder as any;
global.TextEncoder = TextEncoder as any;
-
-const mockWallet = {
- address: "0xfF7edbD01e9d044486781ff52c42EA7a01612644",
- chain: "0xa",
- provider: jest.fn(),
-};
-
-jest.mock("@web3-onboard/react", () => ({
- init: () => ({
- connectWallet: () => Promise.resolve([mockWallet]),
- disconnectWallet: () => Promise.resolve(),
- state: {
- select: () => ({
- subscribe: () => {},
- }),
- },
- }),
- useConnectWallet: () => [{ wallet: mockWallet }, () => Promise.resolve([mockWallet]), jest.fn()],
-}));
-
-jest.mock("@web3-onboard/injected-wallets", () => ({
- __esModule: true,
- default: () => {},
-}));
-
-jest.mock("@web3-onboard/walletconnect", () => ({
- __esModule: true,
- default: () => {},
-}));
diff --git a/app/package.json b/app/package.json
index a9a6093ac..87310051f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -32,11 +32,7 @@
"@popperjs/core": "^2.11.7",
"@self.id/framework": "^0.4.0",
"@tanstack/react-query": "^5.40.0",
- "@web3-onboard/core": "2.21.2",
- "@web3-onboard/injected-wallets": "2.10.7",
- "@web3-onboard/react": "2.8.13",
- "@web3-onboard/walletconnect": "2.4.7",
- "@web3-onboard/walletlink": "2.1.3",
+ "@web3modal/ethers": "^5.0.5",
"broadcast-channel": "^4.11.0",
"did-session": "^3.0.2",
"dids": "^5.0.2",
@@ -98,12 +94,16 @@
"tailwindcss": "^3.0.7",
"ts-jest": "^27.1.4",
"typescript": "^5.3.3",
+ "uint8arrays": "^5.1.0",
"yarn": "^1.22.21"
},
"resolutions": {
"csstype": "3.0.10",
"**/@types/react": "18.2.34",
- "leveldown": "6.1.1"
+ "leveldown": "6.1.1",
+ "did-session/uint8arrays": "^5.1.0",
+ "dids/uint8arrays": "^5.1.0",
+ "@didtools/**/uint8arrays": "^5.1.0"
},
"optionalDependencies": {
"bufferutil": "^4.0.7",
diff --git a/app/pages/Dashboard.tsx b/app/pages/Dashboard.tsx
index b34b90ed8..2f67ebe58 100644
--- a/app/pages/Dashboard.tsx
+++ b/app/pages/Dashboard.tsx
@@ -1,8 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
// --- React Methods
import React, { useContext, useEffect, useMemo, useRef } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
// --Components
import PageRoot from "../components/PageRoot";
@@ -26,7 +24,6 @@ import { ScorerContext } from "../context/scorerContext";
import { useOneClickVerification } from "../hooks/useOneClickVerification";
import ProcessingPopup from "../components/ProcessingPopup";
-import { getFilterName } from "../config/filters";
import { Button } from "../components/Button";
import { DEFAULT_CUSTOMIZATION_KEY, useCustomization, useNavigateToPage } from "../hooks/useCustomization";
import { DynamicCustomDashboardPanel } from "../components/CustomDashboardPanel";
@@ -35,7 +32,6 @@ import hash from "object-hash";
// --- GTM Module
import TagManager from "react-gtm-module";
import { useDatastoreConnectionContext } from "../context/datastoreConnectionContext";
-import LoadingScreen from "../components/LoadingScreen";
const success = "../../assets/check-icon2.svg";
const fail = "../assets/verification-failed-bright.svg";
@@ -116,11 +112,6 @@ export default function Dashboard() {
// ------------------- END Data items for Google Tag Manager -------------------
const { isOpen: retryModalIsOpen, onOpen: onRetryModalOpen, onClose: onRetryModalClose } = useDisclosure();
- // stamp filter
- const router = useRouter();
- const { filter } = router.query;
- const filterName = filter?.length && typeof filter === "string" ? getFilterName(filter) : false;
-
const toast = useToast();
const numPlatforms = useMemo(() => {
@@ -133,7 +124,7 @@ export default function Dashboard() {
// Route user to home when wallet is disconnected
useEffect(() => {
- if (!address) {
+ if (!address || dbAccessTokenStatus !== "connected") {
navigateToPage("home");
}
}, [address]);
@@ -246,57 +237,37 @@ export default function Dashboard() {
);
- const Subheader = ({ className }: { className: string }) => (
-
+
+ {/* This is really just a placeholder div, because AccountCenter uses fixed positioning */}
+
);
};
diff --git a/app/components/SIWEButton.tsx b/app/components/SIWEButton.tsx
index 850445124..0be92c61b 100644
--- a/app/components/SIWEButton.tsx
+++ b/app/components/SIWEButton.tsx
@@ -1,11 +1,11 @@
import React from "react";
-import { Button, ButtonProps } from "./Button";
+import { LoadButton, LoadingButtonProps } from "./LoadButton";
-const SIWEButton = (props: ButtonProps & { enableEthBranding: boolean }) => {
- const { enableEthBranding, ...rest } = props;
+const SIWEButton = (props: LoadingButtonProps & { enableEthBranding: boolean; subtext?: string }) => {
+ const { enableEthBranding, isLoading, subtext, ...rest } = props;
return (
-
+ Passport
+
+ Logging in...
+
+ Sign in {enableEthBranding ? "with Ethereum" : "using signature"}
+
+
+
);
};
diff --git a/app/config/filters.ts b/app/config/filters.ts
deleted file mode 100644
index 5a1443f5e..000000000
--- a/app/config/filters.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export const STAMP_FILTERS: {
- [key: string]: {
- name: string;
- stamps: {
- [key: string]: string[];
- };
- };
-} = {
- "bankless-academy": {
- name: "Bankless Academy",
- stamps: {
- Google: ["Account Name"],
- Ens: ["Account Name"],
- Poh: ["Account Name"],
- Twitter: ["Account Name"],
- Brightid: ["Account Name"],
- Linkedin: ["Account Name"],
- Discord: ["Account Name"],
- },
- },
-};
-
-export const getStampProviderFilters = (filter: string): any => {
- let stampFilters: any = false;
- if (Object.keys(STAMP_FILTERS).includes(filter)) {
- stampFilters = STAMP_FILTERS[filter].stamps;
- }
- return stampFilters;
-};
-
-export const getFilterName = (filter: string): any => {
- let filterName: any = false;
- if (Object.keys(STAMP_FILTERS).includes(filter)) {
- filterName = STAMP_FILTERS[filter].name;
- }
- return filterName;
-};
diff --git a/app/context/WalletStoreManager.tsx b/app/context/WalletStoreManager.tsx
new file mode 100644
index 000000000..788107ee8
--- /dev/null
+++ b/app/context/WalletStoreManager.tsx
@@ -0,0 +1,58 @@
+// --- React Methods
+import React, { useEffect, useState } from "react";
+
+// --- Utils & configs
+import { useWeb3ModalAccount, useWeb3ModalProvider } from "@web3modal/ethers/react";
+import { useWalletStore } from "./walletStore";
+import { useNavigateToPage } from "../hooks/useCustomization";
+
+const WalletStoreSyncWithWeb3Modal = () => {
+ const _internalSync = useWalletStore((state) => state._internalSync);
+ const navigateToPage = useNavigateToPage();
+ const [connectedAddress, setConnectedAddress] = useState({subtext})
+
- {filterName && (
-
- );
-
return (
-
-
-
- see all my stamps
-
-
-
-
- )}
-
@@ -85,9 +48,19 @@ export default function Home() {
Access a world of Web3 opportunities securely with a single sign-in.