diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index ab80d3d06..aa67ce180 100644 --- a/dapp/src/DApp.tsx +++ b/dapp/src/DApp.tsx @@ -1,8 +1,8 @@ -import React from "react" -import { ChakraProvider } from "@chakra-ui/react" +import React, { useEffect, useState } from "react" +import { Center, Fade, Icon } from "@chakra-ui/react" import { Provider as ReduxProvider } from "react-redux" import { RouterProvider } from "react-router-dom" -import { WagmiProvider } from "wagmi" +import { Config, WagmiProvider } from "wagmi" import { QueryClientProvider } from "@tanstack/react-query" import { ReactQueryDevtools } from "@tanstack/react-query-devtools" import { AcreSdkProvider } from "./acre-react/contexts" @@ -15,9 +15,10 @@ import { import { useInitApp } from "./hooks" import { router } from "./router" import { store } from "./store" -import theme from "./theme" -import wagmiConfig from "./wagmiConfig" +import getWagmiConfig from "./wagmiConfig" import queryClient from "./queryClient" +import { delay, logPromiseFailure } from "./utils" +import { AcreLogo } from "./assets/icons" function DApp() { useInitApp() @@ -32,24 +33,45 @@ function DApp() { } function DAppProviders() { + const [config, setConfig] = useState() + + useEffect(() => { + const setWagmiConfig = async () => { + await delay(500) + const wagmiConfig = await getWagmiConfig() + setConfig(wagmiConfig) + } + + logPromiseFailure(setWagmiConfig()) + }, []) + + if (!config) + return ( + +
+ +
+
+ ) + return ( - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + ) } diff --git a/dapp/src/main.tsx b/dapp/src/main.tsx index f04f38140..0ae5c1617 100644 --- a/dapp/src/main.tsx +++ b/dapp/src/main.tsx @@ -1,8 +1,10 @@ /* eslint-disable no-console */ import React from "react" import ReactDOM from "react-dom/client" +import { ChakraProvider } from "@chakra-ui/react" import DAppProviders from "./DApp" import { env } from "./constants" +import theme from "./theme" const { NETWORK_TYPE, LATEST_COMMIT_HASH } = env @@ -14,6 +16,8 @@ console.log( ReactDOM.createRoot(document.getElementById("root")!).render( - + + + , ) diff --git a/dapp/src/utils/delay.ts b/dapp/src/utils/delay.ts new file mode 100644 index 000000000..99fb9ead7 --- /dev/null +++ b/dapp/src/utils/delay.ts @@ -0,0 +1,7 @@ +function delay(ms: number) { + return new Promise((resolve) => { + setTimeout(resolve, ms) + }) +} + +export default delay diff --git a/dapp/src/utils/index.ts b/dapp/src/utils/index.ts index f85066048..2deea8e9e 100644 --- a/dapp/src/utils/index.ts +++ b/dapp/src/utils/index.ts @@ -16,3 +16,4 @@ export { default as userAgent } from "./userAgent" export { default as referralProgram } from "./referralProgram" export { default as acreApi } from "./acreApi" export { default as router } from "./router" +export { default as delay } from "./delay" diff --git a/dapp/src/wagmiConfig.ts b/dapp/src/wagmiConfig.ts index f91d608ef..8d801d053 100644 --- a/dapp/src/wagmiConfig.ts +++ b/dapp/src/wagmiConfig.ts @@ -1,10 +1,5 @@ import { http, createConfig, CreateConnectorFn } from "wagmi" import { Chain, mainnet, sepolia } from "wagmi/chains" -import { - getOrangeKitUnisatConnector, - getOrangeKitOKXConnector, - getOrangeKitXverseConnector, -} from "@orangekit/react" import { CreateOrangeKitConnectorFn } from "@orangekit/react/dist/src/wallet/connector" import { env } from "./constants" import { getLastUsedBtcAddress } from "./hooks/useLastUsedBtcAddress" @@ -25,41 +20,83 @@ const transports = chains.reduce( {}, ) -const orangeKitUnisatConnector = getOrangeKitUnisatConnector(connectorConfig) -const orangeKitOKXConnector = getOrangeKitOKXConnector(connectorConfig) -const orangeKitXverseConnector = getOrangeKitXverseConnector(connectorConfig) -const orangeKitLedgerLiveConnector = orangeKit.getOrangeKitLedgerLiveConnector({ - ...connectorConfig, - options: { - tryConnectToAddress: getLastUsedBtcAddress(), - }, -}) +// const orangeKitUnisatConnector = getOrangeKitUnisatConnector(connectorConfig) +// const orangeKitOKXConnector = getOrangeKitOKXConnector(connectorConfig) +// const orangeKitXverseConnector = getOrangeKitXverseConnector(connectorConfig) +// const orangeKitLedgerLiveConnector = orangeKit.getOrangeKitLedgerLiveConnector({ +// ...connectorConfig, +// options: { +// tryConnectToAddress: getLastUsedBtcAddress(), +// }, +// }) -const embedConnectorsMap: Record CreateOrangeKitConnectorFn> = { - "ledger-live": orangeKitLedgerLiveConnector, -} +// const embedConnectorsMap: Record CreateOrangeKitConnectorFn> = { +// "ledger-live": orangeKitLedgerLiveConnector, +// } -let createEmbedConnectorFn -const embeddedApp = referralProgram.getEmbeddedApp() -if (referralProgram.isEmbedApp(embeddedApp)) { - createEmbedConnectorFn = embedConnectorsMap[embeddedApp as EmbedApp] -} +// let createEmbedConnectorFn +// const embeddedApp = referralProgram.getEmbeddedApp() +// if (referralProgram.isEmbedApp(embeddedApp)) { +// createEmbedConnectorFn = embedConnectorsMap[embeddedApp as EmbedApp] +// } + +// const defaultConnectors = [ +// orangeKitOKXConnector(), +// orangeKitUnisatConnector(), +// orangeKitXverseConnector(), +// ] + +// const connectors = (createEmbedConnectorFn !== undefined +// ? [createEmbedConnectorFn()] +// : defaultConnectors) as unknown as CreateConnectorFn[] +async function getWagmiConfig() { + const { + getOrangeKitUnisatConnector, + getOrangeKitOKXConnector, + getOrangeKitXverseConnector, + } = await import("@orangekit/react") + + const orangeKitUnisatConnector = getOrangeKitUnisatConnector(connectorConfig) + const orangeKitOKXConnector = getOrangeKitOKXConnector(connectorConfig) + const orangeKitXverseConnector = getOrangeKitXverseConnector(connectorConfig) -const defaultConnectors = [ - orangeKitOKXConnector(), - orangeKitUnisatConnector(), - orangeKitXverseConnector(), -] + let createEmbedConnectorFn + const embeddedApp = referralProgram.getEmbeddedApp() + if (referralProgram.isEmbedApp(embeddedApp)) { + const orangeKitLedgerLiveConnector = + orangeKit.getOrangeKitLedgerLiveConnector({ + ...connectorConfig, + options: { + tryConnectToAddress: getLastUsedBtcAddress(), + }, + }) -const connectors = (createEmbedConnectorFn !== undefined - ? [createEmbedConnectorFn()] - : defaultConnectors) as unknown as CreateConnectorFn[] + const embedConnectorsMap: Record< + EmbedApp, + () => CreateOrangeKitConnectorFn + > = { + "ledger-live": orangeKitLedgerLiveConnector, + } -const wagmiConfig = createConfig({ - chains, - multiInjectedProviderDiscovery: false, - connectors, - transports, -}) + createEmbedConnectorFn = embedConnectorsMap[embeddedApp as EmbedApp] + } + + const defaultConnectors = [ + orangeKitOKXConnector(), + orangeKitUnisatConnector(), + orangeKitXverseConnector(), + ] + + const connectors = (createEmbedConnectorFn !== undefined + ? [createEmbedConnectorFn()] + : defaultConnectors) as unknown as CreateConnectorFn[] + + return createConfig({ + chains, + multiInjectedProviderDiscovery: false, + connectors, + transports, + }) +} -export default wagmiConfig +export default getWagmiConfig