@material-ui/core#Fade TypeScript Examples

The following examples show how to use @material-ui/core#Fade. 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: PlanDetails.tsx    From SeeQR with MIT License 6 votes vote down vote up 
PlanDetails = ({ plan, open, handleClose }: PlanDetailsProps) => (
  <StyledModal
    aria-labelledby="transition-modal-title"
    aria-describedby="transition-modal-description"
    open={open}
    onClose={handleClose}
    closeAfterTransition
    BackdropComponent={Backdrop}
    BackdropProps={{
      timeout: 500,
    }}
  >
    <Fade in={open}>
      <TableContainer component={LightPaper}>
        <Table size="small">
          <TableBody>{detailRows(plan)}</TableBody>
        </Table>
      </TableContainer>
    </Fade>
  </StyledModal>
)
Example #2
Source File: Dashboard.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
renderPreviewEmpty(msg: string, size?: LayoutSize): Section {
    return {
      name: 'preview',
      breakAction: 'drawer',
      size: size || { breakWidth: 350, flexGrow: 100, maxWidth: 1024 },
      content: (
        <Fade key={msg} in appear>
          <div className={this.props.classes.previewEmptyMessage}>
            <Typography component='div' variant='h5'>
              {msg}
            </Typography>
            <EmptyIcon
              fontSize='inherit'
              className={this.props.classes.previewEmptyIcon}
            />
          </div>
        </Fade>
      ),
    };
  }
Example #3
Source File: index.tsx    From uno-game with MIT License 6 votes vote down vote up 
LoadingComponent: React.FC<LoadingComponentProps> = (props) => {
	const { children, loading, customLoadingElement } = props

	const classes = useStyles()

	let component

	if (loading) {
		if (customLoadingElement) {
			component = customLoadingElement
		} else {
			component = (
				<Grid
					container
					justify="center"
					alignItems="center"
					className={classes.defaultLoadingContainer}
				>
					<CircularProgress color="primary" />
				</Grid>
			)
		}
	} else {
		component = (
			<Fade in={!loading}>
				{children}
			</Fade>
		)
	}

	return component
}
Example #4
Source File: CustomModal.tsx    From interface-v2 with GNU General Public License v3.0 6 votes vote down vote up 
CustomModal: React.FC<CustomModalProps> = ({
  open,
  onClose,
  children,
  background,
  overflow,
}) => {
  const classes = useStyles({ background, overflow });
  return (
    <Modal
      open={open}
      onClose={onClose}
      BackdropComponent={Backdrop}
      BackdropProps={{ timeout: 500 }}
    >
      <Fade in={open}>
        <Box className={classes.wrapper}>{children}</Box>
      </Fade>
    </Modal>
  );
}
Example #5
Source File: index.tsx    From lobis-frontend with MIT License 6 votes vote down vote up 
function Airdrop({ merkleIndex }: any) {
    return (
        <Grid className="airdrop-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <AirdropHeader />
                        <AirdropClaim merkleIndex={merkleIndex} />
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}
Example #6
Source File: TableCell.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
export default function RichText({ column, value }: IHeavyCellProps) {
  const { tableState } = useFiretableContext();
  const classes = useStyles({
    width: column.width,
    rowHeight: tableState?.config?.rowHeight ?? 44,
  });

  return (
    <Tooltip
      title={<RenderedHtml html={value} className={classes.renderedHtml} />}
      enterDelay={1000}
      placement="bottom-start"
      PopperProps={{
        modifiers: {
          flip: { enabled: false },
          preventOverflow: {
            enabled: false,
            boundariesElement: "scrollParent",
          },
          hide: { enabled: false },
        },
      }}
      TransitionComponent={Fade}
      classes={{ tooltip: classes.tooltip }}
    >
      <div className={classes.root}>
        <RenderedHtml html={value} className={classes.renderedHtml} />
      </div>
    </Tooltip>
  );
}
Example #7
Source File: StorageDrawer.tsx    From parity-bridges-ui with GNU General Public License v3.0 6 votes vote down vote up 
StorageDrawer = () => {
  const classes = useStyles();
  const { drawer, setDrawer } = useGUIContext();

  const handleDrawerOpen = useCallback(() => setDrawer(`${drawer === 'open' ? '' : 'open'}`), [drawer, setDrawer]);
  const handleDrawerClose = useCallback(() => setDrawer(''), [setDrawer]);

  return (
    <Box mt={4}>
      <ButtonDrawerMenu
        startIcon={<HistoryIcon />}
        onClick={handleDrawerOpen}
        color={drawer === 'open' ? 'primary' : 'secondary'}
      >
        History
      </ButtonDrawerMenu>
      <Fade in={drawer === 'open'} timeout={{ enter: 300, exit: 0 }}>
        <div className={classes.drawer}>
          <IconButton onClick={handleDrawerClose} color="secondary" className={classes.closeDrawerIcon}>
            <CloseIcon />
          </IconButton>
          {/*           <Transactions type={ }/> */}
        </div>
      </Fade>
    </Box>
  );
}
Example #8
Source File: SearchBar.tsx    From log4brains with Apache License 2.0 6 votes vote down vote up 
export function SearchBar(props: SearchBarProps) {
  const { InputProps, InputLabelProps, open, onClear, ...params } = props;
  const classes = useStyles(props);
  return (
    <InputBase
      placeholder="Search..."
      classes={{
        root: classes.inputRoot,
        input: classes.inputInput
      }}
      startAdornment={
        <InputAdornment position="start">
          <SearchIcon />
        </InputAdornment>
      }
      endAdornment={
        // eslint-disable-next-line react/destructuring-assignment
        <Fade in={open && props.inputProps.value !== ""}>
          <InputAdornment position="end">
            <IconButton
              onClick={(event) => onClear(event)}
              size="small"
              title="Clear"
              className={classes.clearIcon}
            >
              <ClearIcon />
            </IconButton>
          </InputAdornment>
        </Fade>
      }
      ref={InputProps.ref}
      {...params}
    />
  );
}
Example #9
Source File: Spinner.tsx    From knboard with MIT License 6 votes vote down vote up 
Spinner = ({ loading }: Props) => (
  <Fade
    in={loading}
    style={{
      transitionDelay: loading ? "800ms" : "0ms",
    }}
    unmountOnExit
    css={css`
      padding: 0.5rem;
    `}
  >
    <CircularProgress />
  </Fade>
)
Example #10
Source File: SideDrawerField.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
useStyles = makeStyles((theme) =>
  createStyles({
    dropzoneButton: {
      justifyContent: "flex-start",
      color: theme.palette.text.secondary,
      "& svg": { marginRight: theme.spacing(2) },
    },
    dropzoneDragActive: {
      backgroundColor: fade(
        theme.palette.primary.light,
        theme.palette.action.hoverOpacity * 2
      ),
      color: theme.palette.primary.main,
    },

    chipList: { marginTop: theme.spacing(1) },
    chipGridItem: { maxWidth: "100%" },
    chip: { width: "100%" },
  })
)
Example #11
Source File: MyButton.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
styles = (theme: Theme) => createStyles({
  button: {
    textTransform: 'unset',
  },
  icon: {
  },
  buttonPost: {
    padding: theme.spacing(0.5, 1),
    color: theme.palette.text.secondary,
    minWidth: 'unset',
    whiteSpace: 'nowrap',
    lineHeight: '24px',
    '&:not(:hover)': {
      borderColor: 'rgba(0,0,0,0)',
    },
  },
  iconPost: {
    fontSize: '1.3em',
  },
  color: {
    color: (props: Props) => props.color ? props.color : undefined,
    '&:hover': {
      backgroundColor: (props: Props) => props.color ? fade(props.color, 0.04) : undefined,
    }
  },
})
Example #12
Source File: OrderList.tsx    From ra-enterprise-demo with MIT License 6 votes vote down vote up 
orderRowStyle =
    (batchLevel, theme) =>
    (record): any => {
        let backgroundColor;
        switch (record.batch) {
            case batchLevel:
                backgroundColor =
                    theme.palette.type === 'light'
                        ? lighten(fade(theme.palette.info.light, 1), 0.68)
                        : darken(fade(theme.palette.info.dark, 1), 0.88);
                break;
            case 1:
                if (batchLevel > 0) {
                    backgroundColor =
                        theme.palette.type === 'light'
                            ? lighten(fade(theme.palette.info.light, 1), 0.78)
                            : darken(fade(theme.palette.info.dark, 1), 0.78);
                }
                break;
            default:
                backgroundColor = theme.palette.background.paper;
        }

        return {
            backgroundColor,
        };
    }
Example #13
Source File: index.tsx    From wonderland-frontend with MIT License 5 votes vote down vote up 
function Bond({ bond }: IBondProps) {
    const { address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onSlippageChange = (value: any) => {
        return setSlippage(value);
    };

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Fade in={true} mountOnEnter unmountOnExit>
            <Grid className="bond-view">
                <Backdrop open={true}>
                    <Fade in={true}>
                        <div className="bond-card">
                            <BondHeader bond={bond} slippage={slippage} onSlippageChange={onSlippageChange} />
                            {/* @ts-ignore */}
                            <Box direction="row" className="bond-price-data-row">
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">Mint Price</p>
                                    <p className="bond-price-data-value">
                                        {isBondLoading ? <Skeleton /> : bond.isLP || bond.name === "wavax" ? `$${trim(bond.bondPrice, 2)}` : `${trim(bond.bondPrice, 2)} MIM`}
                                    </p>
                                </div>
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">TIME Price</p>
                                    <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                                </div>
                            </Box>

                            <div className="bond-one-table">
                                <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                    <p>Mint</p>
                                </div>
                                <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                    <p>Redeem</p>
                                </div>
                            </div>

                            <TabPanel value={view} index={0}>
                                <BondPurchase bond={bond} slippage={slippage} />
                            </TabPanel>

                            <TabPanel value={view} index={1}>
                                <BondRedeem bond={bond} />
                            </TabPanel>
                        </div>
                    </Fade>
                </Backdrop>
            </Grid>
        </Fade>
    );
}
Example #14
Source File: index.tsx    From firetable with Apache License 2.0 5 votes vote down vote up 
useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      position: "fixed",
      bottom: theme.spacing(2),
      left: "50%",
      transform: "translateX(-50%)",
    },

    paper: {
      height: 64,
      borderRadius: 32,
      padding: theme.spacing(0, 1),
      [theme.breakpoints.up("lg")]: { paddingRight: theme.spacing(2) },

      zIndex: theme.zIndex.modal,

      backgroundColor:
        theme.palette.type === "light"
          ? theme.palette.background.default
          : theme.palette.background.elevation?.[12] ??
            theme.palette.background.default,

      width: 470,
      maxWidth: "100vw",
      overflowX: "auto",
    },

    grid: {
      height: "100%",
      marginTop: 0,
      marginBottom: 0,
    },
    spacer: { width: theme.spacing(2) },

    selectedContainer: {
      flexBasis: 206,
      flexShrink: 0,
    },
    selected: {
      color: theme.palette.text.disabled,
      fontFeatureSettings: '"tnum"',
      userSelect: "none",

      display: "inline-block",
      marginRight: theme.spacing(1),
      minWidth: 150,
    },

    dropdown: {
      minWidth: 120,
      margin: 0,
    },
    inputBaseRoot: {
      borderRadius: theme.shape.borderRadius,
      backgroundColor:
        theme.palette.type === "dark"
          ? fade(theme.palette.text.primary, 0.06)
          : undefined,
    },
    dropdownLabel: {
      left: theme.spacing(1.5),
      top: "50%",
      transform: "translateY(-50%) !important",

      ...theme.typography.body1,
    },
    dropdownLabelFocused: {
      "$dropdownLabel&": { color: theme.palette.text.primary },
    },
    select: {
      paddingTop: "6px !important",
      paddingBottom: "7px !important",
    },
    dropdownMenu: { marginTop: theme.spacing(-3) },
  })
)
Example #15
Source File: Dashboard.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up 
renderPreviewPostCreate(
    stateKey: string,
    project?: AdminProject,
    draftId?: string,
    mandatoryCategoryIds?: string[],
    allowDrafts?: boolean,
    defaultStatusId?: string,
    externalControlRef?: MutableRef<ExternalControl>,
  ): Section {
    if (!project) {
      return this.renderPreviewEmpty('No project selected');
    }
    return {
      name: 'preview',
      breakAction: 'drawer',
      size: PostPreviewSize,
      content: (
        <Provider key={project.projectId} store={project.server.getStore()}>
          <Fade key='post-create' in appear>
            <div>
              <PostCreateForm
                key={draftId || 'new'}
                server={project.server}
                type='post'
                mandatoryCategoryIds={mandatoryCategoryIds}
                adminControlsDefaultVisibility='expanded'
                logInAndGetUserId={() => new Promise<string>(resolve => this.setState({ postCreateOnLoggedIn: resolve }))}
                draftId={draftId}
                defaultStatusId={defaultStatusId}
                defaultConnectSearch={(stateKey === 'changelogPreview' && this.state.roadmap) ? {
                  filterCategoryIds: [this.state.roadmap.categoryAndIndex.category.categoryId],
                  filterStatusIds: this.state.roadmap.statusIdCompleted ? [this.state.roadmap.statusIdCompleted] : undefined,
                } : undefined}
                onCreated={postId => {
                  this.setState({ [stateKey]: { type: 'post', id: postId } as PreviewState } as any);
                }}
                onDraftCreated={allowDrafts ? draft => {
                  this.setState({ [stateKey]: { type: 'create-post', draftId: draft.draftId } as PreviewState } as any);
                } : undefined}
                onDiscarded={() => {
                  this.setState({ [stateKey]: undefined } as any);
                }}
                externalControlRef={externalControlRef}
              />
              <LogIn
                actionTitle='Get notified of replies'
                server={project.server}
                open={!!this.state.postCreateOnLoggedIn}
                onClose={() => this.setState({ postCreateOnLoggedIn: undefined })}
                onLoggedInAndClose={userId => {
                  if (this.state.postCreateOnLoggedIn) {
                    this.state.postCreateOnLoggedIn(userId);
                    this.setState({ postCreateOnLoggedIn: undefined });
                  }
                }}
              />
            </div>
          </Fade>
        </Provider>
      ),
    };
  }
Example #16
Source File: SideDrawerField.tsx    From firetable with Apache License 2.0 5 votes vote down vote up 
useStyles = makeStyles((theme) =>
  createStyles({
    dropzoneButton: {
      justifyContent: "flex-start",
      color: theme.palette.text.secondary,
      "& svg": { marginRight: theme.spacing(2) },
    },
    dropzoneDragActive: {
      backgroundColor: fade(
        theme.palette.primary.light,
        theme.palette.action.hoverOpacity * 2
      ),
      color: theme.palette.primary.main,
    },

    imagesContainer: {
      marginTop: theme.spacing(1),
    },

    img: {
      position: "relative",
      width: 80,
      height: 80,
      borderRadius: theme.shape.borderRadius,
      // boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,

      backgroundSize: "contain",
      backgroundPosition: "center center",
      backgroundRepeat: "no-repeat",
    },
    thumbnail: {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
    },

    overlay: {
      position: "absolute",
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,

      backgroundColor: fade(theme.palette.background.paper, 0.8),
      color: theme.palette.text.secondary,
      boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
      borderRadius: theme.shape.borderRadius,
    },

    deleteImgHover: {
      transition: theme.transitions.create("background-color", {
        duration: theme.transitions.duration.shortest,
      }),

      backgroundColor: "transparent",

      "$img:hover &": {
        backgroundColor: fade(theme.palette.background.paper, 0.8),
        "& *": { opacity: 1 },
      },

      "& *": {
        opacity: 0,
        transition: theme.transitions.create("opacity", {
          duration: theme.transitions.duration.shortest,
        }),
      },
    },
  })
)
Example #17
Source File: EnterAsGuest.tsx    From knboard with MIT License 5 votes vote down vote up 
EnterAsGuest = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const [allowGuest, setAllowGuest] = useState(false);

  useEffect(() => {
    const source = api.CancelToken.source();

    const fetchData = async () => {
      try {
        const response: AxiosResponse<AuthSetup> = await api(
          `${API_AUTH_SETUP}`,
          {
            cancelToken: source.token,
          }
        );
        setAllowGuest(response.data.ALLOW_GUEST_ACCESS);
      } catch (err) {
        if (!api.isCancel(err)) {
          console.error(err);
        }
      }
    };
    fetchData();

    return () => source.cancel();
  }, []);

  const handleClick = () => {
    dispatch(guestRegister());
    history.push("/");
  };

  if (!allowGuest) {
    return null;
  }

  return (
    <Fade in={allowGuest}>
      <Container>
        <Separator>or</Separator>
        <Button
          css={css`
            text-transform: initial;
          `}
          onClick={handleClick}
        >
          Enter as a guest
        </Button>
      </Container>
    </Fade>
  );
}
Example #18
Source File: Panel.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up 
PanelTitle = (props: {
  className?: string;
  text?: React.ReactNode;
  color?: string;
  iconAction?: {
    icon: React.ReactNode;
    onClick: () => void;
    transparent?: boolean;
    tourAnchorProps?: React.ComponentProps<typeof TourAnchor>;
  };
} & Omit<Partial<React.ComponentPropsWithoutRef<typeof Typography>>, 'color'>) => {
  const { text, color, ...TypographyProps } = props;
  const { t } = useTranslation('app');
  const theme = useTheme();
  if (!props.text) return null;

  const iconAction = props.iconAction ? (
    <TourAnchor {...props.iconAction.tourAnchorProps} {...{ transparent: props.iconAction?.transparent as any }}>
      {(next, isActive, anchorRef) => (
        <Fade in={!props.iconAction?.transparent || isActive}>
          <IconButton ref={anchorRef} onClick={() => {
            props.iconAction?.onClick();
            next();
          }}>
            {props.iconAction?.icon}
          </IconButton>
        </Fade>
      )}
    </TourAnchor>
  ) : undefined;

  return (
    <Typography
      className={props.className}
      variant='h4'
      component='div'
      style={{ color: color !== undefined ? color : theme.palette.text.secondary }}
      {...TypographyProps}
    >
      {t(text as any)}
      {iconAction}
    </Typography>
  );
}
Example #19
Source File: ExperimentsTableAgGrid.tsx    From abacus with GNU General Public License v2.0 5 votes vote down vote up 
useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      flexDirection: 'column',
      flex: 1,
      '& .ag-header-cell-label .ag-header-icon.ag-sort-order': {
        display: 'none',
      },
    },
    toolbar: {
      margin: theme.spacing(3, 0, 2),
      display: 'flex',
      justifyContent: 'space-between',
    },
    controls: {
      display: 'flex',
    },
    gridContainer: {
      display: 'flex',
      flex: 1,
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.9),
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
  }),
)
Example #20
Source File: index.tsx    From uno-game with MIT License 5 votes vote down vote up 
LoadingScene: LoadingSceneType & React.FC<LoadingSceneProps> = (props) => {
	const { onFinish, onStart, loading, children, duration } = props

	const [visible, setVisible] = useState(true)

	const classes = useStyles()

	const handleScene = () => {
		if (onStart) {
			onStart()
		}

		setTimeout(() => {
			setVisible(false)

			if (onFinish) {
				onFinish()
			}
		}, duration)
	}

	useDidMount(() => {
		handleScene()
	})

	return (
		<ThemeProvider theme={theme}>
			<Zoom in={loading ?? visible}>
				<Grid
					container
					direction="column"
					alignItems="center"
					justify="center"
					className={classes.container}
				>
					<img
						className={classes.logo}
						src={logoImg}
						alt="logo"
					/>
				</Grid>
			</Zoom>
			{children && (
				<>
					{!loading && <Fade in={!loading} children={children as React.ReactElement} />}
				</>
			)}
		</ThemeProvider>
	)
}
Example #21
Source File: index.tsx    From wonderland-frontend with MIT License 5 votes vote down vote up 
function Header() {
    const [anchorEl, setAnchorEl] = useState(null);

    const handleClick = (event: any) => {
        setAnchorEl(anchorEl ? null : event.currentTarget);
    };

    const open = Boolean(anchorEl);

    return (
        <div className="landing-header">
            <SvgIcon color="primary" component={WonderlandIcon} viewBox="0 0 174 40" style={{ minWidth: 174, minHeight: 40 }} />
            <div className="landing-header-nav-wrap">
                <Box component="div" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
                    <p className="landing-header-nav-text">Social</p>
                    <Popper className="landing-header-poper" open={open} anchorEl={anchorEl} transition>
                        {({ TransitionProps }) => (
                            <Fade {...TransitionProps} timeout={200}>
                                <div className="tooltip">
                                    <Link className="tooltip-item" href="https://github.com/Wonderland-Money/wonderland-frontend" target="_blank">
                                        <SvgIcon color="primary" component={GitHub} />
                                        <p>GitHub</p>
                                    </Link>
                                    <Link className="tooltip-item" href="https://twitter.com/wonderland_fi?s=21" target="_blank">
                                        <SvgIcon color="primary" component={Twitter} />
                                        <p>Twitter</p>
                                    </Link>
                                    <Link className="tooltip-item" href="https://t.me/joinchat/6UybL5rJMEhjN2Y5" target="_blank">
                                        <SvgIcon viewBox="0 0 32 32" color="primary" component={Telegram} />
                                        <p>Telegram</p>
                                    </Link>
                                    <Link className="tooltip-item" href="https://discord.gg/thDHseaHUt" target="_blank">
                                        <SvgIcon color="primary" component={Discord} />
                                        <p>Discord</p>
                                    </Link>
                                </div>
                            </Fade>
                        )}
                    </Popper>
                </Box>
            </div>
        </div>
    );
}
Example #22
Source File: index.tsx    From rugenerous-frontend with MIT License 5 votes vote down vote up 
function TimeMenu() {
  const [anchorEl, setAnchorEl] = useState(null);
  const isEthereumAPIAvailable = window.ethereum;

  const networkID = useSelector<IReduxState, number>(state => {
    return (state.app && state.app.networkID) || DEFAULD_NETWORK;
  });

  const addresses = getAddresses(networkID);

  const SRUG_ADDRESS = addresses.SRUG_ADDRESS;
  const RUG_ADDRESS = addresses.RUG_ADDRESS;

  const handleClick = (event: any) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);

  return (
    <div className="rug-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
      <div className="rug-menu-btn">
        <p>BUY RUG</p>
      </div>

      <Popper className="rug-menu-popper" open={open} anchorEl={anchorEl} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={200}>
            <div className="tooltip">
              <Link component={NavLink} to="/buy/tjDex" className="tooltip-item">
                <p>Buy on TradeJoe</p>
              </Link>
              {isEthereumAPIAvailable && (
                <div className="add-tokens">
                  <div className="divider" />
                  <p className="add-tokens-title">ADD TOKEN TO WALLET</p>
                  <div className="divider" />
                  <div className="tooltip-item" onClick={addTokenToWallet("RUG", RUG_ADDRESS)}>
                    <p>RUG</p>
                  </div>
                  <div className="tooltip-item" onClick={addTokenToWallet("SRUG", SRUG_ADDRESS)}>
                    <p>SRUG</p>
                  </div>
                </div>
              )}
            </div>
          </Fade>
        )}
      </Popper>
    </div>
  );
}
Example #23
Source File: actionbar-search-field.tsx    From mtcute with GNU Lesser General Public License v3.0 5 votes vote down vote up 
useStyles = makeStyles((theme: Theme) =>
    createStyles({
        search: {
            position: 'relative',
            borderRadius: theme.shape.borderRadius,
            backgroundColor: fade(theme.palette.common.white, 0.15),
            '&:hover': {
                backgroundColor: fade(theme.palette.common.white, 0.25),
            },
            marginRight: theme.spacing(2),
            marginLeft: 0,
            width: '100%',
            [theme.breakpoints.up('sm')]: {
                marginLeft: theme.spacing(3),
                width: 'auto',
            },
        },
        searchIcon: {
            padding: theme.spacing(0, 2),
            height: '100%',
            position: 'absolute',
            pointerEvents: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        },
        inputRoot: {
            color: 'inherit',
        },
        inputInput: {
            padding: theme.spacing(1, 1, 1, 0),
            // vertical padding + font size from searchIcon
            paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
            transition: theme.transitions.create('width'),
            width: '100%',
            [theme.breakpoints.up('md')]: {
                width: '40ch',
            },
        },
    })
)
Example #24
Source File: FullPageSpinner.tsx    From knboard with MIT License 5 votes vote down vote up 
FullPageSpinner = () => (
  <Fade style={{ transitionDelay: "800ms" }} unmountOnExit>
    <CircularProgress />
  </Fade>
)
Example #25
Source File: index.tsx    From lobis-frontend with MIT License 5 votes vote down vote up 
function LobiMenu() {
    const [anchorEl, setAnchorEl] = useState(null);
    const isEthereumAPIAvailable = window.ethereum;

    const LOBI_ADDRESS = addresses.lobi;
    const SLOBI_ADDRESS = addresses.sLobi;

    const handleClick = (event: any) => {
        setAnchorEl(anchorEl ? null : event.currentTarget);
    };

    const open = Boolean(anchorEl);

    return (
        <div className="lobi-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
            <div className="lobi-menu-btn">
                <p>{TOKEN_NAME}</p>
            </div>

            <Popper className="lobi-menu-popper" open={open} anchorEl={anchorEl} transition>
                {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={200}>
                        <div className="tooltip">
                            <Link className="tooltip-item" href={`https://app.sushi.com/swap?outputCurrency=0xDEc41Db0c33F3F6f3cb615449C311ba22D418A8d`} target="_blank">
                                <p>Buy on Sushiswap</p>
                            </Link>

                            {isEthereumAPIAvailable && (
                                <div className="add-tokens">
                                    <div className="tooltip-item" onClick={addTokenToWallet(`${TOKEN_NAME}`, LOBI_ADDRESS)}>
                                        <p>{TOKEN_NAME}</p>
                                    </div>
                                    <div className="tooltip-item" onClick={addTokenToWallet(`${STAKING_TOKEN_NAME}`, SLOBI_ADDRESS)}>
                                        <p>{STAKING_TOKEN_NAME}</p>
                                    </div>
                                </div>
                            )}
                        </div>
                    </Fade>
                )}
            </Popper>
        </div>
    );
}
Example #26
Source File: PostEdit.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up 
styles = (theme: Theme) => createStyles({
  row: {
    padding: theme.spacing(2),
  },
  grow: {
    flexGrow: 1,
  },
  saveButtonActions: {
    display: 'flex',
    width: '100%',
    alignItems: 'baseline',
    margin: theme.spacing(1),
    flexWrap: 'wrap-reverse',
  },
  saveButtonAction: {
    margin: theme.spacing(1),
  },
  clickToEditContainer: {
    position: 'relative', // For clickToEditIcon
    transition: theme.transitions.create(['background-color', 'box-shadow']),
    backgroundColor: 'transparent',
    cursor: 'pointer',
    borderRadius: 10,
    '&:hover': {
      backgroundColor: fade(theme.palette.primary.light, 0.05),
      boxShadow: `0px 0px 3px 3px ${fade(theme.palette.primary.light, 0.05)}`,
    },
  },
  clickToEditIcon: {
    position: 'absolute',
    top: 0,
    right: 0,
    transform: 'translate(100%, -50%)',
    transition: theme.transitions.create(['color']),
    color: 'transparent',
  },
  clickToEditIconHoverDisabled: {
    color: fade(theme.palette.text.hint, 0.05),
  },
  clickToEditIconHover: {
    color: theme.palette.primary.main,
  },
})
Example #27
Source File: index.tsx    From lobis-frontend with MIT License 5 votes vote down vote up 
function Bond({ bond }: IBondProps) {
    const { provider, address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);
    const [recipientAddress, setRecipientAddress] = useState(address);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onRecipientAddressChange = (e: any) => {
        return setRecipientAddress(e.target.value);
    };

    const onSlippageChange = (e: any) => {
        return setSlippage(e.target.value);
    };

    useEffect(() => {
        if (address) setRecipientAddress(address);
    }, [provider, address]);

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Grid className="bond-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <BondHeader
                            bond={bond}
                            slippage={slippage}
                            recipientAddress={recipientAddress}
                            onSlippageChange={onSlippageChange}
                            onRecipientAddressChange={onRecipientAddressChange}
                        />
                        {/* @ts-ignore */}
                        <Box direction="row" className="bond-price-data-row">
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">Mint Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.bondPrice, 2)}`}</p>
                            </div>
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">{TOKEN_NAME} Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                            </div>
                        </Box>

                        <div className="bond-one-table">
                            <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                <p>Mint</p>
                            </div>
                            <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                <p>Redeem</p>
                            </div>
                        </div>

                        <TabPanel value={view} index={0}>
                            <BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
                        </TabPanel>

                        <TabPanel value={view} index={1}>
                            <BondRedeem bond={bond} />
                        </TabPanel>
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}
Example #28
Source File: index.tsx    From wonderland-frontend with MIT License 5 votes vote down vote up 
function TimeMenu() {
    const [anchorEl, setAnchorEl] = useState(null);
    const isEthereumAPIAvailable = window.ethereum;

    const networkID = useSelector<IReduxState, number>(state => {
        return (state.app && state.app.networkID) || DEFAULD_NETWORK;
    });

    const addresses = getAddresses(networkID);

    const MEMO_ADDRESS = addresses.MEMO_ADDRESS;
    const TIME_ADDRESS = addresses.TIME_ADDRESS;

    const handleClick = (event: any) => {
        setAnchorEl(anchorEl ? null : event.currentTarget);
    };

    const open = Boolean(anchorEl);

    return (
        <div className="time-menu-root" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
            <div className="time-menu-btn">
                <p>TIME</p>
            </div>

            <Popper className="time-menu-popper" open={open} anchorEl={anchorEl} transition>
                {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={200}>
                        <div className="tooltip">
                            <Link className="tooltip-item" href={`https://www.traderjoexyz.com/#/trade?inputCurrency=&outputCurrency=${TIME_ADDRESS}`} target="_blank">
                                <p>Buy on Trader Joe</p>
                            </Link>

                            {isEthereumAPIAvailable && (
                                <div className="add-tokens">
                                    <div className="divider" />
                                    <p className="add-tokens-title">ADD TOKEN TO WALLET</p>
                                    <div className="divider" />
                                    <div className="tooltip-item" onClick={addTokenToWallet("TIME", TIME_ADDRESS)}>
                                        <p>TIME</p>
                                    </div>
                                    <div className="tooltip-item" onClick={addTokenToWallet("MEMO", MEMO_ADDRESS)}>
                                        <p>MEMO</p>
                                    </div>
                                </div>
                            )}
                        </div>
                    </Fade>
                )}
            </Popper>
        </div>
    );
}
Example #29
Source File: index.tsx    From rugenerous-frontend with MIT License 5 votes vote down vote up 
function Header() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event: any) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);

  return (
    <div className="landing-header">
      <SvgIcon
        color="primary"
        component={RugenerousIcon}
        viewBox="0 0 400 40"
        style={{ minWidth: 174, minHeight: 40 }}
      />
      <div className="landing-header-nav-wrap">
        <Box component="div" onMouseEnter={e => handleClick(e)} onMouseLeave={e => handleClick(e)}>
          <p className="landing-header-nav-text">Social</p>
          <Popper className="landing-header-poper" open={open} anchorEl={anchorEl} transition>
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={200}>
                <div className="tooltip">
                  <Link className="tooltip-item" href="https://github.com/Rugenerous" target="_blank">
                    <SvgIcon color="primary" component={GitHub} />
                    <p>GitHub</p>
                  </Link>
                  <Link className="tooltip-item" href="https://twitter.com/RUGenerous" target="_blank">
                    <SvgIcon color="primary" component={Twitter} />
                    <p>Twitter</p>
                  </Link>
                  <Link className="tooltip-item" href="https://discord.gg/JHeKjn5F2q" target="_blank">
                    <SvgIcon color="primary" component={Discord} />
                    <p>Discord</p>
                  </Link>
                </div>
              </Fade>
            )}
          </Popper>
        </Box>
      </div>
    </div>
  );
}