Merge pull request #697 from ar-io/develop

Release mainnet process ID
ar-io · Feb 20, 2025 · b4dd97c · b4dd97c
2 parents 5240de1 + 029c869
commit b4dd97c
Show file tree

Hide file tree

Showing 46 changed files with 283 additions and 263 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,13 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.0] - 2025-02-20
+
+### Changed
+
+- Application configured for mainnet process
+- Featured Domains
+  - Updated for metalinks and arlink
+  - Replaced ar-io.dev with ar.io gateway
+- Landing page header and sub-title text updated
+- Header navigation links now icons
+- Footer links re-styled
+- Modal dialog styling normalized
+- Other minor visual improvements (icon sizing/coloring)
+
+### Fixed
+
+- Removed duplicate menu options in Profile menu on mobile
+
 ## [1.0.2] - 2025-02-14
 
-## Added
+### Added
 
 - Added Start Date column in Return Name Table
 
-## Changed
+### Changed
 
 - Updated Return Name Table to use left-hand arrow button for expand/collapse of chart
 
@@ -25,7 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.1] - 2025-02-13
 
-## Changed
+### Changed
 
 - Changed ArConnect branding to Wander branding.
 - Added support for account switching with Metamask.

diff --git a/assets/images/featured-domains/alex.png b/assets/images/featured-domains/alex.png
diff --git a/assets/images/featured-domains/arlink.png b/assets/images/featured-domains/arlink.png
diff --git a/assets/images/featured-domains/cookbook.png b/assets/images/featured-domains/cookbook.png
diff --git a/assets/images/featured-domains/metalinks.png b/assets/images/featured-domains/metalinks.png
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arns-vite-react",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "homepage": ".",
   "scripts": {
     "build": "yarn clean && tsc --build tsconfig.json && NODE_OPTIONS=--max-old-space-size=32768 vite build",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "5.4.0",
-    "@ar.io/sdk": "^3.6.0-alpha.6",
+    "@ar.io/sdk": "^3.7.1-alpha.1",
     "@permaweb/aoconnect": "^0.0.59",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.4",

diff --git a/src/components/cards/AntChangelog.tsx b/src/components/cards/AntChangelog.tsx
@@ -89,6 +89,7 @@ function AntChangelog({ className }: { className?: string }) {
                     shouldLink={true}
                     wrapperStyle={{
                       width: 'fit-content',
+                      fontSize: '14px',
                     }}
                   />
                 </h2>
@@ -107,15 +108,15 @@ function AntChangelog({ className }: { className?: string }) {
               const id = match[2];
               const date = match[3];
               return (
-                <li className="ml-8 py-2 list-disc text-base text-grey">
+                <li className="ml-8 py-2 list-disc text-sm text-grey">
                   <div>Version: {version}</div>
                   <div>ID: {id}</div>
                   <div>Date: {date}</div>
                 </li>
               );
             }
             return (
-              <li className="ml-8 py-2 list-disc text-base text-grey">
+              <li className="ml-8 py-2 list-disc text-sm text-grey">
                 {children}
               </li>
             );

diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx
@@ -260,23 +260,27 @@ function NavMenuCard() {
                 >
                   {isMobile ? (
                     <>
-                      <NavBarLink
-                        path={'https://ar.io/test-io'}
-                        linkText={'What are test tokens?'}
-                        target={'_blank'}
-                      />
                       {Object.entries(ROUTES).map(([key, route]) => {
                         if (!route.index && (!route.protected || walletAddress))
                           return (
                             <NavBarLink
                               path={route.path}
-                              linkText={route.text}
+                              linkText=""
                               target={route.external ? '_blank' : '_self'}
                               key={key}
                               onClick={() => {
                                 setShowMenu(false);
                               }}
-                            />
+                            >
+                              <>
+                                {route.icon && (
+                                  <route.icon className="grey size-3" />
+                                )}
+                                <span className="text-sm pl-[.125rem]">
+                                  {route.text}
+                                </span>
+                              </>
+                            </NavBarLink>
                           );
                       })}
                     </>
@@ -314,7 +318,7 @@ function NavMenuCard() {
                       height={'16px'}
                     />{' '}
                     <Link
-                      to={'https://ar.io/test-io'}
+                      to={'https://ar.io/token'}
                       target={'_blank'}
                       className={'flex-row navbar-link hover'}
                       style={{
@@ -324,7 +328,7 @@ function NavMenuCard() {
                         fontSize: '14px',
                       }}
                     >
-                      What are test tokens?
+                      What are ARIO tokens?
                     </Link>
                   </span>{' '}
                   <span className="flex flex-row" style={{ gap: '10px' }}>

diff --git a/src/components/data-display/tables/DomainsTable.tsx b/src/components/data-display/tables/DomainsTable.tsx
@@ -306,18 +306,14 @@ const DomainsTable = ({
                 }
                 icon={
                   <Link
-                    className="link gap-2 w-fit whitespace-nowrap"
+                    className="link gap-2 w-fit whitespace-nowrap items-center"
                     to={`https://${encodeDomainToASCII(row.getValue('name'))}.${
                       NETWORK_DEFAULTS.ARNS.HOST
                     }`}
                     target="_blank"
                   >
                     {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '}
-                    <ExternalLinkIcon
-                      width={'12px'}
-                      height={'12px'}
-                      fill={'var(--text-white)'}
-                    />
+                    <ExternalLinkIcon className="size-3 fill-grey" />
                   </Link>
                 }
               />
@@ -632,7 +628,7 @@ const DomainsTable = ({
                 <div className="flex flex-row center" style={{ gap: '16px' }}>
                   <Link
                     to="/"
-                    className="bg-primary rounded-md text-black center hover px-4 py-3"
+                    className="bg-primary rounded-md text-black center hover px-4 py-3 text-sm"
                   >
                     Search for a Name
                   </Link>

diff --git a/src/components/data-display/tables/ReturnedNamesTable.tsx b/src/components/data-display/tables/ReturnedNamesTable.tsx
@@ -277,18 +277,14 @@ const ReturnedNamesTable = ({
                 }
                 icon={
                   <Link
-                    className="link gap-2 w-fit"
+                    className="link gap-2 w-fit items-center"
                     to={`https://${encodeDomainToASCII(row.getValue('name'))}.${
                       NETWORK_DEFAULTS.ARNS.HOST
                     }`}
                     target="_blank"
                   >
                     {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '}
-                    <ExternalLinkIcon
-                      width={'12px'}
-                      height={'12px'}
-                      fill={'var(--text-white)'}
-                    />
+                    <ExternalLinkIcon className="size-3 fill-grey" />
                   </Link>
                 }
               />
@@ -434,7 +430,7 @@ const ReturnedNamesTable = ({
                 <div className="flex flex-row center" style={{ gap: '16px' }}>
                   <Link
                     to="/"
-                    className="bg-primary rounded-md text-black center hover px-4 py-3"
+                    className="bg-primary rounded-md text-black center hover px-4 py-3 text-sm"
                   >
                     Search for a Name
                   </Link>

diff --git a/src/components/data-display/tables/UndernamesTable.tsx b/src/components/data-display/tables/UndernamesTable.tsx
@@ -435,17 +435,13 @@ const UndernamesTable = ({
           ownershipStatus === undefined ? (
             <></>
           ) : (
-            <div className="w-full flex flex-row text-primary font-semibold rounded-b-md border-b-[1px] border-x-[1px] border-dark-grey">
+            <div className="w-full flex flex-row text-primary font-semibold rounded-b-md border-b-[1px] border-x-[1px] border-dark-grey text-sm">
               <button
                 className="flex flex-row w-full justify-start items-center p-3 rounded-b-md bg-background hover:bg-primary-gradient text-primary hover:text-primary fill-primary hover:fill-black transition-all"
                 style={{ gap: '10px' }}
                 onClick={() => setAction(UNDERNAME_TABLE_ACTIONS.CREATE)}
               >
-                <Plus
-                  width={'20px'}
-                  height={'20px'}
-                  className="text-primary fill-black"
-                />
+                <Plus className="size-4 text-primary fill-black" />
                 Add Undername
               </button>
             </div>

diff --git a/src/components/devtools/ArNSRegistrySettings.tsx b/src/components/devtools/ArNSRegistrySettings.tsx
@@ -10,6 +10,7 @@ import { useGlobalState } from '@src/state/contexts/GlobalState';
 import { useWalletState } from '@src/state/contexts/WalletState';
 import { VALIDATION_INPUT_TYPES } from '@src/types';
 import { isArweaveTransactionID } from '@src/utils';
+import { ARIO_MAINNET_PROCESS_ID } from '@src/utils/constants';
 import { Collapse, Space } from 'antd';
 import Arweave from 'arweave';
 import { useEffect, useState } from 'react';
@@ -113,6 +114,19 @@ function ArNSRegistrySettings() {
                 >
                   testnet
                 </button>
+
+                <button
+                  className={
+                    'center ' +
+                    (arioProcessId?.toString() === ARIO_MAINNET_PROCESS_ID
+                      ? 'button-primary'
+                      : 'button-secondary')
+                  }
+                  style={{ padding: '4px' }}
+                  onClick={() => confirmSetting(ARIO_MAINNET_PROCESS_ID)}
+                >
+                  mainnet
+                </button>
                 <button
                   className="outline-button center"
                   style={{

diff --git a/src/components/forms/DomainSettings/ControllersRow.tsx b/src/components/forms/DomainSettings/ControllersRow.tsx
@@ -46,6 +46,7 @@ export default function ControllersRow({
   const [showAddModal, setShowAddModal] = useState<boolean>(false);
   const [showRemoveModal, setShowRemoveModal] = useState<boolean>(false);
   const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
   async function handleControllerInteraction({
     payload,
@@ -98,7 +99,8 @@ export default function ControllersRow({
         action={[
           <Tooltip
             key={1}
-            open={undefined}
+            open={showTooltip}
+            onOpenChange={setShowTooltip}
             placement="bottomRight"
             color="var(--card-bg)"
             autoAdjustOverflow
@@ -114,13 +116,19 @@ export default function ControllersRow({
               <div className="flex-column flex" style={{ gap: '10px' }}>
                 <button
                   className="flex flex-right white pointer button"
-                  onClick={() => setShowAddModal(true)}
+                  onClick={() => {
+                    setShowAddModal(true);
+                    setShowTooltip(false);
+                  }}
                 >
                   Add Controller
                 </button>
                 <button
                   className="flex flex-right white pointer button"
-                  onClick={() => setShowRemoveModal(true)}
+                  onClick={() => {
+                    setShowRemoveModal(true);
+                    setShowTooltip(false);
+                  }}
                 >
                   Remove Controller
                 </button>

diff --git a/src/components/forms/DomainSettings/DomainSettings.tsx b/src/components/forms/DomainSettings/DomainSettings.tsx
@@ -167,7 +167,10 @@ function DomainSettings({
               key={DomainSettingsRowTypes.LEASE_DURATION}
               editable={true}
               action={
-                <div className="flex flex-row gap-1" style={{ gap: '10px' }}>
+                <div
+                  className="flex flex-row flex-right gap-1"
+                  style={{ gap: '10px' }}
+                >
                   {data?.arnsRecord?.type == 'permabuy' && isOwner ? (
                     <Tooltip
                       message={
@@ -187,9 +190,9 @@ function DomainSettings({
                                 lowerCaseDomain(domain ?? ''))
                           }
                           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`}
+                          className={`text-xs rounded-[4px] py-[.375rem] px-[.625rem]  border border-error bg-error-thin text-error whitespace-nowrap`}
                         >
-                          Return Name
+                          Return
                         </button>
                       }
                     />
@@ -330,7 +333,7 @@ function DomainSettings({
                       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
+                      Reassign
                     </button>
                   }
                 />

diff --git a/src/components/inputs/FundingSourceSelector/FundingSourceSelector.tsx b/src/components/inputs/FundingSourceSelector/FundingSourceSelector.tsx
@@ -135,11 +135,11 @@ export function FundingSourceSelector({
       position="item-aligned"
       className={{
         trigger:
-          'bg-foreground text-white flex gap-2 items-center p-3 rounded-lg border border-[#A7A7A759] outline-none justify-between h-fit w-[23rem] ',
+          'bg-foreground text-white flex gap-2 items-center p-3 rounded-lg border border-[#A7A7A759] outline-none justify-between h-fit w-fit text-sm',
         item: 'w-[24rem] flex items-center gap-3 cursor-pointer bg-foreground hover:bg-dark-grey px-3 py-3 text-grey fill-grey hover:fill-white  hover:text-white outline-none  transition-all',
         content:
           'flex bg-foreground z-[100] rounded overflow-hidden border py-2 w-[24rem] border-[#A7A7A759] absolute left-[-2.5rem]',
-        group: 'flex flex-col  bg-foreground',
+        group: 'flex flex-col  bg-foreground text-sm',
         viewport: 'flex pr-1 justify-start',
       }}
       options={[
@@ -164,7 +164,7 @@ export function FundingSourceSelector({
             'Loading...'
           ) : (
             <span>
-              Staked Balance (
+              Withdrawing/Staked Balance (
               {formatARIO(
                 new mARIOToken(getStakeUsed(stakeCostDetails))
                   .toARIO()
@@ -180,7 +180,9 @@ export function FundingSourceSelector({
             'Loading...'
           ) : (
             <div className="flex flex-wrap gap-2">
-              <span className="flex w-fit">Liquid + Staked Balances</span>
+              <span className="flex w-fit">
+                Liquid + Withdrawing/Staked Balances
+              </span>
               <span className="flex w-fit">
                 (
                 {formatARIO(

diff --git a/src/components/layout/FeaturedDomains/FeaturedDomains.tsx b/src/components/layout/FeaturedDomains/FeaturedDomains.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { ARNSCard } from '../../cards';
 import './styles.css';
 
-const featuredGateways = ['permagate.io', 'g8way.io', 'ar-io.dev'];
+const featuredGateways = ['permagate.io', 'g8way.io', 'ar.io'];
 const defaultGateways = [
   ...featuredGateways,
   ...featuredGateways,