+
+
+ );
+};
diff --git a/src/components/twitterAdded/feedsPage/voteIcon.tsx b/src/components/twitterAdded/feedsPage/voteIcon.tsx
new file mode 100644
index 0000000..49eb339
--- /dev/null
+++ b/src/components/twitterAdded/feedsPage/voteIcon.tsx
@@ -0,0 +1,88 @@
+import React, { FC, useState } from 'react';
+
+import '../../../tailwind.css';
+
+interface VoteTwitterProps {
+ twitterId: string;
+ userName: string;
+}
+
+export const VoteTwitter: FC{price}
+ setVoted(!voted)}
+ >
+ {!voted ? (
+
+ ) : (
+
+ )}
+
+ );
+};
diff --git a/src/content/Content.tsx b/src/content/Content.tsx
index 7a5bab4..b284d63 100644
--- a/src/content/Content.tsx
+++ b/src/content/Content.tsx
@@ -8,7 +8,7 @@ const Content = (): ReactElement => {
style={{
position: 'fixed',
zIndex: 999,
- bottom: 0,
+ top: 0,
right: 0,
}}
>
diff --git a/src/content/addToTwitter.tsx b/src/content/addToTwitter.tsx
new file mode 100644
index 0000000..a2e089a
--- /dev/null
+++ b/src/content/addToTwitter.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { FriendPrice } from '../components/twitterAdded/feedsPage/ethIcon';
+import { VoteTwitter } from '../components/twitterAdded/feedsPage/voteIcon';
+
+export const addPriceComponent = (element: Element, tweetId: string) => {
+ const priceContainer = document.createElement('div');
+ const specificElement = element.querySelector(
+ 'article > div > div > div:nth-child(2) > div:nth-child(1)'
+ );
+
+ if (specificElement) {
+ const root = createRoot(priceContainer);
+ root.render(
+
+
+ );
+ specificElement.appendChild(priceContainer);
+ }
+};
+
+export const addVoteComponent = (element: Element, tweetId: string, userName: string) => {
+ const voteContainer = document.createElement('div');
+ const specificElement = element.querySelector(
+ 'article > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(4) > div > div'
+ );
+
+ if (specificElement) {
+ const root = createRoot(voteContainer);
+ root.render(
+
+
+ );
+ specificElement.appendChild(voteContainer);
+ } else {
+ // 如果不存在图文， div:nth-child(4) 便不存在，选在 div:nth-child(3) 的位置插入
+ const specificElement2 = element.querySelector(
+ 'article > div > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) > div > div'
+ );
+ if (specificElement2) {
+ const root = createRoot(voteContainer);
+ root.render(
+
+
+ );
+ specificElement2.appendChild(voteContainer);
+ }
+ }
+};
diff --git a/src/content/drawer/index.tsx b/src/content/drawer/index.tsx
index 6475521..56f8037 100644
--- a/src/content/drawer/index.tsx
+++ b/src/content/drawer/index.tsx
@@ -1,85 +1,49 @@
-import React from 'react';
-import Divider from '@material-ui/core/Divider';
-import Drawer from '@material-ui/core/Drawer';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core/styles';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import MailIcon from '@material-ui/icons/Mail';
-import MenuIcon from '@material-ui/icons/Menu';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import clsx from 'clsx';
+import * as React from 'react';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import MenuIcon from '@mui/icons-material/Menu';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
-import { Counter } from '../features/counter/Counter';
+import Profile from '../../welcome/Profile';
+import Wallet from '../../welcome/Wallet';
+import CongratulationPage from '../loginPage/congratulationPage';
+import InvitePage from '../loginPage/invitePage';
+import SignInWithXPage from '../loginPage/signInWithXPage';
-const drawerWidth = 340;
+import '../../tailwind.css';
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- display: 'flex',
- },
- appBar: {
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- },
- appBarShift: {
- width: `calc(100% - ${drawerWidth}px)`,
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen,
- }),
- marginRight: drawerWidth,
- },
- title: {
- flexGrow: 1,
- },
- hide: {
- display: 'none',
- },
- drawer: {
- width: drawerWidth,
- flexShrink: 0,
- },
- drawerPaper: {
- width: drawerWidth,
- },
- drawerHeader: {
- display: 'flex',
- alignItems: 'center',
- padding: theme.spacing(0, 1),
- // necessary for content to be below app bar
- ...theme.mixins.toolbar,
- justifyContent: 'flex-start',
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- transition: theme.transitions.create('margin', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- marginRight: -drawerWidth,
- },
- contentShift: {
- transition: theme.transitions.create('margin', {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen,
- }),
- marginRight: 0,
- },
- })
-);
+const drawerWidth = 463;
+
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+ open?: boolean;
+}>(({ theme, open }) => ({
+ // flexGrow: 1,
+ // padding: theme.spacing(3),
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ marginRight: -drawerWidth,
+ ...(open && {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ marginRight: 0,
+ }),
+ /**
+ * This is necessary to enable the selection of content. In the DOM, the stacking order is determined
+ * by the order of appearance. Following this rule, elements appearing later in the markup will overlay
+ * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures
+ * proper interaction with the underlying content.
+ */
+ position: 'relative',
+}));
export default function PersistentDrawerRight() {
- const classes = useStyles();
- const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
@@ -90,59 +54,52 @@ export default function PersistentDrawerRight() {
setOpen(false);
};
+ const [pageState, setPageState] = React.useState('login');
+
return (
-
+
-
-
-
-
+
-
);
}
diff --git a/src/content/index.tsx b/src/content/index.tsx
index 62c464e..129b295 100644
--- a/src/content/index.tsx
+++ b/src/content/index.tsx
@@ -5,55 +5,59 @@ import { Store } from '@eduardoac-skimlinks/webext-redux';
import { proxyStore as store } from '../app/proxyStore';
+import { addPriceComponent, addVoteComponent } from './addToTwitter';
import Content from './Content';
+const addTwitterComponent = () => {
+ const thirdElement = document.querySelectorAll(
+ '#react-root > div > div > div > main > div > div > div > div > div > div > div'
+ )[3];
+
+ // 现有元素的处理逻辑
+ const targetElements = thirdElement.querySelectorAll('section > div > div > div');
+ targetElements.forEach(function (element, index) {
+ const anchorElements = element.querySelectorAll('a');
+ const hrefs = Array.from(anchorElements).map((anchor) => anchor.href);
+ const twitterUrlString = hrefs[hrefs.length - 1];
+ if (twitterUrlString !== undefined) {
+ const urlObject = new URL(twitterUrlString);
+ const pathSegments = urlObject.pathname.split('/');
+ const username = pathSegments[1];
+ const tweetId = pathSegments[3];
+
+ // 判断是否存在已经插入的元素
+ const existingPriceElement = document.getElementById('xfans-price-' + tweetId);
+ const existingVoteElement = document.getElementById('xfans-vote-' + tweetId);
+
+ if (!existingPriceElement) {
+ addPriceComponent(element, tweetId);
+ } else {
+ // console.log('Element already exists for tweetId:', tweetId);
+ }
+
+ if (!existingVoteElement) {
+ addVoteComponent(element, tweetId, username);
+ } else {
+ // console.log('Element already exists for tweetId:', tweetId);
+ }
+ }
+ });
+};
+
withProxyStore( {
diff --git a/src/content/loginPage/congratulationPage.tsx b/src/content/loginPage/congratulationPage.tsx
new file mode 100644
index 0000000..2db5844
--- /dev/null
+++ b/src/content/loginPage/congratulationPage.tsx
@@ -0,0 +1,71 @@
+import React, { FC } from 'react';
+
+import { NextButton, VerifyButton } from '../../components/buttons/loginButton';
+
+import '../../tailwind.css';
+
+interface CongratulationPageProps {
+ handleButtonClick: () => void; // 定义一个函数类型的属性
+}
+
+const CongratulationPage: FC = ({ handleButtonClick }) => {
+ return (
+ = ({ handleButtonClick }) => {
+ const [inviteCode, setInviteCode] = useState(''); // 添加状态来存储邀请码
+
+ const handleNextButtonClick = () => {
+ // 在点击事件中获取输入值并调用传入的函数
+ if (inviteCode.trim() !== '') {
+ handleButtonClick(inviteCode); // 传递邀请码给父组件的函数
+ } else {
+ // 如果邀请码为空，可以在这里添加提示或者错误处理
+ alert('Invite code is required.');
+ }
+ };
+ return (
+ = ({ handleButtonClick }) => {
+ return (
+ '],
+ host_permissions: ['https://twitter.com/*', 'https://x.com/*'],
options_ui: {
page: 'src/options/options.html',
open_in_tab: true,
@@ -25,7 +25,7 @@ const manifest: ManifestV3Export = {
// this file is web accessible; it supports HMR b/c it's declared in `rollupOptions.input`
'src/welcome/welcome.html',
],
- matches: [''],
+ matches: ['https://twitter.com/*', 'https://x.com/*'],
},
],
action: {
diff --git a/src/welcome/Profile/Claim.tsx b/src/welcome/Profile/Claim.tsx
new file mode 100644
index 0000000..977b4bd
--- /dev/null
+++ b/src/welcome/Profile/Claim.tsx
@@ -0,0 +1,229 @@
+import React from 'react';
+import { Divider } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { useToggle } from 'ahooks';
+
+import { BasicButton, PrimaryButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Icon = () => (
+
+);
+
+const rows = [
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+
+ Claim
+
+
+
+
+ );
+};
+
+export default Claim;
diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx
new file mode 100644
index 0000000..eadcd9e
--- /dev/null
+++ b/src/welcome/Profile/Explore.tsx
@@ -0,0 +1,261 @@
+import React from 'react';
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+
+const Icon = () => (
+
+);
+
+const Explore = () => {
+ const list = Array(7).fill('');
+
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+ return (
+
+ History
+
+
+
+
+ );
+};
+
+export default History;
diff --git a/src/welcome/Profile/Reward.tsx b/src/welcome/Profile/Reward.tsx
new file mode 100644
index 0000000..89eb817
--- /dev/null
+++ b/src/welcome/Profile/Reward.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import { Divider } from '@mui/material';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+
+import Claim from './Claim';
+import History from './History';
+
+const Icon = () => (
+
+);
+
+const Reward = () => {
+ const list = Array(7).fill('');
+ const [value, setValue] = React.useState('1');
+
+ const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+ setValue(newValue);
+ };
+
+ return (
+ <>
+ = {
+ explore:
+ Buy
+
+
+
+
+ );
+};
+
+export default BuyModal;
diff --git a/src/welcome/Wallet/Deposit.tsx b/src/welcome/Wallet/Deposit.tsx
new file mode 100644
index 0000000..73fae20
--- /dev/null
+++ b/src/welcome/Wallet/Deposit.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { useToggle } from 'ahooks';
+
+import { BasicButton, PrimaryButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Left = () => (
+
+);
+
+const Deposit = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+ Deposit
+
+
+
+
+ );
+};
+
+export default Deposit;
diff --git a/src/welcome/Wallet/InviteFriends.tsx b/src/welcome/Wallet/InviteFriends.tsx
new file mode 100644
index 0000000..02c86cc
--- /dev/null
+++ b/src/welcome/Wallet/InviteFriends.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { useToggle } from 'ahooks';
+
+import { BasicButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Copy = () => (
+
+);
+
+const rows = [
+ {
+ time: 'Jan 05 2024, 14:32',
+ user: 'Cody Fisher',
+ value: 0.001,
+ },
+ {
+ time: 'Jan 05 2024, 14:32',
+ user: 'Cody Fisher',
+ value: 0.001,
+ },
+ {
+ time: 'Jan 05 2024, 14:32',
+ user: 'Cody Fisher',
+ value: 0.001,
+ },
+];
+
+const InviteFriends = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+ Invite Friends
+
+
+
+
+ );
+};
+
+export default InviteFriends;
diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx
new file mode 100644
index 0000000..f53c8d6
--- /dev/null
+++ b/src/welcome/Wallet/Profile.tsx
@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { useToggle } from 'ahooks';
+
+import { BasicButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+import BuyModal from './BuyModal';
+import SellModal from './SellModal';
+
+const Icon = () => (
+
+);
+
+const rows = [
+ {
+ holder: (
+
+ Profile
+
+
+
+
+ );
+};
+
+export default ProfileModal;
diff --git a/src/welcome/Wallet/SellModal.tsx b/src/welcome/Wallet/SellModal.tsx
new file mode 100644
index 0000000..b94f22c
--- /dev/null
+++ b/src/welcome/Wallet/SellModal.tsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import { Divider } from '@mui/material';
+import { useToggle } from 'ahooks';
+
+import { BasicButton, PrimaryButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Icon = () => (
+
+);
+
+const Left = () => (
+
+);
+
+const SellModal = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+ Sell
+
+
+
+
+ );
+};
+
+export default SellModal;
diff --git a/src/welcome/Wallet/WithDraw.tsx b/src/welcome/Wallet/WithDraw.tsx
new file mode 100644
index 0000000..a1d3984
--- /dev/null
+++ b/src/welcome/Wallet/WithDraw.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { styled, TextField as MTextField } from '@mui/material';
+import { useToggle } from 'ahooks';
+
+import { BasicButton, PrimaryButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Icon = () => (
+
+);
+
+const TextField = styled(MTextField)({
+ width: '493px',
+ '& label.Mui-focused': {
+ color: '#A0AAB4',
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: '#E0E3E7',
+ borderRadius: '8px',
+ },
+ '&:hover fieldset': {
+ borderColor: '#9A6CF9',
+ borderRadius: '8px',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: '#9A6CF9',
+ borderRadius: '8px',
+ },
+ },
+});
+
+const Left = () => (
+
+);
+
+const WithDraw = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+ Withdraw
+
+
+
+
+ );
+};
+
+export default WithDraw;
diff --git a/src/welcome/Wallet/index.tsx b/src/welcome/Wallet/index.tsx
new file mode 100644
index 0000000..24442e2
--- /dev/null
+++ b/src/welcome/Wallet/index.tsx
@@ -0,0 +1,238 @@
+import React from 'react';
+
+import Deposit from './Deposit';
+import InviteFriends from './InviteFriends';
+import WithDraw from './WithDraw';
+
+const Copy = () => (
+
+);
+
+const Network = () => (
+
+);
+
+const WalletIcon = () => (
+
+);
+
+const Fire = () => (
+
+);
+
+const Gift = () => (
+
+);
+
+const Icon = () => (
+
+);
+
+const GoBack = () => (
+
+);
+
+const Wallet = (props: { handleButtonClick?: () => void }) => {
+ return (
+
-
- {theme.direction === 'rtl' ?
+
+
+ setPageState('invite')} />
+ )}
+ {pageState === 'invite' && (
+ setPageState('congratulation')} />
+ )}
+ {pageState === 'congratulation' && (
+ setPageState('profile')} />
+ )}
+ {pageState === 'profile' && setPageState('wallet')} />}
+ {pageState === 'wallet' && setPageState('profile')} />}
-
+
+ -
- {['Inbox', 'Starred', 'Send email'].map((text, index) => (
-
-
- {['All mail', 'Trash', 'Spam'].map((text, index) => (
-
+
+ Start
+
+
+ );
+};
+
+export default CongratulationPage;
diff --git a/src/content/loginPage/invitePage.tsx b/src/content/loginPage/invitePage.tsx
new file mode 100644
index 0000000..8f7b365
--- /dev/null
+++ b/src/content/loginPage/invitePage.tsx
@@ -0,0 +1,72 @@
+import React, { FC, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+
+import { NextButton } from '../../components/buttons/loginButton';
+
+import '../../tailwind.css';
+
+const InviteCodeInput = styled(TextField)({
+ width: '302px',
+ '& label.Mui-focused': {
+ color: '#A0AAB4',
+ },
+ '& .MuiInput-underline:after': {
+ borderBottomColor: '#B2BAC2',
+ },
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: '#E0E3E7',
+ borderRadius: '12px',
+ },
+ '&:hover fieldset': {
+ borderColor: '#B2BAC2',
+ borderRadius: '12px',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: '#6F7E8C',
+ borderRadius: '12px',
+ },
+ },
+});
+
+interface InvitePageProps {
+ handleButtonClick: (inviteCode: string) => void; // 修改函数类型以接收邀请码作为参数
+}
+
+const InvitePage: FC+ Congration！ +
++ Complete the following tasks to activate your account +
+
+
+ undefined}>
+ verify
+
+
+ + Follow @Letsmeme on Twitter +
+
+
+
+ undefined}>
+ GO
+
+
+ + Follow @Letsmeme on Twitter +
+
+ ) => setInviteCode(e.target.value)}
+ label="Please enter the invitation code"
+ id="custom-css-outlined-input"
+ />
+
+
+ Next
+
+
+ );
+};
+
+export default InvitePage;
diff --git a/src/content/loginPage/signInWithXPage.tsx b/src/content/loginPage/signInWithXPage.tsx
new file mode 100644
index 0000000..d8bf2a9
--- /dev/null
+++ b/src/content/loginPage/signInWithXPage.tsx
@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+
+import { NextButton } from '../../components/buttons/loginButton';
+
+import '../../tailwind.css';
+
+interface SignInWithXPageProps {
+ handleButtonClick: () => void; // 定义一个函数类型的属性
+}
+
+const SignInWithXPage: FC+ Invite Code +
++ To complete the registration you need to enter an invitation code, we released a small + number of invitation codes during the beta period, see our tweets +
+
+
+
+ Sign in with X
+
+
+ );
+};
+
+export default SignInWithXPage;
diff --git a/src/manifest.ts b/src/manifest.ts
index bf62d40..b325254 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -10,11 +10,11 @@ const manifest: ManifestV3Export = {
},
content_scripts: [
{
- matches: ['http://*/*', 'https://*/*', 'file:///*'],
+ matches: ['https://twitter.com/*'],
js: ['src/content/index.tsx'],
},
],
- host_permissions: ['+ Log in to your account +
++ Grow with Creators, Win Wealth Together. +
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+];
+
+const Claim = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+
+
+
+
+
+ Claim Reward
+ + +
+
+ Claim
+
+
+
+
+ Reward:
+
+
+
+ $294.3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Explore;
diff --git a/src/welcome/Profile/History.tsx b/src/welcome/Profile/History.tsx
new file mode 100644
index 0000000..cb7ac03
--- /dev/null
+++ b/src/welcome/Profile/History.tsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import { Divider } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { useToggle } from 'ahooks';
+
+import { BasicButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Icon = () => (
+
+);
+
+const rows = [
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+ -
+ {list.map((item, i) => (
+
-
+ 1
+
+
+++ JamesXYC@MAP Protocol -Bitcoin + @IDOC ++ ++++ Price ++ ++ 2.34 + + Tweet Avg Rank: + #3 ++
+ ))}
+
-
+ {list.map((item, i) => (
+
-
+ 1
+ +++ JamesXYC@MAP Protocol -Bitcoin + @IDOC ++ ++++ Price ++ +
+ 2.34 + + Tweet Avg Rank: + #3 ++
+ ))}
+
-
+ {list.map((item, i) => (
+
-
+ 1
+ +++ JamesXYC@MAP Protocol -Bitcoin + @IDOC ++ ++++ Price ++ +
+ 2.34 + + Tweet Avg Rank: + #3 ++
+ ))}
+
-
+ {list.map((item, i) => (
+
-
+ 2024/01/10 12:14
+ ++++ +++ + Bought + ++++ +2 Shares ++++
+ - 0.2025 +
+ ))}
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+ {
+ date: '2023/02/01',
+ creator: 'Devon Lane',
+ rank: '#2',
+ total: (
+
+
+ ),
+ reward: (
+
+
+ ),
+ },
+];
+
+const History = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+
+
+
+
+
+ Claim History
+ + +
+
+
+
+ Reward:
+
+
+ $294.3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pool
+
+
+
+
+ Your Reward
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Reward;
diff --git a/src/welcome/Profile/index.tsx b/src/welcome/Profile/index.tsx
new file mode 100644
index 0000000..ae47752
--- /dev/null
+++ b/src/welcome/Profile/index.tsx
@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from 'react';
+
+import Explore from './Explore';
+import Reward from './Reward';
+
+const Profile = (props: { handleButtonClick?: () => void }) => {
+ const [key, setKey] = useState('explore');
+
+ const tapMap = [
+ {
+ title: 'explore',
+ onClick: () => setKey('explore'),
+ },
+ {
+ title: 'community',
+ onClick: () => setKey('community'),
+ },
+ {
+ title: 'reward',
+ onClick: () => setKey('reward'),
+ },
+ ];
+
+ const componentMap: Record-
+ {list.map((item, i) => (
+
-
+ ++ +++ + #3 ++ Devon + Jan 05 2024, 14:32 ++
+ History is always extremely similar bitcoin is the invention of satoshi + nakamoto, Chinese people early to give him dry up ethereum is v god made +
+ ++
+ ))}
+
-
+
-
+ ++ +++ + #3 ++ Devon + Jan 05 2024, 14:32 ++
+ History is always extremely similar bitcoin is the invention of satoshi nakamoto, + Chinese people early to give him dry up ethereum is v god made +
+ ++
+
+
+ );
+};
+
+export default Profile;
diff --git a/src/welcome/Wallet/BuyModal.tsx b/src/welcome/Wallet/BuyModal.tsx
new file mode 100644
index 0000000..2ba5f2a
--- /dev/null
+++ b/src/welcome/Wallet/BuyModal.tsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { Divider } from '@mui/material';
+import { useToggle } from 'ahooks';
+
+import { BasicButton, PrimaryButton } from '../../components/Button';
+import Modal from '../../components/Modal';
+
+const Icon = () => (
+
+);
+
+const Left = () => (
+
+);
+
+const BuyModal = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Holding:
+
+ 0.02
+
+
+ props.handleButtonClick?.()}
+ className="px-4 py-1 flex items-center justify-center rounded-full border border-black text-[15px] font-medium cursor-pointer"
+ >
+ Wallet
+
+
+ {tapMap.map((item, i) => (
+
+
+ {componentMap[key]}
+
+ {item.title}
+
+ ))}
+
+
+ Buy Shares of Willaim
+ + +
+ Price:
+
+
+
+ Amount
+ 2
+
+
+
+ Minimum unit:
+ 0.1
+
+
+
+
+
+
+ From
+ 0x41...64fd
+
+
+ To
+ 0x41...64fd
+
+
+ Transaction Fee
+
+
+
+
+ Est. Gas Fee
+
+
+
+
+
+
+
+ You Pay(Including Fees)
+
+
+
+
+ Wallet Balance
+
+
+
+
+
+
+
+ Buy
+
+
+
+
+
+
+ Deposit
+ + +
+
+
+ Network
+
+
+ Blast
+
+
+ Address
+
+
+ 0x415eB....c2764fd
+
+
+ Asset
+
+
+ ETH
+
+
+
+
+
+ Transfer
+
+
+
+
+
+
+
+
+
+
+ Invite Friends
+ + +
+
+
+
+
+
+
+
+
+ Your Invite
+ 5
+
+
+
+
+ Invite Points
+ 0.05
+
+
+
+
+
+ 0x415eB....c2764fd
+
+
+
+
+ Copy Invite Code
+
+
+
+ Devon Lane
+
+ ),
+ shares: 1,
+ value: (
+
+ Devon Lane
+
+
+ ),
+ },
+ {
+ holder: (
+
+
+ Devon Lane
+
+ ),
+ shares: 1,
+ value: (
+
+ Devon Lane
+
+
+ ),
+ },
+ {
+ holder: (
+
+
+ Devon Lane
+
+ ),
+ shares: 1,
+ value: (
+
+ Devon Lane
+
+
+ ),
+ },
+];
+
+const ProfileModal = () => {
+ const [isOpen, { setLeft: close, setRight: open }] = useToggle(false);
+ const [key, setKey] = useState(0);
+ const list = [
+ {
+ text: 'Holders (20)',
+ },
+ {
+ text: 'Holders (16)',
+ },
+ {
+ text: ' Tweet Ranking',
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+ Profile
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ Devonkokl
+
+ @Idoc
+
+
+ Floor Price:
+
+
+
+
+ {list.map((item, i) => (
+
+
+ setKey(i)}
+ key={item.text}
+ className={`rounded-full py-2 px-[18px] font-medium leading-[18px] border border-[#0F1419] ${
+ key === i ? 'bg-[#2C2A2A] text-white' : 'text-[#0F1419] bg-white cursor-pointer'
+ }`}
+ >
+ {item.text}
+
+ ))}
+
+
+ Sell Shares of Willaim
+ + +
+
+
+
+ Price:
+
+
+
+ You Own:
+ 5
+
+
+ Amount
+ 2
+
+
+
+ Minimum unit:
+ 0.1
+
+
+
+
+
+
+ From
+ 0x41...64fd
+
+
+ To
+ 0x41...64fd
+
+
+ Transaction Fee
+
+
+
+
+ Est. Gas Fee
+
+
+
+
+
+
+
+ You Pay(Including Fees)
+
+
+
+
+ Wallet Balance
+
+
+
+
+
+
+
+ Buy
+
+
+
+
+
+
+ Withdraw
+ ++ Send your ETH to another wallet address on the blast network +
+ +
+
+
+
+ Wallet Balance:
+
+
+
+
+
+
+
+ Transfer
+
+
+
+
+
+
+ );
+};
+
+export default Wallet;
diff --git a/src/welcome/Welcome.tsx b/src/welcome/Welcome.tsx
index 6ce57e7..b2895d2 100644
--- a/src/welcome/Welcome.tsx
+++ b/src/welcome/Welcome.tsx
@@ -1,9 +1,11 @@
import React, { ReactElement } from 'react';
+import Profile from './Profile';
+
const Welcome = (): ReactElement => {
return (
-
+
+ props.handleButtonClick?.()}>
+
+ Home
+
+
+
+
+
+
+
+
+
+
+ @Deovokoejhdnad
+
+
+ #919099
+
+
+ Network:Blast
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+
+
+
+ Log Out
+
+
-
-
);
Welcome
+
+
);
};
diff --git a/src/welcome/assets/avatar.png b/src/welcome/assets/avatar.png
new file mode 100644
index 0000000..7e288d5
Binary files /dev/null and b/src/welcome/assets/avatar.png differ
diff --git a/src/welcome/index.tsx b/src/welcome/index.tsx
index bebf642..c1d5af2 100644
--- a/src/welcome/index.tsx
+++ b/src/welcome/index.tsx
@@ -1,12 +1,13 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
-import Welcome from './Welcome';
+import Wallet from './Wallet';
import '../tailwind.css';
createRoot(document.getElementById('root') as HTMLElement).render(