Merge branch 'main' into ledger-live-updates

thesis · Nov 6, 2024 · eab2c8e · eab2c8e
2 parents a2599fa + ea5e462
commit eab2c8e
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 59 deletions.
diff --git 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<Config | undefined>()
+
+  useEffect(() => {
+    const setWagmiConfig = async () => {
+      await delay(500)
+      const wagmiConfig = await getWagmiConfig()
+      setConfig(wagmiConfig)
+    }
+
+    logPromiseFailure(setWagmiConfig())
+  }, [])
+
+  if (!config)
+    return (
+      <Fade in={!config}>
+        <Center h="100vh" w="100vw">
+          <Icon as={AcreLogo} alt="Acre logo" w={200} h={300} />
+        </Center>
+      </Fade>
+    )
+
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <AcreSdkProvider>
-          <DocsDrawerContextProvider>
-            <SidebarContextProvider>
-              <WalletConnectionErrorContextProvider>
-                <ReduxProvider store={store}>
-                  <ChakraProvider theme={theme}>
+    <Fade in={config !== undefined}>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <AcreSdkProvider>
+            <DocsDrawerContextProvider>
+              <SidebarContextProvider>
+                <WalletConnectionErrorContextProvider>
+                  <ReduxProvider store={store}>
                     <DApp />
-                  </ChakraProvider>
-                </ReduxProvider>
-              </WalletConnectionErrorContextProvider>
-            </SidebarContextProvider>
-          </DocsDrawerContextProvider>
-        </AcreSdkProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+                  </ReduxProvider>
+                </WalletConnectionErrorContextProvider>
+              </SidebarContextProvider>
+            </DocsDrawerContextProvider>
+          </AcreSdkProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </Fade>
   )
 }
 

diff --git 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(
   <React.StrictMode>
-    <DAppProviders />
+    <ChakraProvider theme={theme}>
+      <DAppProviders />
+    </ChakraProvider>
   </React.StrictMode>,
 )
diff --git a/dapp/src/utils/delay.ts 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
@@ -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
@@ -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<EmbedApp, () => CreateOrangeKitConnectorFn> = {
-  "ledger-live": orangeKitLedgerLiveConnector,
-}
+// const embedConnectorsMap: Record<EmbedApp, () => 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