refactor: convert TopBar and fix new issues

src/components/TopBar.tsx

@@ -12,41 +12,43 @@ import User from '/top-bar-icons/user.png'
 import FullScreen from '/top-bar-icons/full-screen.png'
 import Bell from '/top-bar-icons/bell.png'
 
-import './TopBar.css'
-import { ReactButton } from './ReactButton'
 import { XStack } from 'tamagui'
-import { Icon } from './Icon'
-import { Tab } from './Tab'
+
+import './TopBar.css'
+import Icon from './Icon'
+import ReactButton from './ReactButton'
+import Tab from './Tab'
+
+const bgIconBtn = {
+  border: 'none',
+  'background-color': '#1d2738',
+  cursor: 'pointer',
+  padding: '8px',
+  'border-radius': '5px',
+  display: 'flex',
+  'align-items': 'center',
+}
 
 const TopBar = () => {
-  const bgIconBtn = {
-    border: 'none',
-    'background-color': '#1d2738',
-    cursor: 'pointer',
-    padding: '8px',
-    'border-radius': '5px',
-    display: 'flex',
-    'align-items': 'center',
-  }
   return (
     <XStack className="topbar">
       <XStack className="topbar_left">
         <div className="topbar_actions">
-          <Icon src={RedDot} alt=" " className="icon_btn" />
-          <Icon src={YelloDot} className="icon_btn"></Icon>
-          <Icon className="icon_btn" src={BlueDot}></Icon>
+          <Icon source={RedDot} className="icon_btn" />
+          <Icon source={YelloDot} className="icon_btn"></Icon>
+          <Icon className="icon_btn" source={BlueDot}></Icon>
         </div>
-        <Icon src={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
-        <Icon src={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
+        <Icon source={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
+        <Icon source={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
 
-        <Icon src={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon>
+        <Icon source={MessagesIcon} width={20} height={20} style={bgIconBtn}></Icon>
 
-        <Icon src={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon>
-        <Icon src={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon>
-        <Icon src={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon>
+        <Icon source={WalletIcon} width={20} height={20} style={bgIconBtn}></Icon>
+        <Icon source={BrowserIcon} width={20} height={20} style={bgIconBtn}></Icon>
+        <Icon source={NodesIcon} width={20} height={20} style={bgIconBtn}></Icon>
       </XStack>
       <div className="topbar_middle">
-        {Array.from({ length: 9 }).map((e, i) => (
+        {Array.from({ length: 9 }).map((_, i) => (
           <Tab key={i} icon={Rarible} text={'Rarible'} />
         ))}
       </div>
@@ -66,20 +68,18 @@ const TopBar = () => {
             fontWeight: 'bold',
           }}
         >
-          <p>Jump to </p>
+          Jump to
         </ReactButton>
         <button className="icon_btn">
-          <img src={FullScreen} alt=" " width="100%" />
+          <img src={FullScreen} alt="icon" width="100%" />
         </button>
         <button className="icon_btn">
           <div className="badge_top" />
-
-          <img src={Bell} alt=" " />
+          <img src={Bell} alt="icon" />
         </button>
         <button className="icon_btn">
           <div className="badge_bottom" />
-
-          <img src={User} alt=" " />
+          <img src={User} alt="icon" />
         </button>
       </div>
     </XStack>