feat: Upgrade dependencies

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) Bonfida.
+Copyright (c) SNS.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,8 +4,8 @@
 <img width="250" src="https://i.imgur.com/nn7LMNV.png"/>
 </p>
 <p align="center">
-<a href="https://twitter.com/bonfida">
-<img src="https://img.shields.io/twitter/url?label=Bonfida&style=social&url=https%3A%2F%2Ftwitter.com%2Fbonfida">
+<a href="https://twitter.com/sns">
+<img src="https://img.shields.io/twitter/url?label=SNS&style=social&url=https%3A%2F%2Ftwitter.com%sns">
 </a>
 </p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonfida/sns-widget",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "SNS Widget for 3rd-party apps for quick domain search and register",
   "repository": {
     "type": "git",
@@ -43,44 +43,47 @@
     "@solana/wallet-adapter-wallets": "^0.19.23",
     "@solana/web3.js": "^1.87.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "@tanstack/react-query": "^5"
   },
   "devDependencies": {
+    "@bonfida/prettier-config": "^1.1.0",
     "@foxwallet/wallet-adapter-foxwallet": "^0.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.16",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "gh-pages": "^6.1.0",
-    "postcss": "^8.4.32",
-    "prettier": "3.1.0",
-    "rollup-plugin-banner2": "^1.2.2",
-    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.3.6",
-    "typescript": "^5.3.2",
-    "vite": "^4.5.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "gh-pages": "^6.1.1",
+    "postcss": "^8.4.41",
+    "prettier": "3.3.3",
+    "rollup-plugin-banner2": "^1.3.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
     "vite-bundle-visualizer": "^0.11.0",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-node-polyfills": "^0.17.0"
+    "vite-plugin-dts": "^4.0.2",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
     "@bonfida/emojis": "^1.0.4",
-    "@bonfida/sns-react": "^2.0.2",
-    "@bonfida/spl-name-service": "2.5.0",
+    "@bonfida/sns-react": "^3.1.0",
+    "@bonfida/spl-name-service": "3.0.1",
     "@pythnetwork/client": "^2.19.0",
     "@solana/wallet-adapter-react": "^0.15",
     "@solana/wallet-adapter-react-ui": "^0.9",
     "@solana/wallet-adapter-wallets": "^0.19.23",
     "@solana/web3.js": "^1.87.6",
-    "ahooks": "^3.7.8",
+    "@tanstack/react-query": "^5.51.23",
+    "ahooks": "^3.8.1",
     "react-async-hook": "^4.0.0"
   },
   "volta": {
@@ -98,5 +101,6 @@
     "web3",
     "web3-domains",
     "widget"
-  ]
+  ],
+  "prettier": "@bonfida/prettier-config"
 }

src/app.tsx

@@ -28,7 +28,6 @@ const PUBLIC_RPC = import.meta.env.VITE_PUBLIC_RPC as string;
 
 const SolanaProvider = ({ children }: { children: ReactNode }) => {
   return (
-    // <ConnectionProvider endpoint={PUBLIC_RPC}>
     <WalletProvider
       autoConnect
       wallets={[
@@ -49,33 +48,30 @@ const SolanaProvider = ({ children }: { children: ReactNode }) => {
     >
       <WalletModalProvider>{children}</WalletModalProvider>
     </WalletProvider>
-    //</ConnectionProvider>
   );
 };
 
 const Content = () => {
   const wallet = useWallet();
-  // const { connection } = useConnection();
   const { visible, setVisible } = useWalletModal();
   const [isDark, toggleDark] = useState(false);
 
   return (
     <div className="p-10">
-      <h1 className="text-[40px] text-center text-white font-medium">
+      <h1 className="text-white text-center text-[40px] font-medium">
         SNS Widget Demo
       </h1>
 
       <div className="mt-10">
         <button
-          className="p-3 bg-white rounded-[24px] font-medium"
+          className="bg-white rounded-3xl p-3 font-medium"
           onClick={() => toggleDark(!isDark)}
         >
           Toggle dark
         </button>
       </div>
 
       <Widget
-        // connection={connection}
         endpoint={PUBLIC_RPC}
         passthroughWallet={{ ...wallet, visible, setVisible }}
         isDark={isDark}

src/lib/components/button.tsx

@@ -22,9 +22,10 @@ export const CustomButton = ({
       {...rest}
       tabIndex={0}
       className={twMerge(
-        "flex items-center gap-2 px-3 justify-center text-white font-primary bg-theme-primary",
-        size === "full" && "py-2.5 rounded-xl tracking-wide",
-        size === "small" && "text-sm py-1 rounded-lg",
+        "text-white flex items-center justify-center gap-2 bg-theme-primary px-3 font-primary",
+        "transition-[filter] hover:[filter:brightness(0.9)]",
+        size === "full" && "rounded-xl py-2.5 tracking-wide",
+        size === "small" && "rounded-lg py-1 text-sm",
         disabled && "bg-theme-secondary",
         className,
       )}

src/lib/components/connect-wallet-button.tsx

@@ -24,10 +24,10 @@ export const ConnectWalletButton = () => {
   };
 
   return (
-    <div className="relative flex ml-auto">
+    <div className="relative ml-auto flex">
       <button
         type="button"
-        className="relative flex items-center gap-2 px-3 h-[32px] py-1 text-xs tracking-wide rounded-lg bg-theme-secondary font-primary text-theme-primary"
+        className="relative flex h-8 items-center gap-2 rounded-lg bg-theme-secondary px-3 py-1 font-primary text-xs tracking-wide text-theme-primary"
         tabIndex={0}
         aria-label="Connect wallet"
         aria-haspopup="true"
@@ -50,11 +50,11 @@ export const ConnectWalletButton = () => {
         tabIndex={0}
         aria-label="Disconnect wallet"
         className={twMerge(
-          !isDropdownVisible && "invisible opacity-0 -translate-y-1",
-          "absolute h-[48px] top-[100%] left-0 right-0 w-full z-10",
-          "duration-300 transition-[transform,opacity]",
-          "bg-background-secondary rounded-xl text-base flex items-center justify-center text-text-primary",
-          "shadow-domain dark:shadow-none dark:border dark:border-interactive-border",
+          !isDropdownVisible && "invisible -translate-y-1 opacity-0",
+          "absolute left-0 right-0 top-full z-10 h-12 w-full",
+          "transition-[transform,opacity] duration-300",
+          "flex items-center justify-center rounded-xl bg-background-secondary text-base text-text-primary",
+          "shadow-domain dark:border dark:border-interactive-border dark:shadow-none",
           "active:opacity-70 active:transition-none",
         )}
         onClick={onDisconnect}

src/lib/components/domain-card-base.tsx

@@ -13,14 +13,14 @@ export const DomainCardBase = ({
   children: ReactNode;
 }) => {
   return (
-    <div className="flex flex-row items-center gap-4 px-4 py-3 shadow-domain dark:shadow-none rounded-xl bg-background-secondary min-h-[72px]">
-      <div className="flex flex-col mr-auto">
-        <span className="text-base text-content-secondary font-primary">
+    <div className="flex min-h-[72px] flex-row items-center gap-4 rounded-xl bg-background-secondary px-4 py-3 shadow-domain dark:shadow-none">
+      <div className="mr-auto flex flex-col">
+        <span className="text-content-secondary font-primary text-base">
           {abbreviate(`${domain}.sol`, 25, 3)}
         </span>
         {available && (
           <span className="flex items-center gap-1 text-sm font-medium">
-            <img className="w-4 h-4" src={tokenIconBySymbol("USDC")} alt="$" />
+            <img className="h-4 w-4" src={tokenIconBySymbol("USDC")} alt="$" />
             {price}
           </span>
         )}

src/lib/components/domain-card-skeleton.tsx

@@ -1,8 +1,8 @@
 export const DomainCardSkeleton = () => {
   return (
-    <div className="flex flex-row items-center justify-between gap-4 px-4 py-3 shadow-domain dark:shadow-none rounded-xl bg-background-secondary h-[72px] animate-pulse">
-      <div className="w-[80px] h-4 rounded-full bg-background-skeleton"></div>
-      <div className="h-4 rounded-full w-[120px] bg-background-skeleton"></div>
+    <div className="flex h-[72px] animate-pulse flex-row items-center justify-between gap-4 rounded-xl bg-background-secondary px-4 py-3 shadow-domain dark:shadow-none">
+      <div className="h-4 w-20 rounded-full bg-background-skeleton"></div>
+      <div className="h-4 w-[120px] rounded-full bg-background-skeleton"></div>
     </div>
   );
 };

src/lib/components/domain-cart-item.tsx

@@ -20,7 +20,7 @@ export const DomainCartItem = ({ domain, onEdit }: DomainCartItemProps) => {
           <span>Storage: {cartItem.storage / 1_000}kB</span>
           <button
             type="button"
-            className="flex items-center text-theme-primary dark:text-theme-secondary gap-0.5"
+            className="flex items-center gap-0.5 text-theme-primary dark:text-theme-secondary"
             tabIndex={0}
             onClick={onEdit}
           >

src/lib/components/domain-search-result-row.tsx

@@ -38,7 +38,7 @@ export const DomainSearchResultRow = ({
   return (
     <DomainCardBase domain={domain} available={available} price={price}>
       {!available && (
-        <div className="px-3 rounded-lg bg-accent bg-opacity-10">
+        <div className="rounded-lg bg-accent bg-opacity-10 px-3">
           <span className="text-xs font-semibold leading-6 tracking-widest text-accent">
             Registered
           </span>
@@ -47,14 +47,14 @@ export const DomainSearchResultRow = ({
       {available && (
         <div
           className={twMerge(
-            "flex items-center flex-row justify-between min-w-[93px]",
+            "flex min-w-[93px] flex-row items-center justify-between",
             available ? "gap-2" : "gap-1",
           )}
         >
           <button
             type="button"
             className={twMerge(
-              "flex items-center gap-2 px-3 py-1 text-sm text-base-button-content rounded-lg font-primary bg-theme-primary",
+              "flex items-center gap-2 rounded-lg bg-theme-primary px-3 py-1 font-primary text-sm text-base-button-content",
               isInCart &&
                 showRemoveButton &&
                 "bg-transparent text-theme-primary dark:text-theme-secondary",

src/lib/components/global-status.tsx

@@ -17,33 +17,33 @@ export const GlobalStatusCard = ({ status }: { status: GlobalStatus }) => {
       className={twMerge(
         "bg-background-primary dark:border dark:border-interactive-border",
         "shadow-xl dark:shadow-none",
-        "absolute top-2.5 left-3 right-3 rounded-lg py-3 px-4 flex gap-2 z-10 overflow-hidden",
+        "absolute left-3 right-3 top-2.5 z-10 flex gap-2 overflow-hidden rounded-lg px-4 py-3",
       )}
     >
       <div
         className={twMerge(
-          "absolute top-0 left-0 right-0 h-0.5 animate-width-to-zero",
+          "absolute left-0 right-0 top-0 h-0.5 animate-width-to-zero",
           status.status === "error" && "bg-error",
           status.status === "success" && "bg-success",
         )}
       ></div>
       <button
-        className="absolute flex items-center justify-center w-5 h-5 top-1 right-1"
+        className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center"
         type="button"
         tabIndex={0}
         onClick={() => setStatus(null)}
       >
-        <div className="absolute w-4 h-[1px] bg-text-primary rotate-45"></div>
-        <div className="absolute w-4 h-[1px] bg-text-primary -rotate-45"></div>
+        <div className="absolute h-px w-4 rotate-45 bg-text-primary"></div>
+        <div className="absolute h-px w-4 -rotate-45 bg-text-primary"></div>
       </button>
       {status.status === "error" && (
         <InformationCircle
           width={20}
           height={20}
-          className="rotate-180 text-error mt-0.5 shrink-0"
+          className="mt-0.5 shrink-0 rotate-180 text-error"
         />
       )}
-      <span className="font-medium font-primary">{status.message}</span>
+      <span className="font-primary font-medium">{status.message}</span>
     </div>
   );
 };

src/lib/components/input-field.tsx

@@ -4,13 +4,15 @@ import { RemoveThin } from "../components/icons";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string;
+  onClear?: () => void;
 }
 
 export const InputField = ({
   type = "text",
   value,
   className,
   errorMessage,
+  onClear,
   ...params
 }: InputProps = {}) => {
   const input = useRef<HTMLInputElement>(null);
@@ -21,31 +23,30 @@ export const InputField = ({
         ref={input}
         value={value}
         className={twMerge(
-          "w-full h-full px-3 py-4 text-sm border border-opacity-25 rounded-xl border-field-border dark:border-interactive-border bg-background-secondary text-ellipsis",
+          "h-full w-full text-ellipsis rounded-xl border border-field-border border-opacity-25 bg-background-secondary px-3 py-4 text-sm dark:border-interactive-border",
           className,
           type === "search" && "pr-8",
         )}
         type={type === "search" ? "text" : type}
       />
 
-      {type === "search" && value && (
+      {type === "search" && value && onClear && (
         <button
           type="button"
-          className="absolute p-1 top-3 right-1"
+          className="absolute right-1 top-3 p-1"
           aria-label="Clear"
           tabIndex={0}
           onClick={() => {
-            if (input.current) {
-              input.current.value = "";
-            }
+            onClear();
+            input.current?.focus();
           }}
         >
           <RemoveThin width={24} height={24} />
         </button>
       )}
 
       {errorMessage && (
-        <p className="absolute top-[calc(100%+4px)] text-error font-medium tracking-widest pl-3 text-xs animate-[fade-in_300ms_ease-out]">
+        <p className="absolute top-[calc(100%+4px)] animate-[fade-in_300ms_ease-out] pl-3 text-xs font-medium tracking-widest text-error">
           {errorMessage}
         </p>
       )}

src/lib/components/modal.tsx

@@ -45,8 +45,8 @@ export const BaseModal = ({
   return (
     <div
       className={twMerge(
-        "animate-modal-fade-in absolute top-0 bottom-0 left-0 right-0",
-        "bg-modal-overlay-bg bg-opacity-60 z-[1]",
+        "absolute bottom-0 left-0 right-0 top-0 animate-modal-fade-in",
+        "z-[1] bg-modal-overlay-bg bg-opacity-60",
         "flex items-center justify-center",
       )}
       ref={myNodeRef}

src/lib/contexts/cart.tsx

@@ -38,7 +38,7 @@ export const CartContextProvider = ({
   referrerKey?: WidgetProps["referrerKey"];
 } = {}) => {
   const [cart = {}, updateCart] = useSessionStorageState<Cart>(
-    "bonfida-widget-cart",
+    "sns-widget-cart",
     {
       defaultValue: {},
     },