fix styling on wallet connect box; remove mobile wallets

Author: Joe Bowman

web-ui/bun.lockb

@@ -23,14 +23,14 @@
     "@cosmjs/stargate": "^0.32.4",
     "@cosmos-kit/core": "^2.13.1",
     "@cosmos-kit/cosmostation": "^2.12.0",
-    "@cosmos-kit/keplr": "^2.12.2",
-    "@cosmos-kit/leap": "^2.12.2",
+    "@cosmos-kit/keplr-extension": "^2.12.2",
+    "@cosmos-kit/leap-extension": "^2.12.2",
     "@cosmos-kit/react": "^2.18.0",
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
-    "@interchain-ui/react": "1.24.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@interchain-ui/react": "^1.24.0",
     "@skip-router/core": "^5.2.1",
-    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query": "^4.36.1",
     "@types/crypto-js": "^4.2.2",
     "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.7",
@@ -42,7 +42,7 @@
     "dayjs": "^1.11.13",
     "eslint-plugin-import": "^2.30.0",
     "fast-fuzzy": "^1.12.0",
-    "interchain-query": "1.10.7",
+    "interchain-query": "^1.10.7",
     "long": "^5.2.3",
     "next": "^13.5.7",
     "quicksilverjs": "1.3.8",

web-ui/package.json

@@ -7,10 +7,9 @@ import { Registry } from '@cosmjs/proto-signing';
 import { SigningStargateClientOptions, AminoTypes, GasPrice } from '@cosmjs/stargate';
 import { SignerOptions } from '@cosmos-kit/core';
 import { wallets as cosmostationWallets } from '@cosmos-kit/cosmostation';
-import { wallets as keplrWallets } from '@cosmos-kit/keplr';
-import { wallets as leapWallets } from '@cosmos-kit/leap';
-import { ChainProvider, ThemeCustomizationProps } from '@cosmos-kit/react';
-import { ThemeProvider, useTheme } from '@interchain-ui/react';
+import { wallets as keplrWallets } from '@cosmos-kit/keplr-extension';
+import { wallets as leapWallets } from '@cosmos-kit/leap-extension';
+import { ChainProvider } from '@cosmos-kit/react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { SpeedInsights } from '@vercel/speed-insights/react';
@@ -33,7 +32,6 @@ const queryClient = new QueryClient({
 });
 
 function QuickApp({ Component, pageProps }: AppProps) {
-  const { themeClass } = useTheme();
   const signerOptions: SignerOptions = {
     signingStargate: (chain: Chain | string): SigningStargateClientOptions | undefined => {
       const mergedRegistry = new Registry([...quicksilverProtoRegistry, ...ibcProtoRegistry, ...cosmosProtoRegistry]);
@@ -62,136 +60,9 @@ function QuickApp({ Component, pageProps }: AppProps) {
 
   const walletConnectToken = process.env.NEXT_PUBLIC_WALLET_CONNECT_TOKEN;
 
-  const modalThemeOverrides: ThemeCustomizationProps = {
-    modalContentStyles: {
-      backgroundColor: 'rgba(0,0,0,0.75)',
-      opacity: 0,
-    },
-    overrides: {
-      'connect-modal': {
-        bg: {
-          light: 'rgba(0,0,0,0.75)',
-          dark: 'rgba(32,32,32,0.9)',
-        },
-        activeBg: {
-          light: 'rgba(0,0,0,0.75)',
-          dark: 'rgba(32,32,32,0.9)',
-        },
-        color: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-        focusedBg: {
-          light: 'rgba(0,0,0,0.75)',
-          dark: 'rgba(32,32,32,0.9)',
-        },
-        disabledBg: {
-          light: 'rgba(0,0,0,0.75)',
-          dark: 'rgba(32,32,32,0.9)',
-        },
-      },
-
-      'clipboard-copy-text': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-qr-code-shadow': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      button: {
-        bg: {
-          light: '#FF8000',
-          dark: '#FF8000',
-        },
-      },
-      'connect-modal-head-title': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-wallet-button-label': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-wallet-button-sublogo': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-qr-code-loading': {
-        bg: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-wallet-button': {
-        bg: {
-          light: 'rgba(55,55,55,0.9)',
-          dark: 'rgba(55,55,55,0.9',
-        },
-        hoverBg: {
-          light: '#FF8000',
-          dark: '#FF8000',
-        },
-        borderColor: { light: 'black', dark: 'black' },
-        hoverBorderColor: {
-          light: 'black',
-          dark: 'black',
-        },
-        activeBorderColor: {
-          light: '#FFFFFF',
-          dark: '#FFFFFF',
-        },
-        color: {
-          light: '#000000',
-          dark: '#FFFFFF',
-        },
-        focusedBorderColor: { light: '#FFFFFF', dark: '#FFFFFF' },
-      },
-      'connect-modal-qr-code': {
-        bg: {
-          light: '',
-          dark: 'blue',
-        },
-        color: {
-          light: '#000000',
-          dark: '#000000',
-        },
-      },
-      'connect-modal-install-button': {
-        bg: {
-          light: '#F0F0F0',
-          dark: '#FF8000',
-        },
-      },
-      'connect-modal-qr-code-error': {
-        bg: {
-          light: '#FFEEEE',
-          dark: '#FFFFFF',
-        },
-      },
-      'connect-modal-qr-code-error-button': {
-        bg: {
-          light: '#FFCCCC',
-          dark: '#552222',
-        },
-      },
-    },
-  };
-
   return (
     <LiveZonesProvider>
       <ChakraProvider theme={defaultTheme}>
-        <ThemeProvider>
           <ChainProvider
             endpointOptions={{
               isLazy: true,
@@ -204,7 +75,6 @@ function QuickApp({ Component, pageProps }: AppProps) {
               }), {}),
             }}
             logLevel="NONE"
-            modalTheme={modalThemeOverrides}
             chains={chains}
             assetLists={assets}
             // @ts-ignore
@@ -227,7 +97,7 @@ function QuickApp({ Component, pageProps }: AppProps) {
             <QueryClientProvider client={queryClient}>
               <ReactQueryDevtools initialIsOpen={true} />
 
-              <main id="main" className={themeClass}>
+              <main id="main">
                 <DynamicHeaderSection chainName="quicksilver" />
                 <Box display={{ base: 'none', menu: 'block' }}>
                   <SideHeader />
@@ -252,7 +122,6 @@ function QuickApp({ Component, pageProps }: AppProps) {
               </main>
             </QueryClientProvider>
           </ChainProvider>
-        </ThemeProvider>
       </ChakraProvider>
     </LiveZonesProvider>
   );