refactor: convert ConnectWalletPrompt to mui

packages/curve-ui-kit/package.json

@@ -16,9 +16,9 @@
     "@emotion/styled": "^11.13.0",
     "@lingui/detect-locale": "^4.6.0",
     "@lingui/react": "^4.6.0",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
-    "@mui/utils": "^6.1.4",
+    "@mui/icons-material": "^6.4.1",
+    "@mui/material": "^6.4.1",
+    "@mui/utils": "^6.4.1",
     "@safe-global/safe-apps-provider": "^0.18.3",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@tanstack/query-sync-storage-persister": "^5.59.0",

packages/curve-ui-kit/src/features/connect-wallet/ui/ConnectWalletPrompt.tsx

@@ -1,5 +1,13 @@
-import { useUserProfileStore } from '@ui-kit/features/user-profile'
-import ConnectWallet from '@ui/ConnectWalletPrompt'
+import React from 'react'
+import { getBackgroundUrl } from '@ui/utils'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import { LogoImg } from '@ui/images'
+import { styled } from '@mui/material/styles'
+import NextImage from 'next/image'
+import Typography from '@mui/material/Typography'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { t } from '@lingui/macro'
 
 type ConnectWalletPromptProps = {
   description: string
@@ -16,16 +24,56 @@ export const ConnectWalletPrompt = ({
   connectWallet,
   isLoading,
 }: ConnectWalletPromptProps) => (
-  <ConnectWallet
-    connectWallet={connectWallet}
-    description={description}
-    connectText={connectText}
-    loadingText={loadingText}
-    isLoading={isLoading}
-    theme={useUserProfileStore((state) => state.theme)}
-  />
+  <Stack
+    padding={7}
+    spacing={8}
+    width={SizesAndSpaces.MaxWidth.connectWallet}
+    maxWidth="100%"
+    sx={{
+      backgroundColor: 'var(--table--background-color)',
+    }}
+  >
+    <Stack
+      spacing={3}
+      paddingBlock={8}
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        backgroundImage: (t) => `url(${getBackgroundUrl(t.key)})`,
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      <CurveLogo src={LogoImg} alt="Curve Logo" />
+      <Typography variant="headingXxl">{t`Enter Curve`}</Typography>
+    </Stack>
+    <Stack spacing={3} alignItems="center">
+      <Typography variant="bodyMRegular">{description}</Typography>
+      <Button
+        size="large"
+        color="primary"
+        onClick={connectWallet}
+        loading={isLoading}
+        loadingPosition="start"
+        data-testid={`btn-connect-prompt${isLoading ? '-loading' : ''}`}
+      >
+        {isLoading ? loadingText : connectText}
+      </Button>
+    </Stack>
+  </Stack>
 )
 
+const CurveLogo = styled(NextImage)({
+  width: '3rem',
+  height: '3rem',
+  margin: '0 auto',
+  '@media (min-width: 43.75rem)': {
+    width: '5.5rem',
+    height: '5.5rem',
+  },
+})
+
 export const setMissingProvider = <T extends { step: string; formProcessing?: boolean; error: string }>(slice: {
   setStateByKey: (key: 'formStatus', value: T) => void
   formStatus: T

packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts

@@ -274,6 +274,7 @@ export const SizesAndSpaces = {
     tableTitle: '67rem', // 1072px
     table: '96rem', // 1536px
     footer: '96rem', // 1536px
+    connectWallet: '50rem', // 800px
   },
   MaxHeight: {
     popover: '17rem', // 272px

packages/curve-ui-kit/src/themes/generate-themes.ts

@@ -13,6 +13,7 @@ const generateTheme = (theme: ThemeKey, options: DesignOptions = {}): Theme => {
   const typography = createTypography(design)
   return createMuiTheme({
     ...basicMuiTheme,
+    key: theme,
     design: { ...design, options },
     palette: createPalette(paletteMode(theme, options), design),
     typography,

packages/curve-ui-kit/src/themes/mui-overrides.d.ts

@@ -1,12 +1,15 @@
-import { DesignSystem, DesignOptions } from './design'
+import type { DesignSystem, DesignOptions } from './design'
+import type { ThemeKey } from './basic-theme'
 
 declare module '@mui/material/styles' {
   interface Theme {
     design: DesignSystem & { options: DesignOptions }
+    key: ThemeKey
   }
   // allow configuration using `createTheme()`
   interface ThemeOptions {
     design?: DesignSystem & { options: DesignOptions }
+    key?: ThemeKey
   }
 
   interface TypeText {