feat: hide internal wallet UI if walletManagement is provided

lifinance · Jun 27, 2022 · 68dd45f · 68dd45f
1 parent 1ba94db
commit 68dd45f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts
@@ -1,16 +1,17 @@
 import { AppBar, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const HeaderAppBar = styled(AppBar, {
-  shouldForwardProp: (prop) => prop !== 'pt',
-})<{ pt?: number }>(({ theme, pt }) => ({
+export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
   flexDirection: 'row',
   alignItems: 'center',
   position: 'relative',
   minHeight: 48,
-  padding: theme.spacing(pt ?? 0, 3, 0, 3),
+  padding: theme.spacing(0, 3, 0, 3),
+  '&:first-of-type': {
+    paddingTop: theme.spacing(1.5),
+  },
 }));
 
 export const Container = styled(Box, {

diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { useWidgetConfig } from '@lifi/widget/providers/WidgetProvider';
 import { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { ElementId } from '../../utils/elements';
@@ -24,9 +25,12 @@ const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   );
 };
 
-export const Header: FC = () => (
-  <HeaderContainer>
-    <WalletHeader />
-    <NavigationHeader />
-  </HeaderContainer>
-);
+export const Header: FC = () => {
+  const { walletManagement } = useWidgetConfig();
+  return (
+    <HeaderContainer>
+      {!walletManagement ? <WalletHeader /> : null}
+      <NavigationHeader />
+    </HeaderContainer>
+  );
+};
diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -20,7 +20,7 @@ export const WalletHeader: React.FC = () => {
     : null;
 
   return (
-    <HeaderAppBar elevation={0} pt={1.5}>
+    <HeaderAppBar elevation={0}>
       {walletAddress ? (
         <>
           <Box
@@ -71,7 +71,7 @@ const ConnectButton = () => {
   const { connect: walletConnect } = useWallet();
   const navigate = useNavigate();
   const connect = async () => {
-    if (config.disableInternalWalletManagement) {
+    if (config.walletManagement) {
       await walletConnect();
       return;
     }