Support removing proxy on the account page, #5125 (#5126)

* init remove column, #5125

* add remove proxy tx func, #5125

* add myProxies redux, #5125

* Refactor: replace provider with myProxies redux, #5125

* remove useless loading const, #5125

* updateMyproxies, #5125

* add subscribe MyProxies context, #5125

* remove myproxiesSlice, #5125

* modify toast, #5125

* format code, #5125

* remove paginations from myProxies, #5125

packages/next-common/components/myProxies/common/columns.jsx

@@ -0,0 +1,9 @@
+import RemoveProxy from "./operations/removeProxy";
+
+export * from "next-common/components/profile/proxy/common/columns";
+
+export const removeColumn = {
+  name: "",
+  className: "text-right w-20",
+  render: (data) => <RemoveProxy data={data} />,
+};

packages/next-common/components/myProxies/common/listTabs.jsx

@@ -1,9 +1,9 @@
 import MyProxies from "../myProxies";
 import ReceivedProxies from "../received";
 import { useState, useMemo } from "react";
-import { useMyProxiesContext } from "../context/myProxies";
 import { useReceivedProxiesContext } from "../context/received";
 import { cn } from "next-common/utils";
+import { useMyProxiesContext } from "../context/myProxies";
 
 export default function ProxyListTabs() {
   const { total: myProxiesCount, loading: isMyProxiesLoading } =

packages/next-common/components/myProxies/common/operations/removeProxy.jsx

@@ -0,0 +1,47 @@
+import { useCallback, useState, useEffect } from "react";
+import { useContextApi } from "next-common/context/api";
+import useRealAddress from "next-common/utils/hooks/useRealAddress";
+import useTxSubmission from "next-common/components/common/tx/useTxSubmission";
+import RemoveButton from "next-common/components/removeButton";
+import Tooltip from "next-common/components/tooltip";
+import { useDispatch } from "react-redux";
+import { newSuccessToast } from "next-common/store/reducers/toastSlice";
+
+export default function RemoveProxy({ data }) {
+  const api = useContextApi();
+  const address = useRealAddress();
+  const dispatch = useDispatch();
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const getTxFunc = useCallback(() => {
+    if (!api || !address) {
+      return;
+    }
+
+    const { delegate, proxyType, delay } = data;
+    return api.tx.proxy.removeProxy(delegate, proxyType, delay);
+  }, [api, address, data]);
+
+  const onFinalized = () => {
+    setIsDisabled(false);
+    dispatch(newSuccessToast("Removed successfully"));
+  };
+
+  const { doSubmit, isSubmitting } = useTxSubmission({
+    getTxFunc,
+    onFinalized,
+    onCancelled: () => setIsDisabled(false),
+  });
+
+  useEffect(() => {
+    if (isSubmitting) {
+      setIsDisabled(true);
+    }
+  }, [isSubmitting]);
+
+  return (
+    <Tooltip content="Remove">
+      <RemoveButton disabled={isDisabled} onClick={doSubmit} />
+    </Tooltip>
+  );
+}

packages/next-common/components/myProxies/context/myProxies.js

@@ -1,16 +1,16 @@
 import { createContext, useContext } from "react";
-import useMyOnChainProxies from "next-common/hooks/account/useMyOnChainProxies";
+import useSubMyProxies from "next-common/hooks/account/useSubMyProxies";
 
 const MyProxiesContext = createContext(null);
 
 export function MyProxiesProvider({ children }) {
-  const { proxies = [], loading } = useMyOnChainProxies();
+  const { proxies = [], loading } = useSubMyProxies();
   const total = proxies[0]?.length || 0;
 
   return (
     <MyProxiesContext.Provider
       value={{
-        data: proxies[0],
+        proxies: proxies[0],
         total,
         loading,
       }}

packages/next-common/components/myProxies/index.jsx

@@ -1,8 +1,8 @@
 import AccountSubTabs from "next-common/components/overview/account/subTabs";
 import MyProxiesSummary from "./summary";
 import { ReceivedProxiesProvider } from "./context/received";
-import { MyProxiesProvider } from "./context/myProxies";
 import ProxyListTabs from "./common/listTabs";
+import { MyProxiesProvider } from "./context/myProxies";
 
 export default function MyProxies() {
   return (

packages/next-common/components/myProxies/myProxies.jsx

@@ -1,37 +1,35 @@
 import { MapDataList } from "next-common/components/dataList";
-import { defaultPageSize } from "next-common/utils/constants";
 import { useEffect, useState } from "react";
 import {
   delegateeColumn,
   typeColumn,
   useDelayBlockOrTimeColumn,
-} from "next-common/components/profile/proxy/common/columns";
+  removeColumn,
+} from "./common/columns";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
-import { useMyProxiesContext } from "./context/myProxies";
-import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";
 import HeaderPrompt from "next-common/components/profile/proxy/common/headerPrompt";
+import SignerPopupWrapper from "next-common/components/popupWithSigner/signerPopupWrapper";
+import { useMyProxiesContext } from "./context/myProxies";
 
 export default function MyProxies() {
-  const { data, total, loading } = useMyProxiesContext();
   const [dataList, setDataList] = useState([]);
-
-  const { page, component: pageComponent } = usePaginationComponent(
-    total,
-    defaultPageSize,
-  );
+  const { proxies, loading } = useMyProxiesContext();
 
   const delayBlockOrTimeColumn = useDelayBlockOrTimeColumn();
-  const columns = [delegateeColumn, typeColumn, delayBlockOrTimeColumn];
+  const columns = [
+    delegateeColumn,
+    typeColumn,
+    delayBlockOrTimeColumn,
+    removeColumn,
+  ];
 
   useEffect(() => {
     if (loading) {
       return;
     }
 
-    const startIndex = (page - 1) * defaultPageSize;
-    const endIndex = startIndex + defaultPageSize;
-    setDataList(data?.slice(startIndex, endIndex));
-  }, [data, page, loading]);
+    setDataList(proxies);
+  }, [proxies, loading]);
 
   return (
     <SecondaryCard className="space-y-4">
@@ -40,13 +38,14 @@ export default function MyProxies() {
           "I'm a delegator and my delegatees can submit extrinsics on behalf of me."
         }
       />
-      <MapDataList
-        loading={loading}
-        noDataText="No proxy set"
-        columnsDef={columns}
-        data={dataList}
-      />
-      {total > 0 && pageComponent}
+      <SignerPopupWrapper>
+        <MapDataList
+          loading={loading}
+          noDataText="No proxy set"
+          columnsDef={columns}
+          data={dataList}
+        />
+      </SignerPopupWrapper>
     </SecondaryCard>
   );
 }

packages/next-common/components/myProxies/received.jsx

@@ -5,7 +5,7 @@ import {
   delegatorColumn,
   typeColumn,
   useDelayBlockOrTimeColumn,
-} from "next-common/components/profile/proxy/common/columns";
+} from "./common/columns";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
 import { useReceivedProxiesContext } from "./context/received";
 import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";

packages/next-common/components/myProxies/summary.jsx

@@ -2,8 +2,8 @@ import { SecondaryCard } from "next-common/components/styled/containers/secondar
 import LoadableContent from "next-common/components/common/loadableContent";
 import SummaryLayout from "next-common/components/summary/layout/layout";
 import SummaryItem from "next-common/components/summary/layout/item";
-import { useMyProxiesContext } from "./context/myProxies";
 import { useReceivedProxiesContext } from "./context/received";
+import { useMyProxiesContext } from "./context/myProxies";
 
 export default function MyProxiesSummary() {
   const { total: myProxiesCount, loading: isMyProxiesLoading } =

packages/next-common/components/overview/account/proxiesTitle.jsx

@@ -1,18 +1,26 @@
 import { Title } from "./styled";
-import useMyOnChainProxies from "next-common/hooks/account/useMyOnChainProxies";
+import {
+  useMyProxiesContext,
+  MyProxiesProvider,
+} from "next-common/components/myProxies/context/myProxies";
 
 function ProxiesCount() {
-  const { proxies = [] } = useMyOnChainProxies();
-  const total = proxies[0]?.length || 0;
+  const { total = 0, loading } = useMyProxiesContext();
+
+  if (loading) {
+    return null;
+  }
 
   return <span className="text-textTertiary mx-1 text16Medium">{total}</span>;
 }
 
 export default function ProxiesTitle({ active }) {
   return (
-    <Title className={active ? "text-textPrimary" : "text-textTertiary"}>
-      Proxies
-      <ProxiesCount />
-    </Title>
+    <MyProxiesProvider>
+      <Title className={active ? "text-textPrimary" : "text-textTertiary"}>
+        Proxies
+        <ProxiesCount />
+      </Title>
+    </MyProxiesProvider>
   );
 }

packages/next-common/components/profile/deposits/proxy.jsx

@@ -3,14 +3,12 @@ import useProfileOnChainProxies from "next-common/components/profile/proxy/hooks
 import useProfileAddress from "next-common/components/profile/useProfileAddress";
 import { MenuProxy } from "@osn/icons/subsquare";
 import { MapDataList } from "next-common/components/dataList";
-import { defaultPageSize } from "next-common/utils/constants";
 import { useEffect, useState } from "react";
 import {
   delegateeColumn,
   typeColumn,
   useDelayBlockOrTimeColumn,
 } from "next-common/components/profile/proxy/common/columns";
-import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";
 import ValueDisplay from "next-common/components/valueDisplay";
 import { useChainSettings } from "next-common/context/chain";
 import { toPrecision } from "next-common/utils";
@@ -49,10 +47,6 @@ export default function ProxyDeposits({ deposits }) {
   const { items, total, loading, balance } = deposits;
 
   const [dataList, setDataList] = useState([]);
-  const { page, component: pageComponent } = usePaginationComponent(
-    total,
-    defaultPageSize,
-  );
   const delayBlockOrTimeColumn = useDelayBlockOrTimeColumn();
   const columns = [delegateeColumn, typeColumn, delayBlockOrTimeColumn];
 
@@ -61,10 +55,8 @@ export default function ProxyDeposits({ deposits }) {
       return;
     }
 
-    const startIndex = (page - 1) * defaultPageSize;
-    const endIndex = startIndex + defaultPageSize;
-    setDataList(items?.slice(startIndex, endIndex));
-  }, [items, page, loading]);
+    setDataList(items);
+  }, [items, loading]);
 
   return (
     <DepositTemplate
@@ -80,7 +72,6 @@ export default function ProxyDeposits({ deposits }) {
         columnsDef={columns}
         data={dataList}
       />
-      {total > 0 && pageComponent}
     </DepositTemplate>
   );
 }

packages/next-common/components/profile/proxy/myProxies.jsx

@@ -1,5 +1,4 @@
 import { MapDataList } from "next-common/components/dataList";
-import { defaultPageSize } from "next-common/utils/constants";
 import { useEffect, useState } from "react";
 import {
   delegateeColumn,
@@ -8,18 +7,12 @@ import {
 } from "./common/columns";
 import { SecondaryCard } from "next-common/components/styled/containers/secondaryCard";
 import { useMyProxiesContext } from "./context/myProxies";
-import usePaginationComponent from "next-common/components/pagination/usePaginationComponent";
 import HeaderPrompt from "./common/headerPrompt";
 
 export default function MyProxies() {
-  const { data, total, loading } = useMyProxiesContext();
+  const { data, loading } = useMyProxiesContext();
   const [dataList, setDataList] = useState([]);
 
-  const { page, component: pageComponent } = usePaginationComponent(
-    total,
-    defaultPageSize,
-  );
-
   const delayBlockOrTimeColumn = useDelayBlockOrTimeColumn();
   const columns = [delegateeColumn, typeColumn, delayBlockOrTimeColumn];
 
@@ -28,10 +21,8 @@ export default function MyProxies() {
       return;
     }
 
-    const startIndex = (page - 1) * defaultPageSize;
-    const endIndex = startIndex + defaultPageSize;
-    setDataList(data?.slice(startIndex, endIndex));
-  }, [data, page, loading]);
+    setDataList(data);
+  }, [data, loading]);
 
   return (
     <SecondaryCard className="space-y-4">
@@ -46,7 +37,6 @@ export default function MyProxies() {
         columnsDef={columns}
         data={dataList}
       />
-      {total > 0 && pageComponent}
     </SecondaryCard>
   );
 }

packages/next-common/hooks/account/useSubMyProxies.js

@@ -0,0 +1,9 @@
+import useRealAddress from "next-common/utils/hooks/useRealAddress";
+import useSubStorage from "next-common/hooks/common/useSubStorage";
+
+export default function useSubMyProxies() {
+  const address = useRealAddress();
+  const { result, loading } = useSubStorage("proxy", "proxies", [address]);
+
+  return { proxies: result?.toJSON(), loading };
+}