From cb652598a0dbd8182c76c9837e35a2147b442353 Mon Sep 17 00:00:00 2001
From: Vedant Chainani <vedantchainani1084@gmail.com>
Date: Sun, 8 Sep 2024 19:53:41 +0530
Subject: [PATCH] chore: remove switch search and add text copy

---
 .../screens/switch-chain-screen.tsx           |  6 +--
 .../components/screens/user-modal-home.tsx    |  5 +-
 .../src/components/ui/text-copy.tsx           | 46 +++++++++++--------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/connect-kit/src/components/screens/switch-chain-screen.tsx b/packages/connect-kit/src/components/screens/switch-chain-screen.tsx
index d61628a..a04d1b5 100644
--- a/packages/connect-kit/src/components/screens/switch-chain-screen.tsx
+++ b/packages/connect-kit/src/components/screens/switch-chain-screen.tsx
@@ -1,4 +1,3 @@
-import { Input } from '../ui/input';
 import { useConnectKitStore, useGraz } from '~/lib/hooks';
 import { ScrollArea } from '@radix-ui/react-scroll-area';
 import { Button } from '../ui/button';
@@ -9,12 +8,9 @@ import { NetworkIcon } from 'lucide-react';
 export const SwitchChainScreen = () => {
   const { chains } = useConnectKitStore();
   const { onSwitchChain } = useGraz();
+
   return (
     <div className='ck-flex ck-flex-col'>
-      <Input
-        className='!ck-rounded-2xl ck-h-10 ck-my-3'
-        placeholder='Search Chain'
-      />
       <ScrollArea className='ck-h-[400px] ck-my-4 ck-overflow-scroll'>
         <div className='ck-grid ck-grid-cols-4 ck-gap-2'>
           {chains.map((chain) => {
diff --git a/packages/connect-kit/src/components/screens/user-modal-home.tsx b/packages/connect-kit/src/components/screens/user-modal-home.tsx
index cdbea08..3675c9d 100644
--- a/packages/connect-kit/src/components/screens/user-modal-home.tsx
+++ b/packages/connect-kit/src/components/screens/user-modal-home.tsx
@@ -1,6 +1,5 @@
 import Avatar from 'avvvatars-react';
 import { useConnectKitStore, useGraz, useUser } from '~/lib/hooks';
-import { truncate } from '~/lib/utils';
 import { Skeleton } from '../ui/skeleton';
 import { Button } from '../ui/button';
 import { ArrowRightLeftIcon, ChevronRightIcon, LogOutIcon } from 'lucide-react';
@@ -26,7 +25,9 @@ export const UserModalHome = () => {
         </div>
         <TextCopy
           className='ck-translate-x-3'
-          content={truncate(account[activeChainId]?.bech32Address ?? '', 10)}
+          text={account[activeChainId]?.bech32Address ?? ''}
+          truncateOptions={{ length: 10, fromMiddle: true, enabled: true }}
+          type='text'
         >
           <TextCopyContent className='ck-font-semibold' />
           <TextCopyButton
diff --git a/packages/connect-kit/src/components/ui/text-copy.tsx b/packages/connect-kit/src/components/ui/text-copy.tsx
index 10125ee..763d7cb 100644
--- a/packages/connect-kit/src/components/ui/text-copy.tsx
+++ b/packages/connect-kit/src/components/ui/text-copy.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable no-nested-ternary -- allow nested */
 import {
   type ComponentProps,
@@ -10,6 +12,8 @@ import {
 
 import { cn, errorHandler, truncate } from '~/lib/utils';
 
+import { useCopyToClipboard } from 'usehooks-ts';
+
 import { Button, type ButtonProps } from './button';
 
 import {
@@ -21,7 +25,7 @@ import {
 } from 'lucide-react';
 
 const TextCopyContext = createContext<{
-  content?: string;
+  text?: string;
   type?: 'text' | 'password';
   truncateOptions?: {
     enabled?: boolean;
@@ -31,7 +35,7 @@ const TextCopyContext = createContext<{
   hidden: boolean;
   setHidden: (value: boolean) => void;
 }>({
-  content: '',
+  text: '',
   hidden: false,
   type: 'text',
   truncateOptions: {
@@ -45,7 +49,7 @@ const TextCopyContext = createContext<{
 });
 
 interface TextCopyProps extends ComponentProps<'div'> {
-  content?: string;
+  text?: string;
   type?: 'text' | 'password';
   truncateOptions?: {
     enabled?: boolean;
@@ -66,14 +70,14 @@ interface TextCopyButtonProps extends ButtonProps {
 }
 
 export const TextCopy = forwardRef<HTMLDivElement, TextCopyProps>(
-  ({ children, className, content, type, truncateOptions, ...props }, ref) => {
+  ({ children, className, text, type, truncateOptions, ...props }, ref) => {
     const [hidden, setHidden] = useState<boolean>(false);
     return (
       <TextCopyContext.Provider
         value={{
           hidden,
           setHidden,
-          content,
+          text,
           type,
           truncateOptions,
         }}
@@ -95,19 +99,26 @@ export const TextCopy = forwardRef<HTMLDivElement, TextCopyProps>(
 
 export const TextCopyContent = forwardRef<HTMLDivElement, TextCopyContentProps>(
   ({ className, ...props }, ref) => {
-    const { hidden, type, truncateOptions, content } =
-      useContext(TextCopyContext);
+    const { hidden, type, truncateOptions, text } = useContext(TextCopyContext);
     return (
       <div className={cn('ck-font-medium', className)} {...props} ref={ref}>
         {type === 'text'
           ? truncateOptions?.enabled
-            ? truncate(content ?? '', length, truncateOptions.fromMiddle)
-            : content
+            ? truncate(
+                text ?? '',
+                truncateOptions.length,
+                truncateOptions.fromMiddle
+              )
+            : text
           : hidden
             ? '*'.repeat(24)
             : truncateOptions?.enabled
-              ? truncate(content ?? '', length, truncateOptions.fromMiddle)
-              : content}
+              ? truncate(
+                  text ?? '',
+                  truncateOptions.length,
+                  truncateOptions.fromMiddle
+                )
+              : text}
       </div>
     );
   }
@@ -118,7 +129,7 @@ export const TextCopyEye = forwardRef<HTMLButtonElement, TextCopyEyeProps>(
     const { hidden, setHidden } = useContext(TextCopyContext);
     return (
       <Button
-        className='ck-h-8 ck-w-8 ck-p-0'
+        className='ck-h-8 ck-w-8 !ck-p-0'
         variant='ghost'
         onClick={() => setHidden(!hidden)}
         {...props}
@@ -134,16 +145,13 @@ export const TextCopyButton = forwardRef<
   HTMLButtonElement,
   TextCopyButtonProps
 >(({ iconProps = { strokeWidth: 2.5 }, canCopy = true, ...props }, ref) => {
-  const { content } = useContext(TextCopyContext);
+  const { text } = useContext(TextCopyContext);
+  const [, copy] = useCopyToClipboard();
   const [copied, setCopied] = useState<boolean>(false);
 
-  const copy = async (data: string) => {
-    await navigator.clipboard.writeText(data);
-  };
-
   const copyText = async () => {
     try {
-      await copy(content ?? '');
+      await copy(text ?? '');
       setCopied(true);
     } catch (error) {
       errorHandler(error);
@@ -164,7 +172,7 @@ export const TextCopyButton = forwardRef<
       {canCopy ? (
         <Button
           className='ck-h-8 ck-w-8 !ck-p-0'
-          variant='secondary'
+          variant='ghost'
           onClick={copyText}
           {...props}
           ref={ref}