Merge branch 'main' into add-vc-component

lifinance · Sep 12, 2024 · f393283 · f393283
2 parents 74f6c0b + d2845b9
commit f393283
Show file tree

Hide file tree

Showing 13 changed files with 429 additions and 402 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.5.2](https://github.com/lifinance/widget/compare/v3.5.1...v3.5.2) (2024-09-11)
+
+
+### Bug Fixes
+
+* widget header with subvariant split ([#298](https://github.com/lifinance/widget/issues/298)) ([c33d42a](https://github.com/lifinance/widget/commit/c33d42abcabaa80c533caae915384dd6d2bc36ab))
+
+### [3.5.1](https://github.com/lifinance/widget/compare/v3.5.0...v3.5.1) (2024-09-10)
+
+
+### Bug Fixes
+
+* make internal explorer optional ([a0f51c6](https://github.com/lifinance/widget/commit/a0f51c6d7664824543ad3f2a6ab672d01ca0a91b))
+
 ## [3.5.0](https://github.com/lifinance/widget/compare/v3.4.4...v3.5.0) (2024-09-10)
 
 

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.5.1-beta.2",
+  "version": "3.5.2",
   "private": true,
   "sideEffects": false,
   "type": "module",

diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-embedded",
-  "version": "1.0.221",
+  "version": "1.0.220",
   "type": "module",
   "scripts": {
     "analyze": "source-map-explorer 'dist/assets/*.js' --no-border-checks",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@lifi/sdk": "^3.2.0",
     "@lifi/wallet-management": "^3.1.5-beta.0",
-    "@lifi/widget": "^3.5.1-beta.2",
+    "@lifi/widget": "^3.5.2",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",

diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground-next",
-  "version": "1.0.221",
+  "version": "1.0.220",
   "scripts": {
     "dev": "next dev -p 3001",
     "build": "next build",
@@ -18,8 +18,8 @@
     "@emotion/styled": "^11.13.0",
     "@lifi/sdk": "^3.2.0",
     "@lifi/wallet-management": "^3.1.5-beta.0",
-    "@lifi/widget": "^3.5.1-beta.2",
-    "@lifi/widget-playground": "^1.0.221",
+    "@lifi/widget": "^3.5.2",
+    "@lifi/widget-playground": "^1.0.220",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@mui/material-nextjs": "^5.16.6",

diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground-vite",
-  "version": "1.0.221",
+  "version": "1.0.220",
   "type": "module",
   "scripts": {
     "analyze": "source-map-explorer 'dist/assets/*.js' --no-border-checks",
@@ -20,8 +20,8 @@
   "dependencies": {
     "@lifi/sdk": "^3.2.0",
     "@lifi/wallet-management": "^3.1.5-beta.0",
-    "@lifi/widget": "^3.5.1-beta.2",
-    "@lifi/widget-playground": "^1.0.221",
+    "@lifi/widget": "^3.5.2",
+    "@lifi/widget-playground": "^1.0.220",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@rainbow-me/rainbowkit": "^2.1.6",

diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget-playground",
-  "version": "1.0.221",
+  "version": "1.0.220",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.5.1-beta.2",
+  "version": "3.5.2",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",

diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -1,10 +1,7 @@
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import {
-  maxHeaderHeight,
-  minHeaderHeight,
-} from '../components/Header/Header.js';
 import { defaultMaxHeight } from '../config/constants.js';
+import { useHeaderHeight } from '../hooks/useHeaderHeight.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
@@ -103,14 +100,10 @@ export const FlexContainer = styled(Container)(({ theme }) => ({
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { variant, elementId, hiddenUI, theme } = useWidgetConfig();
-
+  const { variant, elementId, theme } = useWidgetConfig();
+  const { headerHeight } = useHeaderHeight();
   const positionFixedAdjustment =
-    theme?.header?.position === 'fixed'
-      ? hiddenUI?.includes('walletMenu')
-        ? minHeaderHeight
-        : maxHeaderHeight
-      : 0;
+    theme?.header?.position === 'fixed' ? headerHeight : 0;
 
   return (
     <RelativeContainer

diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx
@@ -1,24 +1,17 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderHeight } from '../../hooks/useHeaderHeight.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
 import { Container } from './Header.style.js';
 import { NavigationHeader } from './NavigationHeader.js';
 import { WalletHeader } from './WalletHeader.js';
 
-export const minHeaderHeight = 64;
-export const maxHeaderHeight = 108;
-
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
   const elementId = useDefaultElementId();
-  const { hiddenUI } = useWidgetConfig();
-
-  const headerHeight = hiddenUI?.includes('walletMenu')
-    ? minHeaderHeight
-    : maxHeaderHeight;
+  const { headerHeight } = useHeaderHeight();
 
   return (
     <Container

diff --git a/packages/widget/src/config/version.ts b/packages/widget/src/config/version.ts
@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.5.1-beta.2';
+export const version = '3.5.2';
diff --git a/packages/widget/src/hooks/useHeaderHeight.ts b/packages/widget/src/hooks/useHeaderHeight.ts
@@ -0,0 +1,20 @@
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+
+export const minHeaderHeight = 64;
+export const maxHeaderHeight = 108;
+export const maxHeaderHeightSubvariantSplit = 136;
+
+export const useHeaderHeight = () => {
+  const { hiddenUI, subvariant } = useWidgetConfig();
+
+  const headerHeight =
+    subvariant === 'split'
+      ? maxHeaderHeightSubvariantSplit
+      : hiddenUI?.includes('walletMenu')
+        ? minHeaderHeight
+        : maxHeaderHeight;
+
+  return {
+    headerHeight,
+  };
+};
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -229,7 +229,8 @@ export interface WidgetConfig {
   tokens?: WidgetTokens;
   languages?: WidgetLanguages;
   languageResources?: LanguageResources;
-  explorerUrls?: Record<number | 'internal', string[]>;
+  explorerUrls?: Record<number, string[]> &
+    Partial<Record<'internal', string[]>>;
 }
 
 export interface WidgetConfigProps {