feat(dashboard): check if page is served from a gateway and, if so, u…

…se arns.gatewayDomain, otherwise use arns.app

src/hooks/useHostGatewayDomain.ts

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+
+/** Checks where page is served and uses /ar-io/info endpoint to check if it is a gateway. 
+ *
+ * @returns domain name if it is a gateway, otherwise null 
+ */
+const useHostGatewayDomain = () => {
+  const queryResults = useQuery({
+    queryKey: ['hostGatewayDomain'],
+    queryFn: async () => {
+      const hostGateway = window.location.hostname;
+      const parts = hostGateway.split('.');
+      const domain = parts.length > 1 ? parts.slice(1).join('.') : parts[0];
+
+      try {
+        const response = await fetch(`https://${domain}/ar-io/info`);
+        const data = await response.json();
+        if (data?.wallet) {
+          return domain;
+        } else {
+          return null;
+        }
+      } catch (error) {
+        return null;
+      }
+    },
+    staleTime: Infinity,
+  });
+
+  return queryResults;
+};
+export default useHostGatewayDomain;

src/pages/Dashboard/ArNSStatsPanel.tsx

@@ -2,11 +2,13 @@ import Button from '@src/components/Button';
 import Placeholder from '@src/components/Placeholder';
 import Tooltip from '@src/components/Tooltip';
 import useArNSStats from '@src/hooks/useArNSStats';
+import useHostGatewayDomain from '@src/hooks/useHostGatewayDomain';
 import { formatWithCommas } from '@src/utils';
 import { InfoIcon } from 'lucide-react';
 
 const ArNSStatsPanel = () => {
   const { data: arnsStats } = useArNSStats();
+  const { data: hostGatewayDomain } = useHostGatewayDomain();
 
   return (
     <div className="flex min-w-[22rem] flex-col rounded-xl border border-grey-500 px-6 py-5">
@@ -40,7 +42,10 @@ const ArNSStatsPanel = () => {
           text={'Open ArNS app'}
           active={true}
           onClick={() => {
-            window.open('https://arns.app', '_blank', 'noopener,noreferrer');
+            const arnsUrl = hostGatewayDomain
+              ? `https://arns.${hostGatewayDomain}`
+              : 'https://arns.app';
+            window.open(arnsUrl, '_blank', 'noopener,noreferrer');
           }}
         />
       </div>