feat: add SendToWalletToggled event

lifinance · Aug 25, 2023 · e6bffcf · e6bffcf
1 parent 9b8afd0
commit e6bffcf
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 142 deletions.
diff --git a/packages/widget-playground/src/components/WidgetEvents.tsx b/packages/widget-playground/src/components/WidgetEvents.tsx
@@ -25,6 +25,9 @@ export const WidgetEvents = () => {
     const onRouteHighValueLoss = (update: RouteHighValueLossUpdate) => {
       // console.log('onRouteHighValueLoss continued.');
     };
+    const onSendToWalletToggled = (open: boolean) => {
+      // console.log('onSendToWalletToggled', open);
+    };
     // const onRouteContactSupport = (supportId: RouteContactSupport) => {
     //  console.log('onRouteContactSupport clicked', supportId);
     // };
@@ -36,6 +39,7 @@ export const WidgetEvents = () => {
     );
     widgetEvents.on(WidgetEvent.RouteHighValueLoss, onRouteHighValueLoss);
     widgetEvents.on(WidgetEvent.RouteExecutionFailed, onRouteExecutionFailed);
+    widgetEvents.on(WidgetEvent.SendToWalletToggled, onSendToWalletToggled);
     // widgetEvents.on(WidgetEvent.RouteContactSupport, onRouteContactSupport);
     return () => widgetEvents.all.clear();
   }, [widgetEvents]);

diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx
@@ -35,51 +35,49 @@ export const Card = styled(Box, {
     !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(
       prop as string,
     ),
-})<CardProps>(
-  ({
-    theme,
-    variant,
-    selectionColor = 'primary',
-    indented,
+})<CardProps>(({
+  theme,
+  variant,
+  selectionColor = 'primary',
+  indented,
+  pointerEvents,
+  onClick,
+}) => {
+  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
+  const backgroundHoverColor = onClick
+    ? theme.palette.mode === 'light'
+      ? darken(backgroundColor, 0.02)
+      : lighten(backgroundColor, 0.02)
+    : backgroundColor;
+  return {
+    backgroundColor,
+    border: `1px solid`,
+    borderColor:
+      variant === 'error'
+        ? theme.palette.error.main
+        : variant === 'selected'
+        ? selectionColor === 'primary'
+          ? theme.palette.primary.main
+          : alpha(theme.palette.secondary.main, 0.48)
+        : theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    borderRadius: theme.shape.borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    padding: indented ? theme.spacing(2) : 0,
+    boxSizing: 'border-box',
+    '&:hover': {
+      cursor: onClick ? 'pointer' : 'default',
+      backgroundColor: backgroundHoverColor,
+    },
+    [`&:hover .${badgeClasses.badge} > div`]: {
+      borderColor: backgroundHoverColor,
+    },
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
     pointerEvents,
-    onClick,
-  }) => {
-    const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
-    const backgroundHoverColor = onClick
-      ? theme.palette.mode === 'light'
-        ? darken(backgroundColor, 0.02)
-        : lighten(backgroundColor, 0.02)
-      : backgroundColor;
-    return {
-      backgroundColor,
-      border: `1px solid`,
-      borderColor:
-        variant === 'error'
-          ? theme.palette.error.main
-          : variant === 'selected'
-          ? selectionColor === 'primary'
-            ? theme.palette.primary.main
-            : alpha(theme.palette.secondary.main, 0.48)
-          : theme.palette.mode === 'light'
-          ? theme.palette.grey[300]
-          : theme.palette.grey[800],
-      borderRadius: theme.shape.borderRadius,
-      overflow: 'hidden',
-      position: 'relative',
-      padding: indented ? theme.spacing(2) : 0,
-      boxSizing: 'border-box',
-      '&:hover': {
-        cursor: onClick ? 'pointer' : 'default',
-        backgroundColor: backgroundHoverColor,
-      },
-      [`&:hover .${badgeClasses.badge} > div`]: {
-        borderColor: backgroundHoverColor,
-      },
-      transition: theme.transitions.create(['background-color'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
-      }),
-      pointerEvents,
-    };
-  },
-);
+  };
+});
diff --git a/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx b/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx
@@ -1,7 +1,7 @@
 import type { IconButtonProps } from '@mui/material';
 import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 const getProgressValue = (updatedAt: number, timeToUpdate: number) =>
   updatedAt
@@ -18,7 +18,6 @@ export const ProgressToNextUpdate: React.FC<
     isLoading?: boolean;
   } & IconButtonProps
 > = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
-  const { t } = useTranslation();
   const [value, setValue] = useState(() =>
     getProgressValue(updatedAt, timeToUpdate),
   );

diff --git a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx
@@ -2,13 +2,15 @@ import WalletIcon from '@mui/icons-material/Wallet';
 import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useWidgetEvents } from '../../hooks';
 import { FormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
+import { DisabledUI, HiddenUI, RequiredUI, WidgetEvent } from '../../types';
 
 export const SendToWalletButton: React.FC = () => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
+  const emitter = useWidgetEvents();
   const { account } = useWallet();
   const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
   const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
@@ -28,6 +30,10 @@ export const SendToWalletButton: React.FC = () => {
       setValue(FormKey.ToAddress, '', { shouldTouch: true });
     }
     toggleSendToWallet();
+    emitter.emit(
+      WidgetEvent.SendToWalletToggled,
+      useSendToWalletStore.getState().showSendToWallet,
+    );
   };
 
   return (

diff --git a/packages/widget/src/components/Step/Step.tsx b/packages/widget/src/components/Step/Step.tsx
@@ -58,9 +58,8 @@ export const Step: React.FC<{
 
   const formattedToAddress = shortenAddress(toAddress);
   const toAddressLink = toAddress
-    ? `${
-        getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]
-      }address/${toAddress}`
+    ? `${getChainById(step.action.toChainId)?.metamask
+        .blockExplorerUrls[0]}address/${toAddress}`
     : undefined;
 
   return (

diff --git a/packages/widget/src/components/TokenList/useTokenSelect.ts b/packages/widget/src/components/TokenList/useTokenSelect.ts
@@ -53,6 +53,15 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
 
       onClick?.();
     },
-    [formType, getValues, onBlur, onChange, onClick, setValue, subvariant],
+    [
+      emitter,
+      formType,
+      getValues,
+      onBlur,
+      onChange,
+      onClick,
+      setValue,
+      subvariant,
+    ],
   );
 };