From 712c57a73f56d24046b749c9f00a697e8faafaf2 Mon Sep 17 00:00:00 2001 From: nate buch Date: Tue, 19 Jul 2022 23:38:42 -0500 Subject: [PATCH 1/5] Add address and copy to clipboard button --- src/components/CopyClipboard/index.tsx | 14 +++++++++++ src/components/VaultAddress/index.tsx | 32 ++++++++++++++++++++++++++ src/pages/d/[dao]/vault.tsx | 11 ++++++--- 3 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 src/components/CopyClipboard/index.tsx create mode 100644 src/components/VaultAddress/index.tsx diff --git a/src/components/CopyClipboard/index.tsx b/src/components/CopyClipboard/index.tsx new file mode 100644 index 0000000..41cac1e --- /dev/null +++ b/src/components/CopyClipboard/index.tsx @@ -0,0 +1,14 @@ +import { IconButton } from '@chakra-ui/react'; +import { FiCopy } from 'react-icons/fi'; + +export const CopyClipboard = (props: any) => ( + } + color='light.900' + bg='transparent' + onClick={() => { + navigator.clipboard.writeText(props.contractAddress); + }} + /> +); diff --git a/src/components/VaultAddress/index.tsx b/src/components/VaultAddress/index.tsx new file mode 100644 index 0000000..f1bb863 --- /dev/null +++ b/src/components/VaultAddress/index.tsx @@ -0,0 +1,32 @@ +import { HStack, Text } from '@chakra-ui/react'; +import { useExtension } from '@common/queries'; +import { CopyClipboard } from '@components/CopyClipboard'; + +export const VaultAddress = () => { + const { + isFetching, + isIdle, + isLoading, + isError, + extension: vault, + } = useExtension('Vault'); + + console.log('F', isFetching, 'i', isIdle, 'L', isLoading, 'e', isError); + + if (isFetching || isIdle || isLoading || isError) { + return null; + } else { + return ( + <> + + + {vault.contractAddress.slice(0, 5) + + '...' + + vault.contractAddress.slice(37)} + + + + + ); + } +}; diff --git a/src/pages/d/[dao]/vault.tsx b/src/pages/d/[dao]/vault.tsx index 9f4047f..5b73cee 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 From c3a51f3a83a4592c16346ffdd984ebecbf8caec2 Mon Sep 17 00:00:00 2001 From: nate buch Date: Wed, 20 Jul 2022 22:22:31 -0500 Subject: [PATCH 2/5] Remove button and add motion, changed style and positioning of address --- src/components/CopyClipboard/index.tsx | 71 +++++++++++++++++++++----- src/components/VaultAddress/index.tsx | 6 +-- src/pages/d/[dao]/vault.tsx | 2 +- 3 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/components/CopyClipboard/index.tsx b/src/components/CopyClipboard/index.tsx index 41cac1e..2f8bba8 100644 --- a/src/components/CopyClipboard/index.tsx +++ b/src/components/CopyClipboard/index.tsx @@ -1,14 +1,57 @@ -import { IconButton } from '@chakra-ui/react'; -import { FiCopy } from 'react-icons/fi'; - -export const CopyClipboard = (props: any) => ( - } - color='light.900' - bg='transparent' - onClick={() => { - navigator.clipboard.writeText(props.contractAddress); - }} - /> -); +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 index f1bb863..d04d911 100644 --- a/src/components/VaultAddress/index.tsx +++ b/src/components/VaultAddress/index.tsx @@ -11,15 +11,13 @@ export const VaultAddress = () => { extension: vault, } = useExtension('Vault'); - console.log('F', isFetching, 'i', isIdle, 'L', isLoading, 'e', isError); - if (isFetching || isIdle || isLoading || isError) { return null; } else { return ( <> - - + + {vault.contractAddress.slice(0, 5) + '...' + vault.contractAddress.slice(37)} diff --git a/src/pages/d/[dao]/vault.tsx b/src/pages/d/[dao]/vault.tsx index 5b73cee..09ea563 100644 --- a/src/pages/d/[dao]/vault.tsx +++ b/src/pages/d/[dao]/vault.tsx @@ -45,7 +45,7 @@ const Vault = () => { - + Vault From 21cb8fdf31a793c3767819a4323f047e5d862200 Mon Sep 17 00:00:00 2001 From: nate buch Date: Fri, 22 Jul 2022 20:26:42 -0500 Subject: [PATCH 3/5] Address pr notes --- src/components/CopyClipboard/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CopyClipboard/index.tsx b/src/components/CopyClipboard/index.tsx index 2f8bba8..9eacf6d 100644 --- a/src/components/CopyClipboard/index.tsx +++ b/src/components/CopyClipboard/index.tsx @@ -26,9 +26,9 @@ export const CopyClipboard = (props: any) => { whileHover={{ scale: 1.1, }} - // whileTap={{ - // scale: 1, - // }} + whileTap={{ + scale: 1, + }} onClick={onCopy} > {hasCopied ? ( From feede738d4b2de8aad86e89cf6e06aa70645bf2d Mon Sep 17 00:00:00 2001 From: nate buch Date: Fri, 22 Jul 2022 20:56:54 -0500 Subject: [PATCH 4/5] Use helper function for address display --- src/components/VaultAddress/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/VaultAddress/index.tsx b/src/components/VaultAddress/index.tsx index d04d911..f9b96eb 100644 --- a/src/components/VaultAddress/index.tsx +++ b/src/components/VaultAddress/index.tsx @@ -2,6 +2,9 @@ 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, @@ -18,9 +21,7 @@ export const VaultAddress = () => { <> - {vault.contractAddress.slice(0, 5) + - '...' + - vault.contractAddress.slice(37)} + {truncate(vault.contractAddress, 4, 14)} @@ -28,3 +29,7 @@ export const VaultAddress = () => { ); } }; + +// {vault.contractAddress.slice(0, 5) + +// '...' + +// vault.contractAddress.slice(37)} From 7b5c8128033a0619f2e56f452673673407003bfa Mon Sep 17 00:00:00 2001 From: nate buch Date: Fri, 22 Jul 2022 20:57:43 -0500 Subject: [PATCH 5/5] Remove notes --- src/components/VaultAddress/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/VaultAddress/index.tsx b/src/components/VaultAddress/index.tsx index f9b96eb..c0c4764 100644 --- a/src/components/VaultAddress/index.tsx +++ b/src/components/VaultAddress/index.tsx @@ -29,7 +29,3 @@ export const VaultAddress = () => { ); } }; - -// {vault.contractAddress.slice(0, 5) + -// '...' + -// vault.contractAddress.slice(37)}