feat: add shared ui lib and refactor wallet menu

Author: mmioana

.npmrc

@@ -1,2 +1,3 @@
 public-hoist-pattern[]=*import-in-the-middle*
 public-hoist-pattern[]=*require-in-the-middle*
+@jumperexchange:registry=https://npm.pkg.github.com

.storybook/main.ts

@@ -17,6 +17,12 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ['../public'],
+  refs: {
+    'shared-ui': {
+      title: 'Shared UI',
+      url: 'https://jumper-shared-ui.vercel.app',
+    },
+  },
   viteFinal(config) {
     config.define = {
       ...(config.define || {}),

.storybook/withProviders.tsx

@@ -5,6 +5,7 @@ import { DefaultThemeProvider } from '../src/providers/ThemeProvider/DefaultThem
 import { MUIThemeProvider } from '../src/providers/ThemeProvider/MUIThemeProvider';
 import TranslationsProvider from '../src/providers/TranslationProvider';
 import { WalletProvider } from '../src/providers/WalletProvider/WalletProvider';
+import { JumperUIProvider } from '../src/providers/JumperUIProvider/JumperUIProvider';
 import { SettingsStoreProvider } from '../src/stores/settings';
 import initTranslations from '../src/app/i18n';
 import { defaultNS, fallbackLng, namespaces } from '../src/i18n';
@@ -50,17 +51,19 @@ export const withProviders = (Story: () => ReactNode, context) => {
           locale={fallbackLng}
           resources={resources}
         >
-          <DefaultThemeProvider themes={mockThemes} activeTheme={activeTheme}>
-            <WalletProvider>
-              <MUIThemeProvider>
-                <SettingsStoreProvider>
-                  <ThemeBridge theme={activeTheme}>
-                    <Story {...context} />
-                  </ThemeBridge>
-                </SettingsStoreProvider>
-              </MUIThemeProvider>
-            </WalletProvider>
-          </DefaultThemeProvider>
+          <JumperUIProvider>
+            <DefaultThemeProvider themes={mockThemes} activeTheme={activeTheme}>
+              <WalletProvider>
+                <MUIThemeProvider>
+                  <SettingsStoreProvider>
+                    <ThemeBridge theme={activeTheme}>
+                      <Story {...context} />
+                    </ThemeBridge>
+                  </SettingsStoreProvider>
+                </MUIThemeProvider>
+              </WalletProvider>
+            </DefaultThemeProvider>
+          </JumperUIProvider>
         </TranslationsProvider>
       </ReactQueryProvider>
     </NuqsAdapter>

package.json

@@ -23,6 +23,7 @@
     "@fingerprintjs/fingerprintjs": "^5.0.1",
     "@formatjs/intl-localematcher": "^0.8.2",
     "@intercom/messenger-js-sdk": "^0.0.18",
+    "@jumperexchange/shared-ui": "^0.5.6",
     "@lifi/explorer": "0.6.3",
     "@lifi/sdk": "^4.0.0-beta.7",
     "@lifi/sdk-provider-bitcoin": "^4.0.0-beta.7",

pnpm-lock.yaml

@@ -23,6 +23,7 @@ import { MUIThemeProvider } from '@/providers/ThemeProvider/MUIThemeProvider';
 import TranslationsProvider from '@/providers/TranslationProvider';
 import { WalletProvider } from '@/providers/WalletProvider/WalletProvider';
 import { PortfolioProvider } from '@/providers/PortfolioProvider/PortfolioProvider';
+import { JumperUIProvider } from '@/providers/JumperUIProvider/JumperUIProvider';
 import { getMiniAppSettings } from '../lib/getMiniAppSettings';
 import {
   baseMiniApp,
@@ -230,19 +231,21 @@ export default async function RootLayout({
               >
                 <WalletProvider>
                   <MUIThemeProvider>
-                    <SettingsStoreProvider>
-                      <NuqsAdapter>
-                        <PortfolioProvider>
-                          <Suspense>
-                            <ReferrerCapture />
-                            <FeatureFlagsBootstrap />
-                          </Suspense>
-                          <NavbarWrapper />
-                          <IntercomProvider />
-                          <main>{children}</main>
-                        </PortfolioProvider>
-                      </NuqsAdapter>
-                    </SettingsStoreProvider>
+                    <JumperUIProvider>
+                      <SettingsStoreProvider>
+                        <NuqsAdapter>
+                          <PortfolioProvider>
+                            <Suspense>
+                              <ReferrerCapture />
+                              <FeatureFlagsBootstrap />
+                            </Suspense>
+                            <NavbarWrapper />
+                            <IntercomProvider />
+                            <main>{children}</main>
+                          </PortfolioProvider>
+                        </NuqsAdapter>
+                      </SettingsStoreProvider>
+                    </JumperUIProvider>
                   </MUIThemeProvider>
                 </WalletProvider>
               </DefaultThemeProvider>