@openocean.finance/widget 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openocean.finance/widget",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Openocean Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",

package/src/App.tsx

@@ -18,6 +18,13 @@ export const App = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
         },
       }
     }
+
+    // config.subvariant = 'bridge'
+    // config.subvariantOptions = {
+    //   custom: 'checkout',
+    //   split: 'bridge',
+    // }
+
     return config
   }, [props])
 
@@ -36,7 +43,6 @@ export const App = forwardRef<WidgetDrawer, WidgetProps>((props, ref) => {
       </AppProvider>
     )
   }
-
   return (
     <AppProvider config={config} formRef={props.formRef}>
       <AppDefault />

package/src/components/Header/NavigationHeader.tsx

@@ -18,7 +18,7 @@ import { SettingsButton } from './SettingsButton.js'
 // import { SplitWalletMenuButton } from './WalletHeader.js'
 
 export const NavigationHeader: React.FC = () => {
-  const { hiddenUI, variant } = useWidgetConfig()
+  const { hiddenUI, variant, subvariant } = useWidgetConfig()
   const { navigateBack } = useNavigateBack()
   // const { account } = useAccount()
   const { element, title } = useHeaderStore((state) => state)
@@ -29,8 +29,7 @@ export const NavigationHeader: React.FC = () => {
     : pathname
   const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
   const hasPath = navigationRoutesValues.includes(path)
-  // const splitSubvariant = subvariant === 'split' && !hasPath
-
+  const splitSubvariant = subvariant === 'split' && !hasPath
   return (
     <>
       <HeaderAppBar elevation={0}>
@@ -80,7 +79,14 @@ export const NavigationHeader: React.FC = () => {
           />
         </Routes>
       </HeaderAppBar>
-      <Box sx={{ display: pathname === navigationRoutes.home ? 'block' : 'none' }}>
+      <Box
+        sx={{
+          display:
+            pathname === navigationRoutes.home && splitSubvariant
+              ? 'block'
+              : 'none',
+        }}
+      >
         <NavigationTabs />
       </Box>
     </>

package/src/components/Header/NavigationTabs.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'
+import { HeaderAppBar } from '../Header/Header.style.js'
 import { Tab, Tabs } from '../Tabs/Tabs.style.js'
-import { HeaderAppBar } from './Header.style.js'
 
 export const NavigationTabs = () => {
+  const { subvariant } = useWidgetConfig()
+
   const { t } = useTranslation()
   const [state, setState] = useSplitSubvariantStore((storeState) => [
     storeState.state,
@@ -17,12 +20,19 @@ export const NavigationTabs = () => {
 
   useEffect(() => {
     if (
-      fromChain !== undefined && fromChain !== null &&
-      toChain !== undefined && toChain !== null &&
+      fromChain !== undefined &&
+      fromChain !== null &&
+      toChain !== undefined &&
+      toChain !== null &&
       !initialLoadDoneRef.current
     ) {
-      const newState: 'swap' | 'bridge' = fromChain === toChain ? 'swap' : 'bridge'
-      setState(newState)
+      if (subvariant === 'bridge') {
+        setState('bridge')
+      } else {
+        const newState: 'swap' | 'bridge' =
+          fromChain === toChain ? 'swap' : 'bridge'
+        setState(newState)
+      }
       initialLoadDoneRef.current = true
     }
   }, [fromChain, toChain, setState])
@@ -49,4 +59,6 @@ export const NavigationTabs = () => {
       </Tabs>
     </HeaderAppBar>
   )
+
+  // return null
 }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@openocean.finance/widget'
-export const version = '1.0.9'
+export const version = '1.0.11'

package/src/pages/MainPage/MainPage.tsx

@@ -28,12 +28,15 @@ export const MainPage: React.FC = () => {
   const subvariantState = useSplitSubvariantStore((store) => store.state)
   const custom = subvariant === 'custom'
   const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy)
+
   const title =
     subvariant === 'custom'
       ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
       : subvariant === 'refuel'
         ? t('header.gas')
-        : t('header.swap')
+        : subvariant === 'bridge'
+          ? t('header.bridge')
+          : t('header.swap')
 
   useHeader(title)
 

package/src/types/widget.ts

@@ -35,7 +35,12 @@ import type {
 import type { DefaultFieldValues } from '../stores/form/types.js'
 
 export type WidgetVariant = 'compact' | 'wide' | 'drawer'
-export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel'
+export type WidgetSubvariant =
+  | 'default'
+  | 'bridge'
+  | 'split'
+  | 'custom'
+  | 'refuel'
 export type SplitSubvariant = 'bridge' | 'swap'
 export type CustomSubvariant = 'checkout' | 'deposit'
 export interface SubvariantOptions {