react-feather#CheckCircle JavaScript Examples

The following examples show how to use react-feather#CheckCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Copy.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper({ toCopy }) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
    </CopyIcon>
  )
}
Example #2
Source File: index.js    From spooky-info with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper({ toCopy }) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <StyledIcon>
            <CheckCircle size={'14'} />
          </StyledIcon>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <StyledIcon>
            <Copy size={'14'} />
          </StyledIcon>
        </TransactionStatusText>
      )}
    </CopyIcon>
  )
}
Example #3
Source File: AddressViewer.js    From ucurtmetre with GNU General Public License v3.0 6 votes vote down vote up 
function AddressViewer({ data, title = 'BiLira Cüzdanı' }) {
  const { onCopy, hasCopied } = useClipboard(data);

  return (
    <div className="address-container">
      <a
        mr={4}
        target="_blank"
        rel="noopener noreferrer"
        href={`https://etherscan.io/address/${data}`}
      >
        <div className="qr-container">
          <QRCode
            bgColor="#FFFFFF"
            fgColor="#000000"
            level="Q"
            style={{ width: 200, padding: '1rem' }}
            value={data}
          />
        </div>
      </a>
      <div className="address">
        <h3>{title}</h3>
        <p>
          {data}
          <button onClick={onCopy} type="button" className="button">
            {hasCopied ? <CheckCircle /> : <Clipboard />}
          </button>
        </p>
      </div>
    </div>
  );
}
Example #4
Source File: EthereumWallet.js    From ucurtmetre with GNU General Public License v3.0 6 votes vote down vote up 
function EthereumWallet() {
  return (
    <>
      <Alert
        variant="success"
        message="Bu cüzdana ERC20 kökenli bütün tokenlar ile ödeme
    yapabilirsiniz."
        icon={<CheckCircle />}
      />
      <AddressViewer
        title="Ethereum Cüzdanı"
        data="0xaEf4bB2D11058a627468fDECC6D7E45CC75997c5"
      />
    </>
  );
}
Example #5
Source File: InstallBar.js    From popper.js.org with MIT License 6 votes vote down vote up 
CopyTextToClipboardWrapper = ({ text }) => {
  const { reference, popper } = usePopper({
    placement: 'bottom'
  });

  const [showValidationTooltip, setShowValidationTooltip] = React.useState(false)

  const copyToClipboard = () => {
    setClipboard(text); 
    setShowValidationTooltip(true);
    setTimeout(() => {
      setShowValidationTooltip(false)
    }, 1000)
  }

  return (
    <>
      <TextWrapper ref={reference} onClick={copyToClipboard}>{text}</TextWrapper>
      <Tooltip style={{opacity: showValidationTooltip ? 1 : 0}} ref={popper}>
        <TooltipName><CheckCircle />Copied to clipboard!</TooltipName>
        <Arrow data-popper-arrow />
      </Tooltip>
    </>
  )
}
Example #6
Source File: Copy.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper(props) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(props.toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
      {isCopied ? '' : props.children}
    </CopyIcon>
  )
}
Example #7
Source File: Copy.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper({ toCopy }) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
    </CopyIcon>
  )
}
Example #8
Source File: index.js    From docz-theme-extended with MIT License 5 votes vote down vote up 
icons = {
  default: Info,
  info: Info,
  warning: AlertTriangle,
  success: CheckCircle,
  danger: XCircle,
}
Example #9
Source File: 3.9.0.jsx    From vertx-web-site.github.io with Apache License 2.0 5 votes vote down vote up 
categories = [
  {
    id: "core",
    name: "Core",
    icon: <Box />
  },
  {
    id: "web",
    name: "Web",
    icon: <Globe />
  },
  {
    id: "databases",
    name: "Databases",
    icon: <Database />
  },
  {
    id: "reactive",
    name: "Reactive",
    icon: <Feather />
  },
  {
    id: "microservices",
    name: "Microservices",
    icon: <Search />
  },
  {
    id: "mqtt",
    name: "MQTT",
    icon: <Inbox />
  },
  {
    id: "authentication-and-authorization",
    name: "Authentication and authorization",
    icon: <Key />
  },
  {
    id: "messaging",
    name: "Messaging",
    icon: <Send />
  },
  {
    id: "integration",
    name: "Integration",
    icon: <Inbox />
  },
  {
    id: "event-bus-bridges",
    name: "Event bus bridges",
    icon: <Share2 />
  },
  {
    id: "devops",
    name: "DevOps",
    icon: <Terminal />
  },
  {
    id: "testing",
    name: "Testing",
    icon: <CheckCircle />
  },
  {
    id: "clustering",
    name: "Clustering",
    icon: <Grid />
  },
  {
    id: "services",
    name: "Services",
    icon: <PhoneCall />
  }
]