From 22a1e323c0ac403e777602f3ccaee686cf2e1c01 Mon Sep 17 00:00:00 2001
From: kris <kris@dorg.tech>
Date: Tue, 12 Dec 2023 11:46:05 +0500
Subject: [PATCH] animated wallet connector menu button arrow

---
 .../components/Header/ConnectWalletMenu.tsx   | 14 ++----
 .../components/Header/RotatingArrowIcon.tsx   | 48 +++++++++++++++++++
 2 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 packages/app/src/components/Header/RotatingArrowIcon.tsx

diff --git a/packages/app/src/components/Header/ConnectWalletMenu.tsx b/packages/app/src/components/Header/ConnectWalletMenu.tsx
index f636a77c..c9ef7e5d 100644
--- a/packages/app/src/components/Header/ConnectWalletMenu.tsx
+++ b/packages/app/src/components/Header/ConnectWalletMenu.tsx
@@ -2,8 +2,9 @@ import { Image, StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'reac
 import { useConnect } from 'wagmi';
 import { Colors } from '../../utils/colors';
 import { useState } from 'react';
-import { backIconUri, metamaskLogoUri, walletConnectLogoUri } from './assets';
+import { metamaskLogoUri, walletConnectLogoUri } from './assets';
 import { WebIconUri } from '../../@constants/ConnectIcons';
+import { RotatingArrowIcon } from './RotatingArrowIcon';
 
 interface ConnectWalletMenuProps {
   dropdownOffset: { top: number; right?: number; left?: number };
@@ -30,11 +31,7 @@ export const ConnectWalletMenu = (props: ConnectWalletMenuProps) => {
     <>
       <TouchableOpacity style={styles.walletConnectButton} onPress={() => setOpenDropdown(!openDropdown)}>
         <Text style={styles.walletConnectButtonText}>Connect Wallet</Text>
-        <Image
-          source={{ uri: backIconUri }}
-          resizeMode="contain"
-          style={[styles.arrowIcon, { transform: [{ rotate: openDropdown ? '270deg' : '0deg' }] }]}
-        />
+        <RotatingArrowIcon openDropdown={openDropdown} />
       </TouchableOpacity>
       {openDropdown && (
         <View style={[styles.dropdownContainer, dropdownOffset]}>
@@ -94,11 +91,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     backgroundColor: Colors.white,
   },
-  arrowIcon: {
-    width: 15,
-    height: 15,
-    tintColor: Colors.white,
-  },
   walletConnector: {
     width: '100%',
     height: 40,
diff --git a/packages/app/src/components/Header/RotatingArrowIcon.tsx b/packages/app/src/components/Header/RotatingArrowIcon.tsx
new file mode 100644
index 00000000..9466c6d9
--- /dev/null
+++ b/packages/app/src/components/Header/RotatingArrowIcon.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { backIconUri } from './assets';
+import { Colors } from '../../utils/colors';
+
+interface RotatingArrowIconProps {
+  openDropdown: boolean;
+}
+
+export const RotatingArrowIcon = (props: RotatingArrowIconProps) => {
+  const { openDropdown } = props;
+
+  const rotationAnim = useRef(new Animated.Value(0)).current;
+
+  const rotation = rotationAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-90deg'],
+  });
+
+  const startRotation = () => {
+    Animated.timing(rotationAnim, {
+      toValue: openDropdown ? 1 : 0,
+      duration: 50,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  useEffect(() => {
+    startRotation();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openDropdown]);
+
+  return (
+    <Animated.Image
+      source={{ uri: backIconUri }}
+      resizeMode="contain"
+      style={[styles.arrowIcon, { transform: [{ rotate: rotation }] }]}
+    />
+  );
+};
+
+const styles = {
+  arrowIcon: {
+    width: 15,
+    height: 15,
+    tintColor: Colors.white,
+  },
+};