Web DNS Resolver for SNS + ENS V2

packages/app-extension/src/background/index.ts

@@ -1,5 +1,44 @@
 import { start } from "@coral-xyz/background";
 
+import { supportedDomains, urlPatterns } from "../dns-redirects/constants";
+import { redirect } from "../dns-redirects/helpers/tabHelper";
+
 start({
   isMobile: false,
 });
+
+/**
+ * Resolves domain names in the form of URLs.
+ */
+chrome.webNavigation.onBeforeNavigate.addListener(
+  async (details) => {
+    await redirect(details.url);
+  },
+  {
+    url: supportedDomains.map((domain) => {
+      return { urlMatches: `^[^:]+://[^/]+.${domain}/.*$` };
+    }),
+  }
+);
+
+/**
+ * Resolves domain names in the form of browser searches via Google, Bing, etc.
+ * DuckDuckGo has a unique search pattern and must be queried separately.
+ */
+chrome.webNavigation.onBeforeNavigate.addListener(
+  async (details) => {
+    const domainUrl = new URL(details.url).searchParams.get("q");
+    if (domainUrl && domainUrl.indexOf(" ") < 0) await redirect(domainUrl);
+  },
+  {
+    url: supportedDomains.flatMap((param) =>
+      urlPatterns.map((pattern) => {
+        return {
+          urlMatches: pattern.includes("duckduckgo")
+            ? `${pattern}\\.${param}$`
+            : `${pattern}\\.${param}&.*$`,
+        };
+      })
+    ),
+  }
+);

packages/app-extension/src/components/Unlocked/Settings/Preferences/WebDomainResolver/CustomIpfsGateway.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE } from "@coral-xyz/common";
+import { useTranslation } from "@coral-xyz/i18n";
+import { InputListItem, Inputs, PrimaryButton } from "@coral-xyz/react-common";
+import { useBackgroundClient } from "@coral-xyz/recoil";
+
+import { setIPFSGateway } from "../../../../../dns-redirects/helpers";
+
+export function PreferencesCustomIpfsGateway() {
+  const background = useBackgroundClient();
+  const { t } = useTranslation();
+
+  const [gatewayUrl, setGatewayUrl] = useState("");
+  const changeIpfsGateway = async () => {
+    try {
+      background
+        .request({
+          method: UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE,
+          params: [gatewayUrl],
+        })
+        .catch(console.error);
+
+      await setIPFSGateway(gatewayUrl);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div style={{ paddingTop: "16px", height: "100%" }}>
+      <form
+        onSubmit={changeIpfsGateway}
+        style={{ display: "flex", height: "100%", flexDirection: "column" }}
+      >
+        <div style={{ flex: 1, flexGrow: 1 }}>
+          <Inputs error={false}>
+            <InputListItem
+              isFirst
+              isLast
+              button={false}
+              title={t("gateway")}
+              placeholder={t("gateway_url")}
+              value={gatewayUrl}
+              onChange={(e) => {
+                setGatewayUrl(e.target.value);
+              }}
+            />
+          </Inputs>
+        </div>
+        <div style={{ padding: 16 }}>
+          <PrimaryButton
+            disabled={!gatewayUrl}
+            label={t("switch")}
+            type="submit"
+          />
+        </div>
+      </form>
+    </div>
+  );
+}

packages/app-extension/src/components/Unlocked/Settings/Preferences/WebDomainResolver/SwitchIpfsGateway.tsx

@@ -0,0 +1,73 @@
+import {
+  DEFAULT_IPFS_GATEWAYS,
+  UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE,
+} from "@coral-xyz/common";
+import { useTranslation } from "@coral-xyz/i18n";
+import { PushDetail } from "@coral-xyz/react-common";
+import { useBackgroundClient, useIpfsGateway } from "@coral-xyz/recoil";
+import { useNavigation } from "@react-navigation/native";
+
+import { setIPFSGateway } from "../../../../../dns-redirects/helpers";
+import { Routes } from "../../../../../refactor/navigation/SettingsNavigator";
+import { SettingsList } from "../../../../common/Settings/List";
+import { Checkmark } from "../Blockchains/ConnectionSwitch";
+
+interface MenuItems {
+  [key: string]: {
+    onClick: () => void;
+    detail?: React.ReactNode;
+    style?: React.CSSProperties;
+    classes?: any;
+    button?: boolean;
+    icon?: React.ReactNode;
+    label?: string;
+  };
+}
+export function PreferencesIpfsGateway() {
+  const background = useBackgroundClient();
+  const { t } = useTranslation();
+
+  const navigation = useNavigation<any>();
+
+  const currentIpfsGatewayUrl = useIpfsGateway();
+  const changeIpfsGateway = async (url: string) => {
+    try {
+      background
+        .request({
+          method: UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE,
+          params: [url],
+        })
+        .catch(console.error);
+      await setIPFSGateway(url);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const menuItems = DEFAULT_IPFS_GATEWAYS.reduce((acc, gateway) => {
+    (acc as MenuItems)[gateway] = {
+      onClick: () => changeIpfsGateway(gateway),
+      detail: currentIpfsGatewayUrl === gateway && <Checkmark />,
+    };
+    return acc;
+  }, {});
+  const customMenu: MenuItems = {
+    [t("custom")]: {
+      onClick: () =>
+        navigation.push(
+          Routes.PreferencesWebDomainResolverIpfsGatewayCustomScreen
+        ),
+      detail: !DEFAULT_IPFS_GATEWAYS.includes(currentIpfsGatewayUrl) ? (
+        <>
+          <Checkmark />
+          <PushDetail />
+        </>
+      ) : (
+        <PushDetail />
+      ),
+    },
+  };
+  Object.assign(menuItems, customMenu);
+
+  return <SettingsList menuItems={menuItems} />;
+}

packages/app-extension/src/components/Unlocked/Settings/Preferences/WebDomainResolver/index.tsx

@@ -0,0 +1,120 @@
+import {
+  Blockchain,
+  UI_RPC_METHOD_SETTINGS_DOMAIN_RESOLUTION_NETWORKS_UPDATE,
+} from "@coral-xyz/common";
+import { useTranslation } from "@coral-xyz/i18n";
+import {
+  getBlockchainLogo,
+  useBackgroundClient,
+  useSupportedDnsNetwork,
+} from "@coral-xyz/recoil";
+import { useNavigation } from "@react-navigation/native";
+
+import { toggleSupportedNetworkResolution } from "../../../../../dns-redirects/helpers";
+import { Routes } from "../../../../../refactor/navigation/SettingsNavigator";
+import { SettingsList } from "../../../../common/Settings/List";
+import { ModeSwitch } from "..";
+
+export const PreferencesDomainResolverContent: React.FC = () => {
+  const { t } = useTranslation();
+
+  const navigation = useNavigation<any>();
+  const resolverMenuItems = {
+    [t("ipfs_gateways")]: {
+      onClick: () =>
+        navigation.push(Routes.PreferencesWebDomainResolverIpfsGatewayScreen),
+    },
+  };
+
+  const background = useBackgroundClient();
+
+  const isSupportedNetwork = {
+    [Blockchain.SOLANA]: useSupportedDnsNetwork(Blockchain.SOLANA),
+    [Blockchain.ETHEREUM]: useSupportedDnsNetwork(Blockchain.ETHEREUM),
+  };
+
+  const toggleSupportedDNSResolutionNetworks = async (
+    blockchain: Blockchain,
+    isEnabled: boolean
+  ) => {
+    try {
+      background
+        .request({
+          method: UI_RPC_METHOD_SETTINGS_DOMAIN_RESOLUTION_NETWORKS_UPDATE,
+          params: [blockchain, isEnabled],
+        })
+        .catch(console.error);
+      await toggleSupportedNetworkResolution(blockchain, isEnabled);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const blockchainMenuItems: any = {
+    Solana: {
+      onClick: async () => {
+        await toggleSupportedDNSResolutionNetworks(
+          Blockchain.SOLANA,
+          !isSupportedNetwork[Blockchain.SOLANA]
+        );
+      },
+      icon: () => {
+        const blockchainLogo = getBlockchainLogo(Blockchain.SOLANA);
+        return (
+          <img
+            src={blockchainLogo}
+            style={{
+              width: "12px",
+              height: "12px",
+              marginRight: "8px",
+            }}
+          />
+        );
+      },
+      detail: (
+        <ModeSwitch
+          enabled={isSupportedNetwork[Blockchain.SOLANA]}
+          onSwitch={(enabled) =>
+            toggleSupportedDNSResolutionNetworks(Blockchain.SOLANA, enabled)
+          }
+        />
+      ),
+    },
+    Ethereum: {
+      onClick: async () => {
+        await toggleSupportedDNSResolutionNetworks(
+          Blockchain.ETHEREUM,
+          !isSupportedNetwork[Blockchain.ETHEREUM]
+        );
+      },
+      icon: () => {
+        const blockchainLogo = getBlockchainLogo(Blockchain.ETHEREUM);
+        return (
+          <img
+            src={blockchainLogo}
+            style={{
+              width: "12px",
+              height: "12px",
+              marginRight: "8px",
+            }}
+          />
+        );
+      },
+      detail: (
+        <ModeSwitch
+          enabled={isSupportedNetwork[Blockchain.ETHEREUM]}
+          onSwitch={(enabled) =>
+            toggleSupportedDNSResolutionNetworks(Blockchain.ETHEREUM, enabled)
+          }
+        />
+      ),
+    },
+  };
+
+  return (
+    <div>
+      <SettingsList menuItems={resolverMenuItems} />
+      <SettingsList menuItems={blockchainMenuItems as any} />
+    </div>
+  );
+};

packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx

@@ -90,6 +90,9 @@ export function Preferences() {
     [t("hidden_tokens")]: {
       onClick: () => navigation.push(Routes.PreferencesHiddenTokensScreen),
     },
+    [t("web_domain_resolver")]: {
+      onClick: () => navigation.push(Routes.PreferencesWebDomainResolverScreen),
+    },
   };
 
   // if (BACKPACK_FEATURE_LIGHT_MODE) {

packages/app-extension/src/dns-redirect-error.html

@@ -0,0 +1,38 @@
+<div id="main">
+  <div class="fof">
+    <text>Redirect Error</text>
+    <h1>404</h1>
+    <text>Your domain was unavailable.</text>
+  </div>
+</div>
+<style>
+  html {
+    height: 100%;
+  }
+
+  body {
+    font-family: "Lato", sans-serif;
+    color: #888;
+    margin: 0;
+    background-color: #111;
+  }
+
+  #main {
+    display: table;
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+  }
+
+  .fof {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .fof h1 {
+    font-size: 50px;
+    display: inline-block;
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+</style>