react-icons/fi#FiCopy TypeScript Examples

export default function CopyHelper({ toCopy, children = null }) {
  const [isCopied, setCopied] = useCopyClipboard();

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      <TransactionStatusText>
        {children} {isCopied ? <FiCheckCircle /> : <FiCopy />}
      </TransactionStatusText>
    </CopyIcon>
  );
}

CopyableInput: React.FC<CopyableInputProps> = ({ value, ...rest }) => {
    const { t } = useTranslation();

    const [wasCopied, setWasCopied] = useState(false);
    const copy = async () => {
        await navigator.clipboard.writeText(value);
        setWasCopied(true);
    };

    return (
        <div css={{ display: "flex" }} {...rest}>
            <input disabled value={value} css={{
                ...style(false),
                padding: "4px 10px",
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
                verticalAlign: "bottom",
                borderRight: "none",
                flex: "1",
            }} />
            {/* TODO: use BaseButton or sth once merged */}
            <Button
                kind="happy"
                onClick={copy}
                title={t("copy-to-clipboard")}
                css={{
                    borderTopLeftRadius: 0,
                    borderBottomLeftRadius: 0,
                    height: 34,
                }}
            >
                {wasCopied ? <FiCheck /> : <FiCopy />}
            </Button>
        </div>
    );
}

export default function WalletInfoBox({ openOptions }: Props) {
  const { account, connector, chainId } = useWeb3React();
  const { ensName, imageUrl } = useENSAvatar(account, MAINNET_ID);
  const [isCopied, copyAddress] = useClipboard(account, 3000);

  const networkName = NETWORK_NAMES[chainId];

  return (
    <Wrapper>
      <ConnectionStatusRow>
        <ConnectionStatusText>
          <LiveIndicator />
          Connected to {findWalletType(connector)}
        </ConnectionStatusText>
        {isDesktop && (
          <div>
            <Button onClick={openOptions}>Change</Button>
          </div>
        )}
      </ConnectionStatusRow>

      <WalletAddressRow>
        <IconHolder>
          <Avatar src={imageUrl} defaultSeed={account} size={24} />
        </IconHolder>
        <AddressText>{ensName || shortenAddress(account)}</AddressText>
      </WalletAddressRow>

      <Row>
        <ConnectionActionButton
          variant="minimal"
          onClick={copyAddress}
          iconLeft
        >
          {isCopied ? <FiCheckCircle /> : <FiCopy />}
          {isCopied ? 'Copied Address!' : 'Copy Address'}
        </ConnectionActionButton>

        <ExternalLink
          href={getBlockchainLink(account, networkName, 'address')}
          target="_blank"
        >
          <ConnectionActionButton variant="minimal" iconLeft>
            <FiExternalLink />
            View on Explorer
          </ConnectionActionButton>
        </ExternalLink>
      </Row>
      {isMobile && (
        <CenteredButton onClick={openOptions}>Change Connection</CenteredButton>
      )}
    </Wrapper>
  );
}

Home: React.FC = () => {
  const { t } = useTranslation('Home')

  const [copiedImageURL, setCopiedImageURL] = useState('')
  const [isCopyingFirstImage, setIsCopyingFirstImage] = useState(false)
  const [isCopyingSecondImage, setIsCopyingSecondImage] = useState(false)

  const firstImageRef = useRef<HTMLImageElement | null>(null)
  const secondImageRef = useRef<HTMLImageElement | null>(null)

  const handleCopyFirstImage = async () => {
    try {
      setIsCopyingFirstImage(true)
      const imageSrc = firstImageRef.current?.src
      if (imageSrc) await copyImageToClipboard(imageSrc)
    } catch (e: any) {
      if (e?.message) alert(e.message)
    } finally {
      setIsCopyingFirstImage(false)
    }
  }

  const handleCopySecondImage = async () => {
    try {
      setIsCopyingSecondImage(true)
      const imageSrc = secondImageRef.current?.src
      if (imageSrc) await copyImageToClipboard(imageSrc)
    } catch (e: any) {
      if (e?.message) alert(e.message)
    } finally {
      setIsCopyingSecondImage(false)
    }
  }

  const handleTransformDataTransferIntoURL = (
    dataTransfer: DataTransfer,
  ): string => {
    const [firstItem] = dataTransfer.items
    const blob = firstItem.getAsFile()
    return URL.createObjectURL(blob)
  }

  const handlePaste = (e: unknown) => {
    const event = e as ClipboardEvent
    if (event.clipboardData) {
      const url = handleTransformDataTransferIntoURL(event.clipboardData)
      setCopiedImageURL(url)
    }
  }

  useEffect(() => {
    const handlePasteOnDocument = (e: ClipboardEvent) => {
      if (e.clipboardData) {
        const url = handleTransformDataTransferIntoURL(e.clipboardData)
        setCopiedImageURL(url)
      }
    }

    document.addEventListener('paste', handlePasteOnDocument)

    return () => {
      document.removeEventListener('paste', handlePasteOnDocument)
    }
  })

  return (
    <Container>
      <Content>
        <Item>
          <Image
            ref={firstImageRef}
            src={FirstImage}
            draggable={false}
            alt={t('firstImageAlt')}
          />

          <CopyButton onClick={handleCopyFirstImage}>
            <span>{t('copyJpgImage')}</span>
            {isCopyingFirstImage ? <WhiteSpinner /> : <FiCopy />}
          </CopyButton>
        </Item>

        <Item>
          <Image
            ref={secondImageRef}
            src={SecondImage}
            draggable={false}
            alt={t('secondImageAlt')}
          />

          <CopyButton onClick={handleCopySecondImage}>
            <span>{t('copyPngImage')}</span>
            {isCopyingSecondImage ? <WhiteSpinner /> : <FiCopy />}
          </CopyButton>
        </Item>
      </Content>

      <Paste onPaste={handlePaste}>
        {copiedImageURL ? (
          <PasteImage src={copiedImageURL} alt={t('pasteImageAlt')} />
        ) : (
          <PasteText>{t('pasteText')}</PasteText>
        )}
      </Paste>
    </Container>
  )
}

ButtonCopyToClipboard = (props: Props) => {
  const [copyStatus, setCopyStatus] = useState(false);

  async function copyToClipboard(textToCopy: string) {
    if (!navigator.clipboard) {
      try {
        const textField = document.createElement('textarea');
        textField.textContent = textToCopy;
        document.body.appendChild(textField);
        textField.select();
        document.execCommand('copy');
        textField.remove();
        if (isUndefined(props.noTooltip) || !props.noTooltip) {
          setCopyStatus(true);
        }
      } catch {
        setCopyStatus(false);
      }
    } else {
      try {
        await navigator.clipboard.writeText(textToCopy);
        if (isUndefined(props.noTooltip) || !props.noTooltip) {
          setCopyStatus(true);
        }
      } catch {
        setCopyStatus(false);
      }
    }
  }

  useEffect(() => {
    let timeout: NodeJS.Timeout;
    if (copyStatus) {
      // Hide tooltip after 2s
      timeout = setTimeout(() => setCopyStatus(false), 2 * 1000);
    }

    return () => {
      if (!isUndefined(timeout)) {
        clearTimeout(timeout);
      }
    };
  }, [copyStatus]);

  return (
    <div className={`position-relative ${props.wrapperClassName}`}>
      {copyStatus && (
        <div
          className={classnames(
            'tooltip bs-tooltip-bottom show end-0',
            styles.tooltip,
            props.tooltipClassName,
            {
              [styles.isDark]: isUndefined(props.tooltipType) || props.tooltipType !== 'light',
            },
            {
              [styles.isLight]: !isUndefined(props.tooltipType) && props.tooltipType === 'light',
            }
          )}
          role="tooltip"
        >
          <div className={`tooltip-arrow ${styles.tooltipArrow} ${props.arrowClassName}`} />
          <div className={`tooltip-inner ${styles.tooltipContent}`}>Copied!</div>
        </div>
      )}
      <button
        type="button"
        className={classnames(
          'btn btn-sm',
          { [`btn-primary rounded-circle ${styles.btn}`]: isUndefined(props.className) },
          props.className
        )}
        style={props.style}
        onClick={(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
          e.preventDefault();
          e.stopPropagation();
          copyToClipboard(props.text);
          if (props.onClick) {
            props.onClick();
          }
        }}
        disabled={props.disabled}
        aria-label={props.label || 'Copy to clipboard'}
      >
        <div className="d-flex flex-row align-items-center" aria-hidden="true">
          {!isUndefined(props.visibleBtnText) && props.visibleBtnText && props.contentBtn && (
            <div className="me-2">{props.contentBtn}</div>
          )}
          {props.icon ? <>{props.icon}</> : <FiCopy />}
          {!isUndefined(props.visibleBtnText) && props.visibleBtnText && isUndefined(props.contentBtn) && (
            <div className="ms-2">Copy to clipboard</div>
          )}
        </div>
      </button>
    </div>
  );
}