diff --git a/apps/extension/src/background/approvals/service.ts b/apps/extension/src/background/approvals/service.ts index 459f08926..6734e78c4 100644 --- a/apps/extension/src/background/approvals/service.ts +++ b/apps/extension/src/background/approvals/service.ts @@ -198,6 +198,7 @@ export class ApprovalsService { interfaceOrigin: string, chainId?: string ): Promise { + console.log("approveConnection", { interfaceOrigin, chainId }); const alreadyApproved = await this.isConnectionApproved( interfaceOrigin, chainId diff --git a/apps/namadillo/src/App/Common/ConnectExtensionButton.tsx b/apps/namadillo/src/App/Common/ConnectExtensionButton.tsx index c6a5e50aa..077dd69fa 100644 --- a/apps/namadillo/src/App/Common/ConnectExtensionButton.tsx +++ b/apps/namadillo/src/App/Common/ConnectExtensionButton.tsx @@ -1,22 +1,29 @@ import { ActionButton } from "@namada/components"; -import { namadaExtensionAttachStatus } from "atoms/settings"; -import { useExtensionConnect } from "hooks/useExtensionConnect"; -import { useAtomValue } from "jotai"; +import { + namadaExtensionAttachStatus, + namadaExtensionConnectionStatus, +} from "atoms/settings"; +import { useNamadaKeychain } from "hooks/useNamadaKeychain"; +import { useAtom, useAtomValue } from "jotai"; export const ConnectExtensionButton = (): JSX.Element => { const extensionAttachStatus = useAtomValue(namadaExtensionAttachStatus); - const { connect, isConnected } = useExtensionConnect(); + const { connect } = useNamadaKeychain(); + const [connectStatus] = useAtom(namadaExtensionConnectionStatus); // TODO create an action button when the extension is connected // but the account is missing, like on useConnectText return ( <> - {extensionAttachStatus === "attached" && !isConnected && ( - - Connect Keychain - - )} + {extensionAttachStatus === "attached" && + connectStatus !== "connected" && ( + + {connectStatus === "connecting" ? + "Connecting..." + : "Connect Keychain"} + + )} {extensionAttachStatus === "detached" && ( ("pending"); export const namadaExtensionConnectionStatus = atom("idle"); diff --git a/apps/namadillo/src/hooks/useExtensionConnect.ts b/apps/namadillo/src/hooks/useExtensionConnect.ts index e935aac56..1e5b7d781 100644 --- a/apps/namadillo/src/hooks/useExtensionConnect.ts +++ b/apps/namadillo/src/hooks/useExtensionConnect.ts @@ -1,7 +1,6 @@ import { useIntegrationConnection } from "@namada/integrations"; import { ExtensionKey } from "@namada/types"; -import { namadaExtensionConnectionStatus } from "atoms/settings"; -import { ConnectStatus } from "integrations/types"; +import { ConnectStatus, namadaExtensionConnectionStatus } from "atoms/settings"; import { useAtom } from "jotai"; import { useEffect } from "react"; diff --git a/apps/namadillo/src/hooks/useExtensionEvents.tsx b/apps/namadillo/src/hooks/useExtensionEvents.tsx index 949660057..ba80945cb 100644 --- a/apps/namadillo/src/hooks/useExtensionEvents.tsx +++ b/apps/namadillo/src/hooks/useExtensionEvents.tsx @@ -1,14 +1,14 @@ import { useEventListenerOnce } from "@namada/hooks"; -import { useIntegration } from "@namada/integrations"; import { Events } from "@namada/types"; import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts"; import { namadaExtensionConnectionStatus } from "atoms/settings"; import { useAtomValue, useSetAtom } from "jotai"; +import { useNamadaKeychain } from "./useNamadaKeychain"; export const useExtensionEvents = (): void => { const defaultAccount = useAtomValue(defaultAccountAtom); const balances = useAtomValue(accountBalanceAtom); - const integration = useIntegration("namada"); + const { namadaKeychain } = useNamadaKeychain(); const setNamadaExtensionConnected = useSetAtom( namadaExtensionConnectionStatus @@ -21,8 +21,9 @@ export const useExtensionEvents = (): void => { }); useEventListenerOnce(Events.ConnectionRevoked, async () => { + const injectedNamada = await namadaKeychain.get(); setNamadaExtensionConnected( - (await integration.isConnected()) ? "connected" : "idle" + (await injectedNamada?.isConnected()) ? "connected" : "idle" ); }); }; diff --git a/apps/namadillo/src/hooks/useNamadaKeychain.ts b/apps/namadillo/src/hooks/useNamadaKeychain.ts index c640f6568..880e8bbf2 100644 --- a/apps/namadillo/src/hooks/useNamadaKeychain.ts +++ b/apps/namadillo/src/hooks/useNamadaKeychain.ts @@ -1,12 +1,21 @@ import { WindowWithNamada } from "@namada/types"; import { chainParametersAtom } from "atoms/chain"; -import { AttachStatus, ConnectStatus, Wallet } from "integrations/types"; -import { useAtomValue } from "jotai"; -import { useEffect, useState } from "react"; +import { + namadaExtensionAttachStatus, + namadaExtensionConnectionStatus, +} from "atoms/settings"; +import { Wallet } from "integrations/types"; +import { useAtom, useAtomValue } from "jotai"; +import { useCallback, useState } from "react"; export type InjectedNamada = WindowWithNamada["namada"]; export class NamadaKeychain implements Wallet { + static detect(): boolean { + return Boolean((window as WindowWithNamada).namada); + } + + // TODO: Should we use this, or keep our existing download buttons? install(): void { console.warn( "Namada is not available. Redirecting to the Namada download page..." @@ -49,60 +58,37 @@ export class NamadaKeychain implements Wallet { } } -export const useNamadaKeychain = (): [ - attachStatus: AttachStatus, - connectStatus: ConnectStatus, - connect: () => Promise, - namada: NamadaKeychain, - error?: string, -] => { - const [attachStatus, setAttachStatus] = useState("detached"); - const [connectStatus, setConnectStatus] = useState("idle"); - const [connectError, setConnectError] = useState(); +export const useNamadaKeychain = (): { + connect: () => Promise; + namadaKeychain: NamadaKeychain; + error?: string; +} => { + const [connectStatus, setConnectStatus] = useAtom( + namadaExtensionConnectionStatus + ); + const [attachStatus] = useAtom(namadaExtensionAttachStatus); + const [error, setError] = useState(); const { data: chain } = useAtomValue(chainParametersAtom); const namadaKeychain = new NamadaKeychain(); + const chainId = chain?.chainId; - const connect = async (): Promise => { - if (!chain) { + const connect = useCallback(async (): Promise => { + if ( + !chainId || + attachStatus !== "attached" || + connectStatus === "connected" + ) { return; } setConnectStatus("connecting"); namadaKeychain - .connect(chain.chainId) - .then(() => { - console.info(`Connected to keychain with ${chain.chainId}`); - setConnectStatus("connected"); - }) + .connect(chainId) + .then(() => setConnectStatus("connected")) .catch((e) => { - console.error(e); setConnectStatus("error"); - setConnectError(e); + setError(e); }); - }; - - useEffect(() => { - setAttachStatus("pending"); - namadaKeychain - .get() - .then(() => setAttachStatus("attached")) - .catch(() => setAttachStatus("detached")); - }, []); - - useEffect(() => { - if (attachStatus === "attached") { - if (chain?.chainId) { - namadaKeychain - .get() - .then((namada) => - namada - .isConnected(chain.chainId) - .then(() => - console.info(`Connected to keychain with ${chain.chainId}`) - ) - ); - } - } - }, [chain]); + }, [chainId, attachStatus, connectStatus]); - return [attachStatus, connectStatus, connect, namadaKeychain, connectError]; + return { connect, namadaKeychain, error }; }; diff --git a/apps/namadillo/src/index.tsx b/apps/namadillo/src/index.tsx index ed0a25a27..dd938ce27 100644 --- a/apps/namadillo/src/index.tsx +++ b/apps/namadillo/src/index.tsx @@ -1,4 +1,4 @@ -import { init as initShared } from "@namada/shared/src/init-inline"; +import init from "@namada/sdk/inline-init"; import { QueryProvider } from "App/Common/QueryProvider"; import { SdkProvider } from "hooks/useSdk"; import React from "react"; @@ -20,7 +20,7 @@ const container = document.getElementById("root"); if (container) { const root = createRoot(container); - initShared().then(() => { + init().then(() => { root.render( diff --git a/apps/namadillo/src/integrations/types.ts b/apps/namadillo/src/integrations/types.ts index 3351d71c4..f7e4e8493 100644 --- a/apps/namadillo/src/integrations/types.ts +++ b/apps/namadillo/src/integrations/types.ts @@ -1,8 +1,5 @@ import { ChainRegistryEntry } from "types"; -export type AttachStatus = "pending" | "attached" | "detached"; -export type ConnectStatus = "idle" | "connecting" | "connected" | "error"; - // Generic wallet functionality export interface Wallet { install(): void;