Merge branch 'main' into improve-peerDeps

lifinance · Dec 20, 2024 · 66e151b · 66e151b
2 parents 13111be + 12c632d
commit 66e151b
Show file tree

Hide file tree

Showing 105 changed files with 2,144 additions and 824 deletions.
diff --git a/examples/deposit-flow/package.json b/examples/deposit-flow/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@lifi/sdk": "^3.4.4",
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^5.16.11",
+    "@mui/material": "^6.2.0",
     "@tanstack/react-query": "^5.62.8",
     "events": "^3.3.0",
     "react": "^18.3.1",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/events": "^3.0.3",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",

diff --git a/examples/dynamic/package.json b/examples/dynamic/package.json
@@ -16,7 +16,7 @@
     "@dynamic-labs/wagmi-connector": "^3.9.4",
     "@lifi/wallet-management": "workspace:^",
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^5.16.11",
+    "@mui/material": "^6.2.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.98.0",
@@ -28,7 +28,7 @@
     "wagmi": "^2.14.3"
   },
   "devDependencies": {
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "globals": "^15.14.0",

diff --git a/examples/nextjs-page-router/package.json b/examples/nextjs-page-router/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2"
   }

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2"
   }

diff --git a/examples/rainbowkit/package.json b/examples/rainbowkit/package.json
@@ -18,7 +18,7 @@
     "wagmi": "^2.14.3"
   },
   "devDependencies": {
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "typescript": "^5.7.2",

diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@remix-run/dev": "^2.15.1",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2",
     "vite": "^6.0.5",

diff --git a/examples/svelte/package.json b/examples/svelte/package.json
@@ -14,7 +14,7 @@
     "@tsconfig/svelte": "^5.0.4",
     "@types/events": "^3.0.3",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/sdk": "^3.4.4",
+    "@lifi/sdk": "^3.4.3",
     "@lifi/wallet-management": "^3.4.7",
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^5.16.11",
+    "@mui/material": "^6.2.0",
     "@tanstack/react-query": "^5.62.8",
     "@wagmi/connectors": "^5.7.0",
     "events": "^3.3.0",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@types/events": "^3.0.3",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",

diff --git a/examples/zustand-widget-config/package.json b/examples/zustand-widget-config/package.json
@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^5.16.11",
+    "@mui/material": "^6.2.0",
     "@tanstack/react-query": "^5.62.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "wagmi": "^2.14.3",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
     "globals": "^15.14.0",

diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/events": "^3.0.3",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "cpy-cli": "^5.0.0",
     "fs-extra": "^11.2.0",

diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json
@@ -53,10 +53,10 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@lifi/sdk": "^3.4.4",
-    "@mui/icons-material": "^5.16.11",
-    "@mui/lab": "5.0.0-alpha.174",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/lab": "6.0.0-beta.20",
+    "@mui/material": "^6.2.0",
+    "@mui/system": "^6.2.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.98.0",
     "@wagmi/core": "^2.16.0",
@@ -75,7 +75,7 @@
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@bigmi/react": ">=0.0.6",
+    "@bigmi/react": ">=0.0.7",
     "@solana/wallet-adapter-react": "^0.15.35",
     "react": ">=18",
     "react-dom": ">=18",

diff --git a/packages/wallet-management/src/components/ListItemButton.tsx b/packages/wallet-management/src/components/ListItemButton.tsx
@@ -4,20 +4,29 @@ import {
   styled,
 } from '@mui/material'
 
-export const ListItemButton = styled(MuiListItemButton)(
-  ({ theme, disabled }) => {
-    const backgroundHoverColor =
-      theme.palette.mode === 'light'
-        ? alpha(theme.palette.common.black, 0.04)
-        : alpha(theme.palette.common.white, 0.04)
-    return {
-      borderRadius: theme.shape.borderRadius,
-      paddingLeft: theme.spacing(1.5),
-      height: 56,
-      '&:hover': {
-        backgroundColor: !disabled && backgroundHoverColor,
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
+  const backgroundHoverColor =
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.04)
+      : alpha(theme.palette.common.white, 0.04)
+  return {
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    '&:hover': {
+      backgroundColor: backgroundHoverColor,
+    },
+    variants: [
+      {
+        props: ({ disabled }) => disabled,
+        style: {
+          opacity: 0.5,
+          cursor: 'auto',
+          '&:hover': {
+            backgroundColor: 'none',
+          },
+        },
       },
-      ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
-    }
+    ],
   }
-)
+})
diff --git a/packages/wallet-management/src/components/WalletMenuContent.tsx b/packages/wallet-management/src/components/WalletMenuContent.tsx
@@ -156,9 +156,19 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
             <ArrowBack />
           </IconButton>
         ) : (
-          <Box height={40} width={40} />
+          <Box
+            sx={{
+              height: 40,
+              width: 40,
+            }}
+          />
         )}
-        <Typography fontWeight={700} margin="auto">
+        <Typography
+          sx={{
+            fontWeight: 700,
+            margin: 'auto',
+          }}
+        >
           {isMultiEcosystem
             ? t('title.selectEcosystem')
             : isConnecting
@@ -199,7 +209,7 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
                 )
               })}
               {/* TODO: show all connected wallets with 'Connected' badge
-              and have this empty screen only when there is no installed wallets at all */}
+            and have this empty screen only when there is no installed wallets at all */}
               {!installedWallets.length ? <WalletMenuContentEmpty /> : null}
             </List>
           </Fade>
@@ -215,12 +225,14 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
           >
             <List sx={{ padding: 0 }}>
               <Box
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
-                flexDirection="column"
-                px={1}
-                pb={2}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'column',
+                  px: 1,
+                  pb: 2,
+                }}
               >
                 <Avatar
                   src={selectedWallet?.icon}
@@ -229,7 +241,13 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
                 >
                   {selectedWallet?.name[0]}
                 </Avatar>
-                <Typography pt={2} textAlign="center" variant="body2">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    pt: 2,
+                    textAlign: 'center',
+                  }}
+                >
                   {t('message.multipleEcosystems', {
                     walletName: selectedWallet?.name,
                   })}
@@ -258,12 +276,14 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
           >
             <List sx={{ padding: 0 }}>
               <Box
-                display="flex"
-                justifyContent="center"
-                alignItems="center"
-                flexDirection="column"
-                px={1}
-                pb={2}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  flexDirection: 'column',
+                  px: 1,
+                  pb: 2,
+                }}
               >
                 <Avatar
                   src={selectedWallet?.icon}
@@ -272,12 +292,24 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
                 >
                   {selectedWallet?.name[0]}
                 </Avatar>
-                <Typography pt={2} textAlign="center" fontWeight={500}>
+                <Typography
+                  sx={{
+                    pt: 2,
+                    textAlign: 'center',
+                    fontWeight: 500,
+                  }}
+                >
                   {t('title.waitingForWallet', {
                     walletName: selectedWallet?.name,
                   })}
                 </Typography>
-                <Typography pt={2} textAlign="center" variant="body2">
+                <Typography
+                  variant="body2"
+                  sx={{
+                    pt: 2,
+                    textAlign: 'center',
+                  }}
+                >
                   {t('message.connecting')}
                 </Typography>
               </Box>

diff --git a/packages/wallet-management/src/components/WalletMenuContentEmpty.tsx b/packages/wallet-management/src/components/WalletMenuContentEmpty.tsx
@@ -15,17 +15,28 @@ export const WalletMenuContentEmpty: React.FC = () => {
         paddingY: 8,
       }}
     >
-      <Typography fontSize={48}>
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
         <Wallet fontSize="inherit" />
       </Typography>
-      <Typography fontSize={18} fontWeight={700}>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
         {t('title.availableWalletsNotFound')}
       </Typography>
       <Typography
-        fontSize={14}
-        color="text.secondary"
-        textAlign="center"
-        mt={2}
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
       >
         {t('message.availableWalletsNotFound')}
       </Typography>

diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -16,10 +16,10 @@
     "@lifi/sdk": "^3.4.4",
     "@lifi/wallet-management": "workspace:*",
     "@lifi/widget": "workspace:*",
-    "@mui/icons-material": "^5.16.11",
-    "@mui/lab": "5.0.0-alpha.174",
-    "@mui/material": "^5.16.11",
-    "@mui/system": "^5.16.8",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/lab": "6.0.0-beta.20",
+    "@mui/material": "^6.2.0",
+    "@mui/system": "^6.2.0",
     "@opensea/seaport-js": "4.0.4",
     "@tanstack/react-query": "^5.62.8",
     "bignumber.js": "^9.1.2",

diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
@@ -13,9 +13,19 @@ export const App = () => {
   const pathnameParams = window.location.pathname.substring(1).split('/')
 
   return (
-    <Box display="flex" height="100vh">
+    <Box
+      sx={{
+        display: 'flex',
+        height: '100vh',
+      }}
+    >
       <CssBaseline />
-      <Box flex={1} margin="auto">
+      <Box
+        sx={{
+          flex: 1,
+          margin: 'auto',
+        }}
+      >
         <LiFiWidget
           contractComponent={
             <NFTOpenSea