feat(wayfinder): use wayfinder for loading featured domains page

package.json

@@ -26,8 +26,10 @@
   "dependencies": {
     "@ant-design/icons": "5.4.0",
     "@ar.io/sdk": "3.14.0",
+    "@ar.io/wayfinder-core": "^1.0.2-alpha.2",
+    "@ar.io/wayfinder-react": "^1.0.3-alpha.2",
     "@ardrive/turbo-sdk": "^1.23.1",
-    "@permaweb/aoconnect": "^0.0.59",
+    "@permaweb/aoconnect": "0.0.69",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.4",
@@ -163,8 +165,5 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  },
-  "resolutions": {
-    "@permaweb/aoconnect": "0.0.59"
   }
 }

src/components/cards/ARNSCard/ARNSCard.tsx

@@ -1,31 +1,44 @@
-import { NETWORK_DEFAULTS } from '@src/utils/constants';
+import { useWayfinder } from '@ar.io/wayfinder-react';
+import { Loader } from '@src/components/layout';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { ARNSMapping } from '../../../types';
 import './styles.css';
 
-const protocol = 'https';
-
 function ARNSCard({
   domain,
-  gateway = NETWORK_DEFAULTS.ARNS.HOST,
   imageUrl,
-}: Omit<ARNSMapping, 'processId'> & { gateway?: string; imageUrl: string }) {
+}: Omit<ARNSMapping, 'processId'> & { imageUrl: string }) {
+  const { wayfinder } = useWayfinder();
+  const [wayfinderUrl, setWayfinderUrl] = useState<string | null>(null);
+  useEffect(() => {
+    wayfinder.resolveUrl({ arnsName: domain }).then((url) => {
+      setWayfinderUrl(url.toString());
+    });
+  }, [wayfinder, domain]);
+
+  if (!wayfinderUrl) return <Loader />;
+
   return (
     <Link
       target="_blank"
-      to={`${protocol}://${domain}.${gateway}`}
+      to={wayfinderUrl.toString()}
       className="arns-card hover"
       rel="noreferrer"
     >
-      <img
-        className="arns-preview fade-in"
-        src={imageUrl}
-        key={imageUrl}
-        alt={`${domain}.${gateway}`}
-        width={'100%'}
-        height={'100%'}
-      />
+      {wayfinderUrl ? (
+        <img
+          className="arns-preview fade-in"
+          src={imageUrl}
+          key={imageUrl}
+          alt={`${domain}`}
+          width={'100%'}
+          height={'100%'}
+        />
+      ) : (
+        <Loader size={40} />
+      )}
 
       <div
         className="flex flex-column link"
@@ -38,7 +51,7 @@ function ARNSCard({
           justifyContent: 'center',
         }}
       >
-        <span className="flex white">{`${domain}.${gateway}`}</span>
+        <span className="flex white">{`ar://${domain}`}</span>
       </div>
     </Link>
   );

src/components/layout/FeaturedDomains/FeaturedDomains.tsx

@@ -1,24 +1,15 @@
-import { shuffleArray } from '@src/utils';
 import { FEATURED_DOMAINS } from '@src/utils/constants';
 import { useState } from 'react';
 
 import { ARNSCard } from '../../cards';
 import './styles.css';
 
-const featuredGateways = ['permagate.io', 'g8way.io', 'ar.io'];
-const defaultGateways = [
-  ...featuredGateways,
-  ...featuredGateways,
-  ...featuredGateways,
-];
-
 function FeaturedDomains() {
   // show three at a time by default
   const DEFAULT_INCREMENT = 3;
   // how many rows of cards to display
   const MAX_COUNT = DEFAULT_INCREMENT * 3;
   const [displayCount, setDisplayCount] = useState(DEFAULT_INCREMENT);
-  const [gateways, setGateways] = useState<string[]>(defaultGateways);
 
   function showMore(e: any) {
     e.preventDefault();
@@ -30,10 +21,6 @@ function FeaturedDomains() {
     setDisplayCount(DEFAULT_INCREMENT);
   }
 
-  function shuffleGateways() {
-    setGateways(shuffleArray(gateways));
-  }
-
   return (
     <div className="featured-domains flex-center fade-in">
       <span
@@ -46,40 +33,22 @@ function FeaturedDomains() {
         FEATURED DOMAINS
       </span>
       <div className="card-container flex-center">
-        {gateways &&
-          Object.keys(FEATURED_DOMAINS).map((domain, index) => {
-            if (
-              index >= displayCount ||
-              index >= Object.keys(FEATURED_DOMAINS).length
-            )
-              return;
-            return (
-              <ARNSCard
-                domain={domain}
-                key={index}
-                gateway={gateways[index]}
-                imageUrl={FEATURED_DOMAINS[domain].imageUrl}
-              />
-            );
-          })}
+        {Object.keys(FEATURED_DOMAINS).map((domain, index) => {
+          if (
+            index >= displayCount ||
+            index >= Object.keys(FEATURED_DOMAINS).length
+          )
+            return;
+          return (
+            <ARNSCard
+              domain={domain}
+              key={index}
+              imageUrl={FEATURED_DOMAINS[domain].imageUrl}
+            />
+          );
+        })}
       </div>
-      <div
-        className="flex flex-row mb-8"
-        style={{ gap: '10px', maxWidth: '800px' }}
-      >
-        <button
-          className="outline-button center faded"
-          onClick={() => shuffleGateways()}
-          style={{
-            padding: 0,
-            fontSize: '15px',
-            width: '100%',
-            height: 50,
-            color: 'var(--text-white)',
-          }}
-        >
-          Shuffle Gateways
-        </button>
+      <div className="flex flex-row mb-8 max-w-md gap-4">
         <button
           className="button-secondary center faded"
           onClick={displayCount < MAX_COUNT ? showMore : showLess}
@@ -89,7 +58,6 @@ function FeaturedDomains() {
             width: '100%',
             height: 50,
             color: 'var(--text-white)',
-            // backgroundColor: 'var(--text-faded)',
           }}
         >
           {displayCount < MAX_COUNT ? 'View More Domains' : 'View Less Domains'}

src/state/contexts/GlobalState.tsx

@@ -5,6 +5,14 @@ import {
   AoARIOWrite,
   AoClient,
 } from '@ar.io/sdk/web';
+import {
+  NetworkGatewaysProvider,
+  RandomRoutingStrategy,
+} from '@ar.io/wayfinder-core';
+import {
+  LocalStorageGatewaysProvider,
+  WayfinderProvider,
+} from '@ar.io/wayfinder-react';
 import { connect } from '@permaweb/aoconnect';
 import eventEmitter from '@src/utils/events';
 import React, {
@@ -18,6 +26,7 @@ import React, {
 import { ArweaveCompositeDataProvider } from '../../services/arweave/ArweaveCompositeDataProvider';
 import { SimpleArweaveDataProvider } from '../../services/arweave/SimpleArweaveDataProvider';
 import {
+  APP_VERSION,
   ARIO_AO_CU_URL,
   ARIO_PROCESS_ID,
   ARWEAVE_HOST,
@@ -33,6 +42,7 @@ export const defaultArIO = ARIO.init({
     processId: ARIO_PROCESS_ID,
     ao: connect({
       CU_URL: ARIO_AO_CU_URL,
+      MODE: 'legacy',
     }),
   }),
 });
@@ -116,7 +126,26 @@ export function GlobalStateProvider({
 
   return (
     <GlobalStateContext.Provider value={[state, dispatchGlobalState]}>
-      {children}
+      {/* Wrap global state in wayfinder provider */}
+      <WayfinderProvider
+        gatewaysProvider={
+          new LocalStorageGatewaysProvider({
+            gatewaysProvider: new NetworkGatewaysProvider({
+              ario: state.arioContract,
+            }),
+          })
+        }
+        routingSettings={{
+          strategy: new RandomRoutingStrategy(),
+        }}
+        telemetrySettings={{
+          enabled: true,
+          clientName: 'arns-app',
+          clientVersion: APP_VERSION,
+        }}
+      >
+        {children}
+      </WayfinderProvider>
     </GlobalStateContext.Provider>
   );
 }

src/utils/constants.ts

@@ -131,13 +131,15 @@ export const NETWORK_DEFAULTS = {
       MU_URL: 'https://mu.ao-testnet.xyz',
       SCHEDULER: DEFAULT_SCHEDULER_ID,
       HYPERBEAM_URL: HYPERBEAM_URL,
+      MODE: 'legacy' as const,
     },
     ANT: {
       CU_URL: ANT_AO_CU_URL,
       MU_URL: 'https://mu.ao-testnet.xyz',
       SCHEDULER: DEFAULT_SCHEDULER_ID,
       GRAPHQL_URL: ARWEAVE_GRAPHQL_URL,
       HYPERBEAM_URL: HYPERBEAM_URL,
+      MODE: 'legacy' as const,
     },
   },
   ARWEAVE: {
@@ -169,17 +171,14 @@ export const YEAR_IN_MILLISECONDS = 31536000000;
 export const AVERAGE_BLOCK_TIME_MS = 120_000; // 2 mins
 
 export const FEATURED_DOMAINS: { [x: string]: { imageUrl: string } } = {
+  // TODO: pull from the ARIO contract
   arlink: { imageUrl: ARLINK_IMAGE },
-
   metalinks: { imageUrl: METALINKS_IMAGE },
   ardrive: { imageUrl: ARDRIVE_IMAGE },
   arwiki: { imageUrl: ARWIKI_IMAGE },
   permaswap: { imageUrl: PERMASWAP_IMAGE },
   'ar-fees': { imageUrl: AR_FEES_IMAGE },
-  // alex: { imageUrl: ALEX_IMAGE },
-  // cookbook: { imageUrl: COOKBOOK_IMAGE },
   ao: { imageUrl: AO_IMAGE },
-
   sam: { imageUrl: SAM_IMAGE },
   mfers: { imageUrl: MFERS_IMAGE },
 };