Account metadata header (#776)
* get all neded data for the header from 3box, aqua and subgraph
* fix tvl display error
* WIP metadata header styling
* added more styling for the header
* make page title optional so we can remove it on account page
* stroke change for svg images and default values
* more styling added to the header
* fixed linter
* added ocean balance to tvl
* update styling for statistcs
* fixed eror for go to my account from another account page
* updated styling for mobile use
* wip show more on explorer links and description
* properly display read more for explorer links and description
* replaced show more with 3box redirect on description
* change accounts default picture and check links length before display element
* use optional on links
* grid cleanup, new number unit, split up stats
* rename all the things, more profile header styling
* visual hierarchy, improve image loading experience
* layout flow & visual tweaks
* more description
* replaced account route with profile when accesing a profile by the eth address
* use account id from url if exists when fetching data
* bump @oceanprotocol/art to v3.2.0
* styling, fallbacks, edge case fixes
* clean up Publisher atom, link to profile page
* fixed issue when switching to my profile from another profile
* output accountId, make it copyable, remove stats icons
* render tweaks, markup cleanup
* add 3box reference
* mobile tabs spacing tweaks
* text flow and spacing tweaks
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2021-09-01 13:56:34 +02:00
|
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
|
|
|
import styles from './Copy.module.css'
|
2021-10-27 12:27:14 +02:00
|
|
|
import IconCopy from '@images/copy.svg'
|
2022-05-12 12:35:07 +02:00
|
|
|
import Clipboard from 'react-clipboard.js'
|
Account metadata header (#776)
* get all neded data for the header from 3box, aqua and subgraph
* fix tvl display error
* WIP metadata header styling
* added more styling for the header
* make page title optional so we can remove it on account page
* stroke change for svg images and default values
* more styling added to the header
* fixed linter
* added ocean balance to tvl
* update styling for statistcs
* fixed eror for go to my account from another account page
* updated styling for mobile use
* wip show more on explorer links and description
* properly display read more for explorer links and description
* replaced show more with 3box redirect on description
* change accounts default picture and check links length before display element
* use optional on links
* grid cleanup, new number unit, split up stats
* rename all the things, more profile header styling
* visual hierarchy, improve image loading experience
* layout flow & visual tweaks
* more description
* replaced account route with profile when accesing a profile by the eth address
* use account id from url if exists when fetching data
* bump @oceanprotocol/art to v3.2.0
* styling, fallbacks, edge case fixes
* clean up Publisher atom, link to profile page
* fixed issue when switching to my profile from another profile
* output accountId, make it copyable, remove stats icons
* render tweaks, markup cleanup
* add 3box reference
* mobile tabs spacing tweaks
* text flow and spacing tweaks
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2021-09-01 13:56:34 +02:00
|
|
|
|
|
|
|
export default function Copy({ text }: { text: string }): ReactElement {
|
|
|
|
const [isCopied, setIsCopied] = useState(false)
|
|
|
|
|
|
|
|
// Clear copy success style after 5 sec.
|
|
|
|
useEffect(() => {
|
|
|
|
if (!isCopied) return
|
|
|
|
|
|
|
|
const timeout = setTimeout(() => {
|
|
|
|
setIsCopied(false)
|
|
|
|
}, 5000)
|
|
|
|
|
|
|
|
return () => clearTimeout(timeout)
|
|
|
|
}, [isCopied])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Clipboard
|
|
|
|
data-clipboard-text={text}
|
|
|
|
button-title="Copy to clipboard"
|
|
|
|
onSuccess={() => setIsCopied(true)}
|
|
|
|
className={`${styles.button} ${isCopied ? styles.copied : ''}`}
|
|
|
|
>
|
2022-03-16 20:01:51 +01:00
|
|
|
<div className={styles.action}>
|
|
|
|
<IconCopy className={styles.icon} />
|
|
|
|
{isCopied && <span className={styles.feedback}>Copied!</span>}
|
|
|
|
</div>
|
Account metadata header (#776)
* get all neded data for the header from 3box, aqua and subgraph
* fix tvl display error
* WIP metadata header styling
* added more styling for the header
* make page title optional so we can remove it on account page
* stroke change for svg images and default values
* more styling added to the header
* fixed linter
* added ocean balance to tvl
* update styling for statistcs
* fixed eror for go to my account from another account page
* updated styling for mobile use
* wip show more on explorer links and description
* properly display read more for explorer links and description
* replaced show more with 3box redirect on description
* change accounts default picture and check links length before display element
* use optional on links
* grid cleanup, new number unit, split up stats
* rename all the things, more profile header styling
* visual hierarchy, improve image loading experience
* layout flow & visual tweaks
* more description
* replaced account route with profile when accesing a profile by the eth address
* use account id from url if exists when fetching data
* bump @oceanprotocol/art to v3.2.0
* styling, fallbacks, edge case fixes
* clean up Publisher atom, link to profile page
* fixed issue when switching to my profile from another profile
* output accountId, make it copyable, remove stats icons
* render tweaks, markup cleanup
* add 3box reference
* mobile tabs spacing tweaks
* text flow and spacing tweaks
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2021-09-01 13:56:34 +02:00
|
|
|
</Clipboard>
|
|
|
|
)
|
|
|
|
}
|