fix: drawer variant isn't wrapped in i18n provider

lifinance · Feb 22, 2023 · c33f0ce · c33f0ce
1 parent 96b51b1
commit c33f0ce
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -26,9 +26,8 @@ export interface WidgetDrawer {
 
 export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
   ({ elementRef, open, config }, ref) => {
-    const { t } = useTranslation();
     const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(open);
+    const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
 
     const toggleDrawer = useCallback(() => {
       setDrawerOpen((open) => !open);
@@ -60,7 +59,6 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
           ...config?.containerStyle,
           height: '100%',
         },
-        variant: 'drawer',
       }),
       [config],
     );
@@ -74,9 +72,7 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
           drawerProps={config?.containerStyle}
         >
           {drawerOpen ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
-          <DrawerButtonTypography>
-            {drawerOpen ? t('button.hide') : t('button.lifiSwap')}
-          </DrawerButtonTypography>
+          <DrawerButtonText open={drawerOpen} />
         </DrawerButton>
         <Drawer
           ref={elementRef}
@@ -104,3 +100,13 @@ export const AppDrawer = forwardRef<WidgetDrawer, WidgetProps>(
     );
   },
 );
+
+export const DrawerButtonText = ({ open }: { open: boolean }) => {
+  const { t } = useTranslation();
+
+  return (
+    <DrawerButtonTypography>
+      {open ? t('button.hide') : t('button.lifiSwap')}
+    </DrawerButtonTypography>
+  );
+};