update js sdk version

Sending-Network · Nov 22, 2023 · f1a271b · f1a271b
1 parent 07ca6be
commit f1a271b
Show file tree

Hide file tree

Showing 37 changed files with 1,697 additions and 395 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@ant-design/icons": "^4.8.0",
     "@ethersproject/constants": "^5.7.0",
     "add": "^2.0.6",
+    "animate.css": "^4.1.1",
     "antd": "^5.0.1",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
@@ -52,15 +53,15 @@
     "lodash": "^4.17.21",
     "mini-censor": "^1.0.4",
     "postmate": "^1.5.2",
+    "randombytes": "^2.1.0",
     "react": "16.13.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "16.13.1",
     "react-infinite-scroller": "^1.2.6",
     "react-scripts": "3.4.1",
     "rlp": "^3.0.0",
-    "sendingnetwork-js-sdk": "^0.1.7",
-    "web3": "^1.8.2",
-    "randombytes": "^2.1.0"
+    "sendingnetwork-js-sdk": "^0.1.9",
+    "web3": "^1.8.2"
   },
   "devDependencies": {
     "eslint-plugin-node": "^11.0.0",
@@ -73,8 +74,8 @@
     "shelljs": "^0.8.5",
     "to-string-loader": "^1.1.6",
     "url-loader": "^4.1.1",
-    "webpack-cli": "^3.3.11",
-    "vite": "^4.5.0"
+    "vite": "^4.5.0",
+    "webpack-cli": "^3.3.11"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/direflow-components/chat-component/App.css b/src/direflow-components/chat-component/App.css
@@ -34,6 +34,13 @@ html {
   font-family: 'Poppins', sans-serif;
 }
 
+.widget_root_animate {
+  --animate-duration: .2s;
+}
+.widget_animate_invisible {
+  visibility: hidden;
+}
+
 body,
 button,
 input,

diff --git a/src/direflow-components/chat-component/App.jsx b/src/direflow-components/chat-component/App.jsx
@@ -7,6 +7,7 @@ import SetPage from './component/setPage/setPage';
 import TouristPage from './component/touristPage/touristPage';
 import TopFrame from './component/topFrame/topFrame';
 import PropTypes from "prop-types";
+import animateStyles from 'animate.css';
 import styles from "./App.css";
 import { Styled } from "direflow-component";
 import { api } from "./api";
@@ -215,6 +216,10 @@ const App = (props) => {
       if (rooms[i].isDmRoom()) {
         if (rooms[i].getDMAnotherMember() === userId) {
           quickRoomId = rooms[i].roomId;
+          // invite the other user
+          if (!["join", "invite"].includes(rooms[i].getMember(userId)?.membership)) {
+            api._client.invite(rooms[i].roomId, userId)
+          }
           break;
         }
       }
@@ -312,7 +317,7 @@ const App = (props) => {
       case 'mainPage':
         return <MainPage
           rooms={rooms}
-          goToRoom={(roomId) => {
+          enterRoom={(roomId) => {
             setCurRoomId(roomId)
             setPageType('roomPage')
           }}
@@ -348,7 +353,7 @@ const App = (props) => {
   }
 
   return (
-    <Styled styles={styles}>
+    <Styled styles={styles + animateStyles}>
       <div
         style={{
           "--widget-width": props.widgetWidth,
@@ -374,6 +379,7 @@ const App = (props) => {
           ...(props.useWidgetBtn && !isMobile() ? btnStyle.btnPos : {})
         }}
         className={[
+          'widget_root_animate',
           props.useWidgetBtn && !isMobile() && "widget_root",
           isMobile() && "widget_root_mobile"
         ].join(" ")}

diff --git a/src/direflow-components/chat-component/api.js b/src/direflow-components/chat-component/api.js
@@ -1,4 +1,4 @@
-import sdk from "sendingnetwork-js-sdk";
+import sdk, { RemarkStore } from "sendingnetwork-js-sdk";
 import randomBytes  from 'randombytes'
 import EventEmitter from "event-emitter";
 import Web3 from "web3";
@@ -54,14 +54,17 @@ class Api {
         baseUrl,
         userId: user_id,
         accessToken: access_token,
+        timelineSupport: true,
         unstableClientRelationAggregation: true
       });
     } else {
       this._client = sdk.createClient({
         baseUrl,
+        timelineSupport: true,
         unstableClientRelationAggregation: true
       });
     }
+    RemarkStore.get(this._client);
     this.eventEmitter = new EventEmitter();
   };
 

diff --git a/src/direflow-components/chat-component/component/UrlPreviewComp/UrlPreviewComp.jsx b/src/direflow-components/chat-component/component/UrlPreviewComp/UrlPreviewComp.jsx
@@ -8,11 +8,13 @@ const UrlPreviewComp = (props) => {
   const [url, setUrl] = useState("");
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [isMounted, setIsMounted] = useState(true);
 
   useEffect(() => {
+    let isMounted = true;
     if (props.url && props.ts) {
-      api.getUrlPreview(props.url, props.ts).then((res) => {
+      const fetchPreview = async () => {
+        const res = await api.getUrlPreview(props.url, props.ts);
+        if (!res) return
         if (!isMounted) return
         const isMoneyGun = res['og:site_nam'] === 'Money Gun';
         let url = res["og:image"];
@@ -31,10 +33,12 @@ const UrlPreviewComp = (props) => {
         setUrl(url);
         setTitle(title);
         setDescription(description);
-      }).catch(e=>{})
+      }
+      props.previewStart();
+      fetchPreview();
     }
     return () => {
-      setIsMounted(false);
+      isMounted = false;
     }
   }, [props.url, props.ts]);
 
@@ -64,7 +68,7 @@ const UrlPreviewComp = (props) => {
     <Styled styles={styles}>
       <div
         className="urlPreviewComp"
-        style={{alignItems: props.isRight ? "flex-end" : "flex-start"}}
+        style={{ alignItems: props.isRight ? "flex-end" : "flex-start" }}
       >
         <div className={props.isRight ? "urlPreview_url_right" : "urlPreview_url_left"}>
           {/* <a className={props.isRight ? "urlPreview_url_a_right" : "urlPreview_url_a_left"} onClick={handleClick}>{props.message}</a> */}

diff --git a/src/direflow-components/chat-component/component/invitePage/invitePage.jsx b/src/direflow-components/chat-component/component/invitePage/invitePage.jsx
@@ -9,12 +9,13 @@ import {
 } from "../../imgs/index"
 import { backIcon, closeIcon } from "../../imgs/svgs";
 import { api } from "../../api";
-import { formatTextLength, showToast, getAddressByUserId, getMemberName } from "../../utils/index";
+import { formatTextLength, showToast, getAddressByUserId, getMemberName, renderAnimation } from "../../utils/index";
 import InputDialogComp from "../inputDialogComp/inputDialogComp";
 import { AvatarComp } from "../avatarComp/avatarComp";
 import UserAvatar from "../userAvatar/userAvatar";
 
 const InvitePage = ({ roomId, onBack, title }) => {
+  const invitePageRef = useRef(null);
   const inputRef = useRef(null);
   const [filterStr, setFilterStr] = useState("");
   const [searchList, setSearchList] = useState([]);
@@ -44,6 +45,10 @@ const InvitePage = ({ roomId, onBack, title }) => {
     }
   }, [filterStr]);
 
+	useEffect(() => {
+		renderAnimation(invitePageRef.current, 'animate__slideInRight')
+	}, [])
+
   const applySearch = (term) => {
     api._client.searchUserDirectory({
       term: term,
@@ -196,7 +201,7 @@ const InvitePage = ({ roomId, onBack, title }) => {
 
   return (
     <Styled styles={styles}>
-      <div className="invite_page">
+      <div ref={invitePageRef} className="invite_page widget_animate_invisible">
         {/* title */}
         <div className="invite_page_title">
           <div className="title_back svg-btn svg-btn-stroke" onClick={handleBackClick}>

diff --git a/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.css b/src/direflow-components/chat-component/component/mainPage/inviteRoomItem/inviteRoomItem.css
@@ -0,0 +1,112 @@
+/* invite-item */
+.invite .invite-item {
+  height: 70px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 16px;
+}
+.invite .invite-item:hover {
+  background: #eee;
+}
+
+.invite-item .invite-checkbox {
+  padding-right: 16px;
+}
+
+/* invite-item-left */
+.invite-item .invite-item-left {
+  width: 44px;
+  height: 44px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.invite-item .invite-item-left .avatar-img {
+  width: 100%;
+  height: 100%;
+}
+
+/* invite-item-right */
+.invite-item-right {
+  width: calc(100% - 54px);
+  height: 44px;
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #eee;
+}
+
+.invite-item-right-before {
+  width: calc(100% - 118px - 10px);
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.invite-item-right-before-name {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #000;
+  font-family: Poppins;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  color: #000;
+  font-family: Poppins;
+}
+.invite-item-right-before-time {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  color: #999;
+  text-align: right;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+}
+.invite-item-right-after {
+  width: 118px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.invite-item-right-after-invites {
+  width: calc(100% - 64px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.invite-item-after-invite-btns {
+  width: 80px;
+  padding: 4px 6px;
+	line-height: 19px;
+  color: #292d32;
+  font-size: 12px;
+	border-radius: 6px;
+	background: #DBE0E5;
+  display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+.invite-item-after-invite-btns:first-child {
+	margin-right: 8px;
+}
+.invite-item-after-invite-btns.accept {
+  color: #fff;
+  background: var(--primary-color);
+}