Usernames search (#101)

* feat: usernames search component

* chore: branding

* chore: fix tsconfig

README.md

@@ -1,8 +1,8 @@
-# Minikit-JS
+# minikit-js
 
 ## 🚀 Getting Started
 
-Minikit is currently available on npm. To install, run:
+MiniKit is currently available on npm. To install, run:
 `pnpm i @worldcoin/minikit-js`
 
 or use the CDN:

packages/core/README.md

@@ -1,8 +1,8 @@
-# Minikit-JS
+# minikit-js
 
 ## 🚀 Getting Started
 
-Minikit is currently available on npm. To install, run:
+MiniKit is currently available on npm. To install, run:
 `pnpm i @worldcoin/minikit-js`
 
 or use the CDN:

packages/core/package.json

@@ -2,7 +2,7 @@
   "name": "@worldcoin/minikit-js",
   "version": "1.1.1",
   "homepage": "https://docs.worldcoin.org/mini-apps",
-  "description": "Minikit-js is our SDK for building mini-apps.",
+  "description": "minikit-js is our SDK for building mini-apps.",
   "license": "MIT",
   "private": false,
   "type": "module",

packages/react/README.md

@@ -1,10 +1,10 @@
-# Minikit-React
+# minikit-react
 
 This package contains helper functions and components for building mini apps with React. This is not required to run a mini app and is only a convenience package for developers as it contains nice abstractions.
 
 ## 🚀 Getting Started
 
-Minikit is currently available on npm. To install, run:
+MiniKit is currently available on npm. To install, run:
 
 ```
 pnpm i @worldcoin/minikit-react

packages/react/package.json

@@ -2,7 +2,7 @@
   "name": "@worldcoin/minikit-react",
   "version": "1.1.1",
   "homepage": "https://docs.worldcoin.org/mini-apps",
-  "description": "Minikit-react is a set of hooks for building mini-apps",
+  "description": "minikit-react is a set of hooks for building mini-apps",
   "license": "MIT",
   "private": false,
   "type": "module",

packages/react/src/components/index.ts

@@ -0,0 +1,4 @@
+export {
+  UsernameSearch,
+  type GetSearchedUsernameResult,
+} from "./username-search";

packages/react/src/components/username-search.tsx

@@ -0,0 +1,89 @@
+const createDebounce = () => {
+  let timeoutId: NodeJS.Timeout;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <T extends (...args: any) => any>(fn: T, delay: number) => {
+    return (...args: Parameters<T>) => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        fn(...args);
+      }, delay);
+    };
+  };
+};
+
+const DEBOUNCE_DELAY_MS = 300;
+const debounce = createDebounce();
+
+type SearchUsernameResponseBodySuccess = Array<{
+  address: string;
+  profile_picture_url: string | null;
+  username: string;
+}>;
+
+export type GetSearchedUsernameResult = Awaited<
+  ReturnType<typeof getSearchedUsername>
+>;
+
+const getSearchedUsername = async (username: string) => {
+  const response = await fetch(
+    `https://usernames.worldcoin.org/api/v1/search/${username}`
+  );
+
+  if (response.status === 200) {
+    const json = (await response.json()) as SearchUsernameResponseBodySuccess;
+    return { status: response.status, data: json };
+  }
+
+  return { status: response.status, error: "Error fetching data" };
+};
+
+type Props = {
+  value: string;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  setSearchedUsernames: (searchedUsernames: GetSearchedUsernameResult) => void;
+  className?: string;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+};
+
+/**
+ * Simple component that allows users to search for usernames.
+ *
+ * It is encouraged to build your own components, using this as a base/reference
+ *
+ * You can add more <input /> props/override existing ones by passing inputProps.
+ * Debounce delay is 300ms.
+ */
+export const UsernameSearch = ({
+  value,
+  handleChange,
+  setSearchedUsernames,
+  className,
+  inputProps,
+}: Props) => {
+  const debouncedSearch = debounce(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const username = e.target.value;
+      const data = await getSearchedUsername(username);
+
+      setSearchedUsernames(data);
+    },
+    DEBOUNCE_DELAY_MS
+  );
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSearch(e);
+    handleChange(e);
+  };
+
+  return (
+    <input
+      type="text"
+      value={value}
+      onChange={onChange}
+      className={className || "rounded-md border-black border-2"}
+      {...inputProps}
+    />
+  );
+};

packages/react/src/index.ts

@@ -1,2 +1,3 @@
 export { useWaitForTransactionReceipt } from "./transaction/hooks";
 export * from "./types/client";
+export * from "./components";

packages/react/tsconfig.json

@@ -12,6 +12,7 @@
     "sourceMap": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "jsx": "react-jsx",
     "noImplicitAny": false,
     "skipLibCheck": true,
     "baseUrl": ".",