Merge pull request #22 from indexnetwork/new-flow

New flow
indexnetwork · Feb 6, 2024 · d56523d · d56523d
2 parents 3d4f42a + 08fb3b2
commit d56523d
Show file tree

Hide file tree

Showing 57 changed files with 436 additions and 678 deletions.
diff --git a/web-app/.eslintrc.json b/web-app/.eslintrc.json
@@ -24,7 +24,7 @@
   },
   "rules": {
     "no-console": "off",
-    "implicit-arrow-linebreak": ["beside"],
+    "implicit-arrow-linebreak": "off",
     "linebreak-style": "off",
     "no-plusplus": "off",
     "no-unused-vars": "off",
@@ -41,7 +41,13 @@
         "argsIgnorePattern": "^_"
       }
     ],
-    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
+    "quotes": [
+      "error",
+      "double",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
     "no-tabs": "off",
     "max-classes-per-file": "off",
     "radix": 0,
@@ -56,7 +62,6 @@
     ],
     "consistent-return": "warn",
     "no-restricted-properties": "off",
-    "operator-linebreak": ["error", "after"],
     "no-use-before-define": "off",
     "no-mixed-spaces-and-tabs": "off",
     "no-param-reassign": "off",
@@ -70,7 +75,10 @@
     // Typescript Rules
     "@typescript-eslint/no-unused-vars": [
       "off",
-      { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }
+      {
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
     ],
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/return-await": "off",

diff --git a/web-app/src/components/ai/chat-message.tsx b/web-app/src/components/ai/chat-message.tsx
@@ -3,6 +3,7 @@ import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
+import { useApp } from "@/context/AppContext";
 import { ChatMessageActions } from "components/ai/chat-message-actions";
 import { MemoizedReactMarkdown } from "components/ai/markdown";
 import { CodeBlock } from "components/ai/ui/codeblock";
@@ -13,8 +14,6 @@ import Input from "components/base/Input";
 import Col from "components/layout/base/Grid/Col";
 import Flex from "components/layout/base/Grid/Flex";
 import FlexRow from "components/layout/base/Grid/FlexRow";
-import { useAppSelector } from "hooks/store";
-import { selectProfile } from "store/slices/profileSlice";
 
 export interface ChatMessageProps {
   message: Message;
@@ -37,13 +36,13 @@ export function ChatMessage({
   index,
   editingIndex,
 }: ChatMessageProps) {
-  const profile = useAppSelector(selectProfile);
+  const { viewedProfile } = useApp();
 
   return (
     <FlexRow wrap={false} align={"start"} className="chat-message py-5">
       <Col>
         {message.role === "user" ? (
-          <Avatar size={24} user={profile} />
+          <Avatar size={24} user={viewedProfile} />
         ) : (
           <div
             style={{
@@ -97,7 +96,9 @@ export function ChatMessage({
                     </p>
                   );
                 },
-                code({ inline, className, children, ...props }) {
+                code({
+ inline, className, children, ...props
+}) {
                   if (children.length) {
                     if (children[0] === "▍") {
                       return (

diff --git a/web-app/src/components/ai/markdown.tsx b/web-app/src/components/ai/markdown.tsx
@@ -3,6 +3,6 @@ import ReactMarkdown, { Options } from "react-markdown";
 
 export const MemoizedReactMarkdown: FC<Options> = memo(
 	ReactMarkdown,
-	(prevProps, nextProps) => prevProps.children === nextProps.children &&
-    prevProps.className === nextProps.className,
+	(prevProps, nextProps) => prevProps.children === nextProps.children
+    && prevProps.className === nextProps.className,
 );
diff --git a/web-app/src/components/base/Avatar/index.tsx b/web-app/src/components/base/Avatar/index.tsx
@@ -4,83 +4,92 @@ import { generateRandomColor, isSSR } from "utils/helper";
 import { ShapeType } from "types";
 import { Users } from "types/entity";
 import { appConfig } from "config";
-import { ProfileState } from "store/slices/profileSlice";
 
-export interface AvatarProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-	size?: number;
-	user?: Users | ProfileState;
-	creatorRule?: any;
-	shape?: ShapeType;
-	hoverable?: boolean;
-	contentRatio?: number;
-	randomColor?: boolean;
-	bgColor?: string;
+export interface AvatarProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  size?: number;
+  user?: Users;
+  creatorRule?: any;
+  shape?: ShapeType;
+  hoverable?: boolean;
+  contentRatio?: number;
+  randomColor?: boolean;
+  bgColor?: string;
 }
 
-const Avatar = (
-	{
-		size = 40,
-		user,
-		creatorRule,
-		children,
-		className,
-		style,
-		bgColor,
-		shape = "circle",
-		hoverable = false,
-		randomColor = false,
-		...divProps
-	}: AvatarProps,
-) => {
-	const maxLetters = size > 32 ? 4 : 2;
-	const [color, setColor] = useState<string>(bgColor || "var(--main)");
-	const getFontSize = () => size * (1 / maxLetters);
-	useEffect(() => {
-		if (!isSSR() && randomColor) {
-			setColor(generateRandomColor());
-		}
-	}, []);
+const Avatar = ({
+  size = 40,
+  user,
+  creatorRule,
+  children,
+  className,
+  style,
+  bgColor,
+  shape = "circle",
+  hoverable = false,
+  randomColor = false,
+  ...divProps
+}: AvatarProps) => {
+  const maxLetters = size > 32 ? 4 : 2;
+  const [color, setColor] = useState<string>(bgColor || "var(--main)");
+  const getFontSize = () => size * (1 / maxLetters);
+  useEffect(() => {
+    if (!isSSR() && randomColor) {
+      setColor(generateRandomColor());
+    }
+  }, []);
 
-	return (
-		<div
-			{...divProps}
-			className={cc(
-				[
-					"avatar",
-					`avatar-${shape}`,
-					hoverable ? "avatar-hoverable" : "",
-					className || "",
-				],
-			)}
-			style={{
-				...style,
-				width: size,
-				height: size,
-				lineHeight: `${size}px`,
-				fontSize: getFontSize(),
+  return (
+    <div
+      {...divProps}
+      className={cc([
+        "avatar",
+        `avatar-${shape}`,
+        hoverable ? "avatar-hoverable" : "",
+        className || "",
+      ])}
+      style={{
+        ...style,
+        width: size,
+        height: size,
+        lineHeight: `${size}px`,
+        fontSize: getFontSize(),
 
-				backgroundColor: color,
-			}}
-		>
-			{
-				user ? (
-					user.avatar ? (
-						<img src={`${appConfig.ipfsProxy}/${user.avatar}`} alt="profile_img"/>
-					) : (
-						user.name ? user.name!.substring(0, 1).toUpperCase() : (user.id ? user.id.toString().slice(maxLetters * -1).toUpperCase() : "Y")
-					)
-				) : creatorRule ? (
-					creatorRule.image ? (
-						<img src={creatorRule.image} alt="profile_img"/>
-					) : (
-						(creatorRule.symbol || creatorRule.ensName)?.substring(0, 4).toUpperCase()
-					)
-				) : (
-					typeof children !== "string" ? children : null
-				)
-			}
-		</div>
-	);
+        backgroundColor: color,
+      }}
+    >
+      {user ? (
+        user.avatar ? (
+          <img
+            src={`${appConfig.ipfsProxy}/${user.avatar}`}
+            alt="profile_img"
+          />
+        ) : user.name ? (
+          user.name!.substring(0, 1).toUpperCase()
+        ) : user.id ? (
+          user.id
+            .toString()
+            .slice(maxLetters * -1)
+            .toUpperCase()
+        ) : (
+          "Y"
+        )
+      ) : creatorRule ? (
+        creatorRule.image ? (
+          <img src={creatorRule.image} alt="profile_img" />
+        ) : (
+          (creatorRule.symbol || creatorRule.ensName)
+            ?.substring(0, 4)
+            .toUpperCase()
+        )
+      ) : typeof children !== "string" ? (
+        children
+      ) : null}
+    </div>
+  );
 };
 
 export default Avatar;
diff --git a/web-app/src/components/base/BottomMenuDiv/index.tsx b/web-app/src/components/base/BottomMenuDiv/index.tsx
@@ -98,8 +98,8 @@ const BottomMenuDiv = (
 	const handleMouseUp = useCallback((e: any) => {
 		if (typeof e !== "boolean" && e) {
 			setState((currentState) => {
-				const collapsed = currentState.maxHeight! <
-					currentState.originalHeight! * collapseThresholdForMinSize;
+				const collapsed = currentState.maxHeight!
+					< currentState.originalHeight! * collapseThresholdForMinSize;
 				return {
 					maxHeight: collapsed ? 0 : currentState.originalHeight!,
 					transition,
@@ -224,8 +224,8 @@ const BottomMenuDiv = (
 							className="modal-mobile-swiper-button"></div>
 					</div>
 					{children}
-				</DynamicDiv> :
-					<div
+				</DynamicDiv>
+					: <div
 						{...divProps}
 					>
 						{children}

diff --git a/web-app/src/components/base/ButtonGroup/index.tsx b/web-app/src/components/base/ButtonGroup/index.tsx
@@ -29,8 +29,8 @@ const ButtonGroup = (
 			className || "",
 		])
 	}>{
-		children &&
-			React.Children.map(children, (child: React.ReactElement<any>) => <div className="btn-group-item">{
+		children
+			&& React.Children.map(children, (child: React.ReactElement<any>) => <div className="btn-group-item">{
 				child
 			}
 			</div>)

diff --git a/web-app/src/components/base/List/index.tsx b/web-app/src/components/base/List/index.tsx
@@ -22,8 +22,8 @@ const List: FC<ListProps> = ({
 
   return (
     <ul className={cc(["list", listClass || ""])}>
-      {data &&
-        data.map((item, index) => (
+      {data
+        && data.map((item, index) => (
           <ListItem
             key={`listItem${index}-${containerId}`}
             className={cc([itemContainerClass || ""])}

diff --git a/web-app/src/components/base/Popup/index.tsx b/web-app/src/components/base/Popup/index.tsx
@@ -76,9 +76,9 @@ const Popup: React.ForwardRefRenderFunction<
   const handleClick = (e: any) => {
     cancelHover.current = true;
     if (
-      !closeOnMenuClick &&
-      menuRef.current &&
-      menuRef.current.contains(e.target)
+      !closeOnMenuClick
+      && menuRef.current
+      && menuRef.current.contains(e.target)
     ) {
       return;
     }

diff --git a/web-app/src/components/base/SearchInput/index.tsx b/web-app/src/components/base/SearchInput/index.tsx
@@ -64,8 +64,8 @@ const SearchInput = (
 			{...inputProps}
 			inputSize={"lg"}
 			addOnBefore={<IconSearch width={20} height={20} />}
-			addOnAfter={loading ? (<Spin active={true} thickness="light" theme="secondary" />) :
-				(!disabled && showClear && query && <IconClose onClick={handleClear} style={{ cursor: "pointer" }} />)
+			addOnAfter={loading ? (<Spin active={true} thickness="light" theme="secondary" />)
+				: (!disabled && showClear && query && <IconClose onClick={handleClear} style={{ cursor: "pointer" }} />)
 			}
 			onChange={handleChange}
 			value={query}

diff --git a/web-app/src/components/base/Tag/index.tsx b/web-app/src/components/base/Tag/index.tsx
@@ -113,8 +113,8 @@ const Tag = (
 				onKeyDown={handleEnter}
 				onBlur={handleClose}
 			/> : value}
-			{removable && !editActive &&
-				<div
+			{removable && !editActive
+				&& <div
 					className="tag-remove"
 					onClick={removable ? handleRemove : undefined}
 				>

diff --git a/web-app/src/components/base/Tooltip/index.tsx b/web-app/src/components/base/Tooltip/index.tsx
@@ -45,8 +45,8 @@ const Tooltip = (
 		>
 			{children}
 			{
-				visible &&
-				<div className={cc(["tooltip-tip", `tooltip-${position}`, wrapperClass || ""])}>
+				visible
+				&& <div className={cc(["tooltip-tip", `tooltip-${position}`, wrapperClass || ""])}>
 					{content}
 				</div>
 			}

diff --git a/web-app/src/components/layout/base/Navbar/index.tsx b/web-app/src/components/layout/base/Navbar/index.tsx
@@ -92,15 +92,18 @@ const Navbar = ({
   return (
     <>
       {isLanding && (
-        <Flex
-          alignitems={"center"}
-          // alignitems={"space-around"}
-          style={{ background: "var(--landing)" }}
+        <div
+          style={{
+            backgroundColor: "#f8f8f8",
+            textAlign: "center",
+            width: "100%",
+            padding: "1em",
+          }}
         >
           <Text className={"p-5"} size={"md"}>
             Index Network is live on testnet.
           </Text>
-        </Flex>
+        </div>
       )}
       <div
         className={cc([