refactor(swap): refresh animation improvement

Emurgo · Oct 16, 2023 · e0eb017 · e0eb017
1 parent 3abb343
commit e0eb017
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/apps/wallet-mobile/src/components/Icon/Refresh.tsx b/apps/wallet-mobile/src/components/Icon/Refresh.tsx
@@ -1,21 +1,35 @@
 import React from 'react'
-import Svg, {Path} from 'react-native-svg'
+import Svg, {ClipPath, Defs, G, Path, Rect} from 'react-native-svg'
 
 type Props = {
   size?: number
   color?: string
+  active?: boolean
 }
 
-export const Refresh = ({size = 24, color = '#242838'}: Props) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M21 3C21 2.44772 20.5523 2 20 2C19.4477 2 19 2.44772 19 3V6.19447L18.0026 5.29602L18.0003 5.29396C16.7059 4.13515 15.1041 3.37585 13.388 3.10777C11.6719 2.83969 9.91499 3.0743 8.3292 3.78327C6.74342 4.49223 5.39658 5.64521 4.45103 7.10301C3.50549 8.56081 3.00158 10.2612 3 11.9991C2.9995 12.5514 3.44681 12.9995 3.99909 13C4.55137 13.0005 4.9995 12.5532 5 12.0009C5.00123 10.6486 5.39336 9.3255 6.12898 8.19135C6.8646 7.05721 7.91226 6.16045 9.14548 5.6091C10.3787 5.05776 11.7449 4.87534 13.0793 5.0838C14.4132 5.29218 15.6585 5.88224 16.6651 6.78299L16.6663 6.78407L18.0161 8H14C13.4477 8 13 8.44772 13 9C13 9.55228 13.4477 10 14 10H20C20.5523 10 21 9.55228 21 9V3Z"
-      fill={color}
-    />
+export const Refresh = ({size = 24, color = '#242838', active = false}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+    <G clipPath="url(#clip0_1396_4310)">
+      <Rect
+        x={32}
+        y={32}
+        width={32}
+        height={32}
+        rx={16}
+        transform="rotate(180 32 32)"
+        fill={active ? '#EAEDF2' : 'none'}
+      />
 
-    <Path
-      d="M3 15C3 14.4477 3.44772 14 4 14H10C10.5523 14 11 14.4477 11 15C11 15.5523 10.5523 16 10 16H5.98388L7.33368 17.2159L7.33481 17.2169C8.34144 18.1177 9.58678 18.7078 10.9207 18.9162C12.2551 19.1247 13.6213 18.9422 14.8545 18.3909C16.0878 17.8396 17.1354 16.9428 17.871 15.8087C18.6067 14.6745 18.9988 13.3514 19 11.9991C19.0005 11.4468 19.4486 10.9995 20.0009 11C20.5532 11.0005 21.0005 11.4486 21 12.0009C20.9984 13.7388 20.4945 15.4392 19.549 16.897C18.6034 18.3548 17.2566 19.5078 15.6708 20.2167C14.085 20.9257 12.3281 21.1603 10.612 20.8922C8.89592 20.6242 7.29408 19.8649 5.99967 18.706L5.99737 18.704L5 17.8055V21C5 21.5523 4.55229 22 4 22C3.44772 22 3 21.5523 3 21V15Z"
-      fill={color}
-    />
+      <Path
+        d="M7 25a1 1 0 102 0v-3.195l.997.899.003.002a8.996 8.996 0 0013.549-1.809A9.013 9.013 0 0025 16.001a1 1 0 10-2-.002 7.013 7.013 0 01-4.145 6.392 6.993 6.993 0 01-7.52-1.174l-.001-.001L9.984 20H14a1 1 0 100-2H8a1 1 0 00-1 1v6zM25 13a1 1 0 01-1 1h-6a1 1 0 110-2h4.016l-1.35-1.216A6.997 6.997 0 009 16a1 1 0 11-2-.002 9.013 9.013 0 015.33-8.216A8.993 8.993 0 0122 9.294l.003.002.997.899V7a1 1 0 112 0v6z"
+        fill={color}
+      />
+    </G>
+
+    <Defs>
+      <ClipPath id="clip0_1396_4310">
+        <Rect x={32} y={32} width={32} height={32} rx={16} transform="rotate(180 32 32)" fill="#fff" />
+      </ClipPath>
+    </Defs>
   </Svg>
 )
diff --git a/...c/features/Swap/useCases/StartSwapScreen/CreateOrder/ShowTokenActions/TopTokenActions.tsx b/...c/features/Swap/useCases/StartSwapScreen/CreateOrder/ShowTokenActions/TopTokenActions.tsx
@@ -61,6 +61,7 @@ export const TopTokenActions = () => {
 
 const RefreshIcon = ({onPress, disabled}: {onPress: () => void; disabled: boolean}) => {
   const spin = React.useRef(new Animated.Value(0)).current
+  const [isActive, setIsActive] = React.useState(false)
 
   const handleOnPress = () => {
     Animated.timing(spin, {
@@ -82,9 +83,15 @@ const RefreshIcon = ({onPress, disabled}: {onPress: () => void; disabled: boolea
   }
 
   return (
-    <TouchableOpacity activeOpacity={0.5} onPress={handleOnPress} disabled={disabled}>
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={handleOnPress}
+      disabled={disabled}
+      onPressIn={() => setIsActive(true)}
+      onPressOut={() => setIsActive(false)}
+    >
       <Animated.View style={getRotationStyle()}>
-        <Icon.Refresh size={24} color={disabled ? COLORS.DISABLED : ''} />
+        <Icon.Refresh size={28} color={disabled ? COLORS.DISABLED : ''} active={isActive} />
       </Animated.View>
     </TouchableOpacity>
   )