Comment on behalf of proxied account, #3909

packages/next-common/components/comment/editor.js

@@ -5,7 +5,7 @@ import ErrorText from "next-common/components/ErrorText";
 import Flex from "next-common/components/styled/flex";
 import { useMountedState } from "react-use";
 import IdentityOrAddr from "../IdentityOrAddr";
-import PrimaryButton from "next-common/lib/button/primary";
+import SplitCommentButton from "../splitCommentButton";
 import SecondaryButton from "next-common/lib/button/secondary";
 import { useChain } from "../../context/chain";
 import { noop } from "lodash-es";
@@ -14,6 +14,7 @@ import { usePost } from "next-common/context/post";
 import { useCommentActions } from "next-common/sima/context/commentActions";
 import { newErrorToast } from "next-common/store/reducers/toastSlice";
 import { useDispatch } from "react-redux";
+import Tooltip from "../tooltip";
 
 const Wrapper = styled.div`
   margin-top: 48px;
@@ -60,10 +61,15 @@ function CommentEditor(
   const [errors, setErrors] = useState();
   const [loading, setLoading] = useState(false);
   const isMounted = useMountedState();
-  const { createPostComment, createCommentReply, updateComment } =
-    useCommentActions();
-
-  const createComment = async () => {
+  const {
+    createPostComment,
+    createCommentReply,
+    updateComment,
+    createPostProxyComment,
+    createCommentProxyReply,
+  } = useCommentActions();
+
+  const createComment = async (realAddress) => {
     if (!isMounted()) {
       return;
     }
@@ -73,9 +79,33 @@ function CommentEditor(
       let result;
 
       if (comment) {
-        result = await createCommentReply(post, comment, content, contentType);
+        if (realAddress) {
+          result = await createCommentProxyReply(
+            realAddress,
+            post,
+            comment,
+            content,
+            contentType,
+          );
+        } else {
+          result = await createCommentReply(
+            post,
+            comment,
+            content,
+            contentType,
+          );
+        }
       } else {
-        result = await createPostComment(post, content, contentType);
+        if (realAddress) {
+          result = await createPostProxyComment(
+            realAddress,
+            post,
+            content,
+            contentType,
+          );
+        } else {
+          result = await createPostComment(post, content, contentType);
+        }
       }
 
       if (!isMounted()) {
@@ -170,14 +200,17 @@ function CommentEditor(
             Cancel
           </SecondaryButton>
         )}
-        <PrimaryButton
-          loading={loading}
-          onClick={isEdit ? editComment : createComment}
-          disabled={isEmpty}
-          title={isEmpty ? "cannot submit empty content" : ""}
-        >
-          {isEdit ? "Update" : isReply ? "Reply" : "Comment"}
-        </PrimaryButton>
+        <Tooltip content={isEmpty ? "Cannot submit empty content" : ""}>
+          <SplitCommentButton
+            action={isEdit ? "Update" : isReply ? "Reply" : "Comment"}
+            loading={loading}
+            disabled={isEmpty}
+            onClickComment={() => (isEdit ? editComment() : createComment())}
+            onClickCommentAsProxy={(realAddress) => {
+              createComment(realAddress);
+            }}
+          />
+        </Tooltip>
       </ButtonWrapper>
     </Wrapper>
   );

packages/next-common/components/popupWithSigner/maybeSignerConnected.js

@@ -1,18 +1,12 @@
-import {
-  ServerProxiesProvider,
-  OnChainProxiesProvider,
-} from "next-common/context/proxy";
+import { GeneralProxiesProvider } from "next-common/context/proxy";
 import { useUser } from "../../context/user";
 import { isSameAddress } from "../../utils";
 import { SignerContextProvider, usePopupParams } from "./context";
 import LoginPopup from "next-common/components/login/popup";
-import { useChainSettings } from "next-common/context/chain";
 
 export default function MaybeSignerConnected({ children, extensionAccounts }) {
   const user = useUser();
   const { onClose } = usePopupParams();
-  const { modules: { proxy: { provider = "chain" } = {} } = {} } =
-    useChainSettings();
 
   if (
     !user?.address ||
@@ -23,11 +17,7 @@ export default function MaybeSignerConnected({ children, extensionAccounts }) {
 
   return (
     <SignerContextProvider extensionAccounts={extensionAccounts}>
-      {provider === "server" ? (
-        <ServerProxiesProvider>{children}</ServerProxiesProvider>
-      ) : (
-        <OnChainProxiesProvider>{children}</OnChainProxiesProvider>
-      )}
+      <GeneralProxiesProvider>{children}</GeneralProxiesProvider>
     </SignerContextProvider>
   );
 }

packages/next-common/components/selectProxyAccountPopup/index.js

@@ -0,0 +1,19 @@
+import Popup from "../popup/wrapper/Popup";
+import { ProxiedAccounts } from "../switchSignerPopup";
+import { noop } from "lodash-es";
+import SignerPopupWrapper from "../popupWithSigner/signerPopupWrapper";
+import { GeneralProxiesProvider } from "next-common/context/proxy";
+
+export default function SelectProxyAccountPopup({ onClose, onSelect = noop }) {
+  return (
+    <SignerPopupWrapper onClose={onClose}>
+      <Popup title="Select Address" className="w-[640px]" onClose={onClose}>
+        <GeneralProxiesProvider>
+          <div className="flex flex-col gap-[24px]">
+            <ProxiedAccounts onSelect={onSelect} />
+          </div>
+        </GeneralProxiesProvider>
+      </Popup>
+    </SignerPopupWrapper>
+  );
+}

packages/next-common/components/splitButton/index.js

@@ -0,0 +1,60 @@
+import { ArrowDown } from "@osn/icons/subsquare";
+import PrimaryButton from "next-common/lib/button/primary";
+import { OptionsPadRightWrapper } from "../select/styled";
+import { useRef, useState } from "react";
+import { useClickAway } from "react-use";
+
+function DropdownPanel({ onClick, children }) {
+  return (
+    <OptionsPadRightWrapper onClick={onClick}>
+      {children}
+    </OptionsPadRightWrapper>
+  );
+}
+
+export default function SplitButton({
+  loading,
+  disabled,
+  dropdownContent,
+  children,
+  ...props
+}) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const ref = useRef();
+  useClickAway(ref, () => setShowDropdown(false));
+
+  if (loading) {
+    return (
+      <PrimaryButton loading={loading} {...props}>
+        {children}
+      </PrimaryButton>
+    );
+  }
+
+  return (
+    <div className="flex gap-[1px]">
+      <PrimaryButton
+        disabled={disabled}
+        {...props}
+        className="rounded-tr-none rounded-br-none"
+      >
+        {children}
+      </PrimaryButton>
+      <div ref={ref} className="relative">
+        <PrimaryButton
+          disabled={disabled}
+          {...props}
+          className="rounded-tl-none rounded-bl-none p-[8px]"
+          onClick={() => setShowDropdown(!showDropdown)}
+        >
+          <ArrowDown width={24} height={24} />
+        </PrimaryButton>
+        {showDropdown && (
+          <DropdownPanel onClick={() => setShowDropdown(false)}>
+            {dropdownContent}
+          </DropdownPanel>
+        )}
+      </div>
+    </div>
+  );
+}

packages/next-common/components/splitCommentButton/index.js

@@ -0,0 +1,44 @@
+import { SystemComment } from "@osn/icons/subsquare";
+import SplitMenuButton from "../splitMenuButton";
+import SelectProxyAccountPopup from "../selectProxyAccountPopup";
+import { useState } from "react";
+
+export default function SplitCommentButton({
+  action,
+  onClickComment,
+  onClickCommentAsProxy,
+  ...props
+}) {
+  const [isSelectProxyAccountPopupOpen, setIsSelectProxyAccountPopupOpen] =
+    useState(false);
+
+  return (
+    <>
+      <SplitMenuButton
+        {...props}
+        onClick={onClickComment}
+        dropdownMenuItems={[
+          {
+            icon: (
+              <SystemComment
+                className="[&_path]:stroke-textSecondary"
+                width={24}
+                height={24}
+              />
+            ),
+            label: `${action} as a proxy`,
+            onClick: () => setIsSelectProxyAccountPopupOpen(true),
+          },
+        ]}
+      >
+        {action}
+      </SplitMenuButton>
+      {isSelectProxyAccountPopupOpen && (
+        <SelectProxyAccountPopup
+          onClose={() => setIsSelectProxyAccountPopupOpen(false)}
+          onSelect={onClickCommentAsProxy}
+        />
+      )}
+    </>
+  );
+}

packages/next-common/components/splitMenuButton/index.js

@@ -0,0 +1,39 @@
+import { noop } from "lodash-es";
+import SplitButton from "../splitButton";
+
+function MenuItem({ icon, label, onClick = noop }) {
+  return (
+    <div
+      className="flex items-center cursor-pointer hover:bg-neutral200 rounded-[6px]"
+      onClick={onClick}
+    >
+      <div className="m-[8px]">{icon}</div>
+      <div className="text14Medium text-textPrimary mr-[16px]">{label}</div>
+    </div>
+  );
+}
+
+function DropdownMenu({ items }) {
+  return (
+    <div className="px-[8px]">
+      {items.map(({ icon, label, onClick }, index) => (
+        <MenuItem key={index} icon={icon} label={label} onClick={onClick} />
+      ))}
+    </div>
+  );
+}
+
+export default function SplitMenuButton({
+  dropdownMenuItems = [],
+  children,
+  ...props
+}) {
+  return (
+    <SplitButton
+      {...props}
+      dropdownContent={<DropdownMenu items={dropdownMenuItems} />}
+    >
+      {children}
+    </SplitButton>
+  );
+}