Merge pull request #20 from subsquid/develop

release

.github/workflows/build.yaml

@@ -50,7 +50,7 @@ jobs:
               echo "::set-output name=app_env::dev"
               echo "::set-output name=wc_project_id::ec2facac9eaaca7cc0584baadc935c01"
               echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v1/graphql"
-              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/v/v1/graphql"
+              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/v/v2/graphql"
               echo "::set-output name=enable_demo_features::true"
           fi
         env:

src/App.tsx

@@ -12,17 +12,18 @@ import { Alert } from '@components/Alert';
 import { wagmiConfig } from '@network/config';
 
 import { AppRoutes } from './AppRoutes';
-import { useCreateTheme, useThemeState } from './theme';
+import { useCreateRainbowKitTheme, useCreateTheme, useThemeState } from './theme';
 
 function App() {
   const [themeName] = useThemeState();
   const theme = useCreateTheme(themeName);
+  const rainbowkitTheme = useCreateRainbowKitTheme(themeName);
 
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <RainbowKitProvider modalSize="compact">
+          <RainbowKitProvider modalSize="compact" theme={rainbowkitTheme}>
             <SnackbarProvider
               hideIconVariant
               preventDuplicate

src/components/Table/BorderedTable.tsx

@@ -44,7 +44,7 @@ export const BorderedTable = styled(Table)(({ theme }) => ({
 
   '& tr.hoverable:hover td, & tr.hovered td': {
     cursor: 'pointer',
-    background: theme.palette.accent.main,
+    background: theme.palette.action.hover,
   },
 
   '& thead th:first-of-type': { borderTopLeftRadius: borderRadius },

src/theme/index.ts

@@ -1 +1,2 @@
 export * from './theme';
+export * from './rainbowkit';

src/theme/network-light.ts

@@ -2,7 +2,7 @@ import { alpha } from '@mui/system/colorManipulator';
 
 export const NetworkLightTheme = {
   primary: {
-    main: '#000000',
+    main: '#2c2c2c',
     light: '#333333',
     contrastText: '#fff',
   },

src/theme/rainbowkit.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+
+import { lightTheme, Theme } from '@rainbow-me/rainbowkit';
+import { merge } from 'lodash-es';
+
+import { PaletteType, useCreateTheme } from './theme';
+
+export const useCreateRainbowKitTheme = (mode: PaletteType) => {
+  const { palette, typography } = useCreateTheme(mode);
+
+  return useMemo((): Theme => {
+    return merge(lightTheme(), {
+      blurs: {
+        modalOverlay: 'blur(5px)',
+      },
+      colors: {
+        accentColor: palette.accent.contrastText,
+        accentColorForeground: palette.accent.main,
+        actionButtonBorder: 'transparent',
+        actionButtonBorderMobile: 'transparent',
+        actionButtonSecondaryBackground: palette.accent.main,
+        closeButton: palette.text.secondary,
+        closeButtonBackground: 'transparent',
+        error: palette.error.main,
+        generalBorder: palette.divider,
+        menuItemBackground: palette.action.hover,
+        modalBackdrop: 'rgba(166, 166, 166, 0.6)',
+        modalBackground: palette.background.paper,
+        modalBorder: palette.divider,
+        modalText: palette.text.primary,
+        modalTextSecondary: palette.text.secondary,
+        profileActionHover: palette.action.hover,
+        profileForeground: palette.background.content,
+        selectedOptionBorder: 'transparent',
+      },
+      fonts: {
+        body: typography.fontFamily,
+      },
+      radii: {
+        modal: '8px',
+        modalMobile: '8px',
+        actionButton: '4px',
+      },
+      shadows: {
+        dialog: 'none',
+      },
+    } satisfies DeepPartial<Theme>);
+  }, [palette, typography]);
+};
+
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;