add tests for link embeds

cypress/e2e/embeds.cy.ts

@@ -1,3 +1,59 @@
 describe("Embeds", () => {
-  it("embeds a video element", () => {});
+  beforeEach(() => {
+    cy.loginWithNewUser();
+  });
+
+  describe("links", () => {
+    it("embed trustless.computer links", () => {
+      cy.visit(
+        "/n/nevent1qqsfn2mv3pe2v7jak4r5wnyengt36t0rx26w04hgysrmtpml8jnlk5cprdmhxue69uhkvet9v3ejumn0wd68ytnzv9hxgtmdv4kk2qgawaehxw309ahx7um5wgkhqatz9emk2mrvdaexgetj9ehx2aq2wry06"
+      );
+
+      cy.get('[href="https://trustless.computer"]').should("be.visible");
+      cy.get(
+        '[href="https://mempool.space/tx/461c6f56015c94d74837b68c9d08f4b80e7db7ca1e5ac4c53d9aa8c76b667672"]'
+      ).should("be.visible");
+    });
+
+    it("embeds links", () => {
+      cy.visit(
+        "/n/nevent1qqsvg6kt4hl79qpp5p673g7ref6r0c5jvp4yys7mmvs4m50t30sy9dgpz9mhxue69uhkummnw3e82efwvdhk6qgjwaehxw309aex2mrp0yhxvdm69e5k7r3xlpe"
+      );
+
+      cy.get('[href="https://getalby.com/"]').should("exist");
+      cy.get('[href="https://lightningaddress.com/"]').should("exist");
+      cy.get('[href="https://snort.social/"]').should("exist");
+      cy.get('[href="http://damus.io/"]').should("exist");
+      cy.get('[href="https://vida.live/"]').should("exist");
+    });
+
+    it("embeds simplex.chat links", () => {
+      cy.visit(
+        "/n/nevent1qqsymds0vlpp4f5s0dckjf4qz283pdsen0rmx8lu7ct6hpnxag2hpacpremhxue69uhkummnw3ez6un9d3shjtnwda4k7arpwfhjucm0d5q3qamnwvaz7tmwdaehgu3wwa5kueghxyq76"
+      );
+
+      cy.get(
+        '[href="https://simplex.chat/contact#/?v=1-2&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2FVlHiRmia02CDgga7w-uNb2FQZTZsj3UR%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAd2GEWU9Zjrljhw8O4FldcxrqehkDWezXl-cWD-VkeEw%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion"]'
+      ).should("be.visible");
+    });
+  });
+
+  describe("Nostr links", () => {
+    it("should embed noub1...", () => {
+      cy.visit(
+        "/n/nevent1qqsd5yw7sntqfc4e7u4aempvgctry2plz653t9gpf97ctk5vc0ftskgpz3mhxue69uhhyetvv9ujuerpd46hxtnfduq3zamnwvaz7tmwdaehgun4v5hxxmmdfxdj3a"
+      );
+      cy.contains("Alby team");
+
+      cy.get(".chakra-card")
+        .first()
+        .within(() => {
+          cy.get('[href="/u/npub13sajvl5ak6cpz4ycesl0e5v869r5sey5pt50l9mcy6uas0fqtpmscth4np"]').should("be.visible");
+          cy.get('[href="/u/npub167n5w6cj2wseqtmk26zllc7n28uv9c4vw28k2kht206vnghe5a7stgzu3r"]').should("be.visible");
+
+          // make sure the leading @ is removed
+          cy.get(".chakra-card__body").should("not.contain.text", "@@");
+        });
+    });
+  });
 });

cypress/support/e2e.ts

@@ -19,11 +19,11 @@ import "./commands";
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-beforeEach(async () => {
+beforeEach(() => {
   cy.clearAllLocalStorage();
 
   // remove the database for every test
-  await new Promise((res, rej) => {
+  new Promise((res, rej) => {
     const request = window.indexedDB.deleteDatabase("storage");
     request.onsuccess = res;
     request.onerror = rej;

src/components/embed-types/common.tsx

@@ -41,18 +41,15 @@ export function embedVideos(content: EmbedableContent) {
   return embedJSX(content, {
     name: "Video",
     regexp:
-      /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:mp4|mkv|webm|mov))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i,
+      /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,12})((?:\/[\+~%\/\.\w\-_]*)?\.(?:mp4|mkv|webm|mov))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i,
     render: (match) => <video src={match[0]} controls style={{ maxWidth: "30rem", maxHeight: "20rem" }} />,
   });
 }
 
-// based on http://urlregex.com/
-// nostr:nevent1qqsvg6kt4hl79qpp5p673g7ref6r0c5jvp4yys7mmvs4m50t30sy9dgpp4mhxue69uhkummn9ekx7mqpr4mhxue69uhkummnw3ez6ur4vgh8wetvd3hhyer9wghxuet59dl66z
-// nostr:nevent1qqsymds0vlpp4f5s0dckjf4qz283pdsen0rmx8lu7ct6hpnxag2hpacpremhxue69uhkummnw3ez6un9d3shjtnwda4k7arpwfhjucm0d5q3qamnwvaz7tmwdaehgu3wwa5kueghxyq76
 export function embedLinks(content: EmbedableContent) {
   return embedJSX(content, {
     name: "Link",
-    regexp: /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})(\/[\+~%\/\.\w\-_]*)?([\?#][^\s]+)?/i,
+    regexp: /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,12})(\/[\+~%\/\.\w\-_]*)?([\?#][^\s]+)?/i,
     render: (match) => (
       <Link color="blue.500" href={match[0]} target="_blank" isExternal>
         {match[0]}

src/components/embed-types/nostr.tsx

@@ -12,7 +12,7 @@ import { Link as RouterLink } from "react-router-dom";
 export function embedNostrLinks(content: EmbedableContent, event: NostrEvent | DraftNostrEvent) {
   return embedJSX(content, {
     name: "nostr-link",
-    regexp: /(nostr:)?((npub|note|nprofile|nevent)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/i,
+    regexp: /(nostr:|@)?((npub|note|nprofile|nevent)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/i,
     render: (match) => {
       try {
         const decoded = nip19.decode(match[2]);

src/helpers/regexp.ts

@@ -1,3 +1,3 @@
 export const mentionNpubOrNote = /@?((npub1|note1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58})/gi;
 export const matchImageUrls =
-  /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i;
+  /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,12})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i;

src/views/login/nip05.tsx

@@ -46,9 +46,6 @@ export default function LoginNip05View() {
           const id = await dnsIdentityService.getIdentity(nip05, true);
           setPubkey(id?.pubkey);
           setRelays(id?.relays);
-          if (id?.relays[0]) {
-            setRelayUrl(id.relays[0]);
-          }
         } catch (e) {}
       }
       setLoading(false);
@@ -116,7 +113,9 @@ export default function LoginNip05View() {
       </FormControl>
       {relays ? (
         relays.length > 0 ? (
-          <Text>Found {relays.length} relays</Text>
+          <Text>
+            Found {relays.length} relays <CheckIcon color="green.500" />
+          </Text>
         ) : (
           <FormControl>
             <FormLabel>Bootstrap relay</FormLabel>

src/views/user/components/header.tsx

@@ -14,6 +14,7 @@ import { useCurrentAccount } from "../../../hooks/use-current-account";
 import { useIsMobile } from "../../../hooks/use-is-mobile";
 import { useUserMetadata } from "../../../hooks/use-user-metadata";
 import { UserProfileMenu } from "./user-profile-menu";
+import { embedLinks } from "../../../components/embed-types";
 
 export default function Header({
   pubkey,
@@ -51,7 +52,7 @@ export default function Header({
               />
             </Flex>
           </Flex>
-          {!metadata ? <SkeletonText /> : <Text>{metadata?.about}</Text>}
+          {metadata?.about && <Text>{embedLinks([metadata.about])}</Text>}
         </Flex>
       </Flex>
       <Flex wrap="wrap" gap="2">