diff --git a/src/components/BackgroundImage.tsx b/src/components/BackgroundImage.tsx new file mode 100644 index 00000000..ca85f113 --- /dev/null +++ b/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 diff --git a/src/components/BackgroundImage/BackgroundImage.jsx b/src/components/BackgroundImage/BackgroundImage.jsx deleted file mode 100644 index cb128012..00000000 --- a/src/components/BackgroundImage/BackgroundImage.jsx +++ /dev/null @@ -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 }; diff --git a/src/components/BackgroundImage/index.jsx b/src/components/BackgroundImage/index.jsx deleted file mode 100644 index be486b4d..00000000 --- a/src/components/BackgroundImage/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { BackgroundImage } from "./BackgroundImage"; diff --git a/src/components/FormattedText.tsx b/src/components/FormattedText.tsx new file mode 100644 index 00000000..a0d02652 --- /dev/null +++ b/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 ( + + {textElements.map((textElement, index) => { + return ( + + {textElement.text} + + ) + })} + + ) +} + +export default FormattedText diff --git a/src/components/FormattedText/FormattedText.jsx b/src/components/FormattedText/FormattedText.jsx deleted file mode 100644 index c3463616..00000000 --- a/src/components/FormattedText/FormattedText.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Text } from "tamagui"; - -const FormattedText = ({ textElements, color, fontSize }) => { - return ( - - {textElements.map((textElement, index) => { - if (textElement.bold) { - return ( - - {textElement.bold} - - ); - } - if (textElement.italic) { - return ( - - {textElement.italic} - - ); - } - return {textElement.text}; - })} - - ); -}; - -export { FormattedText }; diff --git a/src/components/FormattedText/index.jsx b/src/components/FormattedText/index.jsx deleted file mode 100644 index 22519ef1..00000000 --- a/src/components/FormattedText/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { FormattedText } from "./FormattedText"; diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx new file mode 100644 index 00000000..56eae101 --- /dev/null +++ b/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 +} + +export default Icon diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx deleted file mode 100644 index 3d8965b8..00000000 --- a/src/components/Icon/Icon.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Image } from "tamagui"; - -const Icon = ({ source, width = 16, height = 16, ...props }) => { - return ( - - ); -}; - -export { Icon }; diff --git a/src/components/Icon/index.jsx b/src/components/Icon/index.jsx deleted file mode 100644 index 65d727be..00000000 --- a/src/components/Icon/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { Icon } from "./Icon"; diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx new file mode 100644 index 00000000..84f14be5 --- /dev/null +++ b/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 ( + }> + {children} + + ) +} + +export default IconButton diff --git a/src/components/IconButton/IconButton.jsx b/src/components/IconButton/IconButton.jsx deleted file mode 100644 index 5484928b..00000000 --- a/src/components/IconButton/IconButton.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Icon } from "../Icon/Icon"; -import { ReactButton } from "../ReactButton"; - -const IconButton = ({ icon, text, ...props }) => { - return ( - }> - {text} - - ); -}; - -export { IconButton }; diff --git a/src/components/IconButton/index.jsx b/src/components/IconButton/index.jsx deleted file mode 100644 index c62ce989..00000000 --- a/src/components/IconButton/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { IconButton } from "./IconButton"; diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx new file mode 100644 index 00000000..aeb98825 --- /dev/null +++ b/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 ( + + + + {children} + + + ) +} + +export default IconText diff --git a/src/components/IconText/IconText.jsx b/src/components/IconText/IconText.jsx deleted file mode 100644 index b7700a73..00000000 --- a/src/components/IconText/IconText.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Paragraph, XStack } from "tamagui"; -import { Icon } from "../Icon/Icon"; - -const IconText = ({ icon, text, ...props }) => { - return ( - - - - {text} - - - ); -}; - -export { IconText }; diff --git a/src/components/IconText/index.jsx b/src/components/IconText/index.jsx deleted file mode 100644 index c0944fc5..00000000 --- a/src/components/IconText/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { IconText } from "./IconText"; diff --git a/src/components/InformationBox.tsx b/src/components/InformationBox.tsx new file mode 100644 index 00000000..56959795 --- /dev/null +++ b/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 ( + + + + + ) +} + +export default InformationBox diff --git a/src/components/InformationBox/InformationBox.jsx b/src/components/InformationBox/InformationBox.jsx deleted file mode 100644 index 70fa8789..00000000 --- a/src/components/InformationBox/InformationBox.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { XStack } from "tamagui"; -import { Icon } from "../Icon"; -import { FormattedText } from "../FormattedText"; - -const InformationBox = ({ icon, textElements }) => { - return ( - - - - - ); -}; - -export { InformationBox }; diff --git a/src/components/InformationBox/index.jsx b/src/components/InformationBox/index.jsx deleted file mode 100644 index 20d004a0..00000000 --- a/src/components/InformationBox/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { InformationBox } from "./InformationBox"; diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 00000000..acc484c3 --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,20 @@ +import { XStack } from 'tamagui' +import Icon from './Icon' +import Tag from './Tag' + +const Logo = () => { + return ( + + + + + + ) +} + +export default Logo diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx deleted file mode 100644 index faa53fb1..00000000 --- a/src/components/Logo/Logo.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import { XStack } from "tamagui"; -import { Tag } from "../Tag"; -import { Icon } from "../Icon"; - -const Logo = () => { - return ( - - - - - - ); -}; - -export { Logo }; diff --git a/src/components/Logo/index.jsx b/src/components/Logo/index.jsx deleted file mode 100644 index cd9b8337..00000000 --- a/src/components/Logo/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { Logo } from "./Logo"; diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx new file mode 100644 index 00000000..0f1a45fb --- /dev/null +++ b/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 ( + +
+ + {children} + +
+ + ) +} + +export default PageWrapper diff --git a/src/components/PageWrapper/PageWrapper.jsx b/src/components/PageWrapper/PageWrapper.jsx deleted file mode 100644 index 1e556c0b..00000000 --- a/src/components/PageWrapper/PageWrapper.jsx +++ /dev/null @@ -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 ( - -
- - - - {children} - - -
- - ); -}; - -export { PageWrapper }; diff --git a/src/components/PageWrapper/index.jsx b/src/components/PageWrapper/index.jsx deleted file mode 100644 index 7f919097..00000000 --- a/src/components/PageWrapper/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { PageWrapper } from "./PageWrapper"; diff --git a/src/components/ReactButton.tsx b/src/components/ReactButton.tsx new file mode 100644 index 00000000..e1fd1fec --- /dev/null +++ b/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 +} + +export default ReactButton diff --git a/src/components/ReactButton/ReactButton.jsx b/src/components/ReactButton/ReactButton.jsx deleted file mode 100644 index 2fad2799..00000000 --- a/src/components/ReactButton/ReactButton.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Button } from "tamagui"; - -const ReactButton = ({ children, ...props }) => { - return ; -}; - -export { ReactButton }; diff --git a/src/components/ReactButton/index.jsx b/src/components/ReactButton/index.jsx deleted file mode 100644 index 41f1d588..00000000 --- a/src/components/ReactButton/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { ReactButton } from "./ReactButton"; diff --git a/src/components/ShadowBox.tsx b/src/components/ShadowBox.tsx new file mode 100644 index 00000000..790dd226 --- /dev/null +++ b/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 diff --git a/src/components/ShadowBox/ShadowBox.jsx b/src/components/ShadowBox/ShadowBox.jsx deleted file mode 100644 index f5f6e5f9..00000000 --- a/src/components/ShadowBox/ShadowBox.jsx +++ /dev/null @@ -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 }; diff --git a/src/components/ShadowBox/index.jsx b/src/components/ShadowBox/index.jsx deleted file mode 100644 index 1124b8fa..00000000 --- a/src/components/ShadowBox/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { ShadowBox } from "./ShadowBox"; diff --git a/src/components/SubTitle.tsx b/src/components/SubTitle.tsx new file mode 100644 index 00000000..d6f54e5f --- /dev/null +++ b/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 diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx new file mode 100644 index 00000000..84383dfd --- /dev/null +++ b/src/components/Tag.tsx @@ -0,0 +1,26 @@ +import { Paragraph } from 'tamagui' + +type TagProps = { + bc: string + text: string +} + +const Tag = ({ bc, text }: TagProps) => { + return ( +
+ + {text} + +
+ ) +} + +export default Tag diff --git a/src/components/Tag/Tag.jsx b/src/components/Tag/Tag.jsx deleted file mode 100644 index d3ed67ea..00000000 --- a/src/components/Tag/Tag.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Paragraph } from "tamagui"; - -const Tag = ({ bc, text }) => { - return ( -
- - {text} - -
- ); -}; - -export { Tag }; diff --git a/src/components/Tag/index.jsx b/src/components/Tag/index.jsx deleted file mode 100644 index 736cac7b..00000000 --- a/src/components/Tag/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { Tag } from "./Tag"; diff --git a/src/components/Title.tsx b/src/components/Title.tsx new file mode 100644 index 00000000..9b24ad3a --- /dev/null +++ b/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 diff --git a/src/components/Titles.tsx b/src/components/Titles.tsx new file mode 100644 index 00000000..93f872c2 --- /dev/null +++ b/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 ( + + + {title} + + Advanced Settings + + + {subtitle} + + ) +} + +export default Titles diff --git a/src/components/Titles/SubTitle.jsx b/src/components/Titles/SubTitle.jsx deleted file mode 100644 index 8194d207..00000000 --- a/src/components/Titles/SubTitle.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Paragraph, styled } from "tamagui"; - -export const SubTitle = styled(Paragraph, { - name: "SubTitle", - accessibilityRole: "header", - size: "$3", -}); diff --git a/src/components/Titles/Title.jsx b/src/components/Titles/Title.jsx deleted file mode 100644 index b61f8ea6..00000000 --- a/src/components/Titles/Title.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Paragraph, styled } from "tamagui"; - -export const Title = styled(Paragraph, { - name: "Title", - accessibilityRole: "header", - size: "$9", -}); diff --git a/src/components/Titles/Titles.jsx b/src/components/Titles/Titles.jsx deleted file mode 100644 index 69aa3471..00000000 --- a/src/components/Titles/Titles.jsx +++ /dev/null @@ -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 ( - - - {title} - - - {subtitle} - - ); -}; - -export { Titles }; diff --git a/src/components/Titles/index.jsx b/src/components/Titles/index.jsx deleted file mode 100644 index 1d56e4f6..00000000 --- a/src/components/Titles/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { Titles } from "./Titles"; diff --git a/src/components/TopBar/Tab.jsx b/src/components/TopBar/Tab.jsx deleted file mode 100644 index f04a3201..00000000 --- a/src/components/TopBar/Tab.jsx +++ /dev/null @@ -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 ( - <> - - - {text} - - - ); -}; -export { Tab }; diff --git a/src/components/TopBar/TopBar.css b/src/components/TopBar/TopBar.css deleted file mode 100644 index fd7df3e3..00000000 --- a/src/components/TopBar/TopBar.css +++ /dev/null @@ -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; -} diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx deleted file mode 100644 index 85f50061..00000000 --- a/src/components/TopBar/TopBar.jsx +++ /dev/null @@ -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 ( - - -
- - - -
- - - - - - - - - -
- {Array.from({ length: 9 }).map((e, i) => ( - - ))} -
-
- -

Jump to

- - - - -
- - ); -}; - -export { TopBar }; diff --git a/src/components/TopBar/index.jsx b/src/components/TopBar/index.jsx deleted file mode 100644 index 7cc3ff04..00000000 --- a/src/components/TopBar/index.jsx +++ /dev/null @@ -1 +0,0 @@ -export { TopBar } from "./TopBar";