Merge pull request #70 from bitcoin-sv/feat-641-public-config

feat(BUX-641): fetch config from server

public/config.default.json

@@ -1,5 +1,4 @@
 {
   "apiUrl": "http://localhost:3002",
-  "paymailDomain": "example.com",
   "wsUrl": "ws://localhost:3002/api/websocket"
 }

release/README.DOCKER.md

@@ -25,15 +25,13 @@ The configuration file `env-config.json` can contain all or part of the followin
 ```json
 {
   "apiUrl": "http://localhost:8180",
-  "wsUrl": "ws://localhost:8180/api/websocket",
-  "paymailDomain": "other.example.com"
+  "wsUrl": "ws://localhost:8180/api/websocket"
 }
 ```
 
-| Property         | Description                                                                                           | Default Value                       |
-|------------------|-------------------------------------------------------------------------------------------------------|-------------------------------------|
-| `apiUrl`         | The URL pointing to the running `spv-wallet-web-backend`, to which this frontend should connect.      | `http://localhost:3002`             |
-| `wsUrl`          | The URL pointing to endpoint in `spv-wallet-web-backend`, used for establishing websocket connection. | `ws://localhost:3002/api/websocket` |
-| `paymailDomain`  | The paymail domain used to provide a user of this app with their paymail address for BSV transfers.   | `example.com`                       |
+| Property | Description                                                                                           | Default Value                       |
+| -------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `apiUrl` | The URL pointing to the running `spv-wallet-web-backend`, to which this frontend should connect.      | `http://localhost:3002`             |
+| `wsUrl`  | The URL pointing to endpoint in `spv-wallet-web-backend`, used for establishing websocket connection. | `ws://localhost:3002/api/websocket` |
 
 You can customize these properties in the `env-config.json` file to fit your specific deployment environment.

src/App.tsx

@@ -3,7 +3,6 @@ import { LoginPage } from '@/views/LoginPage'
 import { TermsAndConditions } from '@/views/TermsAndConditions'
 import { PrivacyPolicy } from '@/views/PrivacyPolicy'
 import { SignupPage } from '@/views/SignupPage'
-import { GlobalStyles } from '@/styles'
 import { Header } from '@/components/_layout/Header'
 import { Main } from '@/components/_layout/Main'
 import { Footer } from '@/components/_layout/Footer'
@@ -117,7 +116,6 @@ export const App = () => {
 
   return (
     <>
-      <GlobalStyles />
       <ToastContainer theme="dark" />
 
       {loading ? (

src/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import { Component, ErrorInfo, PropsWithChildren } from 'react'
+import { ErrorBar } from './components/ErrorBar'
+import styled from '@emotion/styled'
+
+type ErrorBoundaryState = {
+  hasError: boolean
+}
+
+export class ErrorBoundary extends Component<PropsWithChildren, ErrorBoundaryState> {
+  constructor(props: PropsWithChildren) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(): ErrorBoundaryState | null {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(error, info.componentStack)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Container>
+          <ErrorBar errorMsg="Something went wrong" withReloadButton />
+        </Container>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+const Container = styled.div`
+  padding: 20px;
+`

src/api/requests/GetServerConfig.ts

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+export const getServerConfig = async (apiUrl: string) => {
+  const { data: response } = await axios.get(`${apiUrl}/config`, {
+    withCredentials: false,
+  })
+  return response
+}

src/api/requests/index.ts

@@ -1,3 +1,4 @@
 export * from './GetUser'
 export * from './LoginUser'
 export * from './RegisterUser'
+export * from './GetServerConfig'

src/api/types/index.ts

@@ -1 +1,2 @@
 export * from './user'
+export * from './public_config'

src/api/types/public_config.ts

@@ -0,0 +1,8 @@
+export type ExperimentalConfig = {
+  pike_enabled: boolean
+}
+
+export type ServerConfig = {
+  paymail_domain: string
+  experimental_features: ExperimentalConfig
+}

src/components/ErrorBar/ErrorBar.tsx

@@ -1,17 +1,15 @@
 import ErrorIcon from '@mui/icons-material/Error'
 import { FC } from 'react'
 import { BarWrapper, ErrorText, ReloadButton } from '@/components/ErrorBar/ErrorProps.styles'
-import { useNavigate } from 'react-router-dom'
 
 interface ErrorProps {
   errorMsg: string
   withReloadButton?: boolean
 }
 
 export const ErrorBar: FC<ErrorProps> = ({ errorMsg, withReloadButton }) => {
-  const navigate = useNavigate()
   const reloadHandler = () => {
-    navigate('/')
+    window.location.href = '/'
     window.location.reload()
   }
 

src/hooks/usePaymailDomain.ts

@@ -1,10 +1,5 @@
-import { useConfig } from '@4chain-ag/react-configuration'
+import { useServerConfig } from '@/providers/server_config/hooks'
 
 export const usePaymailDomain = () => {
-  const { config } = useConfig()
-  const domain = config?.paymailDomain
-  if (typeof domain !== 'string') {
-    return 'example.com'
-  }
-  return domain
+  return useServerConfig().paymail_domain
 }

src/main.tsx

@@ -6,18 +6,26 @@ import { ConfigProvider } from '@4chain-ag/react-configuration'
 import { BrowserRouter } from 'react-router-dom'
 import { AutoupdateProvider } from '@/providers/autoupdate'
 import { registerSW } from 'virtual:pwa-register'
+import { ServerConfigProvider } from './providers/server_config/provider'
+import { ErrorBoundary } from './ErrorBoundary'
+import { GlobalStyles } from '@/styles'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <ConfigProvider>
-      <AuthorizationProvider>
-        <AutoupdateProvider>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </AutoupdateProvider>
-      </AuthorizationProvider>
-    </ConfigProvider>
+    <GlobalStyles />
+    <ErrorBoundary>
+      <ConfigProvider>
+        <ServerConfigProvider>
+          <AuthorizationProvider>
+            <AutoupdateProvider>
+              <BrowserRouter>
+                <App />
+              </BrowserRouter>
+            </AutoupdateProvider>
+          </AuthorizationProvider>
+        </ServerConfigProvider>
+      </ConfigProvider>
+    </ErrorBoundary>
   </React.StrictMode>
 )
 

src/providers/server_config/hooks.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+
+import { ServerConfigContext } from './provider'
+
+export const useServerConfig = () => {
+  const ctx = useContext(ServerConfigContext)
+  if (!ctx) {
+    throw new Error('ServerConfig provider is missing')
+  }
+  return ctx
+}

src/providers/server_config/provider.tsx

@@ -0,0 +1,37 @@
+import { ServerConfig } from '@/api'
+import { useApiUrl } from '@/api/apiUrl'
+import { getServerConfig } from '@/api/requests'
+import { FC, PropsWithChildren, createContext, useEffect, useState } from 'react'
+
+export const ServerConfigContext = createContext<ServerConfig>(null as never)
+
+export const ServerConfigProvider: FC<PropsWithChildren> = ({ children }) => {
+  const apiUrl = useApiUrl()
+  const [loading, setLoading] = useState(true)
+  const [serverConfig, setServerConfig] = useState<ServerConfig | null>(null)
+
+  useEffect(() => {
+    if (!apiUrl) {
+      return
+    }
+
+    getServerConfig(apiUrl)
+      .then((response) => {
+        setServerConfig(response)
+      })
+      .catch((e) => {
+        console.error('Error during fetching server config', e)
+      })
+      .finally(() => setLoading(false))
+  }, [apiUrl])
+
+  if (loading) {
+     return null
+  }
+
+  if (!serverConfig) {
+    throw new Error('Cannot fetch server configuration. Please try again later.')
+  }
+
+  return <ServerConfigContext.Provider value={serverConfig}>{children}</ServerConfigContext.Provider>
+}