feat: set theme (#25)

.github/workflows/docker_build_push.yml

@@ -13,7 +13,7 @@ jobs:
     name: Build and push docker image to GitHub Container Registry
     strategy:
       matrix:
-        environment: [devnet-1]
+        environment: [devnet-1, testnet-1]
     runs-on: ubuntu-latest-16-core
     environment: ${{ matrix.environment }}
     outputs:
@@ -54,14 +54,14 @@ jobs:
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
         build-args: |
-          VITE_EXECUTOR_SERVICE_ENDPOINT=${{ vars.VITE_EXECUTOR_SERVICE_ENDPOINT }}
-          VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS=${{ vars.VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS }}
-          VITE_ERC20_MESSAGING_CONTRACT_ADDRESS=${{ vars.VITE_ERC20_MESSAGING_CONTRACT_ADDRESS }}
-          VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS=${{ vars.VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS }}
-          VITE_TOPOS_SUBNET_ENDPOINT=${{ vars.VITE_TOPOS_SUBNET_ENDPOINT }}
-          VITE_TRACING_OTEL_COLLECTOR_ENDPOINT=${{ vars.VITE_TRACING_OTEL_COLLECTOR_ENDPOINT }}
-          VITE_TRACING_SERVICE_NAME=${{ vars.VITE_TRACING_SERVICE_NAME }}
-          VITE_TRACING_SERVICE_VERSION=${{ vars.VITE_TRACING_SERVICE_VERSION }}
+          VITE_EXECUTOR_SERVICE_ENDPOINT=${{ vars.EXECUTOR_SERVICE_ENDPOINT }}
+          VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS=${{ vars.SUBNET_REGISTRATOR_CONTRACT_ADDRESS }}
+          VITE_ERC20_MESSAGING_CONTRACT_ADDRESS=${{ vars.ERC20_MESSAGING_CONTRACT_ADDRESS }}
+          VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS=${{ vars.TOPOS_CORE_PROXY_CONTRACT_ADDRESS }}
+          VITE_TOPOS_SUBNET_ENDPOINT=${{ vars.TOPOS_SUBNET_ENDPOINT }}
+          VITE_TRACING_OTEL_COLLECTOR_ENDPOINT=${{ vars.TRACING_OTEL_COLLECTOR_ENDPOINT }}
+          VITE_TRACING_SERVICE_NAME=${{ vars.TRACING_SERVICE_NAME }}
+          VITE_TRACING_SERVICE_VERSION=${{ vars.TRACING_SERVICE_VERSION }}
         cache-from: |
           type=registry,ref=${{ env.REGISTRY }}/${{ github.repository }}:build-cache-${{ env.GITHUB_REF_SLUG_URL }}-${{ github.workflow }}
           type=registry,ref=${{ env.REGISTRY }}/${{ github.repository }}:build-cache-main-${{ github.workflow }}

.github/workflows/test.yml

@@ -26,9 +26,9 @@ jobs:
       - name: Run Frontend unit tests
         run: npm run frontend:test
         env:
-          VITE_ERC20_MESSAGING_CONTRACT_ADDRESS: ${{ vars.VITE_ERC20_MESSAGING_CONTRACT_ADDRESS }}
-          VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS: ${{ vars.VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS }}
-          VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS: ${{ vars.VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS }}
+          VITE_ERC20_MESSAGING_CONTRACT_ADDRESS: ${{ vars.ERC20_MESSAGING_CONTRACT_ADDRESS }}
+          VITE_SUBNET_REGISTRATOR_CONTRACT_ADDRESS: ${{ vars.SUBNET_REGISTRATOR_CONTRACT_ADDRESS }}
+          VITE_TOPOS_CORE_PROXY_CONTRACT_ADDRESS: ${{ vars.TOPOS_CORE_PROXY_CONTRACT_ADDRESS }}
 
   unit-backend:
     name: Test/Unit/Backend

packages/frontend/package.json

@@ -30,7 +30,7 @@
     "@opentelemetry/sdk-trace-node": "^1.11.0",
     "@opentelemetry/sdk-trace-web": "^1.11.0",
     "@opentelemetry/semantic-conventions": "^1.11.0",
-    "@topos-protocol/topos-smart-contracts": "^1.2.0",
+    "@topos-protocol/topos-smart-contracts": "^1.2.2",
     "@types/event-source-polyfill": "^1.0.1",
     "antd": "^5.4.0",
     "axios": "^1.0.0",

packages/frontend/src/App.tsx

@@ -1,21 +1,23 @@
+import { ThemeProvider } from '@emotion/react'
 import styled from '@emotion/styled'
-import { Alert, ConfigProvider, Layout as _Layout, theme } from 'antd'
+import { Alert, Layout as _Layout } from 'antd'
 import { BigNumber, ethers } from 'ethers'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import Header from './components/Header'
 import MultiStepForm from './components/MultiStepForm'
 import { ErrorsContext } from './contexts/errors'
 import { SubnetsContext } from './contexts/subnets'
-
-import 'antd/dist/reset.css'
 import useRegisteredSubnets from './hooks/useRegisteredSubnets'
+import useTheme from './hooks/useTheme'
 import { toposCoreContract } from './contracts'
 import { SubnetWithId } from './types'
 import { sanitizeURLProtocol } from './utils'
 
 const { Content: _Content } = _Layout
 
+import 'antd/dist/reset.css'
+
 const Errors = styled.div`
   margin: 1rem auto;
   width: 80%;
@@ -32,6 +34,7 @@ const Content = styled(_Content)`
 `
 
 const App = () => {
+  const theme = useTheme()
   const [errors, setErrors] = useState<string[]>([])
   const [subnets, setSubnets] = useState<SubnetWithId[]>()
   const { loading, registeredSubnets } = useRegisteredSubnets()
@@ -77,16 +80,7 @@ const App = () => {
   )
 
   return (
-    <ConfigProvider
-      theme={{
-        algorithm: theme.darkAlgorithm,
-        components: {
-          Layout: {
-            colorBgHeader: 'transparent',
-          },
-        },
-      }}
-    >
+    <ThemeProvider theme={theme}>
       <ErrorsContext.Provider value={{ setErrors }}>
         <SubnetsContext.Provider
           value={{
@@ -107,7 +101,7 @@ const App = () => {
           </Layout>
         </SubnetsContext.Provider>
       </ErrorsContext.Provider>
-    </ConfigProvider>
+    </ThemeProvider>
   )
 }
 

packages/frontend/src/hooks/useTheme.ts

@@ -0,0 +1,9 @@
+import { theme } from 'antd'
+
+export default function useTheme() {
+  const { token } = theme.useToken()
+  token.colorPrimary = '#27c794'
+  token.colorPrimaryHover = '#15523f'
+
+  return token
+}

packages/frontend/src/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { css, Global } from '@emotion/react'
+import { ConfigProvider, theme } from 'antd'
 import { MetaMaskProvider } from 'metamask-react'
 import ReactDOM from 'react-dom/client'
 
@@ -10,7 +11,25 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   // <React.StrictMode>
   <MetaMaskProvider>
-    <App />
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        components: {
+          Layout: {
+            colorBgHeader: 'transparent',
+          },
+        },
+      }}
+    >
+      <Global
+        styles={css`
+          html {
+            background-color: black;
+          }
+        `}
+      />
+      <App />
+    </ConfigProvider>
   </MetaMaskProvider>
   // </React.StrictMode>
 )