Merge pull request #226 from quest-chains/feat/expose-qc-id

add copy quest chain address button
quest-chains · Feb 2, 2024 · cb15629 · cb15629
2 parents 0cabba2 + 454e19f
commit cb15629
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/components/QuestChain/QuestChainV2Page/index.tsx b/components/QuestChain/QuestChainV2Page/index.tsx
@@ -1,4 +1,4 @@
-import { InfoIcon } from '@chakra-ui/icons';
+import { CopyIcon, InfoIcon } from '@chakra-ui/icons';
 import {
   Accordion,
   Alert,
@@ -8,6 +8,8 @@ import {
   Button,
   Fade,
   Flex,
+  HStack,
+  IconButton,
   Image,
   Input,
   Link as ChakraLink,
@@ -18,6 +20,7 @@ import {
   ModalOverlay,
   Spinner,
   Text,
+  Tooltip,
   useDisclosure,
   useTimeout,
   VStack,
@@ -728,7 +731,23 @@ export const QuestChainV2Page: React.FC<QuestChainV2PageProps> = ({
                       {questChain.name}
                     </Text>
                     <Flex gap={4} justify="space-between">
-                      <NetworkDisplay chainId={questChain.chainId} />
+                      <HStack>
+                        <NetworkDisplay chainId={questChain.chainId} />
+                        <Tooltip
+                          label="Copy Quest Chain Address"
+                          aria-label="Copy Quest Chain Address"
+                        >
+                          <IconButton
+                            aria-label="Copy Quest Chain Address"
+                            variant="ghost"
+                            icon={<CopyIcon />}
+                            onClick={() => {
+                              navigator.clipboard.writeText(questChain.address);
+                              toast.success('Copied Quest Chain Address');
+                            }}
+                          />
+                        </Tooltip>
+                      </HStack>
                       <Flex align="center" gap={3}>
                         <TwitterShareButton
                           url={QCURL}