fix: use keyframes in string templates

lifinance · Oct 13, 2023 · 6799aaf · 6799aaf
1 parent 05ad033
commit 6799aaf
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 69 deletions.
diff --git a/...actionButton/DefaultTransactionButton.tsx → ...ansactionButton/BaseTransactionButton.tsx b/...actionButton/DefaultTransactionButton.tsx → ...ansactionButton/BaseTransactionButton.tsx
@@ -3,11 +3,14 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-import type { DefaultTransactionButtonProps } from './types';
+import type { BaseTransactionButtonProps } from './types';
 
-export const DefaultTransactionButton: React.FC<
-  DefaultTransactionButtonProps
-> = ({ onClick, text, disabled, loading }) => {
+export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
+  onClick,
+  text,
+  disabled,
+  loading,
+}) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { walletManagement } = useWidgetConfig();

diff --git a/packages/widget/src/components/BaseTransactionButton/index.ts b/packages/widget/src/components/BaseTransactionButton/index.ts
@@ -0,0 +1,3 @@
+export { BaseTransactionButton } from './BaseTransactionButton';
+export * from './types';
+
diff --git a/...ponents/DefaultTransactionButton/types.ts → ...components/BaseTransactionButton/types.ts b/...ponents/DefaultTransactionButton/types.ts → ...components/BaseTransactionButton/types.ts
@@ -1,4 +1,4 @@
-export interface DefaultTransactionButtonProps {
+export interface BaseTransactionButtonProps {
   onClick?(): void;
   text?: string;
   disabled?: boolean;

diff --git a/packages/widget/src/components/DefaultTransactionButton/index.ts b/packages/widget/src/components/DefaultTransactionButton/index.ts
diff --git a/packages/widget/src/components/Step/CircularProgress.style.tsx b/packages/widget/src/components/Step/CircularProgress.style.tsx
@@ -4,21 +4,6 @@ import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
 import { circularProgressClasses } from '@mui/material/CircularProgress';
 import { alpha, keyframes, styled } from '@mui/material/styles';
 
-const circleAnimation = keyframes({
-  '0%': {
-    strokeDashoffset: 129,
-    transform: 'rotate(0)',
-  },
-  '50%': {
-    strokeDashoffset: 56,
-    transform: 'rotate(45deg)',
-  },
-  '100%': {
-    strokeDashoffset: 129,
-    transform: 'rotate(360deg)',
-  },
-});
-
 const getStatusColor = (
   theme: Theme,
   status: Status,
@@ -60,23 +45,38 @@ export const CircularIcon = styled(Box, {
   }),
 );
 
-export const CircularProgressPending = styled(MuiCircularProgress)(
-  ({ theme }) => ({
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.primary.main
-        : theme.palette.primary.light,
-    animationDuration: '3s',
-    position: 'absolute',
-    left: '-2px',
-    [`.${circularProgressClasses.circle}`]: {
-      animationDuration: '2s',
-      animationTimingFunction: 'linear',
-      animationName: circleAnimation,
-      strokeDasharray: 129,
-      strokeDashoffset: 129,
-      strokeLinecap: 'round',
-      transformOrigin: '100% 100%',
-    },
-  }),
-);
+const circleAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+export const CircularProgressPending = styled(MuiCircularProgress)`
+  color: ${({ theme }) =>
+    theme.palette.mode === 'light'
+      ? theme.palette.primary.main
+      : theme.palette.primary.light};
+  animation-duration: '3s';
+  position: 'absolute';
+  left: '-2px';
+  .${circularProgressClasses.circle} {
+    animation-duration: '2s';
+    animation-timing-function: 'linear';
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: 'round';
+    transform-origin: '100% 100%';
+  }
+`;
diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -6,6 +6,7 @@ import { common } from '@mui/material/colors';
 import {
   alpha,
   createTheme as createMuiTheme,
+  css,
   darken,
   getContrastRatio,
   keyframes,
@@ -91,16 +92,16 @@ const shape = {
   borderRadiusSecondary: 8,
 };
 
-const enterKeyframe = keyframes({
-  '0%': {
-    transform: 'scale(0)',
-    opacity: 0.05,
-  },
-  '100%': {
-    transform: 'scale(1)',
-    opacity: 0.1,
-  },
-});
+const enterKeyframe = keyframes`
+  0% {
+    transform: scale(0);
+    opacity: 0.05;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+`;
 
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
   const primaryMainColor =
@@ -183,17 +184,15 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
       },
       MuiButtonBase: {
         styleOverrides: {
-          root: {
-            [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
-              {
-                animationName: enterKeyframe,
-              },
-            [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
-              {
-                opacity: 0.1,
-                animationName: enterKeyframe,
-              },
-          },
+          // This `css()` function invokes keyframes. `styled-components` only supports keyframes
+          // in string templates. Do not convert these styles in JS object as it will break.
+          root: css`
+            &
+              .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible} {
+              opacity: 0.1;
+              animation-name: ${enterKeyframe};
+            }
+          `,
         },
       },
       MuiButton: {

diff --git a/packages/widget/src/pages/MainPage/ReviewButton.tsx b/packages/widget/src/pages/MainPage/ReviewButton.tsx
@@ -1,7 +1,7 @@
 import { useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
 import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { useSetExecutableRoute, useSplitSubvariantStore } from '../../stores';
@@ -60,7 +60,7 @@ export const ReviewButton: React.FC = () => {
   };
 
   return (
-    <DefaultTransactionButton
+    <BaseTransactionButton
       text={getButtonText()}
       onClick={handleClick}
       disabled={currentRoute && (isValidating || !isValid)}

diff --git a/packages/widget/src/pages/TransactionPage/StartTransactionButton.tsx b/packages/widget/src/pages/TransactionPage/StartTransactionButton.tsx
@@ -1,4 +1,4 @@
-import { DefaultTransactionButton } from '../../components/DefaultTransactionButton';
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
 import {
   useFromTokenSufficiency,
   useGasSufficiency,
@@ -28,7 +28,7 @@ export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
     !isMultisigSigner && (insufficientFromToken || !!insufficientGas?.length);
 
   return (
-    <DefaultTransactionButton
+    <BaseTransactionButton
       onClick={onClick}
       text={text}
       disabled={shouldDisableButton}

diff --git a/packages/widget/src/pages/TransactionPage/types.ts b/packages/widget/src/pages/TransactionPage/types.ts
@@ -1,8 +1,8 @@
 import type { Route } from '@lifi/sdk';
-import type { DefaultTransactionButtonProps } from '../../components/DefaultTransactionButton';
+import type { BaseTransactionButtonProps } from '../../components/BaseTransactionButton';
 
 export interface StartTransactionButtonProps
-  extends DefaultTransactionButtonProps {
+  extends BaseTransactionButtonProps {
   route?: Route;
   insurableRouteId: string;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export { BaseTransactionButton } from './BaseTransactionButton';
		export * from './types';