From bae6d76735be04cd19637f38f3f833ae164c452f Mon Sep 17 00:00:00 2001
From: Andy Wang <41224501+andy-t-wang@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:18:52 -0800
Subject: [PATCH] feat: share contacts command (#104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* share contacts command (#103)

* dev

* usernames example

* remove username file

* links test

* update url

* add path param

* Add Send Haptic Feedback command (#82)

* Add Send Haptic Feedback command

* add haptics to demo, improve dx

* fix: add haptic feedback async handler, simplify payloads

* Revert "Add Send Haptic Feedback command (#82)" (#114)

This reverts commit 072798abb02165fa8dff19214edf53b360d699bf.

---------

Co-authored-by: Michał Struck <98230431+michalstruck@users.noreply.github.com>
---
 .../ClientContent/ExternalLinks.tsx           |   8 +-
 .../ClientContent/ShareContacts.tsx           | 145 ++++++++++++++++++
 .../components/ClientContent/index.tsx        |  56 +++++++
 demo/with-next/next.config.mjs                |   6 +-
 packages/core/minikit.ts                      |  47 ++++++
 packages/core/types/commands.ts               |   8 +
 packages/core/types/errors.ts                 |  10 ++
 packages/core/types/responses.ts              |  27 ++++
 8 files changed, 305 insertions(+), 2 deletions(-)
 create mode 100644 demo/with-next/components/ClientContent/ShareContacts.tsx

diff --git a/demo/with-next/components/ClientContent/ExternalLinks.tsx b/demo/with-next/components/ClientContent/ExternalLinks.tsx
index 174d4e7..a9ca781 100644
--- a/demo/with-next/components/ClientContent/ExternalLinks.tsx
+++ b/demo/with-next/components/ClientContent/ExternalLinks.tsx
@@ -11,10 +11,16 @@ export const ExternalLinks = () => {
         >
           Valid Associated Domain (Link)
         </Link>
+        <Link
+          href="worldapp://mini-app?app_id=app_staging_e387587d26a286fb5bea1d436ba0b2a3&path=features"
+          className="bg-green-500 text-white text-center rounded-lg p-3"
+        >
+          worldapp:// deep link
+        </Link>
         <button
           onClick={() => {
             window.open(
-              "https://worldcoin.org/mini-app?app_id=app_staging_d3b49eb04b497130e18533b9d8846319",
+              "https://world.org/mini-app?app_id=app_staging_e387587d26a286fb5bea1d436ba0b2a3&path=features",
               "_blank"
             );
           }}
diff --git a/demo/with-next/components/ClientContent/ShareContacts.tsx b/demo/with-next/components/ClientContent/ShareContacts.tsx
new file mode 100644
index 0000000..4124b24
--- /dev/null
+++ b/demo/with-next/components/ClientContent/ShareContacts.tsx
@@ -0,0 +1,145 @@
+import {
+  MiniKit,
+  ShareContactsErrorCodes,
+  ResponseEvent,
+  Contact,
+  ShareContactsPayload,
+} from "@worldcoin/minikit-js";
+import { useCallback, useEffect, useState } from "react";
+import { validateSchema } from "./helpers/validate-schema";
+import * as yup from "yup";
+
+const shareContactsSuccessPayloadSchema = yup.object({
+  status: yup.string<"success">().equals(["success"]).required(),
+  version: yup.number().required(),
+  contacts: yup.array().of(yup.object<Contact>().required()),
+});
+
+const shareContactsErrorPayloadSchema = yup.object({
+  error_code: yup
+    .string<ShareContactsErrorCodes>()
+    .oneOf(Object.values(ShareContactsErrorCodes))
+    .required(),
+  status: yup.string<"error">().equals(["error"]).required(),
+  version: yup.number().required(),
+});
+
+export const ShareContacts = () => {
+  const [shareContactsAppPayload, setShareContactsAppPayload] = useState<
+    string | undefined
+  >();
+
+  const [
+    shareContactsPayloadValidationMessage,
+    setShareContactsPayloadValidationMessage,
+  ] = useState<string | null>();
+
+  const [sentShareContactsPayload, setSentShareContactsPayload] =
+    useState<Record<string, any> | null>(null);
+
+  const [tempInstallFix, setTempInstallFix] = useState(0);
+
+  useEffect(() => {
+    if (!MiniKit.isInstalled()) {
+      return;
+    }
+
+    MiniKit.subscribe(ResponseEvent.MiniAppShareContacts, async (payload) => {
+      console.log("MiniAppShareContacts, SUBSCRIBE PAYLOAD", payload);
+      setShareContactsAppPayload(JSON.stringify(payload, null, 2));
+      if (payload.status === "error") {
+        const errorMessage = await validateSchema(
+          shareContactsErrorPayloadSchema,
+          payload
+        );
+
+        if (!errorMessage) {
+          setShareContactsPayloadValidationMessage("Payload is valid");
+        } else {
+          setShareContactsPayloadValidationMessage(errorMessage);
+        }
+      } else {
+        const errorMessage = await validateSchema(
+          shareContactsSuccessPayloadSchema,
+          payload
+        );
+
+        // This checks if the response format is correct
+        if (!errorMessage) {
+          setShareContactsPayloadValidationMessage("Payload is valid");
+        } else {
+          setShareContactsPayloadValidationMessage(errorMessage);
+        }
+      }
+    });
+
+    return () => {
+      MiniKit.unsubscribe(ResponseEvent.MiniAppShareContacts);
+    };
+  }, [tempInstallFix]);
+
+  const onShareContacts = useCallback(
+    async (isMultiSelectEnabled: boolean = false) => {
+      const shareContactsPayload: ShareContactsPayload = {
+        isMultiSelectEnabled,
+      };
+
+      const payload = MiniKit.commands.shareContacts(shareContactsPayload);
+      setSentShareContactsPayload({
+        payload,
+      });
+      console.log("payload", payload);
+      setTempInstallFix((prev) => prev + 1);
+    },
+    []
+  );
+
+  return (
+    <div>
+      <div className="grid gap-y-2">
+        <h2 className="text-2xl font-bold">Share Contacts</h2>
+
+        <div>
+          <div className="bg-gray-300 min-h-[100px] p-2">
+            <pre className="break-all whitespace-break-spaces">
+              {JSON.stringify(sentShareContactsPayload, null, 2)}
+            </pre>
+          </div>
+        </div>
+        <div className="grid gap-4 grid-cols-2">
+          <button
+            className="bg-black text-white rounded-lg p-4 w-full"
+            onClick={() => onShareContacts(true)}
+          >
+            Share Contacts (Multi enabled)
+          </button>
+          <button
+            className="bg-black text-white rounded-lg p-4 w-full"
+            onClick={() => onShareContacts(false)}
+          >
+            Share Contacts (multi disabled)
+          </button>
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="w-full grid gap-y-2">
+        <p>Message from &quot;{ResponseEvent.MiniAppShareContacts}&quot; </p>
+
+        <div className="bg-gray-300 min-h-[100px] p-2">
+          <pre className="break-all whitespace-break-spaces">
+            {shareContactsAppPayload ?? JSON.stringify(null)}
+          </pre>
+        </div>
+
+        <div className="grid gap-y-2">
+          <p>Response Validation:</p>
+          <p className="bg-gray-300 p-2">
+            {shareContactsPayloadValidationMessage ?? "No validation"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/demo/with-next/components/ClientContent/index.tsx b/demo/with-next/components/ClientContent/index.tsx
index 52fc79b..2e210c0 100644
--- a/demo/with-next/components/ClientContent/index.tsx
+++ b/demo/with-next/components/ClientContent/index.tsx
@@ -11,6 +11,13 @@ import { CameraComponent } from "./Camera";
 import { SendTransaction } from "./Transaction";
 import { SignMessage } from "./SignMessage";
 import { SignTypedData } from "./SignTypedMessage";
+import { ShareContacts } from "./ShareContacts";
+import {
+  GetSearchedUsernameResult,
+  UsernameSearch,
+} from "@worldcoin/minikit-react";
+import { useState } from "react";
+import Image from "next/image";
 
 const VersionsNoSSR = dynamic(
   () => import("./Versions").then((comp) => comp.Versions),
@@ -18,6 +25,14 @@ const VersionsNoSSR = dynamic(
 );
 
 export const ClientContent = () => {
+  const [searchValue, setSearchValue] = useState("");
+  const [searchResults, setSearchResults] =
+    useState<GetSearchedUsernameResult>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
   return (
     <div className="p-2 lg:p-8 grid content-start min-h-[100dvh] gap-y-2">
       <Nav />
@@ -27,6 +42,45 @@ export const ClientContent = () => {
         <User />
         <hr />
 
+        <UsernameSearch
+          value={searchValue}
+          handleChange={handleChange}
+          setSearchedUsernames={setSearchResults}
+          className="p-2 border rounded"
+          inputProps={{
+            placeholder: "Search usernames...",
+          }}
+        />
+
+        {/* Display search results */}
+        {searchResults && (
+          <div className="mt-4">
+            {searchResults.status === 200 ? (
+              <ul>
+                {searchResults.data?.map((user) => (
+                  <li
+                    key={user.address}
+                    className="grid grid-cols-[auto_1fr] gap-x-2 items-center"
+                  >
+                    {user.profile_picture_url && (
+                      <Image
+                        src={user.profile_picture_url}
+                        alt={user.username}
+                        width={32}
+                        height={32}
+                        className="w-10 h-10 rounded-full"
+                      />
+                    )}
+                    {user.username} - {user.address}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>Error: {searchResults.error}</p>
+            )}
+          </div>
+        )}
+
         <div className="grid gap-y-8">
           <VersionsNoSSR />
           <hr />
@@ -42,6 +96,8 @@ export const ClientContent = () => {
           <hr />
           <SignTypedData />
           <hr />
+          <ShareContacts />
+          <hr />
           <input className="text-xs border-black border-2" />
           <ExternalLinks />
           <hr />
diff --git a/demo/with-next/next.config.mjs b/demo/with-next/next.config.mjs
index 4678774..12e388a 100644
--- a/demo/with-next/next.config.mjs
+++ b/demo/with-next/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ["static.usernames.app-backend.toolsforhumanity.com"],
+  },
+};
 
 export default nextConfig;
diff --git a/packages/core/minikit.ts b/packages/core/minikit.ts
index 42dcc0a..d3a36c5 100644
--- a/packages/core/minikit.ts
+++ b/packages/core/minikit.ts
@@ -14,6 +14,7 @@ import {
   MiniAppSignTypedDataPayload,
   MiniAppVerifyActionPayload,
   MiniAppWalletAuthPayload,
+  MiniAppShareContactsPayload,
   ResponseEvent,
 } from "./types/responses";
 import { Network } from "types/payment";
@@ -23,6 +24,7 @@ import {
   PayCommandPayload,
   SendTransactionInput,
   SendTransactionPayload,
+  ShareContactsPayload,
   SignMessageInput,
   SignMessagePayload,
   SignTypedDataInput,
@@ -62,6 +64,7 @@ export class MiniKit {
     [Command.SendTransaction]: 1,
     [Command.SignMessage]: 1,
     [Command.SignTypedData]: 1,
+    [Command.ShareContacts]: 1,
   };
 
   private static isCommandAvailable = {
@@ -71,6 +74,7 @@ export class MiniKit {
     [Command.SendTransaction]: false,
     [Command.SignMessage]: false,
     [Command.SignTypedData]: false,
+    [Command.ShareContacts]: false,
   };
 
   private static listeners: Record<ResponseEvent, EventHandler> = {
@@ -80,6 +84,7 @@ export class MiniKit {
     [ResponseEvent.MiniAppSendTransaction]: () => {},
     [ResponseEvent.MiniAppSignMessage]: () => {},
     [ResponseEvent.MiniAppSignTypedData]: () => {},
+    [ResponseEvent.MiniAppShareContacts]: () => {},
   };
 
   public static appId: string | null = null;
@@ -432,6 +437,29 @@ export class MiniKit {
 
       return payload;
     },
+
+    shareContacts: (
+      payload: ShareContactsPayload
+    ): ShareContactsPayload | null => {
+      if (
+        typeof window === "undefined" ||
+        !this.isCommandAvailable[Command.SignTypedData]
+      ) {
+        console.error(
+          "'shareContacts' command is unavailable. Check MiniKit.install() or update the app version"
+        );
+
+        return null;
+      }
+
+      sendMiniKitEvent<WebViewBasePayload>({
+        command: Command.ShareContacts,
+        version: 1,
+        payload,
+      });
+
+      return payload;
+    },
   };
 
   /**
@@ -556,5 +584,24 @@ export class MiniKit {
         }
       });
     },
+    shareContacts: async (
+      payload: ShareContactsPayload
+    ): AsyncHandlerReturn<
+      ShareContactsPayload | null,
+      MiniAppShareContactsPayload
+    > => {
+      return new Promise(async (resolve, reject) => {
+        try {
+          const response = await MiniKit.awaitCommand(
+            ResponseEvent.MiniAppShareContacts,
+            Command.ShareContacts,
+            () => this.commands.shareContacts(payload)
+          );
+          return resolve(response);
+        } catch (error) {
+          reject(error);
+        }
+      });
+    },
   };
 }
diff --git a/packages/core/types/commands.ts b/packages/core/types/commands.ts
index 7507a1e..3cca984 100644
--- a/packages/core/types/commands.ts
+++ b/packages/core/types/commands.ts
@@ -11,6 +11,7 @@ export enum Command {
   SendTransaction = "send-transaction",
   SignMessage = "sign-message",
   SignTypedData = "sign-typed-data",
+  ShareContacts = "share-contacts",
 }
 
 export type WebViewBasePayload = {
@@ -93,6 +94,12 @@ export type SignTypedDataInput = {
 
 export type SignTypedDataPayload = SignTypedDataInput;
 
+// Anchor: Share Contacts Payload
+export type ShareContactsInput = {
+  isMultiSelectEnabled: boolean;
+};
+export type ShareContactsPayload = ShareContactsInput;
+
 type CommandReturnPayloadMap = {
   [Command.Verify]: VerifyCommandPayload;
   [Command.Pay]: PayCommandPayload;
@@ -100,6 +107,7 @@ type CommandReturnPayloadMap = {
   [Command.SendTransaction]: SendTransactionPayload;
   [Command.SignMessage]: SignMessagePayload;
   [Command.SignTypedData]: SignTypedDataPayload;
+  [Command.ShareContacts]: ShareContactsPayload;
 };
 export type CommandReturnPayload<T extends Command> =
   T extends keyof CommandReturnPayloadMap ? CommandReturnPayloadMap[T] : never;
diff --git a/packages/core/types/errors.ts b/packages/core/types/errors.ts
index 6dd5379..63e0045 100644
--- a/packages/core/types/errors.ts
+++ b/packages/core/types/errors.ts
@@ -147,3 +147,13 @@ export const MiniKitInstallErrorMessage = {
   [MiniKitInstallErrorCodes.AppOutOfDate]:
     "WorldApp is out of date. Please update the app.",
 };
+
+export enum ShareContactsErrorCodes {
+  UserRejected = "user_rejected",
+  GenericError = "generic_error",
+}
+
+export const ShareContactsErrorMessage = {
+  [ShareContactsErrorCodes.UserRejected]: "User rejected the request.",
+  [ShareContactsErrorCodes.GenericError]: "Something unexpected went wrong.",
+};
diff --git a/packages/core/types/responses.ts b/packages/core/types/responses.ts
index c794ff5..c3ae7c3 100644
--- a/packages/core/types/responses.ts
+++ b/packages/core/types/responses.ts
@@ -2,6 +2,7 @@ import { Network } from "./payment";
 import {
   PaymentErrorCodes,
   SendTransactionErrorCodes,
+  ShareContactsErrorCodes,
   SignMessageErrorCodes,
   SignTypedDataErrorCodes,
   VerificationErrorCodes,
@@ -17,6 +18,7 @@ export enum ResponseEvent {
   MiniAppSendTransaction = "miniapp-send-transaction",
   MiniAppSignMessage = "miniapp-sign-message",
   MiniAppSignTypedData = "miniapp-sign-typed-data",
+  MiniAppShareContacts = "miniapp-share-contacts",
 }
 
 export type MiniAppVerifyActionSuccessPayload = {
@@ -136,6 +138,30 @@ export type MiniAppSignTypedDataPayload =
   | MiniAppSignTypedDataSuccessPayload
   | MiniAppSignTypedDataErrorPayload;
 
+// Anchor: Share Contacts Payload
+export type Contact = {
+  username: string;
+  walletAddress: string;
+  profilePictureUrl: string | null;
+};
+
+export type MiniAppShareContactsSuccessPayload = {
+  status: "success";
+  contacts: Contact[];
+  version: number;
+  timestamp: string;
+};
+
+export type MiniAppShareContactsErrorPayload = {
+  status: "error";
+  error_code: ShareContactsErrorCodes;
+  version: number;
+};
+
+export type MiniAppShareContactsPayload =
+  | MiniAppShareContactsSuccessPayload
+  | MiniAppShareContactsErrorPayload;
+
 type EventPayloadMap = {
   [ResponseEvent.MiniAppVerifyAction]: MiniAppVerifyActionPayload;
   [ResponseEvent.MiniAppPayment]: MiniAppPaymentPayload;
@@ -143,6 +169,7 @@ type EventPayloadMap = {
   [ResponseEvent.MiniAppSendTransaction]: MiniAppSendTransactionPayload;
   [ResponseEvent.MiniAppSignMessage]: MiniAppSignMessagePayload;
   [ResponseEvent.MiniAppSignTypedData]: MiniAppSignTypedDataPayload;
+  [ResponseEvent.MiniAppShareContacts]: MiniAppShareContactsPayload;
 };
 
 export type EventPayload<T extends ResponseEvent = ResponseEvent> =