Enhancements/vault address

src/components/CopyClipboard/index.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Box, Icon, useClipboard } from '@chakra-ui/react';
+import { FiCopy, FiCheck } from 'react-icons/fi';
+
+// Animation
+import { motion } from 'framer-motion';
+
+const FADE_IN_VARIANTS = {
+  hidden: { opacity: 1, x: 0, y: 0 },
+  enter: { opacity: 1, x: 0, y: 0 },
+  exit: { opacity: 1, x: 0, y: 0 },
+};
+
+export const CopyClipboard = (props: any) => {
+  const [isHovered, setHovered] = useState(false);
+  const [value, setValue] = useState(props.contractAddress);
+  const { hasCopied, onCopy } = useClipboard(value);
+
+  return (
+    <motion.div
+      variants={FADE_IN_VARIANTS}
+      initial={FADE_IN_VARIANTS.hidden}
+      animate={FADE_IN_VARIANTS.enter}
+      exit={FADE_IN_VARIANTS.exit}
+      transition={{ duration: 0.25, type: 'linear' }}
+      whileHover={{
+        scale: 1.1,
+      }}
+      whileTap={{
+        scale: 1,
+      }}
+      onClick={onCopy}
+    >
+      {hasCopied ? (
+        <Icon
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          _hover={{
+            cursor: 'pointer',
+          }}
+          as={FiCheck}
+          color='light.600'
+        />
+      ) : (
+        <Icon
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          _hover={{
+            cursor: 'pointer',
+          }}
+          as={FiCopy}
+          color='light.600'
+        />
+      )}
+    </motion.div>
+  );
+};

src/components/VaultAddress/index.tsx

@@ -0,0 +1,31 @@
+import { HStack, Text } from '@chakra-ui/react';
+import { useExtension } from '@common/queries';
+import { CopyClipboard } from '@components/CopyClipboard';
+
+//helpers
+import { truncate } from '@common/helpers';
+
+export const VaultAddress = () => {
+  const {
+    isFetching,
+    isIdle,
+    isLoading,
+    isError,
+    extension: vault,
+  } = useExtension('Vault');
+
+  if (isFetching || isIdle || isLoading || isError) {
+    return null;
+  } else {
+    return (
+      <>
+        <HStack align='baseline'>
+          <Text fontSize='xs' color='light.600'>
+            {truncate(vault.contractAddress, 4, 14)}
+          </Text>
+          <CopyClipboard contractAddress={vault.contractAddress} />
+        </HStack>
+      </>
+    );
+  }
+};

src/pages/d/[dao]/vault.tsx

@@ -10,6 +10,7 @@ import {
   TabList,
   TabPanel,
   TabPanels,
+  HStack,
 } from '@chakra-ui/react';
 
 // Components
@@ -18,6 +19,7 @@ import { AssetTable } from '@components/AssetTable';
 import { Header } from '@components/Header';
 import { SectionHeader } from '@components/SectionHeader';
 import { Wrapper } from '@components/Wrapper';
+import { VaultAddress } from '@components/VaultAddress';
 
 //  Animation
 import { motion } from 'framer-motion';
@@ -43,9 +45,12 @@ const Vault = () => {
       <Wrapper>
         <SectionHeader justify='space-between' align='center' color='white'>
           <Box>
-            <Text fontSize='lg' fontWeight='medium'>
-              Assets
-            </Text>
+            <HStack justify='flex-start'>
+              <Text fontSize='lg' fontWeight='medium'>
+                Vault
+              </Text>
+              {<VaultAddress />}
+            </HStack>
             <Text color='gray.900' fontSize='sm'>
               View and initiate proposals from a list of assets managed by the
               DAO