diff --git a/src/components/CopyClipboard/index.tsx b/src/components/CopyClipboard/index.tsx
new file mode 100644
index 0000000..9eacf6d
--- /dev/null
+++ b/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 (
+
+ {hasCopied ? (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ _hover={{
+ cursor: 'pointer',
+ }}
+ as={FiCheck}
+ color='light.600'
+ />
+ ) : (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ _hover={{
+ cursor: 'pointer',
+ }}
+ as={FiCopy}
+ color='light.600'
+ />
+ )}
+
+ );
+};
diff --git a/src/components/VaultAddress/index.tsx b/src/components/VaultAddress/index.tsx
new file mode 100644
index 0000000..c0c4764
--- /dev/null
+++ b/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 (
+ <>
+
+
+ {truncate(vault.contractAddress, 4, 14)}
+
+
+
+ >
+ );
+ }
+};
diff --git a/src/pages/d/[dao]/vault.tsx b/src/pages/d/[dao]/vault.tsx
index 9f4047f..09ea563 100644
--- a/src/pages/d/[dao]/vault.tsx
+++ b/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 = () => {
-
- Assets
-
+
+
+ Vault
+
+ {}
+
View and initiate proposals from a list of assets managed by the
DAO