feat(PE-7068): reassign name

package.json

@@ -27,6 +27,7 @@
     "@ant-design/icons": "5.4.0",
     "@ar.io/sdk": "^3.0.0",
     "@permaweb/aoconnect": "^0.0.59",
+    "@radix-ui/react-radio-group": "^1.2.1",
     "@sentry/react": "^7.45.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-persist-client": "^5.45.1",

src/components/data-display/tables/UndernamesSubtable.tsx

@@ -52,7 +52,7 @@ const UndernamesSubtable = ({
   handlers?: AoANTHandler[];
   antId: string;
 }) => {
-  const [{ gateway, arioProcessId }] = useGlobalState();
+  const [{ gateway, arioProcessId, aoClient }] = useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [, dispatchTransactionState] = useTransactionState();
   const [, dispatchModalState] = useModalState();
@@ -285,6 +285,7 @@ const UndernamesSubtable = ({
               signer: wallet.contractSigner!,
               owner: walletAddress.toString(),
               dispatch: dispatchTransactionState,
+              ao: aoClient,
             }).then(() => {
               eventEmitter.emit('success', {
                 message: (

src/components/data-display/tables/UndernamesTable.tsx

@@ -95,7 +95,7 @@ const UndernamesTable = ({
   refresh?: () => void;
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const [{ gateway, arioProcessId }] = useGlobalState();
+  const [{ gateway, arioProcessId, aoClient }] = useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [, dispatchTransactionState] = useTransactionState();
   const [, dispatchModalState] = useModalState();
@@ -143,6 +143,7 @@ const UndernamesTable = ({
         signer: wallet?.contractSigner,
         owner: walletAddress?.toString(),
         dispatch: dispatchTransactionState,
+        ao: aoClient,
       });
       eventEmitter.emit('success', {
         name: 'Manage Undernames',

src/components/forms/DomainSettings/DomainSettings.tsx

@@ -4,10 +4,11 @@ import LeaseDuration from '@src/components/data-display/LeaseDuration';
 import ArweaveID, {
   ArweaveIdTypes,
 } from '@src/components/layout/ArweaveID/ArweaveID';
+import { ReassignNameModal } from '@src/components/modals/ant-management/ReassignNameModal/ReassignNameModal';
 import { ReturnNameModal } from '@src/components/modals/ant-management/ReturnNameModal/ReturnNameModal';
 import useDomainInfo from '@src/hooks/useDomainInfo';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
-import { useArNSState, useGlobalState } from '@src/state';
+import { useGlobalState } from '@src/state';
 import dispatchANTInteraction from '@src/state/actions/dispatchANTInteraction';
 import { useTransactionState } from '@src/state/contexts/TransactionState';
 import { useWalletState } from '@src/state/contexts/WalletState';
@@ -77,12 +78,13 @@ function DomainSettings({
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
-  const [{ arioProcessId }] = useGlobalState();
+  const [{ arioProcessId, aoClient }] = useGlobalState();
   const [{ interactionResult }, dispatch] = useTransactionState();
   const [{ wallet, walletAddress }] = useWalletState();
   const { data, isLoading, refetch } = useDomainInfo({ domain, antId });
-  const [{ ants }] = useArNSState();
+
   const [showReturnNameModal, setShowReturnNameModal] = useState(false);
+  const [showReassignNameModal, setShowReassignNameModal] = useState(false);
 
   // permissions check
   const isOwner = walletAddress
@@ -92,8 +94,9 @@ function DomainSettings({
     ? data?.controllers?.includes(walletAddress.toString() ?? '')
     : false;
   const isAuthorized = isOwner || isController;
-  const antHandlers =
-    data?.info?.Handlers ?? data?.info?.HandlerNames ?? ([] as AoANTHandler[]);
+  const antHandlers = (data?.info?.Handlers ??
+    data?.info?.HandlerNames ??
+    []) as AoANTHandler[];
 
   const maxLeaseDuration = isMaxLeaseDuration(
     data?.arnsRecord && isLeasedArNSRecord(data?.arnsRecord)
@@ -279,9 +282,14 @@ function DomainSettings({
               antId={data?.processId?.toString()}
               editable={isAuthorized}
               requiresUpdate={
-                data?.processId && ants[data.processId] && walletAddress
+                data?.processId && data?.state && walletAddress
                   ? doAntsRequireUpdate({
-                      ants: { [data.processId]: ants[data.processId] },
+                      ants: {
+                        [data.processId]: {
+                          state: data.state,
+                          handlers: antHandlers,
+                        },
+                      },
                       userAddress: walletAddress.toString(),
                     })
                   : false
@@ -301,6 +309,7 @@ function DomainSettings({
                   signer: wallet!.contractSigner!,
                   owner: walletAddress!.toString(),
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -310,7 +319,7 @@ function DomainSettings({
               label="Process ID"
               key={DomainSettingsRowTypes.PROCESS_ID}
               value={
-                data?.processId ? (
+                data?.processId && !isLoading ? (
                   <ArweaveID
                     id={new ArweaveTransactionID(data.processId.toString())}
                     shouldLink
@@ -320,6 +329,25 @@ function DomainSettings({
                   <Skeleton.Input active />
                 )
               }
+              editable={isAuthorized}
+              action={
+                <Tooltip
+                  message={
+                    !antHandlers.includes('reassignName')
+                      ? 'Update ANT to access Reassign Name workflow'
+                      : 'Reassigns what ANT is registered to the ArNS Name'
+                  }
+                  icon={
+                    <button
+                      disabled={!antHandlers.includes('reassignName')}
+                      onClick={() => setShowReassignNameModal(true)}
+                      className={`flex flex-row text-[12px] rounded-[4px] p-[6px] px-[10px] border border-error bg-error-thin text-error whitespace-nowrap`}
+                    >
+                      Reassign Name
+                    </button>
+                  }
+                />
+              }
             />
           ),
           [DomainSettingsRowTypes.TARGET_ID]: (
@@ -338,6 +366,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -355,6 +384,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -381,6 +411,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -409,6 +440,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -429,6 +461,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -459,6 +492,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -478,6 +512,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -497,6 +532,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -514,6 +550,14 @@ function DomainSettings({
           processId={data.processId}
         />
       )}
+      {domain && data?.processId && (
+        <ReassignNameModal
+          show={showReassignNameModal}
+          setShow={setShowReassignNameModal}
+          name={domain}
+          processId={data.processId}
+        />
+      )}
     </>
   );
 }

src/components/inputs/RadioGroup.tsx

@@ -0,0 +1,53 @@
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { ReactNode } from 'react';
+
+function RadioGroup({
+  items,
+  className,
+  defaultValue = '',
+  groupLabel,
+  indicatorClass,
+  onChange,
+  value,
+}: {
+  items?: { label?: ReactNode; value?: any; className?: string }[];
+  className?: string;
+  defaultValue?: any;
+  groupLabel?: string;
+  indicatorClass?: string;
+  onChange?: (val: any) => void;
+  value?: any;
+}) {
+  function handleValueChange(v: any) {
+    onChange?.(v);
+  }
+  return (
+    <form>
+      <RadixRadioGroup.Root
+        onValueChange={handleValueChange}
+        value={value}
+        className={className}
+        defaultValue={defaultValue}
+        aria-label={groupLabel}
+      >
+        {items?.map((item, index) => {
+          return (
+            <div key={index} className={'flex items-center'}>
+              <RadixRadioGroup.Item
+                className={item.className}
+                value={item.value}
+                id={'r' + index}
+              >
+                <RadixRadioGroup.Indicator className={indicatorClass} />
+              </RadixRadioGroup.Item>
+
+              {item.label}
+            </div>
+          );
+        })}
+      </RadixRadioGroup.Root>
+    </form>
+  );
+}
+
+export default RadioGroup;

src/components/modals/PrimaryNameModal/PrimaryNameModal.tsx

@@ -73,7 +73,8 @@ function PrimaryNameModal({
   setVisible: (visible: boolean) => void;
 }) {
   const queryClient = useQueryClient();
-  const [{ arioTicker, arioProcessId, arioContract }] = useGlobalState();
+  const [{ arioTicker, arioProcessId, arioContract, aoClient }] =
+    useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const { data: primaryNameData, isLoading: isLoadingPrimaryNameData } =
     usePrimaryName();
@@ -187,6 +188,7 @@ function PrimaryNameModal({
               names: [encodePrimaryName(targetName)],
             },
             dispatch: dispatchTransactionState,
+            ao: aoClient,
           });
           queryClient.resetQueries({
             queryKey: ['primary-name'],