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