✨Add clipboard functionality for vault addresses

paltalabs · Nov 20, 2024 · 788794f · 788794f
1 parent b513ec5
commit 788794f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/apps/dapp/src/components/InteractWithVault/InteractWithVault.tsx b/apps/dapp/src/components/InteractWithVault/InteractWithVault.tsx
@@ -23,6 +23,7 @@ import {
   NativeSelectField,
   HStack,
 } from '@chakra-ui/react'
+import { ClipboardIconButton, ClipboardRoot } from '../ui/clipboard'
 
 export const InteractWithVault = () => {
   const [amount, set_amount] = useState<number>(0)
@@ -121,13 +122,14 @@ export const InteractWithVault = () => {
           <Grid templateColumns="repeat(11, 1fr)" gap={1}>
             <GridItem colSpan={12}>
               <h2>Vault address:</h2>
-              <Textarea
-                defaultValue={selectedVault.address}
-                rows={1}
-                w={'full'}
-                textAlign={'center'}
-                readOnly
-                resize={'none'} />
+              <ClipboardRoot value={selectedVault.address}>
+                <HStack alignItems={'center'} justifyItems={'center'}>
+                  <Text>
+                    {selectedVault.address}
+                  </Text>
+                  <ClipboardIconButton />
+                </HStack>
+              </ClipboardRoot>
             </GridItem>
             <GridItem colSpan={5} colStart={1} textAlign={'start'}>
               <h2>Total value locked: ${selectedVault?.TVL} {selectedVault.assets[0]?.symbol}</h2>

diff --git a/apps/dapp/src/components/ManageVaults/InspectVault.tsx b/apps/dapp/src/components/ManageVaults/InspectVault.tsx
@@ -11,6 +11,7 @@ import { Button, Grid, GridItem, HStack, Icon, Stack, Text } from "@chakra-ui/re
 import { DialogBody, DialogContent, DialogFooter, DialogHeader } from "../ui/dialog"
 import { FaRegEdit } from "react-icons/fa"
 import { IoClose } from "react-icons/io5"
+import { ClipboardIconButton, ClipboardRoot } from "../ui/clipboard"
 
 export const InspectVault = ({
   handleOpenDeployVault,
@@ -50,7 +51,14 @@ export const InspectVault = ({
         <Grid templateColumns="repeat(12, 1fr)" gap={4}>
           <GridItem colSpan={12} justifyItems={'center'}>
             <h3>Vault address</h3>
-            <p>{selectedVault.address}</p>
+            <ClipboardRoot value={selectedVault.address}>
+              <HStack alignItems={'center'}>
+                <Text>
+                  {selectedVault.address}
+                </Text>
+                <ClipboardIconButton />
+              </HStack>
+            </ClipboardRoot>
           </GridItem>
         </Grid>
         <Stack justify={'space-around'} direction={{ sm: 'column', md: 'row' }} mt={6}>

diff --git a/apps/dapp/src/components/ui/clipboard.tsx b/apps/dapp/src/components/ui/clipboard.tsx
@@ -5,10 +5,10 @@ import {
   IconButton,
   Input,
 } from "@chakra-ui/react"
-import { forwardRef } from "react"
+import * as React from "react"
 import { LuCheck, LuClipboard, LuLink } from "react-icons/lu"
 
-const ClipboardIcon = forwardRef<
+const ClipboardIcon = React.forwardRef<
   HTMLDivElement,
   ChakraClipboard.IndicatorProps
 >(function ClipboardIcon(props, ref) {
@@ -19,7 +19,7 @@ const ClipboardIcon = forwardRef<
   )
 })
 
-const ClipboardCopyText = forwardRef<
+const ClipboardCopyText = React.forwardRef<
   HTMLDivElement,
   ChakraClipboard.IndicatorProps
 >(function ClipboardCopyText(props, ref) {
@@ -30,7 +30,7 @@ const ClipboardCopyText = forwardRef<
   )
 })
 
-export const ClipboardLabel = forwardRef<
+export const ClipboardLabel = React.forwardRef<
   HTMLLabelElement,
   ChakraClipboard.LabelProps
 >(function ClipboardLabel(props, ref) {
@@ -46,7 +46,7 @@ export const ClipboardLabel = forwardRef<
   )
 })
 
-export const ClipboardButton = forwardRef<HTMLButtonElement, ButtonProps>(
+export const ClipboardButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function ClipboardButton(props, ref) {
     return (
       <ChakraClipboard.Trigger asChild>
@@ -59,7 +59,7 @@ export const ClipboardButton = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 )
 
-export const ClipboardLink = forwardRef<HTMLButtonElement, ButtonProps>(
+export const ClipboardLink = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function ClipboardLink(props, ref) {
     return (
       <ChakraClipboard.Trigger asChild>
@@ -81,20 +81,21 @@ export const ClipboardLink = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 )
 
-export const ClipboardIconButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  function ClipboardIconButton(props, ref) {
-    return (
-      <ChakraClipboard.Trigger asChild>
-        <IconButton ref={ref} size="xs" variant="subtle" {...props}>
-          <ClipboardIcon />
-          <ClipboardCopyText srOnly />
-        </IconButton>
-      </ChakraClipboard.Trigger>
-    )
-  },
-)
+export const ClipboardIconButton = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(function ClipboardIconButton(props, ref) {
+  return (
+    <ChakraClipboard.Trigger asChild>
+      <IconButton ref={ref} size="xs" variant="subtle" {...props}>
+        <ClipboardIcon />
+        <ClipboardCopyText srOnly />
+      </IconButton>
+    </ChakraClipboard.Trigger>
+  )
+})
 
-export const ClipboardInput = forwardRef<HTMLInputElement, InputProps>(
+export const ClipboardInput = React.forwardRef<HTMLInputElement, InputProps>(
   function ClipboardInputElement(props, ref) {
     return (
       <ChakraClipboard.Input asChild>