From efcb07cf085b93fa8d7b3d69e908d28bdb619cd1 Mon Sep 17 00:00:00 2001 From: Jack <905182279@qq.com> Date: Thu, 1 Feb 2024 21:35:33 +0800 Subject: [PATCH 1/3] feat: avatar add profile modal --- package.json | 11 +-- pnpm-lock.yaml | 37 ++++++++ src/content/drawer/index.tsx | 2 + src/store/useProfileModal.ts | 15 ++++ src/welcome/Profile/Explore.tsx | 17 ++-- src/welcome/Profile/Reward.tsx | 8 +- src/welcome/Wallet/BuyModal.tsx | 12 +-- src/welcome/Wallet/Profile.tsx | 142 +++++++++++++++---------------- src/welcome/Wallet/SellModal.tsx | 12 +-- src/welcome/Wallet/index.tsx | 6 +- src/welcome/index.tsx | 4 +- 11 files changed, 167 insertions(+), 99 deletions(-) create mode 100644 src/store/useProfileModal.ts diff --git a/package.json b/package.json index 23934dc..9b24a14 100644 --- a/package.json +++ b/package.json @@ -33,14 +33,14 @@ "@material-ui/core": "4.12.4", "@material-ui/icons": "4.11.3", "@mui/base": "5.0.0-beta.33", - "@mui/lab": "5.0.0-alpha.162", - "@mui/system": "5.15.6", - "ahooks": "3.7.9", - "antd": "5.12.0", "@mui/icons-material": "5.15.5", + "@mui/lab": "5.0.0-alpha.162", "@mui/material": "5.15.5", + "@mui/system": "5.15.6", "@reduxjs/toolkit": "1.8.4", "@types/redux-thunk": "2.1.0", + "ahooks": "3.7.9", + "antd": "5.12.0", "clsx": "2.1.0", "install": "0.13.0", "react": "18.2.0", @@ -49,7 +49,8 @@ "redux-persist-webextension-storage": "1.0.2", "redux-thunk": "2.4.2", "reduxjs-toolkit-persist": "7.2.1", - "webextension-polyfill": "0.9.0" + "webextension-polyfill": "0.9.0", + "zustand": "4.5.0" }, "devDependencies": { "@commitlint/cli": "17.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 76cd95b..8ec3b21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ dependencies: webextension-polyfill: specifier: 0.9.0 version: 0.9.0 + zustand: + specifier: 4.5.0 + version: 4.5.0(@types/react@18.0.17)(react@18.2.0) devDependencies: '@commitlint/cli': @@ -12932,6 +12935,17 @@ packages: requires-port: 1.0.0 dev: true + /use-sync-external-store@1.2.0(react@18.2.0): + resolution: + { + integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==, + } + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /util-deprecate@1.0.2: resolution: { @@ -13308,3 +13322,26 @@ packages: } engines: { node: '>=10' } dev: true + + /zustand@4.5.0(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==, + } + engines: { node: '>=12.7.0' } + peerDependencies: + '@types/react': '>=16.8' + immer: '>=9.0.6' + react: '>=16.8' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + dependencies: + '@types/react': 18.0.17 + react: 18.2.0 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false diff --git a/src/content/drawer/index.tsx b/src/content/drawer/index.tsx index acb81a6..ce7d78b 100644 --- a/src/content/drawer/index.tsx +++ b/src/content/drawer/index.tsx @@ -9,6 +9,7 @@ import { styled } from '@mui/material/styles'; import Profile from '../../welcome/Profile'; import Wallet from '../../welcome/Wallet'; +import ProfileModal from '../../welcome/Wallet/Profile'; import CongratulationPage from '../loginPage/congratulationPage'; import InvitePage from '../loginPage/invitePage'; import SignInWithXPage from '../loginPage/signInWithXPage'; @@ -67,6 +68,7 @@ export default function PersistentDrawerRight() { return ( + void; + closeProfile: () => void; +} + +const useProfileModal = create((set) => ({ + open: false, + openProfile: () => set({ open: true }), + closeProfile: () => set({ open: false }), +})); + +export default useProfileModal; diff --git a/src/welcome/Profile/Explore.tsx b/src/welcome/Profile/Explore.tsx index 45f2033..1c3a26e 100644 --- a/src/welcome/Profile/Explore.tsx +++ b/src/welcome/Profile/Explore.tsx @@ -5,6 +5,7 @@ import TabPanel from '@mui/lab/TabPanel'; import Box from '@mui/material/Box'; import Tab from '@mui/material/Tab'; +import useProfileModal from '../../store/useProfileModal'; import Avatar from '../assets/avatar.png'; const Icon = () => ( @@ -27,6 +28,7 @@ const Icon = () => ( const Explore = () => { const list = Array(7).fill(''); + const { openProfile } = useProfileModal((state) => ({ ...state })); const [value, setValue] = React.useState('1'); @@ -107,9 +109,10 @@ const Explore = () => {
  • 1 avatar
    @@ -145,9 +148,10 @@ const Explore = () => {
  • 1 avatar
    @@ -183,9 +187,10 @@ const Explore = () => {
  • 1 avatar
    @@ -224,9 +229,10 @@ const Explore = () => {
    avatar @Devon
    @@ -235,9 +241,10 @@ const Explore = () => {
    avatar @Devon
    diff --git a/src/welcome/Profile/Reward.tsx b/src/welcome/Profile/Reward.tsx index b4c51db..d113643 100644 --- a/src/welcome/Profile/Reward.tsx +++ b/src/welcome/Profile/Reward.tsx @@ -6,6 +6,7 @@ import { Divider } from '@mui/material'; import Box from '@mui/material/Box'; import Tab from '@mui/material/Tab'; +import useProfileModal from '../../store/useProfileModal'; import Avatar from '../assets/avatar.png'; import Claim from './Claim'; @@ -30,6 +31,7 @@ const Icon = () => ( ); const Reward = () => { + const { openProfile } = useProfileModal((state) => ({ ...state })); const list = Array(7).fill(''); const [value, setValue] = React.useState('1'); @@ -116,9 +118,10 @@ const Reward = () => {
    Devon @@ -156,9 +159,10 @@ const Reward = () => {
    Devon diff --git a/src/welcome/Wallet/BuyModal.tsx b/src/welcome/Wallet/BuyModal.tsx index 2ba5f2a..a020176 100644 --- a/src/welcome/Wallet/BuyModal.tsx +++ b/src/welcome/Wallet/BuyModal.tsx @@ -63,15 +63,15 @@ const BuyModal = () => {
    Price: - 0.2 + 0.2
    -
    +
    Amount 2
    -
    +
    Minimum unit: 0.1
    @@ -81,10 +81,11 @@ const BuyModal = () => { marginTop: 3, width: '100%', borderColor: '#EBEEF0', + borderStyle: 'dashed', }} /> -
    +
    From 0x41...64fd @@ -114,10 +115,11 @@ const BuyModal = () => { marginTop: 3, width: '100%', borderColor: '#EBEEF0', + borderStyle: 'dashed', }} /> -
    +
    You Pay(Including Fees)
    diff --git a/src/welcome/Wallet/Profile.tsx b/src/welcome/Wallet/Profile.tsx index 61e4a10..8f843b5 100644 --- a/src/welcome/Wallet/Profile.tsx +++ b/src/welcome/Wallet/Profile.tsx @@ -5,11 +5,9 @@ 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 Avatar from '../assets/avatar.png'; +import useProfileModal from '../../store/useProfileModal'; import BuyModal from './BuyModal'; import SellModal from './SellModal'; @@ -32,68 +30,71 @@ const Icon = () => ( ); -const rows = [ - { - holder: ( -
    - - Devon Lane -
    - ), - shares: 1, - value: ( -
    - - 0.002 -
    - ), - }, - { - holder: ( -
    - - Devon Lane -
    - ), - shares: 1, - value: ( -
    - - 0.002 -
    - ), - }, - { - holder: ( -
    - - Devon Lane -
    - ), - shares: 1, - value: ( -
    - - 0.002 -
    - ), - }, -]; - const ProfileModal = () => { - const [isOpen, { setLeft: close, setRight: open }] = useToggle(false); + const { openProfile } = useProfileModal((state) => ({ ...state })); + const rows = [ + { + holder: ( +
    + + Devon Lane +
    + ), + shares: 1, + value: ( +
    + + 0.002 +
    + ), + }, + { + holder: ( +
    + + Devon Lane +
    + ), + shares: 1, + value: ( +
    + + 0.002 +
    + ), + }, + { + holder: ( +
    + + Devon Lane +
    + ), + shares: 1, + value: ( +
    + + 0.002 +
    + ), + }, + ]; + const { open, closeProfile } = useProfileModal((state) => ({ ...state })); const [key, setKey] = useState(0); const list = [ { @@ -109,15 +110,7 @@ const ProfileModal = () => { return ( <> - - Profile - - +

    Profile

    @@ -125,9 +118,10 @@ const ProfileModal = () => {
    avatar
    diff --git a/src/welcome/Wallet/SellModal.tsx b/src/welcome/Wallet/SellModal.tsx index b94f22c..dd81cac 100644 --- a/src/welcome/Wallet/SellModal.tsx +++ b/src/welcome/Wallet/SellModal.tsx @@ -60,7 +60,7 @@ const SellModal = () => {

    Sell Shares of Willaim

    -
    +
    Price: @@ -73,12 +73,12 @@ const SellModal = () => {
    -
    +
    Amount 2
    -
    +
    Minimum unit: 0.1
    @@ -88,10 +88,11 @@ const SellModal = () => { marginTop: 3, width: '100%', borderColor: '#EBEEF0', + borderStyle: 'dashed', }} /> -
    +
    From 0x41...64fd @@ -121,10 +122,11 @@ const SellModal = () => { marginTop: 3, width: '100%', borderColor: '#EBEEF0', + borderStyle: 'dashed', }} /> -
    +
    You Pay(Including Fees)
    diff --git a/src/welcome/Wallet/index.tsx b/src/welcome/Wallet/index.tsx index d4dc761..d27fce0 100644 --- a/src/welcome/Wallet/index.tsx +++ b/src/welcome/Wallet/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Button } from 'antd'; +import useProfileModal from '../../store/useProfileModal'; import Avatar from '../assets/avatar.png'; import Deposit from './Deposit'; @@ -152,6 +153,8 @@ const GoBack = () => ( ); const Wallet = (props: { handleButtonClick?: () => void }) => { + const { openProfile } = useProfileModal((state) => ({ ...state })); + return (
    @@ -164,9 +167,10 @@ const Wallet = (props: { handleButtonClick?: () => void }) => {
    avatar
    @Deovokoejhdnad diff --git a/src/welcome/index.tsx b/src/welcome/index.tsx index 0022ff9..a09bc92 100644 --- a/src/welcome/index.tsx +++ b/src/welcome/index.tsx @@ -10,7 +10,7 @@ import '../tailwind.css'; createRoot(document.getElementById('root') as HTMLElement).render( - {/* */} - + + {/* */} ); From 124d9348210a321a16e021249a2ef3c79026025a Mon Sep 17 00:00:00 2001 From: aboutmydreams Date: Tue, 30 Jan 2024 18:44:37 +0800 Subject: [PATCH 2/3] fix: add https to host_permissions --- src/manifest.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/manifest.ts b/src/manifest.ts index 1e3ca44..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: ['twitter.com/*', 'x.com/*'], + host_permissions: ['https://twitter.com/*', 'https://x.com/*'], options_ui: { page: 'src/options/options.html', open_in_tab: true, From 19ec07b235d0222695a70b2453e6c571c3221323 Mon Sep 17 00:00:00 2001 From: aboutmydreams Date: Thu, 1 Feb 2024 19:53:45 +0800 Subject: [PATCH 3/3] fix: delete yarn in action --- .github/workflows/ci.yml | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 25e4c7c..829d612 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -17,13 +17,13 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 16.x - cache: 'yarn' + cache: 'pnpm' - name: Install dependencies - run: rm -rf node_modules && yarn install --frozen-lockfile + run: rm -rf node_modules && pnpm install --frozen-lockfile - name: Build - run: yarn build + run: pnpm build lint: runs-on: ubuntu-latest @@ -32,13 +32,13 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 16.x - cache: 'yarn' + cache: 'pnpm' - name: Install dependencies - run: rm -rf node_modules && yarn install --frozen-lockfile + run: rm -rf node_modules && pnpm install --frozen-lockfile - name: Lint - run: yarn ci:test:lint + run: pnpm ci:test:lint typecheck: runs-on: ubuntu-latest @@ -47,13 +47,13 @@ jobs: - uses: actions/setup-node@v3 with: node-version: 16.x - cache: 'yarn' + cache: 'pnpm' - name: Install dependencies - run: rm -rf node_modules && yarn install --frozen-lockfile + run: rm -rf node_modules && pnpm install --frozen-lockfile - name: Test types - run: yarn ci:test:types + run: pnpm ci:test:types unit: runs-on: ${{ matrix.os }} @@ -71,10 +71,10 @@ jobs: with: node-version: ${{ matrix.node-version }} registry-url: https://registry.npmjs.org/ - cache: yarn + cache: pnpm - name: Install dependencies - run: rm -rf node_modules && yarn install --frozen-lockfile + run: rm -rf node_modules && pnpm install --frozen-lockfile - name: Unit test - run: yarn ci:test:unit + run: pnpm ci:test:unit