feat: add welcome message

fix: fc resolver in some cases, better twitter detection using .x and .twitter domains

Author: lennardevertz

packages/snap/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@lens-protocol/client": "^2.2.0",
-    "@metamask/snaps-sdk": "^4.4.1",
+    "@metamask/snaps-sdk": "^6.1.1",
     "@noble/hashes": "^1.4.0",
     "buffer": "^6.0.3",
     "ethers": "^6.12.1"
@@ -42,8 +42,8 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@metamask/snaps-cli": "^6.1.0",
-    "@metamask/snaps-jest": "^7.0.0",
+    "@metamask/snaps-cli": "^6.2.1",
+    "@metamask/snaps-jest": "^8.2.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.45.0",
@@ -69,4 +69,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

packages/snap/snap.config.ts

@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 const config: SnapConfig = {
   bundler: 'webpack',
-  input: resolve(__dirname, 'src/index.ts'),
+  input: resolve(__dirname, 'src/index.tsx'),
   server: {
     port: 8080,
   },

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/idriss-crypto/snap/tree/main/packages/snap"
   },
   "source": {
-    "shasum": "9a+ZgF4hWDGgYEAjyEbg0hxTU/COftFoCfH7X3APF3A=",
+    "shasum": "jQRz6xTMZkvAIKyiDhlg+jfSsGovfrwf5Dzz6YZTcUA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -19,7 +19,9 @@
   },
   "initialPermissions": {
     "endowment:name-lookup": {},
-    "endowment:network-access": {}
+    "endowment:network-access": {},
+    "endowment:lifecycle-hooks": {},
+    "snap_dialog": {}
   },
   "manifestVersion": "0.1"
 }

packages/snap/src/constants.ts

@@ -10,7 +10,6 @@ export const IDRISS_REGISTRY_RESOLVER =
 export const REG_PH =
   /^(\+\(?\d{1,4}\s?)\)?-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}/u;
 export const REG_M = /^[\w.-]+@[\d.A-Za-z-]+\.[A-Za-z]{2,}/u;
-export const REG_T = /^@\S+/u;
 
 export const WALLET_TAGS = [
   {

packages/snap/src/index.test.ts

@@ -3,11 +3,11 @@ import type { ChainId } from '@metamask/snaps-sdk';
 
 import { onNameLookup } from '.';
 
-const TWITTER_MOCK = '@IDriss_xyz';
+const TWITTER_MOCK = 'IDriss_xyz.twitter';
 const TWITTER_ADDRESS_MOCK = '0x5ABca791C22E7f99237fCC04639E094Ffa0cCce9';
 const MAIL_MOCK = '[email protected]';
 const MAIL_ADDRESS_MOCK = '0x11E9F9344A9720d2B2B5F0753225bb805161139B';
-const TWITTER_MOCK_INVALID = '@vitalikbuterin';
+const TWITTER_MOCK_INVALID = 'vitalikbuterin.x';
 
 const UD_DOMAIN_MOCK = 'matt.crypto';
 const UD_DOMAIN_MOCK_WRONG = 'mat.crypto';
@@ -19,7 +19,7 @@ const ENS_DOMAIN_MOCK_CONTRACT = 'gitcoin.eth';
 const ENS_ADDRESS_MOCK = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045';
 const ENS_CHAIN_ID_MOCK = 'eip155:137' as ChainId;
 
-const FARCASTER_DOMAIN_MOCK = 'dwr.farcaster';
+const FARCASTER_DOMAIN_MOCK = 'dwr.eth.farcaster';
 const FARCASTER_DOMAIN_MOCK_NO_ADDRESS = 'nonexistantaccount.farcaster';
 const FARCASTER_ADDRESS_MOCK = '0xd7029bdea1c17493893aafe29aad69ef892b8ff2';
 
@@ -40,7 +40,7 @@ describe('onNameLookup', () => {
         resolvedAddresses: [
           {
             resolvedAddress: TWITTER_ADDRESS_MOCK,
-            protocol: 'IDriss',
+            protocol: 'X (Twitter)',
             domainName: TWITTER_MOCK,
           },
         ],
@@ -57,7 +57,7 @@ describe('onNameLookup', () => {
         resolvedAddresses: [
           {
             resolvedAddress: MAIL_ADDRESS_MOCK,
-            protocol: 'IDriss',
+            protocol: 'Email',
             domainName: MAIL_MOCK,
           },
         ],

packages/snap/src/index.ts renamed to packages/snap/src/index.tsx

@@ -8,9 +8,13 @@
  * @returns The result of `snap_dialog`.
  * @throws If the request method is not valid for this snap.
  */
-import type { OnNameLookupHandler } from '@metamask/snaps-sdk';
+import type {
+  OnNameLookupHandler,
+  OnInstallHandler,
+} from '@metamask/snaps-sdk';
+import { Box, Heading, Row, Divider, Text } from '@metamask/snaps-sdk/jsx';
 
-import { REG_PH, REG_M, REG_T, UNSTOPPABLE_TLDS } from './constants';
+import { REG_M, REG_PH, UNSTOPPABLE_TLDS } from './constants';
 import { resolveENS } from './resolvers/ens';
 import { resolveFarcasterName } from './resolvers/farcaster';
 import { resolveIDriss } from './resolvers/idriss';
@@ -25,7 +29,12 @@ export const onNameLookup: OnNameLookupHandler = async (request: {
 
   let customResolverAddress: any;
   if (domain) {
-    if (REG_PH.test(domain) || REG_M.test(domain) || REG_T.test(domain)) {
+    if (
+      REG_PH.test(domain) ||
+      REG_M.test(domain) ||
+      domain?.endsWith('.twitter') ||
+      domain?.endsWith('.x')
+    ) {
       const resolvedIDriss = await resolveIDriss(domain);
       customResolverAddress = resolvedIDriss;
     } else if (domain?.endsWith('.lens')) {
@@ -51,3 +60,49 @@ export const onNameLookup: OnNameLookupHandler = async (request: {
   }
   return { resolvedAddresses: customResolverAddress };
 };
+
+export const onInstall: OnInstallHandler = async () => {
+  await snap.request({
+    method: 'snap_dialog',
+    params: {
+      type: 'alert',
+      content: (
+        <Box>
+          <Heading>Installation successful 🎉</Heading>
+          <Text>
+            MetaMask can now send to a number of social handles and domans.
+          </Text>
+          <Divider />
+          <Row label="IDriss">
+            <Text>username.x</Text>
+          </Row>
+          <Row label="">
+            <Text>username.twitter</Text>
+          </Row>
+          <Divider />
+          <Row label="Farcaster">
+            <Text>username.fc</Text>
+          </Row>
+          <Row label="">
+            <Text>username.farcaster</Text>
+          </Row>
+          <Divider />
+          <Row label="Lens">
+            <Text>username.lens</Text>
+          </Row>
+          <Divider />
+          <Row label="Unstoppable Domains">
+            <Text>Valid UDs</Text>
+          </Row>
+          <Divider />
+          <Row label="ENS">
+            <Text>
+              Valid ENS, given it does not resolve to a contract address on
+              Mainnet
+            </Text>
+          </Row>
+        </Box>
+      ),
+    },
+  });
+};

packages/snap/src/resolvers/idriss.ts

@@ -32,7 +32,7 @@ export async function resolveIDriss(
 ): Promise<
   { resolvedAddress: string; protocol: string; domainName: string }[]
 > {
-  const identifier = await transformIdentifier(userInput);
+  const { identifier, type } = await transformIdentifier(userInput);
   const filteredWalletTags = filterWalletTags(resolveOptions);
 
   const digestPromises = filteredWalletTags.map(
@@ -77,7 +77,7 @@ export async function resolveIDriss(
   return [
     {
       resolvedAddress: resolvedIDriss,
-      protocol: 'IDriss',
+      protocol: type,
       domainName: userInput,
     },
   ];

packages/snap/src/utils.ts

@@ -1,7 +1,7 @@
 import { sha256 } from '@noble/hashes/sha256';
 import { bytesToHex } from '@noble/hashes/utils';
 
-import { REG_PH, REG_M, REG_T, BASE_API_URL, WALLET_TAGS } from './constants';
+import { REG_PH, REG_M, BASE_API_URL, WALLET_TAGS } from './constants';
 import type { ResolveOptions } from './types';
 
 const toTitleCase = (input: string) => {
@@ -10,13 +10,13 @@ const toTitleCase = (input: string) => {
 
 const matchInput = (input: string) => {
   if (REG_PH.test(input)) {
-    return 'phone';
+    return 'Phone';
   }
   if (REG_M.test(input)) {
-    return 'mail';
+    return 'Email';
   }
-  if (REG_T.test(input)) {
-    return 'twitter';
+  if (input.endsWith('.x') || input.endsWith('.twitter')) {
+    return 'X (Twitter)';
   }
   return null;
 };
@@ -40,6 +40,7 @@ const getTwitterID = async (inputCombination: string): Promise<string> => {
     );
   }
   const json = await response.json();
+
   return json.id;
 };
 
@@ -53,19 +54,20 @@ export const transformIdentifier = async (input: string) => {
     );
   }
 
-  if (inputType === 'phone') {
-    return convertPhone(identifier);
+  if (inputType === 'Phone') {
+    return { identifier: convertPhone(identifier), type: inputType };
   }
 
-  if (inputType === 'twitter') {
-    const maybeTwitterIdentifier = await getTwitterID(identifier);
+  if (inputType === 'X (Twitter)') {
+    const cleanTwitter = identifier.replace('.x', '').replace('.twitter', '');
+    const maybeTwitterIdentifier = await getTwitterID(cleanTwitter);
     if (maybeTwitterIdentifier === 'Not found') {
       throw new Error('Twitter handle not found.');
     }
-    return maybeTwitterIdentifier;
+    return { identifier: maybeTwitterIdentifier, type: inputType };
   }
 
-  return input;
+  return { identifier: input, type: inputType };
 };
 
 export const filterWalletTags = ({

packages/snap/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./"
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "jsxImportSource": "@metamask/snaps-sdk"
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "src/index.tsx"]
 }