Merge branch 'main' into ia-creating-components

.github/workflows/ui-tests.yaml

@@ -22,6 +22,27 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn
 
+  build:
+    runs-on: ubuntu-latest
+    needs: cache-dependencies
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+      - name: Restore yarn dependencies
+        uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            node_modules
+          key: ${{ runner.os }}-yarn-v3-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-v3
+      - name: Build
+        run: yarn build
+
   interaction-and-and-accessibility:
     runs-on: ubuntu-latest
     needs: cache-dependencies

.github/workflows/ui-tests.yml

@@ -1 +0,0 @@
-name: 'UI tests'

package.json

@@ -17,15 +17,17 @@
     "react-dom": "18"
   },
   "dependencies": {
+    "@nivo/pie": "^0.83.0",
     "@status-im/components": "^0.2.6",
-    "@status-im/react": "^0.1.1",
     "@tamagui/config": "1.36.4",
     "@tamagui/react-17-patch": "1.36.4",
     "@tamagui/vite-plugin": "1.36.4",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "expo-modules-core": "^1.5.9",
     "react": "18",
     "react-dom": "18",
+    "react-native": "^0.72.3",
     "react-native-svg": "^13.10.0",
     "tamagui": "1.36.4"
   },
@@ -51,7 +53,7 @@
     "prettier": "^3.0.1",
     "storybook": "^7.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.9"
   },
   "packageManager": "yarn@3.6.1"
 }

src/App.tsx

@@ -1,10 +1,10 @@
 import { TamaguiProvider } from 'tamagui'
 import './App.css'
 import { Provider as StatusProvider } from '@status-im/components'
-
 import config from '../tamagui.config'
 import LandingPage from './components/LayoutComponent/LandingPage'
 
+
 function App() {
   return (
     <TamaguiProvider config={config}>

src/components/BackgroundImage.tsx

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

src/components/BackgroundImage/BackgroundImage.jsx

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

src/components/BackgroundImage/index.jsx

@@ -1 +0,0 @@
-export { BackgroundImage } from "./BackgroundImage";

src/components/FormattedText.tsx

@@ -0,0 +1,36 @@
+import { Text } from 'tamagui'
+
+export type TextElement = {
+  text: string
+  bold?: boolean
+  italic?: boolean
+}
+
+type FormattedTextProps = {
+  textElements: TextElement[]
+  color?: string
+  fontSize?: string
+}
+
+const FormattedText = ({ textElements, color, fontSize }: FormattedTextProps) => {
+  const calculateStyle = (textElement: TextElement) => {
+    const isBold = textElement.bold ?? false
+    const isItalic = textElement.italic ?? false
+
+    return { fontWeight: isBold ? 'bold' : '', fontStyle: isItalic ? 'italic' : '' }
+  }
+
+  return (
+    <Text color={color} fontSize={fontSize}>
+      {textElements.map((textElement, index) => {
+        return (
+          <span style={calculateStyle(textElement)} key={index}>
+            {textElement.text}
+          </span>
+        )
+      })}
+    </Text>
+  )
+}
+
+export default FormattedText

src/components/FormattedText/FormattedText.jsx

@@ -1,27 +0,0 @@
-import { Text } from "tamagui";
-
-const FormattedText = ({ textElements, color, fontSize }) => {
-  return (
-    <Text color={color} fontSize={fontSize}>
-      {textElements.map((textElement, index) => {
-        if (textElement.bold) {
-          return (
-            <span key={index} style={{ fontWeight: "bold" }}>
-              {textElement.bold}
-            </span>
-          );
-        }
-        if (textElement.italic) {
-          return (
-            <span key={index} style={{ fontStyle: "italic" }}>
-              {textElement.italic}
-            </span>
-          );
-        }
-        return <span key={index}>{textElement.text}</span>;
-      })}
-    </Text>
-  );
-};
-
-export { FormattedText };

src/components/FormattedText/index.jsx

@@ -1 +0,0 @@
-export { FormattedText } from "./FormattedText";

src/components/Icon.tsx

@@ -0,0 +1,15 @@
+import { Image } from 'tamagui'
+
+export type IconProps = {
+  source: string
+  width?: number
+  height?: number
+  style?: unknown
+  className?: string
+}
+
+const Icon = ({ source, width = 16, height = 16, ...props }: IconProps) => {
+  return <Image {...props} source={{ uri: source }} width={width} height={height} />
+}
+
+export default Icon

src/components/Icon/Icon.jsx

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

src/components/Icon/index.jsx

@@ -1 +0,0 @@
-export { Icon } from "./Icon";

src/components/IconButton.tsx

@@ -0,0 +1,21 @@
+import Icon from './Icon'
+import ReactButton from './ReactButton'
+
+type IconButtonProps = {
+  children: string
+  icon: string
+  style?: unknown
+  size?: string
+  fontSize?: string
+  onClick?: () => void
+}
+
+const IconButton = ({ icon, children, ...props }: IconButtonProps) => {
+  return (
+    <ReactButton {...props} icon={<Icon source={icon} />}>
+      {children}
+    </ReactButton>
+  )
+}
+
+export default IconButton

src/components/IconButton/IconButton.jsx

@@ -1,12 +0,0 @@
-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 };

src/components/IconButton/index.jsx

@@ -1 +0,0 @@
-export { IconButton } from "./IconButton";

src/components/IconText.tsx

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

src/components/IconText/IconText.jsx

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

src/components/IconText/index.jsx

@@ -1 +0,0 @@
-export { IconText } from "./IconText";

src/components/InformationBox.tsx

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

src/components/InformationBox/InformationBox.jsx

@@ -1,27 +0,0 @@
-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",
-      }}
-      space={"$2"}
-    >
-      <Icon source={icon} width={12} height={12} style={{ marginTop: "6px" }} />
-      <FormattedText
-        textElements={textElements}
-        color={"#647084"}
-        fontSize={"$3"}
-      />
-    </XStack>
-  );
-};
-
-export { InformationBox };

src/components/InformationBox/index.jsx

@@ -1 +0,0 @@
-export { InformationBox } from "./InformationBox";

src/components/Logo.tsx

@@ -0,0 +1,20 @@
+import { XStack } from 'tamagui'
+import Icon from './Icon'
+import Tag from './Tag'
+
+const Logo = () => {
+  return (
+    <XStack
+      style={{
+        alignItems: 'center',
+      }}
+      space={'$2'}
+    >
+      <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 default Logo

src/components/Logo/Logo.jsx

@@ -1,20 +0,0 @@
-import { XStack } from "tamagui";
-import { Tag } from "../Tag";
-import { Icon } from "../Icon";
-
-const Logo = () => {
-  return (
-    <XStack
-      style={{
-        alignItems: "center",
-      }}
-      space={"$2"}
-    >
-      <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 };

src/components/Logo/index.jsx

@@ -1 +0,0 @@
-export { Logo } from "./Logo";

src/components/PageWrapper.tsx

@@ -0,0 +1,43 @@
+import { Stack, XStack, styled } from 'tamagui'
+import { ReactNode } from 'react'
+
+const Background = styled(Stack, {
+  display: 'flex',
+  justifyContent: 'center',
+  backgroundColor: 'white',
+  width: '100vw',
+})
+
+type PageWrapperProps = {
+  children: ReactNode
+}
+
+const PageWrapper = ({ children }: PageWrapperProps) => {
+  return (
+    <Background>
+      <div
+        style={{
+          border: '4px solid #09101C',
+          borderRadius: '30px',
+          padding: 0,
+          margin: 0,
+        }}
+      >
+        <XStack
+          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',
+          }}
+        >
+          {children}
+        </XStack>
+      </div>
+    </Background>
+  )
+}
+
+export default PageWrapper

src/components/PageWrapper/PageWrapper.jsx

@@ -1,43 +0,0 @@
-import { XStack, YStack, styled } from "tamagui";
-import { TopBar } from "../TopBar";
-
-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",
-        }}
-      >
-        <YStack>
-          <TopBar />
-          <XStack
-            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",
-            }}
-          >
-            {children}
-          </XStack>
-        </YStack>
-      </div>
-    </Background>
-  );
-};
-
-export { PageWrapper };

src/components/PageWrapper/index.jsx

@@ -1 +0,0 @@
-export { PageWrapper } from "./PageWrapper";

src/components/ReactButton.tsx

@@ -0,0 +1,16 @@
+import { Button } from 'tamagui'
+import { ReactNode } from 'react'
+
+type ReactButtonProps = {
+  children: string
+  style?: unknown
+  icon?: ReactNode
+  size?: string
+  onClick?: () => void
+}
+
+const ReactButton = ({ children, ...props }: ReactButtonProps) => {
+  return <Button {...props}>{children}</Button>
+}
+
+export default ReactButton

src/components/ReactButton/ReactButton.jsx

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

src/components/ReactButton/index.jsx

@@ -1 +0,0 @@
-export { ReactButton } from "./ReactButton";

src/components/ShadowBox.tsx

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

src/components/ShadowBox/ShadowBox.jsx

@@ -1,10 +0,0 @@
-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%",
-});
-
-export { ShadowBox };

src/components/ShadowBox/index.jsx

@@ -1 +0,0 @@
-export { ShadowBox } from "./ShadowBox";

src/components/StandardGauge.tsx

@@ -0,0 +1,28 @@
+import { ResponsivePie } from '@nivo/pie'
+
+interface Data {
+  id: string
+  label: string
+  value: number
+  color: string
+}
+interface StandardGaugeProps {
+  data: Data[]
+}
+
+const StandardGauge = ({ data }: StandardGaugeProps) => (
+  <ResponsivePie
+    data={data}
+    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+    innerRadius={0.65}
+    colors={datum => datum.data.color}
+    fit={false}
+    activeOuterRadiusOffset={8}
+    enableArcLinkLabels={false}
+    arcLinkLabelsColor={{ from: 'color' }}
+    enableArcLabels={false}
+    legends={[]}
+  />
+)
+
+export default StandardGauge

src/components/SubTitle.tsx

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

src/components/Tag.tsx

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

src/components/Tag/Tag.jsx

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

src/components/Tag/index.jsx

@@ -1 +0,0 @@
-export { Tag } from "./Tag";

src/components/Title.tsx

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

src/components/Titles.tsx

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

src/components/Titles/SubTitle.jsx

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

src/components/Titles/Title.jsx

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

src/components/Titles/Titles.jsx

@@ -1,28 +0,0 @@
-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>
-        <IconButton
-          style={{
-            backgroundColor: "transparent",
-            border: "1px solid #DCE0E5",
-          }}
-          color={"#09101C"}
-          size={"$3"}
-          icon={"/icons/reveal.png"}
-          text={"Advanced Settings"}
-          fontSize={"$5"}
-        />
-      </XStack>
-      <SubTitle color={"#09101C"}>{subtitle}</SubTitle>
-    </YStack>
-  );
-};
-
-export { Titles };

src/components/Titles/index.jsx

@@ -1 +0,0 @@
-export { Titles } from "./Titles";

src/components/TopBar/Tab.jsx

@@ -1,25 +0,0 @@
-import { XStack, Stack, 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",
-  };
-  return (
-    <>
-      <XStack style={styl}>
-        <Icon source={icon}></Icon>
-        <Text>{text}</Text>
-      </XStack>
-    </>
-  );
-};
-export { Tab };

src/components/TopBar/TopBar.css

@@ -1,139 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.topbar {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 15px 25px;
-  background-color: rgba(9, 16, 28, 0.96);
-  max-width: 1512px;
-  height: 56px;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-}
-
-.topbar_left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 15vw;
-  box-shadow: 40px 12px 62px -19px rgba(9, 16, 28, 0.9);
-  z-index: 1;
-}
-
-.topbar_middle {
-  max-width: 75vw;
-  width: 75vw;
-  overflow: auto;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.topbar_middle::-webkit-scrollbar {
-  width: 0.5em;
-  /* Set the width of the scrollbar */
-}
-
-.topbar_middle::-webkit-scrollbar-thumb {
-  background-color: darkgrey;
-  /* Set the color of the scrollbar thumb */
-}
-
-.topbar_middle::-webkit-scrollbar {
-  width: 0.5em;
-}
-
-.topbar_middle::-webkit-scrollbar-thumb {
-  background-color: #888;
-}
-/* Hide scrollbar for Firefox */
-
-.topbar_middle {
-  scrollbar-width: none;
-}
-
-.topbar_middle::-webkit-scrollbar,
-.topbar_middle::-webkit-scrollbar-thumb {
-  /* Hide scrollbar for Edge */
-  display: none;
-}
-
-.topbar_right {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  min-width: 10vw;
-  box-shadow: -40px 0px 8px 4px rgba(9, 16, 28, 0.592);
-}
-
-.topbar_actions {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.icon_btn {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  position: relative;
-}
-
-.bg_icon_btn {
-  border: none;
-  background-color: #1d2738;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-}
-
-
-
-.img_text_btn .profile {
-  position: relative;
-}
-
-.badge_top {
-  width: 6px;
-  height: 6px;
-  background-color: #223bc4;
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-radius: 100%;
-}
-
-.badge_bottom {
-  width: 6px;
-  height: 6px;
-  background-color: #1c8a80;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  border-radius: 100%;
-}
-
-.outlined_btn {
-  border: none;
-  border: 1px solid #1d2738;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 10px;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  color: #fff;
-  font-weight: bold;
-}

src/components/TopBar/TopBar.jsx

@@ -1,101 +0,0 @@
-//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 "./TopBar.css";
-import { ReactButton } from "../ReactButton";
-import { Button, Tabs, XStack } from "tamagui";
-import { Icon } from "../Icon";
-import { IconButton } from "../IconButton";
-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",
-  };
-  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>
-        </div>
-        <Icon src={Arrow} width={32} height={32} 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={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>
-      </XStack>
-      <div className="topbar_middle">
-        {Array.from({ length: 9 }).map((e, i) => (
-          <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",
-          }}
-        >
-          <p>Jump to </p>
-        </ReactButton>
-        <button className="icon_btn">
-          <img src={FullScreen} alt=" " width="100%" />
-        </button>
-        <button className="icon_btn">
-          <div className="badge_top" />
-
-          <img src={Bell} alt=" " />
-        </button>
-        <button className="icon_btn">
-          <div className="badge_bottom" />
-
-          <img src={User} alt=" " />
-        </button>
-      </div>
-    </XStack>
-  );
-};
-
-export { TopBar };

src/components/TopBar/index.jsx

@@ -1 +0,0 @@
-export { TopBar } from "./TopBar";

tamagui.config.ts

@@ -1,6 +1,9 @@
 import { config } from '@tamagui/config'
+import { Text, View } from 'react-native'
 
-import { createTamagui } from 'tamagui' // or '@tamagui/core'
+import { createTamagui, setupReactNative } from '@tamagui/core'
+
+setupReactNative({ Text, View })
 
 const appConfig = createTamagui(config)
 export type AppConfig = typeof appConfig

vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+const extensions = ['.web.js', '.web.ts', '.web.tsx', '.js', '.jsx', '.json', '.ts', '.tsx', '.mjs']
+
 export default defineConfig({
   plugins: [react()],
   define: {
@@ -9,23 +11,14 @@ export default defineConfig({
     'process.env.TAMAGUI_TARGET': JSON.stringify('web'),
   },
   resolve: {
+    extensions,
     alias: {
       'react-native': 'react-native-web',
     },
   },
   optimizeDeps: {
     esbuildOptions: {
-      resolveExtensions: [
-        '.web.js',
-        '.web.ts',
-        '.web.tsx',
-        '.js',
-        '.jsx',
-        '.json',
-        '.ts',
-        '.tsx',
-        '.mjs',
-      ],
+      resolveExtensions: extensions,
       loader: {
         '.js': 'jsx',
       },