Merge pull request #632 from ar-io/develop

Release reassign name
ar-io · Dec 18, 2024 · 32c879f · 32c879f
2 parents 05c0b42 + e6feb31
commit 32c879f
Show file tree

Hide file tree

Showing 16 changed files with 996 additions and 61 deletions.
diff --git a/package.json b/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",

diff --git a/src/components/cards/WarningCard/WarningCard.tsx b/src/components/cards/WarningCard/WarningCard.tsx
@@ -24,13 +24,7 @@ function WarningCard({
       }}
     >
       {showIcon || customIcon ? (
-        <span
-          style={{
-            height: '100%',
-            display: 'flex',
-            lineHeight: '150%',
-          }}
-        >
+        <span className="flex items-center justify-center h-full pt-[2px]">
           {customIcon ? (
             customIcon
           ) : (

diff --git a/src/components/data-display/tables/UndernamesSubtable.tsx b/src/components/data-display/tables/UndernamesSubtable.tsx
@@ -53,7 +53,7 @@ const UndernamesSubtable = ({
   handlers?: AoANTHandler[];
   antId: string;
 }) => {
-  const [{ arioProcessId }] = useGlobalState();
+  const [{ arioProcessId, aoClient }] = useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [, dispatchTransactionState] = useTransactionState();
   const [, dispatchModalState] = useModalState();
@@ -288,6 +288,7 @@ const UndernamesSubtable = ({
               signer: wallet.contractSigner!,
               owner: walletAddress.toString(),
               dispatch: dispatchTransactionState,
+              ao: aoClient,
             }).then(() => {
               eventEmitter.emit('success', {
                 message: (

diff --git a/src/components/data-display/tables/UndernamesTable.tsx b/src/components/data-display/tables/UndernamesTable.tsx
@@ -96,7 +96,7 @@ const UndernamesTable = ({
   refresh?: () => void;
 }) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const [{ arioProcessId }] = useGlobalState();
+  const [{ arioProcessId, aoClient }] = useGlobalState();
   const [{ wallet, walletAddress }] = useWalletState();
   const [, dispatchTransactionState] = useTransactionState();
   const [, dispatchModalState] = useModalState();
@@ -144,6 +144,7 @@ const UndernamesTable = ({
         signer: wallet?.contractSigner,
         owner: walletAddress?.toString(),
         dispatch: dispatchTransactionState,
+        ao: aoClient,
       });
       eventEmitter.emit('success', {
         name: 'Manage Undernames',

diff --git a/src/components/forms/DomainSettings/DescriptionRow.tsx b/src/components/forms/DomainSettings/DescriptionRow.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from 'react';
 import DomainSettingsRow from './DomainSettingsRow';
 
 export default function DescriptionRow({
-  description,
+  description = '',
   confirm,
   editable = false,
 }: {

diff --git a/src/components/forms/DomainSettings/DomainSettings.tsx b/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';
@@ -74,12 +75,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
@@ -89,8 +91,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[];
 
   useEffect(() => {
     if (!domain && !antId) {
@@ -173,7 +176,7 @@ function DomainSettings({
               editable={true}
               action={
                 <div className="flex flex-row gap-1" style={{ gap: '10px' }}>
-                  {data?.arnsRecord?.type == 'permabuy' ? (
+                  {data?.arnsRecord?.type == 'permabuy' && isOwner ? (
                     <Tooltip
                       message={
                         !antHandlers.includes('releaseName')
@@ -258,9 +261,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
@@ -280,6 +288,7 @@ function DomainSettings({
                   signer: wallet!.contractSigner!,
                   owner: walletAddress!.toString(),
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -289,7 +298,7 @@ function DomainSettings({
               label="Process ID"
               key={DomainSettingsRowTypes.PROCESS_ID}
               value={
-                data?.processId ? (
+                data?.processId && !isLoading ? (
                   <ArweaveID
                     id={new ArweaveTransactionID(data.processId.toString())}
                     shouldLink
@@ -299,6 +308,30 @@ function DomainSettings({
                   <Skeleton.Input active />
                 )
               }
+              editable={isOwner}
+              action={
+                <Tooltip
+                  message={
+                    !antHandlers.includes('reassignName')
+                      ? 'Update ANT to access Reassign Name workflow'
+                      : data?.isInGracePeriod
+                      ? 'Lease must be extended before ANT can be Reassigned'
+                      : 'Reassigns what ANT is registered to the ArNS Name'
+                  }
+                  icon={
+                    <button
+                      disabled={
+                        !antHandlers.includes('reassignName') ||
+                        data?.isInGracePeriod
+                      }
+                      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]: (
@@ -317,6 +350,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -334,6 +368,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -360,6 +395,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -388,6 +424,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -408,6 +445,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -438,6 +476,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -457,6 +496,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -476,6 +516,7 @@ function DomainSettings({
                   owner: walletAddress!.toString(),
                   processId: data?.processId,
                   dispatch,
+                  ao: aoClient,
                 })
               }
             />
@@ -493,6 +534,14 @@ function DomainSettings({
           processId={data.processId}
         />
       )}
+      {domain && data?.processId && (
+        <ReassignNameModal
+          show={showReassignNameModal}
+          setShow={setShowReassignNameModal}
+          name={domain}
+          processId={data.processId}
+        />
+      )}
     </>
   );
 }

diff --git a/src/components/inputs/RadioGroup.tsx b/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;
diff --git a/src/components/modals/PrimaryNameModal/PrimaryNameModal.tsx b/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'],