@arcblock/ux 2.10.26 → 2.10.27

package/lib/Header/header.js

@@ -28,6 +28,12 @@ function Header({
     minWidth: brandWrapperMinWidth
   };
   useEffect(() => {
+    const {
+      searchParams
+    } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
     if (logoRef.current) {
       setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
     }

package/lib/Layout/dashboard/index.js

@@ -93,6 +93,14 @@ function Dashboard({
     homeLink: defaultHomeLink,
     ...headerProps
   };
+  useEffect(() => {
+    const {
+      searchParams
+    } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
+  }, []);
   return /*#__PURE__*/_jsxs(Wrapper, {
     ...rest,
     className: classes,

package/lib/Layout/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { AppBar, Container, Drawer, Divider, IconButton, Link, List, ListItem, ListItemText, Toolbar, Typography } from '@mui/material';
@@ -29,6 +29,14 @@ export default function Layout({
   const onToggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
   };
+  useEffect(() => {
+    const {
+      searchParams
+    } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
+  }, []);
   if (contentOnly) {
     return /*#__PURE__*/_jsx(Container, {
       children: children

package/lib/SessionUser/components/logged-in.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { useRef } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { Box, ClickAwayListener, Divider, Fade, IconButton, MenuItem, MenuList, Paper, Popper } from '@mui/material';
 import { Icon } from '@iconify/react';
 import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
 import FilterVintageOutlineRoundedIcon from '@iconify-icons/material-symbols/filter-vintage-outline-rounded';
 import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/account-circle-off-outline-rounded';
+import InviteIcon from '@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded';
+import Copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
+import Toast from '../../Toast';
 import DidAvatar from '../../Avatar';
 import { getUserAvatar } from '../../Util';
 import UserInfo from './user-info';
@@ -16,6 +19,11 @@ import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
 import SessionPermission from '../../SessionPermission';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
+const getInviteLink = inviter => {
+  const url = new URL(window.location.href);
+  url.searchParams.set('inviter', inviter);
+  return url.toString();
+};
 export default function LoggedIn({
   session,
   dark,
@@ -27,6 +35,9 @@ export default function LoggedIn({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const isInviteEnabled = useCreation(() => {
+    return !!globalThis?.blocklet?.settings?.invite?.enabled;
+  });
   const popperAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false
@@ -69,6 +80,12 @@ export default function LoggedIn({
     onTogglePopper(false);
     session.bindWallet(onBindWallet);
   });
+  const handleOpenInvite = useMemoizedFn(() => {
+    onTogglePopper(false);
+    const link = getInviteLink(session.user.did);
+    Copy(link);
+    Toast.success(t('inviteCopied'));
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(IconButton, {
       ref: popperAnchorRef,
@@ -155,6 +172,14 @@ export default function LoggedIn({
                     textDecoration: 'none',
                     color: 'inherit'
                   }
+                }), isInviteEnabled && /*#__PURE__*/_jsx(SessionMenuItem, {
+                  icon: InviteIcon,
+                  title: t('invite'),
+                  onClick: handleOpenInvite,
+                  sx: {
+                    display: 'block',
+                    color: 'inherit'
+                  }
                 }), /*#__PURE__*/_jsx(Divider, {
                   sx: {
                     m: '0!important',

package/lib/SessionUser/libs/translation.js

@@ -4,6 +4,8 @@ export const translations = {
     connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',
     profile: 'Profile',
+    invite: 'Invite friends',
+    inviteCopied: 'Your invite link has been copied to the clipboard. Send it to your friends to complete the invitation',
     dashboard: 'Dashboard',
     logout: 'Sign Out',
     addAnotherAccount: 'Add another account'
@@ -12,6 +14,8 @@ export const translations = {
     connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
     switch: '切换',
     profile: '个人中心',
+    invite: '邀请好友',
+    inviteCopied: '你的专属链接已经复制到剪贴板，发送给朋友即可完成邀请',
     dashboard: '控制台',
     logout: '退出登录',
     addAnotherAccount: '添加账户'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.26",
+  "version": "2.10.27",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -59,12 +59,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "196e6adde06c3c62b95faecf931e2120e366a2fe",
+  "gitHead": "22f8b70a73928fc915274ee0f609e96f330b1d2e",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.26",
-    "@arcblock/nft-display": "^2.10.26",
-    "@arcblock/react-hooks": "^2.10.26",
+    "@arcblock/icons": "^2.10.27",
+    "@arcblock/nft-display": "^2.10.27",
+    "@arcblock/react-hooks": "^2.10.27",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -76,7 +76,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/mui-datatables": "^4.3.12",
     "ahooks": "^3.7.10",
-    "axios": "^1.7.2",
+    "axios": "^1.7.5",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.3.2",
     "core-js": "^3.25.5",

package/src/Header/header.jsx

@@ -26,6 +26,11 @@ function Header({
   const style = { minWidth: brandWrapperMinWidth };
 
   useEffect(() => {
+    const { searchParams } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
+
     if (logoRef.current) {
       setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
     }

package/src/Layout/dashboard/index.jsx

@@ -66,6 +66,13 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
     ...headerProps,
   };
 
+  useEffect(() => {
+    const { searchParams } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
+  }, []);
+
   return (
     <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />

package/src/Layout/index.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import {
@@ -43,6 +43,13 @@ export default function Layout({
     setDrawerOpen(!drawerOpen);
   };
 
+  useEffect(() => {
+    const { searchParams } = new URL(window.location.href);
+    if (searchParams.get('inviter')) {
+      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+    }
+  }, []);
+
   if (contentOnly) {
     return <Container>{children}</Container>;
   }

package/src/SessionUser/components/logged-in.jsx

@@ -1,13 +1,16 @@
 import PropTypes from 'prop-types';
 import { useRef } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { Box, ClickAwayListener, Divider, Fade, IconButton, MenuItem, MenuList, Paper, Popper } from '@mui/material';
 import { Icon } from '@iconify/react';
 import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
 import FilterVintageOutlineRoundedIcon from '@iconify-icons/material-symbols/filter-vintage-outline-rounded';
 import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/account-circle-off-outline-rounded';
+import InviteIcon from '@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded';
+import Copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
 
+import Toast from '../../Toast';
 import DidAvatar from '../../Avatar';
 import { getUserAvatar } from '../../Util';
 import UserInfo from './user-info';
@@ -17,10 +20,19 @@ import SessionPermission from '../../SessionPermission';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
 
+const getInviteLink = (inviter) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set('inviter', inviter);
+  return url.toString();
+};
+
 export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, locale, size }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const isInviteEnabled = useCreation(() => {
+    return !!globalThis?.blocklet?.settings?.invite?.enabled;
+  });
   const popperAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false,
@@ -66,6 +78,14 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
     onTogglePopper(false);
     session.bindWallet(onBindWallet);
   });
+
+  const handleOpenInvite = useMemoizedFn(() => {
+    onTogglePopper(false);
+    const link = getInviteLink(session.user.did);
+    Copy(link);
+    Toast.success(t('inviteCopied'));
+  });
+
   return (
     <>
       <IconButton
@@ -132,6 +152,14 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
                         href={PROFILE_URL}
                         sx={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
                       />
+                      {isInviteEnabled && (
+                        <SessionMenuItem
+                          icon={InviteIcon}
+                          title={t('invite')}
+                          onClick={handleOpenInvite}
+                          sx={{ display: 'block', color: 'inherit' }}
+                        />
+                      )}
                       <Divider sx={{ m: '0!important', borderColor: colors.strokeSep }} />
                     </>
                   ) : null}

package/src/SessionUser/libs/translation.js

@@ -4,6 +4,9 @@ export const translations = {
     connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',
     profile: 'Profile',
+    invite: 'Invite friends',
+    inviteCopied:
+      'Your invite link has been copied to the clipboard. Send it to your friends to complete the invitation',
     dashboard: 'Dashboard',
     logout: 'Sign Out',
     addAnotherAccount: 'Add another account',
@@ -12,6 +15,8 @@ export const translations = {
     connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
     switch: '切换',
     profile: '个人中心',
+    invite: '邀请好友',
+    inviteCopied: '你的专属链接已经复制到剪贴板，发送给朋友即可完成邀请',
     dashboard: '控制台',
     logout: '退出登录',
     addAnotherAccount: '添加账户',