Merge pull request #594 from ar-io/PE-7067-release-name

feat(PE-7067): release name
ar-io · Dec 6, 2024 · 1901205 · 1901205
2 parents 5c0b5e0 + 0508abb
commit 1901205
Show file tree

Hide file tree

Showing 25 changed files with 298 additions and 58 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -35,8 +35,10 @@
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", {}],
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "no-useless-escape": "off",
     "react/no-children-prop": "off",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "react-hooks/exhaustive-deps": "off"
   }
 }
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "5.4.0",
-    "@ar.io/sdk": "^2.5.3-alpha.4",
+    "@ar.io/sdk": "^2.6.0-alpha.2",
     "@permaweb/aoconnect": "^0.0.59",
     "@sentry/react": "^7.45.0",
     "@tanstack/react-query": "^5.51.21",

diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx
@@ -130,7 +130,7 @@ function NavMenuCard() {
         placement="bottomRight"
         color="var(--card-bg)"
         autoAdjustOverflow
-        arrow={{ arrowPointAtCenter: true }}
+        arrow={{ pointAtCenter: true }}
         overlayInnerStyle={{
           width: 'fit-content',
           border: '1px solid var(--text-faded)',

diff --git a/src/components/data-display/DomainDetailsTip.tsx b/src/components/data-display/DomainDetailsTip.tsx
@@ -1,5 +1,5 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { AoArNSNameData } from '@ar.io/sdk';
+import { AoArNSNameData } from '@ar.io/sdk/web';
 import { useANT } from '@src/hooks/useANT/useANT';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
 import { decodeDomainToASCII, isArweaveTransactionID } from '@src/utils';

diff --git a/src/components/data-display/tables/UndernamesTable.tsx b/src/components/data-display/tables/UndernamesTable.tsx
@@ -1,4 +1,4 @@
-import { AoANTInfo, AoANTRecord } from '@ar.io/sdk';
+import { AoANTInfo, AoANTRecord } from '@ar.io/sdk/web';
 import { ExternalLinkIcon, PencilIcon, TrashIcon } from '@src/components/icons';
 import ArweaveID, {
   ArweaveIdTypes,

diff --git a/src/components/devtools/NetworkSettings.tsx b/src/components/devtools/NetworkSettings.tsx
@@ -1,4 +1,4 @@
-import { AOProcess, IO } from '@ar.io/sdk';
+import { AOProcess, IO } from '@ar.io/sdk/web';
 import { connect } from '@permaweb/aoconnect';
 import { ArweaveTransactionID } from '@src/services/arweave/ArweaveTransactionID';
 import {

diff --git a/src/components/forms/DomainSettings/DomainSettings.tsx b/src/components/forms/DomainSettings/DomainSettings.tsx
@@ -1,9 +1,10 @@
-import { isLeasedArNSRecord } from '@ar.io/sdk/web';
+import { AoANTHandler, isLeasedArNSRecord } from '@ar.io/sdk/web';
 import { Tooltip } from '@src/components/data-display';
 import LeaseDuration from '@src/components/data-display/LeaseDuration';
 import ArweaveID, {
   ArweaveIdTypes,
 } from '@src/components/layout/ArweaveID/ArweaveID';
+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';
@@ -26,7 +27,7 @@ import {
 } from '@src/utils/constants';
 import { useQueryClient } from '@tanstack/react-query';
 import { List, Skeleton } from 'antd';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import ControllersRow from './ControllersRow';
@@ -70,13 +71,14 @@ function DomainSettings({
   setLogo?: (id?: string) => void;
 }) {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   const [{ ioProcessId }] = useGlobalState();
   const [{ interactionResult }, dispatch] = useTransactionState();
-  const navigate = useNavigate();
+  const [{ wallet, walletAddress }] = useWalletState();
   const { data, isLoading, refetch } = useDomainInfo({ domain, antId });
   const [{ ants }] = useArNSState();
-  const [{ wallet, walletAddress }] = useWalletState();
+  const [showReturnNameModal, setShowReturnNameModal] = useState(false);
 
   // permissions check
   const isOwner = walletAddress
@@ -86,6 +88,9 @@ function DomainSettings({
     ? data?.controllers?.includes(walletAddress.toString() ?? '')
     : false;
   const isAuthorized = isOwner || isController;
+  const antHandlers =
+    data?.info?.Handlers ?? data?.info?.HandlerNames ?? ([] as AoANTHandler[]);
+  console.log(antHandlers);
 
   const maxLeaseDuration = isMaxLeaseDuration(
     data?.arnsRecord && isLeasedArNSRecord(data?.arnsRecord)
@@ -174,32 +179,55 @@ function DomainSettings({
             <DomainSettingsRow
               label="Lease Duration"
               key={DomainSettingsRowTypes.LEASE_DURATION}
-              editable={true}
+              editable={isAuthorized}
               action={
-                <Tooltip
-                  message={
-                    maxLeaseDuration
-                      ? 'Max lease duration reached'
-                      : 'Extend lease'
-                  }
-                  icon={
-                    <button
-                      disabled={isLoading || maxLeaseDuration}
-                      className={`p-[6px] px-[10px] text-[12px] rounded-[4px] bg-primary-thin hover:bg-primary border hover:border-primary border-primary-thin text-primary hover:text-black transition-all whitespace-nowrap ${
-                        isLoading || maxLeaseDuration
-                          ? 'disabled-button'
-                          : 'hover'
-                      }`}
-                      onClick={() =>
-                        navigate(
-                          `/manage/names/${lowerCaseDomain(domain!)}/extend`,
-                        )
+                <div className="flex flex-row gap-1" style={{ gap: '10px' }}>
+                  {data?.arnsRecord?.type == 'permabuy' ? (
+                    <Tooltip
+                      message={
+                        !antHandlers.includes('releaseName')
+                          ? 'Update ANT to access Release Name workflow'
+                          : 'Returns the name to the ArNS protocol'
                       }
-                    >
-                      Extend Lease
-                    </button>
-                  }
-                />
+                      icon={
+                        <button
+                          disabled={!antHandlers.includes('releaseName')}
+                          onClick={() => setShowReturnNameModal(true)}
+                          className={`flex flex-row text-[12px] rounded-[4px] p-[6px] px-[10px] border border-error bg-error-thin text-error whitespace-nowrap`}
+                        >
+                          Return Name
+                        </button>
+                      }
+                    />
+                  ) : (
+                    <Tooltip
+                      message={
+                        maxLeaseDuration
+                          ? 'Max lease duration reached'
+                          : 'Extend lease'
+                      }
+                      icon={
+                        <button
+                          disabled={isLoading || maxLeaseDuration}
+                          className={`p-[6px] px-[10px] text-[12px] rounded-[4px] bg-primary-thin hover:bg-primary border hover:border-primary border-primary-thin text-primary hover:text-black transition-all whitespace-nowrap ${
+                            isLoading || maxLeaseDuration
+                              ? 'disabled-button'
+                              : 'hover'
+                          }`}
+                          onClick={() =>
+                            navigate(
+                              `/manage/names/${lowerCaseDomain(
+                                domain!,
+                              )}/extend`,
+                            )
+                          }
+                        >
+                          Extend Lease
+                        </button>
+                      }
+                    />
+                  )}
+                </div>
               }
               value={
                 isLoading ? (
@@ -436,6 +464,15 @@ function DomainSettings({
           rowFilter.includes(rowName as DomainSettingsRowTypes) ? <></> : row,
         )}
       </List>
+
+      {domain && data?.processId && (
+        <ReturnNameModal
+          show={showReturnNameModal}
+          setShow={setShowReturnNameModal}
+          name={domain}
+          processId={data.processId}
+        />
+      )}
     </>
   );
 }

diff --git a/src/components/inputs/DomainSearch.tsx b/src/components/inputs/DomainSearch.tsx
@@ -1,4 +1,4 @@
-import { AoArNSNameData } from '@ar.io/sdk';
+import { AoArNSNameData } from '@ar.io/sdk/web';
 import { useArNSRegistryDomains } from '@src/hooks/useArNSRegistryDomains';
 import { decodeDomainToASCII, lowerCaseDomain } from '@src/utils';
 import { MAX_ARNS_NAME_LENGTH } from '@src/utils/constants';

diff --git a/src/components/inputs/Search/DomainPriceList.tsx b/src/components/inputs/Search/DomainPriceList.tsx
@@ -1,4 +1,4 @@
-import { mIOToken } from '@ar.io/sdk';
+import { mIOToken } from '@ar.io/sdk/web';
 import { RefreshAlertIcon } from '@src/components/icons';
 import { useArNSDomainPriceList } from '@src/hooks/useArNSDomainPriceList';
 import { useGlobalState } from '@src/state';

diff --git a/src/components/inputs/Search/HomeSearch.tsx b/src/components/inputs/Search/HomeSearch.tsx
@@ -1,5 +1,5 @@
 import { CheckCircleFilled } from '@ant-design/icons';
-import { AoArNSNameData } from '@ar.io/sdk';
+import { AoArNSNameData } from '@ar.io/sdk/web';
 import DomainDetailsTip from '@src/components/data-display/DomainDetailsTip';
 import { CircleCheckFilled, SearchIcon } from '@src/components/icons';
 import useDebounce from '@src/hooks/useDebounce';

diff --git a/src/components/layout/Layout/Layout.tsx b/src/components/layout/Layout/Layout.tsx
@@ -54,7 +54,7 @@ function Layout() {
           strokeLinecap="square"
           trailColor={'transparent'}
           format={() => <></>}
-          strokeWidth={5}
+          size={5}
         />
       ) : (
         <div className="p-[11.5px]" />

diff --git a/src/components/modals/ConnectWalletModal/ConnectWalletModal.tsx b/src/components/modals/ConnectWalletModal/ConnectWalletModal.tsx
@@ -1,4 +1,4 @@
-import { AOProcess, IO } from '@ar.io/sdk';
+import { AOProcess, IO } from '@ar.io/sdk/web';
 import {
   ArConnectWalletConnector,
   EthWalletConnector,

diff --git a/src/components/modals/DialogModal/DialogModal.tsx b/src/components/modals/DialogModal/DialogModal.tsx
@@ -5,6 +5,7 @@ function DialogModal({
   title = '',
   body,
   footer,
+  footerClass,
   showClose = true,
   cancelText,
   nextText,
@@ -15,6 +16,7 @@ function DialogModal({
   title?: string | JSX.Element;
   body?: string | JSX.Element;
   footer?: JSX.Element;
+  footerClass?: string;
   showClose?: boolean; // shows x and divider for title
   cancelText?: string;
   nextText?: string;
@@ -84,14 +86,12 @@ function DialogModal({
 
         {/* footer */}
         <div
-          className="flex flex-row"
+          className={
+            (footerClass ?? '') +
+            ` flex flex-row items-center border-t border-dark-grey py-6`
+          }
           style={{
             justifyContent: footer ? 'space-between' : 'flex-end',
-            alignItems: 'center',
-            borderTop: '1px solid var(--text-faded)',
-            boxSizing: 'border-box',
-            bottom: 0,
-            padding: '20px 0px',
           }}
         >
           {footer ? (