refactor: change exports to default

Convert named exports to default exports in component folder

src/components/BackgroundImage.tsx

@@ -1,11 +1,11 @@
-import { Stack, styled } from "tamagui";
+import { Stack, styled } from 'tamagui'
 
 const BackgroundImage = styled(Stack, {
-  boxShadow: "inset 100px 0px 100px white",
-  width: "650px",
-  height: "91.9vh",
-  borderTopRightRadius: "25px",
-  borderBottomRightRadius: "25px",
-});
+  boxShadow: 'inset 100px 0px 100px white',
+  width: '650px',
+  height: '91.9vh',
+  borderTopRightRadius: '25px',
+  borderBottomRightRadius: '25px',
+})
 
-export default BackgroundImage;
+export default BackgroundImage

src/components/FormattedText.tsx

@@ -33,4 +33,4 @@ const FormattedText = ({ textElements, color, fontSize }: FormattedTextProps) =>
   )
 }
 
-export { FormattedText }
+export default FormattedText

src/components/Icon.jsx

@@ -1,9 +1,7 @@
-import { Image } from "tamagui";
+import { Image } from 'tamagui'
 
 const Icon = ({ source, width = 16, height = 16, ...props }) => {
-  return (
-    <Image {...props} source={{ uri: source }} width={width} height={height} />
-  );
-};
+  return <Image {...props} source={{ uri: source }} width={width} height={height} />
+}
 
-export { Icon };
+export default Icon

src/components/IconButton.jsx

@@ -1,12 +1,12 @@
-import { Icon } from "../Icon/Icon";
-import { ReactButton } from "./ReactButton";
+import { Icon } from '../Icon/Icon'
+import { ReactButton } from './ReactButton'
 
 const IconButton = ({ icon, text, ...props }) => {
   return (
     <ReactButton {...props} icon={<Icon source={icon} />}>
       {text}
     </ReactButton>
-  );
-};
+  )
+}
 
-export { IconButton };
+export default IconButton

src/components/IconText.jsx

@@ -1,20 +1,20 @@
-import { Paragraph, XStack } from "tamagui";
-import { Icon } from "../Icon/Icon";
+import { Paragraph, XStack } from 'tamagui'
+import { Icon } from '../Icon/Icon'
 
 const IconText = ({ icon, text, ...props }) => {
   return (
     <XStack
       style={{
-        alignItems: "center",
+        alignItems: 'center',
       }}
-      space={"$2"}
+      space={'$2'}
     >
       <Icon source={icon} width={16} height={16} />
-      <Paragraph {...props} color={"#000000"}>
+      <Paragraph {...props} color={'#000000'}>
         {text}
       </Paragraph>
     </XStack>
-  );
-};
+  )
+}
 
-export { IconText };
+export default IconText

src/components/InformationBox.jsx

@@ -1,27 +1,23 @@
-import { XStack } from "tamagui";
-import { Icon } from "./Icon";
-import { FormattedText } from "./FormattedText";
+import { XStack } from 'tamagui'
+import { Icon } from './Icon'
+import { FormattedText } from './FormattedText'
 
 const InformationBox = ({ icon, textElements }) => {
   return (
     <XStack
       style={{
-        border: "2px solid #E7EAEE",
-        borderRadius: "12px",
-        padding: "11px 16px",
-        maxWidth: "590px",
-        alignItems: "start",
+        border: '2px solid #E7EAEE',
+        borderRadius: '12px',
+        padding: '11px 16px',
+        maxWidth: '590px',
+        alignItems: 'start',
       }}
-      space={"$2"}
+      space={'$2'}
     >
-      <Icon source={icon} width={12} height={12} style={{ marginTop: "6px" }} />
-      <FormattedText
-        textElements={textElements}
-        color={"#647084"}
-        fontSize={"$3"}
-      />
+      <Icon source={icon} width={12} height={12} style={{ marginTop: '6px' }} />
+      <FormattedText textElements={textElements} color={'#647084'} fontSize={'$3'} />
     </XStack>
-  );
-};
+  )
+}
 
-export { InformationBox };
+export default InformationBox

src/components/Logo.jsx

@@ -1,20 +1,20 @@
-import { XStack } from "tamagui";
-import { Tag } from "./Tag";
-import { Icon } from "./Icon";
+import { XStack } from 'tamagui'
+import { Tag } from './Tag'
+import { Icon } from './Icon'
 
 const Logo = () => {
   return (
     <XStack
       style={{
-        alignItems: "center",
+        alignItems: 'center',
       }}
-      space={"$2"}
+      space={'$2'}
     >
-      <Icon source={"/icons/marks.png"} width={45} height={50} />
-      <Icon source={"/icons/nimbus.png"} width={80} height={16} />
+      <Icon source={'/icons/marks.png'} width={45} height={50} />
+      <Icon source={'/icons/nimbus.png'} width={80} height={16} />
       <Tag bc="#2A4AF5" text="BETA" />
     </XStack>
-  );
-};
+  )
+}
 
-export { Logo };
+export default Logo

src/components/PageWrapper.jsx

@@ -1,35 +1,35 @@
-import { XStack, YStack, styled } from "tamagui";
-import { TopBar } from "./TopBar";
+import { XStack, YStack, styled } from 'tamagui'
+import { TopBar } from './TopBar'
 
-const Background = styled("div", {
-  display: "flex",
-  justifyContent: "center",
-  backgroundColor: "white",
-  width: "100vw",
-});
+const Background = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  backgroundColor: 'white',
+  width: '100vw',
+})
 
 const PageWrapper = ({ children }) => {
   return (
     <Background>
       <div
         style={{
-          border: "4px solid #09101C",
-          "border-radius": "30px",
-          padding: "0",
-          margin: "0",
+          border: '4px solid #09101C',
+          'border-radius': '30px',
+          padding: '0',
+          margin: '0',
         }}
       >
         <YStack>
           <TopBar />
           <XStack
-            space={"$8"}
+            space={'$8'}
             style={{
               background:
-                "linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
-              width: "100%",
-              display: "flex",
-              justifyContent: "end",
-              alignItems: "center",
+                'linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)',
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'end',
+              alignItems: 'center',
             }}
           >
             {children}
@@ -37,7 +37,7 @@ const PageWrapper = ({ children }) => {
         </YStack>
       </div>
     </Background>
-  );
-};
+  )
+}
 
-export { PageWrapper };
+export default PageWrapper

src/components/ReactButton.jsx

@@ -1,7 +1,7 @@
-import { Button } from "tamagui";
+import { Button } from 'tamagui'
 
 const ReactButton = ({ children, ...props }) => {
-  return <Button {...props} >{children}</Button>;
-};
+  return <Button {...props}>{children}</Button>
+}
 
-export { ReactButton };
+export default ReactButton

src/components/ShadowBox.jsx

@@ -1,10 +1,10 @@
-import { styled } from "tamagui";
+import { styled } from 'tamagui'
 
-const ShadowBox = styled("div", {
-  boxSizing: "border-box",
-  borderRadius: "16px",
-  boxShadow: "0px 4px 20px 0px rgba(9, 16, 28, 0.08)",
-  width: "100%",
-});
+const ShadowBox = styled('div', {
+  boxSizing: 'border-box',
+  borderRadius: '16px',
+  boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)',
+  width: '100%',
+})
 
-export { ShadowBox };
+export default ShadowBox

src/components/SubTitle.jsx

@@ -1,7 +1,9 @@
-import { Paragraph, styled } from "tamagui";
+import { Paragraph, styled } from 'tamagui'
 
-export const SubTitle = styled(Paragraph, {
-  name: "SubTitle",
-  accessibilityRole: "header",
-  size: "$3",
-});
+const SubTitle = styled(Paragraph, {
+  name: 'SubTitle',
+  accessibilityRole: 'header',
+  size: '$3',
+})
+
+export default SubTitle

src/components/Tab.jsx

@@ -1,25 +1,25 @@
-import { XStack, Stack, Text } from "tamagui";
-import "./TopBar.css";
-import { Icon } from "./Icon";
+import { XStack, Text } from 'tamagui'
+import './TopBar.css'
+import { Icon } from './Icon'
+
 const Tab = ({ icon, text }) => {
-  const styl = {
-    border: "none",
-    display: "flex",
-    padding: "6px 12px 6px 6px",
-    "align-items": " center",
-    gap: "8px",
-    "border-radius": "10px",
-    background: " #131D2F",
-    width: "136px",
-    height: "32px",
-  };
+  const style = {
+    border: 'none',
+    display: 'flex',
+    padding: '6px 12px 6px 6px',
+    'align-items': ' center',
+    gap: '8px',
+    'border-radius': '10px',
+    background: ' #131D2F',
+    width: '136px',
+    height: '32px',
+  }
+
   return (
-    <>
-      <XStack style={styl}>
-        <Icon source={icon}></Icon>
-        <Text>{text}</Text>
-      </XStack>
-    </>
-  );
-};
-export { Tab };
+    <XStack style={style}>
+      <Icon source={icon}></Icon>
+      <Text>{text}</Text>
+    </XStack>
+  )
+}
+export default Tab

src/components/Tag.jsx

@@ -1,21 +1,21 @@
-import { Paragraph } from "tamagui";
+import { Paragraph } from 'tamagui'
 
 const Tag = ({ bc, text }) => {
   return (
     <div
       style={{
         backgroundColor: bc,
-        display: "flex",
-        padding: "0px 8px",
-        alignItems: "center",
-        borderRadius: "67px",
+        display: 'flex',
+        padding: '0px 8px',
+        alignItems: 'center',
+        borderRadius: '67px',
       }}
     >
-      <Paragraph fontWeight={"500"} fontSize={"10px"}>
+      <Paragraph fontWeight={'500'} fontSize={'10px'}>
         {text}
       </Paragraph>
     </div>
-  );
-};
+  )
+}
 
-export { Tag };
+export default Tag

src/components/Title.jsx

@@ -1,7 +1,9 @@
-import { Paragraph, styled } from "tamagui";
+import { Paragraph, styled } from 'tamagui'
 
-export const Title = styled(Paragraph, {
-  name: "Title",
-  accessibilityRole: "header",
-  size: "$9",
-});
+const Title = styled(Paragraph, {
+  name: 'Title',
+  accessibilityRole: 'header',
+  size: '$9',
+})
+
+export default Title

src/components/Titles.jsx

@@ -1,28 +1,28 @@
-import { XStack, YStack } from "tamagui";
-import { SubTitle } from "./SubTitle";
-import { Title } from "./Title";
-import { IconButton } from "./IconButton";
+import { XStack, YStack } from 'tamagui'
+import { SubTitle } from './SubTitle'
+import { Title } from './Title'
+import { IconButton } from './IconButton'
 
 const Titles = ({ title, subtitle }) => {
   return (
     <YStack>
       <XStack justifyContent="space-between">
-        <Title color={"#09101C"}>{title}</Title>
+        <Title color={'#09101C'}>{title}</Title>
         <IconButton
           style={{
-            backgroundColor: "transparent",
-            border: "1px solid #DCE0E5",
+            backgroundColor: 'transparent',
+            border: '1px solid #DCE0E5',
           }}
-          color={"#09101C"}
-          size={"$3"}
-          icon={"/icons/reveal.png"}
-          text={"Advanced Settings"}
-          fontSize={"$5"}
+          color={'#09101C'}
+          size={'$3'}
+          icon={'/icons/reveal.png'}
+          text={'Advanced Settings'}
+          fontSize={'$5'}
         />
       </XStack>
-      <SubTitle color={"#09101C"}>{subtitle}</SubTitle>
+      <SubTitle color={'#09101C'}>{subtitle}</SubTitle>
     </YStack>
-  );
-};
+  )
+}
 
-export { Titles };
+export default Titles

src/components/TopBar.jsx

@@ -1,35 +1,33 @@
-//import { Image, XStack } from "tamagui";
-import RedDot from "/top-bar-icons/red.png";
-import YelloDot from "/top-bar-icons/yellow.png";
-import BlueDot from "/top-bar-icons/blue.png";
-import Arrow from "/top-bar-icons/chevron-left.png";
-import CommunitiesIcon from "/top-bar-icons/communities.png";
-import MessagesIcon from "/top-bar-icons/messages.png";
-import WalletIcon from "/top-bar-icons/wallet.png";
-import BrowserIcon from "/top-bar-icons/browser.png";
-import NodesIcon from "/top-bar-icons/nodes.png";
-import Rarible from "/top-bar-icons/Rarible.png";
-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 RedDot from '/top-bar-icons/red.png'
+import YelloDot from '/top-bar-icons/yellow.png'
+import BlueDot from '/top-bar-icons/blue.png'
+import Arrow from '/top-bar-icons/chevron-left.png'
+import CommunitiesIcon from '/top-bar-icons/communities.png'
+import MessagesIcon from '/top-bar-icons/messages.png'
+import WalletIcon from '/top-bar-icons/wallet.png'
+import BrowserIcon from '/top-bar-icons/browser.png'
+import NodesIcon from '/top-bar-icons/nodes.png'
+import Rarible from '/top-bar-icons/Rarible.png'
+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 { Button, Tabs, XStack } from "tamagui";
-import { Icon } from "./Icon";
-import { IconButton } from "./IconButton";
-import { Tab } from "./Tab";
+import './TopBar.css'
+import { ReactButton } from './ReactButton'
+import { XStack } from 'tamagui'
+import { Icon } from './Icon'
+import { Tab } from './Tab'
 
 const TopBar = () => {
   const bgIconBtn = {
-    border: "none",
-    "background-color": "#1d2738",
-    cursor: "pointer",
-    padding: "8px",
-    "border-radius": "5px",
-    display: "flex",
-    "align-items": "center",
-  };
+    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">
@@ -39,19 +37,9 @@ const TopBar = () => {
           <Icon className="icon_btn" src={BlueDot}></Icon>
         </div>
         <Icon src={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
-        <Icon
-          src={CommunitiesIcon}
-          width={20}
-          height={20}
-          style={bgIconBtn}
-        ></Icon>
+        <Icon src={CommunitiesIcon} width={20} height={20} style={bgIconBtn}></Icon>
 
-        <Icon
-          src={MessagesIcon}
-          width={20}
-          height={20}
-          style={bgIconBtn}
-        ></Icon>
+        <Icon src={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>
@@ -59,23 +47,23 @@ const TopBar = () => {
       </XStack>
       <div className="topbar_middle">
         {Array.from({ length: 9 }).map((e, i) => (
-          <Tab key={i} icon={Rarible} text={"Rarible"} />
+          <Tab key={i} icon={Rarible} text={'Rarible'} />
         ))}
       </div>
       <div className="topbar_right">
         <ReactButton
           style={{
-            border: "1px solid #1d2738",
-            backgroundColor: "transparent",
-            cursor: "pointer",
-            padding: "10px",
-            borderRadius: "5px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "15px",
-            color: "#fff",
-            fontWeight: "bold",
+            border: '1px solid #1d2738',
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            padding: '10px',
+            borderRadius: '5px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '15px',
+            color: '#fff',
+            fontWeight: 'bold',
           }}
         >
           <p>Jump to </p>
@@ -95,7 +83,7 @@ const TopBar = () => {
         </button>
       </div>
     </XStack>
-  );
-};
+  )
+}
 
-export { TopBar };
+export default TopBar