From 7665e00d90b0f93d0dc587fb8d969353820787d7 Mon Sep 17 00:00:00 2001
From: nevendiulgerov <neven.diulgerov@gmail.com>
Date: Tue, 1 Aug 2023 11:26:53 +0300
Subject: [PATCH 1/2] fix(explorer): Fix storybooks

---
 .../{withColorMode.tsx => ColorMode.tsx}      |  4 +--
 apps/staking/.storybook/main.js               |  1 -
 apps/staking/.storybook/preview.tsx           | 30 ++++++++-----------
 packages/ui/.storybook/main.js                |  3 +-
 4 files changed, 16 insertions(+), 22 deletions(-)
 rename apps/staking/.storybook/{withColorMode.tsx => ColorMode.tsx} (89%)

diff --git a/apps/staking/.storybook/withColorMode.tsx b/apps/staking/.storybook/ColorMode.tsx
similarity index 89%
rename from apps/staking/.storybook/withColorMode.tsx
rename to apps/staking/.storybook/ColorMode.tsx
index 0d441bc4..56420cec 100644
--- a/apps/staking/.storybook/withColorMode.tsx
+++ b/apps/staking/.storybook/ColorMode.tsx
@@ -12,10 +12,10 @@
 import { useEffect } from 'react';
 import { useColorMode } from '@chakra-ui/react';
 
-export default (Story: Function, { globals: { theme = 'light' } }) => {
+export default ({ globals: { theme = 'light' } }) => {
     const { colorMode, setColorMode } = useColorMode();
     useEffect(() => {
         if (colorMode !== theme) setColorMode(theme);
     }, [theme, colorMode]);
-    return <Story />;
+    return null;
 };
diff --git a/apps/staking/.storybook/main.js b/apps/staking/.storybook/main.js
index eed1a025..7a7d6162 100644
--- a/apps/staking/.storybook/main.js
+++ b/apps/staking/.storybook/main.js
@@ -45,7 +45,6 @@ module.exports = {
                               /node_modules/.test(filename) &&
                               !/@chakra-ui/.test(filename) &&
                               !/@zag-js/.test(filename) &&
-                              !/@zag-js/.test(filename) &&
                               !/ethers/.test(filename) &&
                               !/@walletconnect/.test(filename) &&
                               !/@web3modal/.test(filename) &&
diff --git a/apps/staking/.storybook/preview.tsx b/apps/staking/.storybook/preview.tsx
index 88d3043b..fb374ce5 100644
--- a/apps/staking/.storybook/preview.tsx
+++ b/apps/staking/.storybook/preview.tsx
@@ -19,8 +19,8 @@ import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { withPerformance } from 'storybook-addon-performance';
 import Web3Container from '../src/components/Web3Container';
 import theme from '../src/styles/theme';
-import withColorMode from './withColorMode';
 import withFeatureFlags from './withFeatureFlags';
+import ColorMode from './ColorMode';
 
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -53,21 +53,15 @@ export const globalTypes = {
     },
 };
 
-const withChakra = (Story: Function, context: StoryContext) => {
-    return (
-        <ChakraProvider resetCSS theme={theme}>
-            <Fonts />
-            <Web3Container>
-                <SelectedChain />
-                <Story />
-            </Web3Container>
-        </ChakraProvider>
-    );
-};
+const withChakra = (Story: Function, context: StoryContext) => (
+    <ChakraProvider resetCSS theme={theme}>
+        <ColorMode globals={context.globals} />
+        <Fonts />
+        <Web3Container>
+            <SelectedChain />
+            <Story />
+        </Web3Container>
+    </ChakraProvider>
+);
 
-export const decorators = [
-    withColorMode,
-    withChakra,
-    withPerformance,
-    withFeatureFlags,
-];
+export const decorators = [withChakra, withPerformance, withFeatureFlags];
diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index faf0db18..f6aa7401 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -36,7 +36,8 @@ module.exports = {
                               /node_modules/.test(filename) &&
                               !/@chakra-ui/.test(filename) &&
                               !/@zag-js/.test(filename) &&
-                              !/ethers/.test(filename)
+                              !/ethers/.test(filename) &&
+                              !/@walletconnect/.test(filename)
                           );
                       },
                   }

From a57805c158f4a70eedf6e22b87c6e77399ffc146 Mon Sep 17 00:00:00 2001
From: Bruno Menezes <brunodmenezes@gmail.com>
Date: Wed, 2 Aug 2023 06:29:44 +1200
Subject: [PATCH 2/2] fix(package/ui): Add dummy wallet-connect project id for
 storybook

---
 packages/ui/.storybook/main.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index f6aa7401..bdbced23 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -17,6 +17,10 @@ module.exports = {
         postcss: false,
         buildStoriesJson: true,
     },
+    env: (config) => ({
+        ...config,
+        NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: 'DUMMY_WALLETCONNECT_PROJECT_ID',
+    }),
     stories: [
         '../src/stories/**/*.stories.mdx',
         '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',