Domain Content Resolver -> Master

backend/native/backpack-api/src/messaging/messaging.ts

@@ -8,10 +8,9 @@ import {
 import type {
   MessageKind,
   MessageMetadata,
-  SubscriptionType} from "@coral-xyz/common";
-import {
-  CHAT_MESSAGES
+  SubscriptionType,
 } from "@coral-xyz/common";
+import { CHAT_MESSAGES } from "@coral-xyz/common";
 
 import { Redis } from "../Redis";
 

examples/clients/simple/src/ethereum/SendWeiButton.tsx

@@ -15,11 +15,9 @@ export function SendWeiButton() {
       <button onClick={() => sendTransaction?.()}>
         Send 1 WEI to zero address
       </button>
-      {isSuccess && (
-        <div style={{ marginBottom: "8px" }}>
-          Transaction: {JSON.stringify(data)}
-        </div>
-      )}
+      {isSuccess ? <div style={{ marginBottom: "8px" }}>
+        Transaction: {JSON.stringify(data)}
+      </div> : null}
     </div>
   );
 }

examples/clients/simple/src/ethereum/SignMessageButton.tsx

@@ -11,8 +11,8 @@ export const SignMessageButton: FC = () => {
       <button disabled={isLoading} onClick={() => signMessage()}>
         Sign the message: Hello, world!
       </button>
-      {isSuccess && <div>Signature: {data}</div>}
-      {isError && <div>Error signing message</div>}
+      {isSuccess ? <div>Signature: {data}</div> : null}
+      {isError ? <div>Error signing message</div> : null}
     </div>
   );
 };

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

@@ -1,5 +1,43 @@
 import { start } from "@coral-xyz/background";
 
+import { supportedDomains, urlPatterns } from "../redirects/constants";
+import { redirect } from "../redirects/ResolveDomainName";
 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/DomainContentResolver/IpfsGatewayCustom.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { setIPFSGateway } from "@coral-xyz/app-extension/src/redirects/ipfsBuilder";
+import { UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE } from "@coral-xyz/common";
+import { InputListItem, Inputs, PrimaryButton } from "@coral-xyz/react-common";
+import { useBackgroundClient } from "@coral-xyz/recoil";
+
+import { useNavigation } from "../../../../common/Layout/NavStack";
+
+export function PreferencesCustomIpfsGateway() {
+  const nav = useNavigation();
+  const background = useBackgroundClient();
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    const title = nav.title;
+    nav.setOptions({ headerTitle: "Change IPFS Gateway" });
+    return () => {
+      nav.setOptions({ headerTitle: title });
+    };
+  }, [nav]);
+
+  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="Gateway"
+              placeholder="Gateway URL"
+              value={gatewayUrl}
+              onChange={(e) => {
+                setGatewayUrl(e.target.value);
+              }}
+            />
+          </Inputs>
+        </div>
+        <div style={{ padding: 16 }}>
+          <PrimaryButton disabled={!gatewayUrl} label="Switch" type="submit" />
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useEffect } from "react";
+import {
+  DEFAULT_IPFS_GATEWAYS,
+  UI_RPC_METHOD_SETTINGS_DOMAIN_CONTENT_IPFS_GATEWAY_UPDATE,
+} from "@coral-xyz/common";
+import { PushDetail } from "@coral-xyz/react-common";
+import { useBackgroundClient, useIpfsGateway } from "@coral-xyz/recoil";
+import { useCustomTheme } from "@coral-xyz/themes";
+import { Check } from "@mui/icons-material";
+
+import { useNavigation } from "../../../../common/Layout/NavStack";
+import { SettingsList } from "../../../../common/Settings/List";
+
+interface MenuItems {
+  [key: string]: {
+    onClick: () => void;
+    detail?: React.ReactNode;
+    style?: React.CSSProperties;
+    classes?: any;
+    button?: boolean;
+    icon?: React.ReactNode;
+    label?: string;
+  };
+}
+import { setIPFSGateway } from "@coral-xyz/app-extension/src/redirects/ipfsBuilder";
+export function PreferencesIpfsGateway() {
+  const nav = useNavigation();
+  const background = useBackgroundClient();
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    nav.setOptions({ headerTitle: "IPFS Gateway" });
+  }, [nav]);
+
+  const menuItems = DEFAULT_IPFS_GATEWAYS.reduce((acc, gateway) => {
+    (acc as MenuItems)[gateway] = {
+      onClick: () => changeIpfsGateway(gateway),
+      detail: currentIpfsGatewayUrl === gateway && <Checkmark />,
+    };
+    return acc;
+  }, {});
+  const customMenu: MenuItems = {
+    Custom: {
+      onClick: () => {
+        nav.push("preferences-edit-ipfs-gateway-custom");
+      },
+      detail: !DEFAULT_IPFS_GATEWAYS.includes(currentIpfsGatewayUrl) ? (
+        <>
+          <Checkmark />
+          <PushDetail />
+        </>
+      ) : (
+        <PushDetail />
+      ),
+    },
+  };
+  Object.assign(menuItems, customMenu);
+
+  return <SettingsList menuItems={menuItems} />;
+}
+
+export function Checkmark() {
+  const theme = useCustomTheme();
+  return (
+    <Check
+      style={{
+        color: theme.custom.colors.brandColor,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,125 @@
+import { useEffect } from "react";
+import {
+  Blockchain,
+  UI_RPC_METHOD_SETTINGS_DOMAIN_RESOLUTION_NETWORKS_UPDATE,
+} from "@coral-xyz/common";
+import {
+  getBlockchainLogo,
+  useBackgroundClient,
+  useSupportedDomainNameNetwork,
+} from "@coral-xyz/recoil";
+
+import { toggleSupportedNetworkResolution } from "../../../../../redirects/ipfsBuilder";
+import { useNavigation } from "../../../../common/Layout/NavStack";
+import { SettingsList } from "../../../../common/Settings/List";
+import { ModeSwitch } from "..";
+export const PreferencesDomainContent: React.FC = () => {
+  return (
+    <div>
+      <_PreferencesDomainResolverContent />
+    </div>
+  );
+};
+
+export const _PreferencesDomainResolverContent: React.FC = () => {
+  const nav = useNavigation();
+  const resolverMenuItems = {
+    "IPFS Gateways": {
+      onClick: () => nav.push("preferences-ipfs-gateway"),
+    },
+  };
+
+  useEffect(() => {
+    nav.setOptions({ headerTitle: "Domain Website Resolver" });
+  }, [nav]);
+
+  const background = useBackgroundClient();
+
+  const isEnabledSolana = useSupportedDomainNameNetwork(Blockchain.SOLANA);
+  const isEnabledEthereum = useSupportedDomainNameNetwork(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,
+          !isEnabledSolana
+        );
+      },
+      icon: () => {
+        const blockchainLogo = getBlockchainLogo(Blockchain.SOLANA);
+        return (
+          <img
+            src={blockchainLogo}
+            style={{
+              width: "12px",
+              height: "12px",
+              marginRight: "8px",
+            }}
+          />
+        );
+      },
+      detail: (
+        <ModeSwitch
+          enabled={isEnabledSolana}
+          onSwitch={(enabled) =>
+            toggleSupportedDNSResolutionNetworks(Blockchain.SOLANA, enabled)
+          }
+        />
+      ),
+    },
+    Ethereum: {
+      onClick: async () => {
+        await toggleSupportedDNSResolutionNetworks(
+          Blockchain.ETHEREUM,
+          !isEnabledEthereum
+        );
+      },
+      icon: () => {
+        const blockchainLogo = getBlockchainLogo(Blockchain.ETHEREUM);
+        return (
+          <img
+            src={blockchainLogo}
+            style={{
+              width: "12px",
+              height: "12px",
+              marginRight: "8px",
+            }}
+          />
+        );
+      },
+      detail: (
+        <ModeSwitch
+          enabled={isEnabledEthereum}
+          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() {
     "Trusted Sites": {
       onClick: () => nav.push("preferences-trusted-sites"),
     },
+    "Domain Website Resolver": {
+      onClick: () => nav.push("preferences-domain-content-resolver"),
+    },
   };
 
   if (BACKPACK_FEATURE_LIGHT_MODE) {