improve of balance renew button

Author: sdqede

examples/vite-react/src/components/WalletDetails.tsx

@@ -1,5 +1,6 @@
-import { Box, Text, Stack, IconButton } from '@interchain-ui/react';
+import { Box, Text, IconButton } from '@interchain-ui/react';
 import { DENOM_DISPLAY } from '../utils/constants';
+import { useState } from 'react';
 
 interface WalletDetailsProps {
   address: string;
@@ -8,20 +9,29 @@ interface WalletDetailsProps {
 }
 
 const WalletDetails = ({ address, balance, onRefresh }: WalletDetailsProps) => {
+  const [refreshing, setRefreshing] = useState(false);
   return (
     <Box>
       <Text>Address: {address}</Text>
-      <Stack>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
         <Text>
           Balance: {balance ?? '0'} {DENOM_DISPLAY}
         </Text>
         <IconButton
           aria-label="Refresh balance"
           size="sm"
-          onClick={onRefresh}
-          icon='copy'
+          onClick={() => {
+            if (refreshing) return;
+            setRefreshing(true);
+            setTimeout(() => {
+              setRefreshing(false);
+            }, 10000);
+            onRefresh()
+          }}
+          icon='restart'
+          attributes={{ marginLeft: '$4' }}
         />
-      </Stack>
+      </div>
     </Box>
   );
 };