Merge remote-tracking branch 'origin/main' into nig-592

BuidlerDAO · Mar 26, 2024 · ecc10b6 · ecc10b6
2 parents 8f6c7cd + 60ba3c0
commit ecc10b6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 36 deletions.
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -37,6 +37,7 @@ const Modal = (props: ExtraModalProps) => {
           width: props.width,
           backgroundColor: '#FFFFFF',
           borderRadius: 12,
+          outline: 'none',
         }}
       >
         <div

diff --git a/src/components/twitterAdded/twitterPage/userEthIcon.tsx b/src/components/twitterAdded/twitterPage/userEthIcon.tsx
@@ -1,18 +1,35 @@
 import React, { FC, useEffect, useState } from 'react';
-
+import useAccount from '../../../hooks/useAccount';
+import { useTweetBatchUserInfo } from '../../../service/tweet';
+import useLocalStore from '../../../store/useLocalStore';
 import useProfileModal from '../../../store/useProfileModal';
+import { NumberDisplayer } from '../../NumberDisplayer';
 
 import '../../../tailwind.css';
 
 interface UserPagePriceProps {
-  price: string;
-  id: string;
+  twitterUsername: string;
 }
 
-export const UserPagePrice: FC<UserPagePriceProps> = ({ price, id }) => {
+export const UserPagePrice: FC<UserPagePriceProps> = ({ twitterUsername }) => {
   const [elementWidth, setElementWidth] = useState<number | null>(null);
+  const { openProfile } = useProfileModal((state) => ({ ...state }));
+  const { userInfo: currentUserInfo } = useAccount();
+  const [userInfo, setUserInfo] = useState<any>({ price: '0' });
+  const { isShowPrice } = useLocalStore((state) => ({ ...state }));
+  const useWidth = elementWidth != null ? elementWidth : 0;
+
+  const { run: batchUserInfo } = useTweetBatchUserInfo(
+    [twitterUsername],
+    (result) => {
+      setUserInfo(result?.data?.items?.[0]);
+    },
+    () => undefined
+  );
 
   useEffect(() => {
+    batchUserInfo(userInfo);
+
     const getElementWidthByXPath = (xpath: string): number | null => {
       const element = document.evaluate(
         xpath,
@@ -37,15 +54,13 @@ export const UserPagePrice: FC<UserPagePriceProps> = ({ price, id }) => {
     setElementWidth(width);
   }, []); // This effect runs only once after the initial render
 
-  console.log(elementWidth);
-
-  const useWidth = elementWidth != null ? elementWidth : 0;
-  const { openProfile } = useProfileModal((state) => ({ ...state }));
-
-  return (
+  return !isShowPrice && currentUserInfo?.isRegistered ? (
     <span
-      id={id}
-      onClick={openProfile}
+      onClick={(e) => {
+        openProfile(userInfo);
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       style={{ left: `${useWidth + 12}px` }}
       className="absolute top-[-1px] flex h-[25px] w-[110px] grow-0 cursor-pointer items-center justify-center rounded-full bg-[#9A6CF9] !px-[17px] text-center"
     >
@@ -74,7 +89,9 @@ export const UserPagePrice: FC<UserPagePriceProps> = ({ price, id }) => {
         </defs>
       </svg>
 
-      <p className="ml-[4px] text-[12px] font-medium text-white">{price}</p>
+      <p className="ml-[4px] text-[12px] font-medium text-white">
+        <NumberDisplayer text={userInfo?.price} />
+      </p>
     </span>
-  );
+  ) : null;
 };
diff --git a/src/content/addToTwitterHome.tsx b/src/content/addToTwitterHome.tsx
@@ -90,35 +90,50 @@ export const addTwitterComponent = () => {
 };
 
 export const addUserPagePriceComponent = () => {
+  const addByXPath = (xpath: string) => {
+    const specificElement = document.evaluate(
+      xpath,
+      document,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue as Element;
+
+    if (specificElement) {
+      const priceContainer = document.createElement('span');
+      const root = createRoot(priceContainer);
+      root.render(
+        <div id={elementId}>
+          <UserPagePrice twitterUsername={username} />
+        </div>
+      );
+      specificElement.appendChild(priceContainer);
+      return true;
+    }
+    return false;
+  };
+
   // 获取当前页面的 URL
   const currentUrl = window.location.href.toLowerCase();
   const username = currentUrl.split('/')[currentUrl.split('/').length - 1];
   const elementId = `xfans-userPagePrice-${username}`;
   const existingElement = document.getElementById(elementId);
 
+  // 由于个人中心页面有复用，因此在插入之前要删除掉其他price tag
+  var elements = document.querySelectorAll('[id^="xfans-userPagePrice-"]');
+  elements.forEach((x) => {
+    if (x.id !== elementId) {
+      var parent = x.parentNode; // 获取父节点
+      parent?.removeChild(x);
+    }
+  });
+
   // 如果元素已经存在，则不执行后续操作
   if (existingElement) {
     return;
   }
-
-  const priceContainer = document.createElement('span');
-
-  // Update XPath based on your structure
+  // 当用户个人主页有背景图或者没有背景图的时候，xpath不一致。
   const xpath = `/html/body/div[1]/div/div/div[2]/main/div/div/div/div[1]/div/div[3]/div/div/div/div[1]/div[2]/div[1]/div/div[1]/div/div/span/span[2]`;
-
-  const specificElement = document.evaluate(
-    xpath,
-    document,
-    null,
-    XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null
-  ).singleNodeValue as Element;
-
-  if (specificElement) {
-    const root = createRoot(priceContainer);
-    // root.render(<span id={elementId}>1</span>);
-    root.render(<UserPagePrice price={'1222'} id={elementId} />);
-    // root.render();
-    specificElement.appendChild(priceContainer);
-  }
+  const xpath2 = `/html/body/div[1]/div/div/div[2]/main/div/div/div/div[1]/div/div[3]/div/div/div/div[2]/div[2]/div[1]/div/div[1]/div/div/span/span[2]`;
+  if (!addByXPath(xpath)) addByXPath(xpath2);
 };
diff --git a/src/service/share/index.ts b/src/service/share/index.ts
@@ -73,14 +73,14 @@ const useHolderList = () => {
     {
       manual: true,
       onSuccess(response, params) {
-        if (params[0].subject !== undefined || params[0].subject !== null) {
+        if (params[0].subject !== undefined && params[0].subject !== null) {
           useShareStore.setState({
             holderList: response.data.items,
             holderListTotal: response.data.total,
           });
         }
 
-        if (params[0].holder !== undefined || params[0].holder !== null) {
+        if (params[0].holder !== undefined && params[0].holder !== null) {
           useShareStore.setState({
             holderingList: response.data.items,
             holderingListTotal: response.data.total,