@material-ui/icons#Check TypeScript Examples

The following examples show how to use @material-ui/icons#Check. 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: WalletContent.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up 
export function WalletContentBase(props: WalletContentProps) {
  const {
    className,
    children,
    walletAddress,
    connectionName,
    connectionIcon,
    readonly,
    onDisconnectWallet,
  } = props;

  const [isCopied, setCopied] = useClipboard(walletAddress, {
    successDuration: 1000 * 5,
  });

  return (
    <div className={className}>
      <section className="header">
        <ConnectionIcons
          className="wallet-icon"
          name={connectionName}
          icon={connectionIcon}
          readonly={readonly}
        />
        <h2 className="wallet-address">{truncate(walletAddress)}</h2>
        <button className="copy-wallet-address" onClick={setCopied}>
          <IconSpan>COPY ADDRESS {isCopied && <Check />}</IconSpan>
        </button>
      </section>
      <section className="children">{children}</section>
      <button className="disconnect" onClick={onDisconnectWallet}>
        Disconnect
      </button>
    </div>
  );
}
Example #2
Source File: styles.tsx    From twilio-voice-notification-app with Apache License 2.0 6 votes vote down vote up 
WizardStepIcon = ({
  icon,
  active,
  completed,
}: WizardIconProps) => {
  const classes = useIconStyles({ active, completed });
  return (
    <div className={classes.step}>
      {completed && !active ? <Check /> : icon}
    </div>
  );
}
Example #3
Source File: Summary.tsx    From UsTaxes with GNU Affero General Public License v3.0 6 votes vote down vote up 
BinaryStateListItem = ({
  active,
  children
}: BinaryStateListItemProps): ReactElement => {
  return (
    <Grid container spacing={3}>
      <Grid item style={{ margin: 'auto' }}>
        <Avatar>
          {active ? (
            <Check titleAccess="Eligible" />
          ) : (
            <Close titleAccess="Ineligible" />
          )}
        </Avatar>
      </Grid>
      <Grid item xs zeroMinWidth>
        {children}
      </Grid>
    </Grid>
  )
}
Example #4
Source File: UserSettings.tsx    From UsTaxes with GNU Affero General Public License v3.0 6 votes vote down vote up 
UserSettings = (): ReactElement => {
  const dispatch = useDispatch()
  const [done, setDone] = useState(false)

  return (
    <>
      <h2>User Settings</h2>
      <h3>Save data</h3>
      <p>Save your data for backup or to import into desktop application</p>
      <SaveToFile variant="contained" color="primary">
        Save data to file
      </SaveToFile>
      <h3>Load data</h3>
      <p>
        Load your saved data from a file. Warning, this will overwrite present
        state.
      </p>
      <LoadRaw
        startIcon={done ? <Check /> : undefined}
        accept="*.json"
        handleData={(state) => {
          if (!done) {
            dispatch(fsRecover(state))
            setDone(true)
          }
        }}
        variant="contained"
        color="primary"
      >
        Load
      </LoadRaw>
    </>
  )
}
Example #5
Source File: TransactionDisplay.tsx    From anchor-web-app with Apache License 2.0 5 votes vote down vote up 
function TransactionDisplayBase(props: TransactionDisplayProps) {
  const { className, tx } = props;

  const [isCopied, setCopied] = useClipboard(tx.txHash, {
    successDuration: 2000,
  });

  const [countdown, { start, stop }] = useCountdown({
    seconds: differenceInSeconds(new Date(), tx.display.timestamp),
    interval: 1000,
    isIncrement: true,
  });

  useEffect(() => {
    start();

    return () => {
      stop();
    };
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={className} key={tx.txHash}>
      <div className="details">
        <span className="action">{formatTxKind(tx.display.txKind)}</span>
        <div className="amount">{tx.display.amount ?? 'Unknown'}</div>
      </div>

      <div className="more-details">
        <span className="tx-hash" onClick={setCopied}>
          <span className="hash">{truncateEvm(tx.txHash)}</span>
          {isCopied && (
            <IconSpan className="copy">
              <Check /> Copied
            </IconSpan>
          )}
        </span>
        <div className="timestamp">
          {formatEllapsedSimple(countdown * 1000)}
        </div>
      </div>

      <TransactionProgress
        stepCount={txStepCount(tx)}
        currStep={tx.lastEventKind}
      />
    </div>
  );
}
Example #6
Source File: icons.tsx    From jupyter-extensions with Apache License 2.0 5 votes vote down vote up 
GreenCheck = withStyles({
  root: {
    color: COLORS.green,
    fontSize: '16px',
  },
})(Check)
Example #7
Source File: status_icons.tsx    From jupyter-extensions with Apache License 2.0 5 votes vote down vote up 
GreenCheck = withStyles({
  root: {
    color: COLORS.green,
    fontSize: '16px',
  },
})(Check)
Example #8
Source File: SelectPostageStampModal.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
export function SelectPostageStampModal({ stamps, onSelect, onClose }: Props): ReactElement {
  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)

  const classes = useStyles()

  function onChange(stampId: string) {
    const stamp = stamps.find(x => x.batchID === stampId)

    if (stamp) {
      setSelectedStamp(stamp)
    }
  }

  function onFinish() {
    if (selectedStamp) {
      onSelect(selectedStamp)
      onClose()
    }
  }

  return (
    <Dialog
      open={true}
      onClose={onClose}
      aria-labelledby="form-dialog-title"
      fullWidth
      PaperProps={{ className: classes.dialog }}
    >
      <DialogTitle id="form-dialog-title" className={classes.title}>
        Select postage stamp
      </DialogTitle>
      <DialogContent>
        <SwarmSelect
          options={stamps.map(x => ({ label: x.batchID, value: x.batchID }))}
          onChange={event => onChange(event.target.value as string)}
        />
      </DialogContent>
      <DialogContent>
        <ExpandableListItemActions>
          <Button disabled={!selectedStamp} onClick={onFinish} variant="contained" startIcon={<Check />}>
            Select
          </Button>
          <Button onClick={onClose} variant="contained" startIcon={<Clear />}>
            Cancel
          </Button>
        </ExpandableListItemActions>
      </DialogContent>
    </Dialog>
  )
}