Merge pull request #8889 from hicommonwealth/admin-panel-chain-node-u…

…pdate

Admin panel chain node update

packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx

@@ -7,7 +7,7 @@ import { CWTextInput } from './cw_text_input';
 
 export type DropdownItemType = {
   label: string;
-  value: string;
+  value: string | number;
 };
 
 type DropdownProps = {
@@ -29,7 +29,7 @@ export const CWDropdown = ({
 }: DropdownProps) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [selectedValue, setSelectedValue] = useState<DropdownItemType>(
-    initialValue ?? options[0]
+    initialValue ?? options[0],
   );
 
   return (

packages/commonwealth/client/scripts/views/pages/AdminPanel/AdminPanelPage.tsx

@@ -8,6 +8,7 @@ import UpdateCustomDomainTask from 'views/pages/AdminPanel/UpdateCustomDomainTas
 import { CWDivider } from '../../components/component_kit/cw_divider';
 import { CWText } from '../../components/component_kit/cw_text';
 import Analytics from './Analytics';
+import ConnectChainToCommunity from './ConnectChainToCommunityTask';
 import DeleteChainTask from './DeleteChainTask';
 import DownloadMembersListTask from './DownloadMembersListTask';
 import MakeSiteAdminTask from './MakeSiteAdminTask';
@@ -39,6 +40,7 @@ const AdminPanelPage = () => {
         <UpdateCommunityIdTask />
         <DownloadMembersListTask />
         <RPCEndpointTask />
+        <ConnectChainToCommunity />
         <MakeSiteAdminTask />
         <TopUsers />
         <TriggerNotificationsWorkflow />

packages/commonwealth/client/scripts/views/pages/AdminPanel/ConnectChainToCommunityTask.tsx

@@ -0,0 +1,139 @@
+import { ChainType } from '@hicommonwealth/shared';
+import { notifyError, notifySuccess } from 'controllers/app/notifications';
+import 'pages/AdminPanel.scss';
+import React, { useState } from 'react';
+import {
+  useGetCommunityByIdQuery,
+  useUpdateCommunityMutation,
+} from 'state/api/communities';
+import { useFetchNodesQuery } from 'state/api/nodes';
+import { useDebounce } from 'usehooks-ts';
+import {
+  CWDropdown,
+  DropdownItemType,
+} from '../../components/component_kit/cw_dropdown';
+import { CWText } from '../../components/component_kit/cw_text';
+import { CWButton } from '../../components/component_kit/new_designs/CWButton';
+import { CWTextInput } from '../../components/component_kit/new_designs/CWTextInput';
+import { openConfirmation } from '../../modals/confirmation_modal';
+import { getSortedChains } from './utils';
+
+const ConnectChainToCommunityTask = () => {
+  const [communityId, setCommunityId] = useState<string>('');
+
+  const [chainNameAndId, setChainNameAndId] = useState<DropdownItemType>({
+    label: '',
+    value: 0,
+  });
+
+  const { mutateAsync: updateCommunity } = useUpdateCommunityMutation({
+    communityId: communityId,
+  });
+
+  const { data: chainNodes } = useFetchNodesQuery();
+
+  const chains = getSortedChains(chainNodes);
+
+  const debouncedCommunityLookupId = useDebounce<string | undefined>(
+    communityId,
+    500,
+  );
+
+  const { data: communityLookupData, isLoading: isLoadingCommunityLookupData } =
+    useGetCommunityByIdQuery({
+      id: debouncedCommunityLookupId || '',
+      enabled: !!debouncedCommunityLookupId,
+    });
+
+  const chainNotCommunity = communityLookupData?.type === ChainType.Chain;
+
+  const buttonEnabled =
+    !isLoadingCommunityLookupData &&
+    !chainNotCommunity &&
+    chainNameAndId.label.length > 0;
+
+  const setCommunityIdInput = (e) => {
+    setCommunityId(e?.target?.value?.trim() || '');
+  };
+
+  const communityNotFound =
+    !isLoadingCommunityLookupData &&
+    (!communityLookupData ||
+      Object.keys(communityLookupData || {})?.length === 0);
+
+  const communityIdInputError = (() => {
+    if (communityNotFound) return 'Community not found';
+    if (chainNotCommunity) return 'This is a chain';
+    return '';
+  })();
+
+  const update = () => {
+    if (Object.keys(communityLookupData || {}).length > 0) {
+      try {
+        void updateCommunity({
+          communityId: communityId,
+          chainNodeId: chainNameAndId?.value.toString(),
+        });
+        setCommunityIdInput('');
+        setChainNameAndId({ label: '', value: 0 });
+        notifySuccess('Chain connected to community');
+      } catch (error) {
+        notifyError('Error connecting chain to community');
+        console.error(error);
+      }
+    }
+  };
+  const openConfirmationModal = () => {
+    openConfirmation({
+      title: 'Connect Chain to Community',
+      description:
+        `Are you sure you want to connect ${communityLookupData?.name} to ${chainNameAndId.label}?` +
+        `This will replace the existing chain with ${chainNameAndId.label} and might affect existing` +
+        `features of the community that depend on the existing chain node. Do you want to proceed?`,
+      buttons: [
+        {
+          label: 'Update',
+          buttonType: 'primary',
+          buttonHeight: 'sm',
+          onClick: update,
+        },
+        {
+          label: 'Cancel',
+          buttonType: 'secondary',
+          buttonHeight: 'sm',
+        },
+      ],
+    });
+  };
+
+  return (
+    <div className="TaskGroup">
+      <CWText type="h4">Connect Chain to Community</CWText>
+      <CWText type="caption">Connects a specific chain to a community</CWText>
+      <div className="TaskRow">
+        <CWTextInput
+          label="Community Id"
+          value={communityId}
+          onInput={setCommunityIdInput}
+          customError={communityIdInputError}
+          placeholder="Enter a community id"
+        />
+        <CWDropdown
+          label="Select chain"
+          options={chains}
+          onSelect={(item) => {
+            setChainNameAndId(item);
+          }}
+        />
+        <CWButton
+          label="Connect"
+          className="TaskButton"
+          disabled={!buttonEnabled}
+          onClick={() => void openConfirmationModal()}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ConnectChainToCommunityTask;