diff --git a/packages/curve-ui-kit/package.json b/packages/curve-ui-kit/package.json index ca4c2d9f7..1edbe2c74 100644 --- a/packages/curve-ui-kit/package.json +++ b/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", diff --git a/packages/curve-ui-kit/src/features/connect-wallet/ui/ConnectWalletPrompt.tsx b/packages/curve-ui-kit/src/features/connect-wallet/ui/ConnectWalletPrompt.tsx index cb3e3db44..665e60d89 100644 --- a/packages/curve-ui-kit/src/features/connect-wallet/ui/ConnectWalletPrompt.tsx +++ b/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) => ( - state.theme)} - /> + + `url(${getBackgroundUrl(t.key)})`, + backgroundSize: 'contain', + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + }} + > + + {t`Enter Curve`} + + + {description} + + + ) +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 = (slice: { setStateByKey: (key: 'formStatus', value: T) => void formStatus: T diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts index 2e71ebde7..546022475 100644 --- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts +++ b/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 diff --git a/packages/curve-ui-kit/src/themes/generate-themes.ts b/packages/curve-ui-kit/src/themes/generate-themes.ts index c3abd0b5f..5b7bb6759 100644 --- a/packages/curve-ui-kit/src/themes/generate-themes.ts +++ b/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, diff --git a/packages/curve-ui-kit/src/themes/mui-overrides.d.ts b/packages/curve-ui-kit/src/themes/mui-overrides.d.ts index 1dbdbc568..abebf2361 100644 --- a/packages/curve-ui-kit/src/themes/mui-overrides.d.ts +++ b/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 { diff --git a/packages/ui/src/ConnectWalletPrompt/index.tsx b/packages/ui/src/ConnectWalletPrompt/index.tsx deleted file mode 100644 index 5fdd44239..000000000 --- a/packages/ui/src/ConnectWalletPrompt/index.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import styled from 'styled-components' -import React from 'react' -import Image from 'next/image' -import Button from '@mui/material/Button' -import Spinner from '../Spinner' - -import { LogoImg } from '../images' -import { getBackgroundUrl } from 'ui/src/utils' -import { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme' - -type ConnectWalletPromptProps = { - connectWallet: () => void - isLoading: boolean - description: string - connectText: string - loadingText: string - theme: ThemeKey -} - -const ConnectWalletPrompt: React.FC = ({ - connectWallet, - isLoading, - description, - connectText, - loadingText, - theme, -}) => ( - - - - - - Enter Curve - - - -

{description}

- {isLoading ? ( - - ) : ( - - )} -
-
-) - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - padding: var(--spacing-4); - background-color: var(--table--background-color); - max-width: 50rem; - width: 100%; - flex: 1; -` - -const CurveLogo = styled(Image)` - width: 3rem; - height: 3rem; - margin: 0 auto; - @media (min-width: 43.75rem) { - width: 5.5rem; - height: 5.5rem; - } -` - -const ImageWrapper = styled.div` - display: flex; - position: relative; - width: 100%; - flex: 1; -` - -const OverlayWrapper = styled.div` - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -` - -const StyledBackground = styled.img` - width: 1400px; - max-width: 100%; - height: 100%; - object-fit: contain; -` - -const OverlayText = styled.p` - font-size: 2.5rem; - font-weight: bold; - color: inherit; - @media (min-width: 43.75rem) { - font-size: 4rem; - } -` - -const ContentWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - gap: var(--spacing-2); - width: 100%; - margin: 0 auto; -` - -export default ConnectWalletPrompt diff --git a/yarn.lock b/yarn.lock index 7ed54a5d3..4032fbb76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2873,7 +2873,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.25.7": +"@babel/runtime@npm:^7.24.4": version: 7.25.7 resolution: "@babel/runtime@npm:7.25.7" dependencies: @@ -3469,7 +3469,7 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.13.0, @emotion/cache@npm:^11.13.1": +"@emotion/cache@npm:^11.13.0": version: 11.13.1 resolution: "@emotion/cache@npm:11.13.1" dependencies: @@ -3482,6 +3482,19 @@ __metadata: languageName: node linkType: hard +"@emotion/cache@npm:^11.13.5": + version: 11.14.0 + resolution: "@emotion/cache@npm:11.14.0" + dependencies: + "@emotion/memoize": "npm:^0.9.0" + "@emotion/sheet": "npm:^1.4.0" + "@emotion/utils": "npm:^1.4.2" + "@emotion/weak-memoize": "npm:^0.4.0" + stylis: "npm:4.2.0" + checksum: 10c0/3fa3e7a431ab6f8a47c67132a00ac8358f428c1b6c8421d4b20de9df7c18e95eec04a5a6ff5a68908f98d3280044f247b4965ac63df8302d2c94dba718769724 + languageName: node + linkType: hard + "@emotion/hash@npm:^0.9.2": version: 0.9.2 resolution: "@emotion/hash@npm:0.9.2" @@ -3539,16 +3552,16 @@ __metadata: languageName: node linkType: hard -"@emotion/serialize@npm:^1.3.2": - version: 1.3.2 - resolution: "@emotion/serialize@npm:1.3.2" +"@emotion/serialize@npm:^1.3.3": + version: 1.3.3 + resolution: "@emotion/serialize@npm:1.3.3" dependencies: "@emotion/hash": "npm:^0.9.2" "@emotion/memoize": "npm:^0.9.0" "@emotion/unitless": "npm:^0.10.0" - "@emotion/utils": "npm:^1.4.1" + "@emotion/utils": "npm:^1.4.2" csstype: "npm:^3.0.2" - checksum: 10c0/b4873b643721d28b4450f9d77b71e6c8d0109e6825c54fc79e649d2fa438fe4080d2fa696ec8fda421b8e713fcd42306d6197b6121ddd2486ffab8e4b6311ce0 + checksum: 10c0/b28cb7de59de382021de2b26c0c94ebbfb16967a1b969a56fdb6408465a8993df243bfbd66430badaa6800e1834724e84895f5a6a9d97d0d224de3d77852acb4 languageName: node linkType: hard @@ -3616,10 +3629,10 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.4.1": - version: 1.4.1 - resolution: "@emotion/utils@npm:1.4.1" - checksum: 10c0/f4704e0bdf48062fd6eb9c64771c88f521aab1e108a48cb23d65b6438597c63a6945301cef4c43611e79e0e76a304ec5481c31025ea8f573d7ad5423d747602c +"@emotion/utils@npm:^1.4.2": + version: 1.4.2 + resolution: "@emotion/utils@npm:1.4.2" + checksum: 10c0/7d0010bf60a2a8c1a033b6431469de4c80e47aeb8fd856a17c1d1f76bbc3a03161a34aeaa78803566e29681ca551e7bf9994b68e9c5f5c796159923e44f78d9a languageName: node linkType: hard @@ -6343,49 +6356,49 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/core-downloads-tracker@npm:6.1.4" - checksum: 10c0/bfd84a726c883dd681b2cda13b977eb6646c1da66ea59905dbe7b857ec4ac86576a318eb116d54633e7c479aecb52fe0c75fb957f1b6081a6c8857dd5ce4c5b9 +"@mui/core-downloads-tracker@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/core-downloads-tracker@npm:6.4.1" + checksum: 10c0/5c35592eecb6b9b64b23003975a8ce20fadb9e9b712a78dd552b5ea835d06e8e4d7b7cb84f471f5658b5285de317a860b40597ad3c5e494e84f0ae0daf35fd6b languageName: node linkType: hard -"@mui/icons-material@npm:^6.1.4": - version: 6.1.6 - resolution: "@mui/icons-material@npm:6.1.6" +"@mui/icons-material@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/icons-material@npm:6.4.1" dependencies: "@babel/runtime": "npm:^7.26.0" peerDependencies: - "@mui/material": ^6.1.6 + "@mui/material": ^6.4.1 "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10c0/a6eb10be3cc356fd404febf29a3b26fa63b6b09d3148736fb05279954905186e9804869ff18220840ae92dbdeddfd407c2d0c72b9e165e01fd6bbc620b6b39d7 + checksum: 10c0/f551aea11f0c3a6ff0336333e1cf28b69d7965e5984643067e5f8563eabf1434dee910c9b4beb530f785f191b0ec14520d9c41fd8ee6649f4f8d26f831f02ba8 languageName: node linkType: hard -"@mui/material@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/material@npm:6.1.4" +"@mui/material@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/material@npm:6.4.1" dependencies: - "@babel/runtime": "npm:^7.25.7" - "@mui/core-downloads-tracker": "npm:^6.1.4" - "@mui/system": "npm:^6.1.4" - "@mui/types": "npm:^7.2.18" - "@mui/utils": "npm:^6.1.4" + "@babel/runtime": "npm:^7.26.0" + "@mui/core-downloads-tracker": "npm:^6.4.1" + "@mui/system": "npm:^6.4.1" + "@mui/types": "npm:^7.2.21" + "@mui/utils": "npm:^6.4.1" "@popperjs/core": "npm:^2.11.8" - "@types/react-transition-group": "npm:^4.4.11" + "@types/react-transition-group": "npm:^4.4.12" clsx: "npm:^2.1.1" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" - react-is: "npm:^18.3.1" + react-is: "npm:^19.0.0" react-transition-group: "npm:^4.4.5" peerDependencies: "@emotion/react": ^11.5.0 "@emotion/styled": ^11.3.0 - "@mui/material-pigment-css": ^6.1.4 + "@mui/material-pigment-css": ^6.4.1 "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -6398,16 +6411,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10c0/3729e56129b27706ebfab67428035dc7f0136dfd745281b467c7da07e78248cc8e2f36939cd6c33967fd565c5b5eff336629e3f7a2d877e9b176d24df67c9c81 + checksum: 10c0/c5ad8ab4339e145cac815cd9fdd9c909d5e2e5edf4997b8afe5edc320f3a020ddb857b5939f6a4453a34d996e3f334804c3858c5dc5f0bfede087e7d6b5e574e languageName: node linkType: hard -"@mui/private-theming@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/private-theming@npm:6.1.4" +"@mui/private-theming@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/private-theming@npm:6.4.1" dependencies: - "@babel/runtime": "npm:^7.25.7" - "@mui/utils": "npm:^6.1.4" + "@babel/runtime": "npm:^7.26.0" + "@mui/utils": "npm:^6.4.1" prop-types: "npm:^15.8.1" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -6415,17 +6428,17 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10c0/37c81ca4529afbec2a4710d4dfa1597a5f9a33ff3ae775fa68474f86b223ed4ab953526e49883d77638ad62f0c944716c2b0dc58a105624ca91fe60a633e3b4a + checksum: 10c0/5b6936e6dff6218373579f901aabba01eea1953e97a5b4b695736aeebca2d39fc7c2b4d0e54ab064d1ba99a6ffce0d907098791ecec28795f7da25c1bd0d33cb languageName: node linkType: hard -"@mui/styled-engine@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/styled-engine@npm:6.1.4" +"@mui/styled-engine@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/styled-engine@npm:6.4.0" dependencies: - "@babel/runtime": "npm:^7.25.7" - "@emotion/cache": "npm:^11.13.1" - "@emotion/serialize": "npm:^1.3.2" + "@babel/runtime": "npm:^7.26.0" + "@emotion/cache": "npm:^11.13.5" + "@emotion/serialize": "npm:^1.3.3" "@emotion/sheet": "npm:^1.4.0" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" @@ -6438,19 +6451,19 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: 10c0/ce8f53a704aa607152ef5ef25d95bdd5c4399f7dbf240acd6e4057c24d84536bb3c884fcb13c5e88d87dbfff42935c82af2e63800ba033ad481847b1967ccf52 + checksum: 10c0/bff35147ca9ef586679b53786d840e98837f0c1e5bf10a3510d4b2b68c340ae4ab69befe94b69ef25f6846bada5b3c355d25fa3a179d1598499e28c51f28d5d2 languageName: node linkType: hard -"@mui/system@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/system@npm:6.1.4" +"@mui/system@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/system@npm:6.4.1" dependencies: - "@babel/runtime": "npm:^7.25.7" - "@mui/private-theming": "npm:^6.1.4" - "@mui/styled-engine": "npm:^6.1.4" - "@mui/types": "npm:^7.2.18" - "@mui/utils": "npm:^6.1.4" + "@babel/runtime": "npm:^7.26.0" + "@mui/private-theming": "npm:^6.4.1" + "@mui/styled-engine": "npm:^6.4.0" + "@mui/types": "npm:^7.2.21" + "@mui/utils": "npm:^6.4.1" clsx: "npm:^2.1.1" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" @@ -6466,39 +6479,39 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10c0/766f1c695254df54b06de1af231cdf30752f71a79181edd4c24044405144b7a72c4c23248155f4041999993aa4f568878eccd130c100b4b332e7dd6b322dfd75 + checksum: 10c0/34d731fb5faf1a6242c9faca5672a4b8722ac97cf5d1fd58cf85cce093cfbd2249ed57dd4c33e8f3b879c611e0fab56bb9e0e8fc1b7c8a49cbe4dd39ba32f98d languageName: node linkType: hard -"@mui/types@npm:^7.2.18": - version: 7.2.18 - resolution: "@mui/types@npm:7.2.18" +"@mui/types@npm:^7.2.21": + version: 7.2.21 + resolution: "@mui/types@npm:7.2.21" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10c0/338404bdef7c7f9ebcd389ebbf429c44d2cc9c25c65d8669dc900a24b2c8718240482273bf6cd953578965e3838ad40a8e7376c71d3d9146be3afb88bff1b67a + checksum: 10c0/c0038ae402a3cfb2805a19167362fb5ac2ca1403f0ef3dad688d1e2276afe757b69d5fb1e3af4cd0e985b9221d287fd863c5b00f29fd07a276c7de9e3423a0f3 languageName: node linkType: hard -"@mui/utils@npm:^6.1.4": - version: 6.1.4 - resolution: "@mui/utils@npm:6.1.4" +"@mui/utils@npm:^6.4.1": + version: 6.4.1 + resolution: "@mui/utils@npm:6.4.1" dependencies: - "@babel/runtime": "npm:^7.25.7" - "@mui/types": "npm:^7.2.18" - "@types/prop-types": "npm:^15.7.13" + "@babel/runtime": "npm:^7.26.0" + "@mui/types": "npm:^7.2.21" + "@types/prop-types": "npm:^15.7.14" clsx: "npm:^2.1.1" prop-types: "npm:^15.8.1" - react-is: "npm:^18.3.1" + react-is: "npm:^19.0.0" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10c0/cac4f05904897c28444e7ef2a6891678d36c0a8fae921ccacebcd7b53da99e4c6cab05669328fdabff624313de68f1b5bcd427cba36024b6c3505b5ee945eb05 + checksum: 10c0/c0cfb8737db7c5709ce35ebdf739c5014914a1344e1b305d13a75b061b970656777eaf01f6fbdb8f209da91c086ab36dd3f5ddc1c94237c5868a383cdd1aad81 languageName: node linkType: hard @@ -10687,10 +10700,10 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:^15.7.13": - version: 15.7.13 - resolution: "@types/prop-types@npm:15.7.13" - checksum: 10c0/1b20fc67281902c6743379960247bc161f3f0406ffc0df8e7058745a85ea1538612109db0406290512947f9632fe9e10e7337bf0ce6338a91d6c948df16a7c61 +"@types/prop-types@npm:^15.7.14": + version: 15.7.14 + resolution: "@types/prop-types@npm:15.7.14" + checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1 languageName: node linkType: hard @@ -10717,12 +10730,12 @@ __metadata: languageName: node linkType: hard -"@types/react-transition-group@npm:^4.4.11": - version: 4.4.11 - resolution: "@types/react-transition-group@npm:4.4.11" - dependencies: - "@types/react": "npm:*" - checksum: 10c0/8fbf0dcc1b81985cdcebe3c59d769fe2ea3f4525f12c3a10a7429a59f93e303c82b2abb744d21cb762879f4514969d70a7ab11b9bf486f92213e8fe70e04098d +"@types/react-transition-group@npm:^4.4.12": + version: 4.4.12 + resolution: "@types/react-transition-group@npm:4.4.12" + peerDependencies: + "@types/react": "*" + checksum: 10c0/0441b8b47c69312c89ec0760ba477ba1a0808a10ceef8dc1c64b1013ed78517332c30f18681b0ec0b53542731f1ed015169fed1d127cc91222638ed955478ec7 languageName: node linkType: hard @@ -15141,9 +15154,9 @@ __metadata: "@emotion/styled": "npm:^11.13.0" "@lingui/detect-locale": "npm:^4.6.0" "@lingui/react": "npm:^4.6.0" - "@mui/icons-material": "npm:^6.1.4" - "@mui/material": "npm:^6.1.4" - "@mui/utils": "npm:^6.1.4" + "@mui/icons-material": "npm:^6.4.1" + "@mui/material": "npm:^6.4.1" + "@mui/utils": "npm:^6.4.1" "@safe-global/safe-apps-provider": "npm:^0.18.3" "@safe-global/safe-apps-sdk": "npm:^9.1.0" "@storybook/addon-a11y": "npm:^8.3.5" @@ -24059,6 +24072,13 @@ __metadata: languageName: node linkType: hard +"react-is@npm:^19.0.0": + version: 19.0.0 + resolution: "react-is@npm:19.0.0" + checksum: 10c0/d1be8e8500cf04f76df71942a21ef3a71266397a383d7ec8885f35190df818d35c65efd35aed7be47a89ad99aaff2c52e0c4e39e8930844a6b997622e50625a8 + languageName: node + linkType: hard + "react-lifecycles-compat@npm:^3.0.4": version: 3.0.4 resolution: "react-lifecycles-compat@npm:3.0.4"