@material-ui/core#Slide TypeScript Examples

The following examples show how to use @material-ui/core#Slide. 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: Footer.tsx    From planning-poker with MIT License 7 votes vote down vote up
Footer = () => {
  return (
    <footer>
      <Slide in={true} direction='up' timeout={3000}>
        <div className='FooterSection'>
          <Divider variant='middle'></Divider>
          <div className='FooterContainer'>
            <div className='FooterItemContainer'>
              <CopyrightIcon color='secondary' fontSize='small' />
              <Typography color='textSecondary' variant='body2'>
                hellomuthu23
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <div className='FooterItemContainer'>
              <Typography color='textSecondary' variant='body2'>
                Feedback: [email protected]
              </Typography>
            </div>

            <Divider orientation='vertical' flexItem></Divider>
            <Link href='https://github.com/hellomuthu23/planning-poker/issues'>
              Submit an Issue
            </Link>
          </div>
        </div>
      </Slide>
    </footer>
  );
}
Example #2
Source File: Navigation.tsx    From Demae with MIT License 6 votes vote down vote up
Child = ({ index, open, onClose, children }: { index: number, open: boolean, onClose: () => void, children: any }) => {
	const zIndex = 1000 + index
	return (
		<Slide direction="left" in={open} mountOnEnter unmountOnExit
			onExited={() => {
				onClose()
			}}
		>
			<Box
				zIndex={zIndex}
				position="absolute"
				display="flex"
				flexGrow={1}
				width="100%"
				top={0}
				bottom={0}
				left={0}
				right={0}
			>
				<Paper elevation={0} square style={{ width: "100%" }}>
					{children}
				</Paper>
			</Box>
		</Slide>
	)
}
Example #3
Source File: PersistentDrawerLeft.tsx    From max-todos with MIT License 6 votes vote down vote up
function HideOnScroll(props: Props) {
  const { children, window } = props;
  // Note that you normally won't need to set the window ref as useScrollTrigger
  // will default to window.
  // This is only being set here because the demo is in an iframe.
  const trigger = useScrollTrigger({ target: window ? window() : undefined });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}
Example #4
Source File: SnackbarNotification.tsx    From firebase-react-typescript-project-template with MIT License 5 votes vote down vote up
function SlideTransition(props: TransitionProps) {
  return <Slide {...props} direction="up" />;
}
Example #5
Source File: Menu.tsx    From UsTaxes with GNU Affero General Public License v3.0 5 votes vote down vote up
Menu = (): ReactElement => {
  const classes = useStyles()
  const [isOpen, setOpen] = useState(!isMobile)
  const activeYear: TaxYear = useSelector(
    (state: YearsTaxesState) => state.activeYear
  )

  const allSections = drawerSectionsForYear(activeYear)

  return (
    <>
      <AppBar position="fixed" className={classes.root}>
        <Toolbar
          className={classes.toolbar}
          classes={{ gutters: classes.gutters }}
        >
          <IconButton
            color="inherit"
            aria-label={`${isOpen ? 'close' : 'open'} drawer`}
            edge="start"
            onClick={() => setOpen((isOpen) => !isOpen)}
            className={classes.menuButton}
          >
            {isOpen ? <CloseIcon /> : <MenuIcon />}
          </IconButton>
          <Slide in={isOpen} direction={'right'}>
            <Typography className={classes.title}>Menu</Typography>
          </Slide>
          <Slide in={!isOpen} direction={'left'}>
            <Typography className={classes.title}>
              {getTitleAndPage(useLocation().pathname, activeYear)}
            </Typography>
          </Slide>
        </Toolbar>
      </AppBar>
      <ResponsiveDrawer
        sections={allSections}
        isOpen={isOpen}
        setOpen={setOpen}
      />
    </>
  )
}
Example #6
Source File: useSnackbarAlert.tsx    From shadowsocks-electron with GNU General Public License v3.0 5 votes vote down vote up
transition = (props: TransitionProps) => <Slide {...props} direction="down" />
Example #7
Source File: Toolbar.tsx    From planning-poker with MIT License 5 votes vote down vote up
Toolbar = () => {
  const history = useHistory();
  const isSmallScreen = useMediaQuery((theme: any)  => theme.breakpoints.down("xs"));

  return (
    <Slide direction='down' in={true} timeout={800}>
      <AppBar position='sticky' className='AppBar'>
        <AppToolbar>
          <div className='HeaderContainer'>
            <div
              className='HeaderLeftContainer'
              onClick={() => history.push('/')}
            >
              <GamesIcon className='HeaderIcon' />
              <Typography variant={isSmallScreen? 'subtitle1':'h5'} color='inherit' noWrap>
                {title}
              </Typography>
            </div>
            <div>
              <Button title="New Session" startIcon={<AddCircleOutlineIcon/>} color='inherit' onClick={() => history.push('/')}>
                {!isSmallScreen ? 'New Session': null}
              </Button>
              <Button startIcon={<MergeTypeOutlinedIcon/>} size={ isSmallScreen ? "small" : "large"}  color='inherit' onClick={() => history.push('/join')}>
                {!isSmallScreen ? 'Join Session' : null}
              </Button>
              <Button
                id='github-button'
                color='inherit'
                onClick={() =>
                  (window.location.href =
                    'https://github.com/hellomuthu23/planning-poker')
                }
              >
                <GithubIcon></GithubIcon>
              </Button>
            </div>
          </div>
        </AppToolbar>
      </AppBar>
    </Slide>
  );
}
Example #8
Source File: CardPicker.tsx    From planning-poker with MIT License 5 votes vote down vote up
CardPicker: React.FC<CardPickerProps> = ({ game, players, currentPlayerId }) => {
  const [randomEmoji, setRandomEmoji] = useState(getRandomEmoji);
  const playPlayer = (gameId: string, playerId: string, card: CardConfig) => {
    if (game.gameStatus !== Status.Finished) {
      updatePlayerValue(gameId, playerId, card.value, randomEmoji);
    }
  };
  const cards = getCards(game.gameType);

  useEffect(() => {
    if (game.gameStatus === Status.Started) {
      setRandomEmoji(getRandomEmoji);
    }
  }, [game.gameStatus]);
  return (
    <Grow in={true} timeout={1000}>
      <div>
        <div className='CardPickerContainer'>
          <Grid container spacing={4} justify='center'>
            {cards.map((card: CardConfig, index) => (
              <Grid key={card.value} item xs>
                <Slide in={true} direction={'right'} timeout={(1000 * index) / 2}>
                  <Card
                    id={`card-${card.displayValue}`}
                    className='CardPicker'
                    variant='outlined'
                    onClick={() => playPlayer(game.id, currentPlayerId, card)}
                    style={{
                      ...getCardStyle(players, currentPlayerId, card),
                      pointerEvents: getPointerEvent(game),
                    }}
                  >
                    <CardContent className='CardContent'>
                      {card.value >= 0 && (
                        <>
                          <Typography className='CardContentTop' variant='caption'>
                            {card.displayValue}
                          </Typography>
                          <Typography className='CardContentMiddle' variant='h4'>
                            {card.displayValue}
                          </Typography>
                          <Typography className='CardContentBottom' variant='caption'>
                            {card.displayValue}
                          </Typography>
                        </>
                      )}
                      {card.value === -1 && (
                        <Typography className='CardContentMiddle' variant='h3'>
                          {randomEmoji}
                        </Typography>
                      )}
                      {card.value === -2 && (
                        <Typography className='CardContentMiddle' variant='h3'>
                          ❓
                        </Typography>
                      )}
                    </CardContent>
                  </Card>
                </Slide>
              </Grid>
            ))}
          </Grid>
        </div>
        <Typography variant='h6'>
          {game.gameStatus !== Status.Finished
            ? 'Click on the card to vote'
            : 'Session not ready for Voting! Wait for moderator to start'}
        </Typography>
      </div>
    </Grow>
  );
}
Example #9
Source File: Transition.tsx    From backstage with Apache License 2.0 5 votes vote down vote up
Transition = forwardRef(function Transition(
  props: { children?: React.ReactElement<any, any> } & TransitionProps,
  ref: Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
})
Example #10
Source File: index.tsx    From react-app-architecture with Apache License 2.0 5 votes vote down vote up
Transition = forwardRef(function Transition(
  props: TransitionProps & { children?: ReactElement<any, any> },
  ref: Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
})
Example #11
Source File: BondRow.tsx    From wonderland-frontend with MIT License 5 votes vote down vote up
export function BondDataCard({ bond }: IBondProps) {
    const isBondLoading = !bond.bondPrice ?? true;

    return (
        <Slide direction="up" in={true}>
            <Paper className="bond-data-card">
                <div className="bond-pair">
                    <BondLogo bond={bond} />
                    <div className="bond-name">
                        <p className="bond-name-title">{bond.displayName}</p>
                        {bond.isLP && (
                            <div>
                                <Link href={bond.lpUrl} target="_blank">
                                    <p className="bond-name-title">View Contract</p>
                                </Link>
                            </div>
                        )}
                    </div>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">Price</p>
                    <p className="bond-price bond-name-title">
                        <>
                            {priceUnits(bond)} {isBondLoading ? <Skeleton width="50px" /> : trim(bond.bondPrice, 2)}
                        </>
                    </p>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">ROI</p>
                    <p className="bond-name-title">{isBondLoading ? <Skeleton width="50px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">Purchased</p>
                    <p className="bond-name-title">
                        {isBondLoading ? (
                            <Skeleton width="80px" />
                        ) : (
                            new Intl.NumberFormat("en-US", {
                                style: "currency",
                                currency: "USD",
                                maximumFractionDigits: 0,
                                minimumFractionDigits: 0,
                            }).format(bond.purchased)
                        )}
                    </p>
                </div>
                <Link component={NavLink} to={`/mints/${bond.name}`}>
                    <div className="bond-table-btn">
                        <p>Mint {bond.displayName}</p>
                    </div>
                </Link>
            </Paper>
        </Slide>
    );
}
Example #12
Source File: SQFormDialogStepper.tsx    From SQForm with MIT License 5 votes vote down vote up
Transition = React.forwardRef(function Transition(
  props: TransitionProps & {children?: React.ReactElement<unknown, string>},
  ref: React.Ref<unknown>
) {
  return <Slide direction="down" ref={ref} {...props} />;
})
Example #13
Source File: SQFormDialogInner.tsx    From SQForm with MIT License 5 votes vote down vote up
Transition = React.forwardRef(function Transition(
  props: TransitionProps & {children?: React.ReactElement<unknown, string>},
  ref: React.Ref<unknown>
) {
  return <Slide direction="down" ref={ref} {...props} />;
})
Example #14
Source File: BondRow.tsx    From rugenerous-frontend with MIT License 5 votes vote down vote up
export function BondDataCard({ bond }: IBondProps) {
  const isBondLoading = !bond.bondPrice ?? true;
  return (
    <>
      <Slide direction="up" in={true}>
        <Paper className="bond-data-card">
          <div className="bond-pair">
            <BondLogo bond={bond} />
            <div className="bond-name">
              <p className="bond-name-title">{bond.displayName}</p>
              {bond.isLP && (
                <div>
                  <Link href={bond.lpUrl} target="_blank">
                    <p className="bond-name-title">View Contract</p>
                  </Link>
                </div>
              )}
            </div>
          </div>

          <div className="data-row">
            <p className="bond-name-title">Price</p>
            <p className="bond-price bond-name-title">
              <>
                {isBondLoading ? (
                  <Skeleton width="50px" />
                ) : bond.available ? (
                  trim(bond.bondPrice, 2)
                ) : bond.purchased > 1000 ? (
                  "Sold Out"
                ) : (
                  "N/A"
                )}{" "}
              </>
            </p>
          </div>

          <div className="data-row">
            <p className="bond-name-title">ROI</p>
            <p className="bond-name-title">
              {isBondLoading ? (
                <Skeleton width="50px" />
              ) : bond.available ? (
                `${trim(bond.bondDiscount * 100, 2)}%`
              ) : (
                "-"
              )}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-name-title">Purchased</p>
            <p className="bond-name-title">
              {isBondLoading ? (
                <Skeleton width="80px" />
              ) : (
                new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "USD",
                  maximumFractionDigits: 0,
                  minimumFractionDigits: 0,
                }).format(bond.purchased)
              )}
            </p>
          </div>
          <Link component={NavLink} to={`/mints/${bond.name}`}>
            <div className="bond-table-btn">
              <p>Mint {bond.displayName}</p>
            </div>
          </Link>
        </Paper>
      </Slide>
    </>
  );
}
Example #15
Source File: BondRow.tsx    From lobis-frontend with MIT License 5 votes vote down vote up
export function BondDataCard({ bond }: IBondProps) {
    const isBondLoading = !bond.bondPrice ?? true;
    return (
        <Slide direction="up" in={true}>
            <Paper className="bond-data-card">
                <div className="bond-pair">
                    <BondLogo bond={bond} />
                    <div className="bond-name">
                        <p className="bond-name-title">{bond.displayName}</p>
                        {bond.isLP && (
                            <div>
                                <Link href={bond.lpUrl} target="_blank">
                                    <p className="bond-name-title-link">View Contract</p>
                                </Link>
                            </div>
                        )}
                    </div>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">Price</p>
                    <p className="bond-price bond-name-title">
                        <>{isBondLoading ? <Skeleton width="50px" /> : `$${trim(bond.bondPrice, 2)}`}</>
                    </p>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">ROI</p>
                    <p className="bond-name-title">{isBondLoading ? <Skeleton width="50px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                </div>

                <div className="data-row">
                    <p className="bond-name-title">Purchased</p>
                    <p className="bond-name-title">
                        {isBondLoading ? (
                            <Skeleton width="80px" />
                        ) : (
                            new Intl.NumberFormat("en-US", {
                                style: "currency",
                                currency: "USD",
                                maximumFractionDigits: 0,
                                minimumFractionDigits: 0,
                            }).format(bond.purchased)
                        )}
                    </p>
                </div>
                <Link component={NavLink} to={`/mints/${bond.name}`}>
                    <div className="bond-table-btn">
                        <p>Mint {bond.displayName}</p>
                    </div>
                </Link>
            </Paper>
        </Slide>
    );
}
Example #16
Source File: BondRedeem.tsx    From wonderland-frontend with MIT License 4 votes vote down vote up
function BondRedeem({ bond }: IBondRedeem) {
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

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

    const currentBlockTime = useSelector<IReduxState, number>(state => {
        return state.app.currentBlockTime;
    });

    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    const bondingState = useSelector<IReduxState, IBondDetails>(state => {
        return state.bonding && state.bonding[bond.name];
    });

    const bondDetails = useSelector<IReduxState, IUserBondDetails>(state => {
        return state.account.bonds && state.account.bonds[bond.name];
    });

    async function onRedeem(autostake: boolean) {
        if (await checkWrongNetwork()) return;

        if (bond.interestDue === 0 || bond.pendingPayout === 0) {
            dispatch(warning({ text: messages.nothing_to_claim }));
            return;
        }

        await dispatch(redeemBond({ address, bond, networkID: chainID, provider, autostake }));
    }

    const vestingTime = () => {
        if (!bondDetails) {
            return "";
        }
        return prettyVestingPeriod(currentBlockTime, bondDetails.bondMaturationBlock);
    };

    const vestingPeriod = () => {
        return prettifySeconds(bondingState.vestingTerm, "day");
    };

    return (
        <Box display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-around" flexWrap="wrap">
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name)) return;
                        onRedeem(false);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name, "Claim")}</p>
                </div>
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name + "_autostake")) return;
                        onRedeem(true);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name + "_autostake", "Claim and Autostake")}</p>
                </div>
            </Box>

            <Slide direction="right" in={true} mountOnEnter unmountOnExit {...{ timeout: 533 }}>
                <Box className="bond-data">
                    <div className="data-row">
                        <p className="bond-balance-title">Pending Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.interestDue, 4)} TIME`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Claimable Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.pendingPayout, 4)} TIME`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Time until fully vested</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingTime()}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">ROI</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Vesting Term</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
                    </div>
                </Box>
            </Slide>
        </Box>
    );
}
Example #17
Source File: BondPurchase.tsx    From wonderland-frontend with MIT License 4 votes vote down vote up
function BondPurchase({ bond, slippage }: IBondPurchaseProps) {
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

    const [quantity, setQuantity] = useState("");
    const [useAvax, setUseAvax] = useState(false);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
    const [zapinOpen, setZapinOpen] = useState(false);

    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    const vestingPeriod = () => {
        return prettifySeconds(bond.vestingTerm, "day");
    };

    async function onBond() {
        if (await checkWrongNetwork()) return;

        if (quantity === "") {
            dispatch(warning({ text: messages.before_minting }));
            //@ts-ignore
        } else if (isNaN(quantity)) {
            dispatch(warning({ text: messages.before_minting }));
        } else if (bond.interestDue > 0 || bond.pendingPayout > 0) {
            const shouldProceed = window.confirm(messages.existing_mint);
            if (shouldProceed) {
                const trimBalance = trim(Number(quantity), 10);

                await dispatch(
                    bondAsset({
                        value: trimBalance,
                        slippage,
                        bond,
                        networkID: chainID,
                        provider,
                        address,
                        useAvax,
                    }),
                );
                clearInput();
            }
        } else {
            const trimBalance = trim(Number(quantity), 10);
            await dispatch(
                //@ts-ignore
                bondAsset({
                    value: trimBalance,
                    slippage,
                    bond,
                    networkID: chainID,
                    provider,
                    address,
                    useAvax,
                }),
            );
            clearInput();
        }
    }

    const clearInput = () => {
        setQuantity("");
    };

    const hasAllowance = useCallback(() => {
        return bond.allowance > 0;
    }, [bond.allowance]);

    const setMax = () => {
        let amount: any = Math.min(bond.maxBondPriceToken * 0.9999, useAvax ? bond.avaxBalance * 0.99 : bond.balance);

        if (amount) {
            amount = trim(amount);
        }

        setQuantity((amount || "").toString());
    };

    const bondDetailsDebounce = useDebounce(quantity, 1000);

    useEffect(() => {
        dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
    }, [bondDetailsDebounce]);

    const onSeekApproval = async () => {
        if (await checkWrongNetwork()) return;

        dispatch(changeApproval({ address, bond, provider, networkID: chainID }));
    };

    const handleZapinOpen = () => {
        dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
        setZapinOpen(true);
    };

    const handleZapinClose = () => {
        dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
        setZapinOpen(false);
    };

    const displayUnits = useAvax ? "AVAX" : bond.displayUnits;

    return (
        <Box display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-around" flexWrap="wrap">
                {bond.name === "wavax" && (
                    <FormControl className="ohm-input" variant="outlined" color="primary" fullWidth>
                        <div className="avax-checkbox">
                            <input type="checkbox" checked={useAvax} onClick={() => setUseAvax(!useAvax)} />
                            <p>Use AVAX</p>
                        </div>
                    </FormControl>
                )}
                <FormControl className="bond-input-wrap" variant="outlined" color="primary" fullWidth>
                    <OutlinedInput
                        placeholder="Amount"
                        type="number"
                        value={quantity}
                        onChange={e => setQuantity(e.target.value)}
                        labelWidth={0}
                        className="bond-input"
                        endAdornment={
                            <InputAdornment position="end">
                                <div className="stake-input-btn" onClick={setMax}>
                                    <p>Max</p>
                                </div>
                            </InputAdornment>
                        }
                    />
                </FormControl>
                {hasAllowance() || useAvax ? (
                    <div
                        className="transaction-button bond-approve-btn"
                        onClick={async () => {
                            if (isPendingTxn(pendingTransactions, "bond_" + bond.name)) return;
                            await onBond();
                        }}
                    >
                        <p>{txnButtonText(pendingTransactions, "bond_" + bond.name, "Mint")}</p>
                    </div>
                ) : (
                    <div
                        className="transaction-button bond-approve-btn"
                        onClick={async () => {
                            if (isPendingTxn(pendingTransactions, "approve_" + bond.name)) return;
                            await onSeekApproval();
                        }}
                    >
                        <p>{txnButtonText(pendingTransactions, "approve_" + bond.name, "Approve")}</p>
                    </div>
                )}

                <div className="transaction-button bond-approve-btn" onClick={handleZapinOpen}>
                    <p>Zap</p>
                </div>

                {!hasAllowance() && !useAvax && (
                    <div className="help-text">
                        <p className="help-text-desc">
                            Note: The "Approve" transaction is only needed when minting for the first time; subsequent minting only requires you to perform the "Mint" transaction.
                        </p>
                    </div>
                )}
            </Box>

            <Slide direction="left" in={true} mountOnEnter unmountOnExit {...{ timeout: 533 }}>
                <Box className="bond-data">
                    <div className="data-row">
                        <p className="bond-balance-title">Your Balance</p>
                        <p className="bond-balance-title">
                            {isBondLoading ? (
                                <Skeleton width="100px" />
                            ) : (
                                <>
                                    {trim(useAvax ? bond.avaxBalance : bond.balance, 4)} {displayUnits}
                                </>
                            )}
                        </p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">You Will Get</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondQuote, 4)} TIME`}</p>
                    </div>

                    <div className={`data-row`}>
                        <p className="bond-balance-title">Max You Can Buy</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.maxBondPrice, 4)} TIME`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">ROI</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Vesting Term</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Minimum purchase</p>
                        <p className="bond-balance-title">0.01 TIME</p>
                    </div>
                </Box>
            </Slide>
            <Zapin open={zapinOpen} handleClose={handleZapinClose} bond={bond} />
        </Box>
    );
}
Example #18
Source File: BarChartStepper.tsx    From backstage with Apache License 2.0 4 votes vote down vote up
BarChartStepper = ({
  steps,
  disableScroll,
  onChange,
}: BarChartStepperProps) => {
  const classes = useBarChartStepperStyles();
  const [activeStep, setActiveStep] = useState(0);

  /*
   * This calc determines how many active steps to display in the stepper.
   * If the chart is displaying a large amount of resources,
   * the total dots are truncated to 10. As the user clicks forward,
   * eventually, there might be resources "left over" in excess of the ten dot limit.
   * Once the user has reached that threshold, the difference should appear constant
   * as the user clicks through the remaining resources and no extra dots should be displayed.
   */

  const diff = steps % 10;
  const stepsRemaining = steps - activeStep <= diff ? diff : steps;
  const displayedStep = activeStep % 10;

  useEffect(() => {
    onChange(activeStep);
  }, [activeStep, onChange]);

  const handleNext = () => {
    setActiveStep(prevStep => prevStep + 1);
  };

  const handleBack = () => {
    setActiveStep(prevStep => prevStep - 1);
  };

  const handleClick = (index: number) => {
    setActiveStep(prevStep => {
      const offset = index - (prevStep % 10);
      return prevStep + offset;
    });
  };

  return (
    <Paper
      data-testid="bar-chart-stepper"
      square
      elevation={0}
      className={classes.paper}
    >
      <Slide
        direction="right"
        in={!disableScroll && activeStep !== 0}
        mountOnEnter
        unmountOnExit
      >
        <BarChartStepperButton
          name="back"
          className={classes.backButton}
          onClick={handleBack}
        >
          <ChevronLeftIcon />
        </BarChartStepperButton>
      </Slide>
      <BarChartSteps
        steps={Math.min(10, stepsRemaining)}
        activeStep={displayedStep}
        onClick={handleClick}
      />
      <Slide
        direction="left"
        in={!disableScroll && activeStep < steps - 1}
        mountOnEnter
        unmountOnExit
      >
        <BarChartStepperButton
          name="next"
          className={classes.nextButton}
          onClick={handleNext}
        >
          <ChevronRightIcon />
        </BarChartStepperButton>
      </Slide>
    </Paper>
  );
}
Example #19
Source File: BondRedeem.tsx    From rugenerous-frontend with MIT License 4 votes vote down vote up
function BondRedeem({ bond }: IBondRedeem) {
  const dispatch = useDispatch();
  const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

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

  const currentBlockTime = useSelector<IReduxState, number>(state => {
    return state.app.currentBlockTime;
  });

  const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
    return state.pendingTransactions;
  });

  const bondingState = useSelector<IReduxState, IBondDetails>(state => {
    return state.bonding && state.bonding[bond.name];
  });

  const bondDetails = useSelector<IReduxState, IUserBondDetails>(state => {
    return state.account.bonds && state.account.bonds[bond.name];
  });

  async function onRedeem(autostake: boolean) {
    if (await checkWrongNetwork()) return;

    if (bond.interestDue === 0 || bond.pendingPayout === 0) {
      dispatch(warning({ text: messages.nothing_to_claim }));
      return;
    }

    await dispatch(redeemBond({ address, bond, networkID: chainID, provider, autostake }));
  }

  const vestingTime = () => {
    if (!bondDetails) {
      return "";
    }
    return prettyVestingPeriod(currentBlockTime, bondDetails.bondMaturationBlock);
  };

  const vestingPeriod = () => {
    return prettifySeconds(bondingState.vestingTerm, "day");
  };

  const maxBondPrice = 100000000;
  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex" justifyContent="space-around" flexWrap="wrap">
        <div
          className="transaction-button bond-approve-btn"
          onClick={() => {
            if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name)) return;
            onRedeem(false);
          }}
        >
          <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name, "Claim")}</p>
        </div>
        <div
          className="transaction-button bond-approve-btn"
          onClick={() => {
            if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name + "_autostake")) return;
            onRedeem(true);
          }}
        >
          <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name + "_autostake", "Claim and Autostake")}</p>
        </div>
      </Box>

      <Slide direction="right" in={true} mountOnEnter unmountOnExit {...{ timeout: 533 }}>
        <Box className="bond-data">
          <div className="data-row">
            <p className="bond-balance-title">Pending Rewards</p>
            <p className="price-data bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.interestDue, 4)} RUG`}
            </p>
          </div>
          <div className="data-row">
            <p className="bond-balance-title">Claimable Rewards</p>
            <p className="price-data bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.pendingPayout, 4)} RUG`}
            </p>
          </div>
          <div className="data-row">
            <p className="bond-balance-title">Time until fully vested</p>
            <p className="price-data bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : vestingTime()}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">ROI</p>
            <p className="bond-balance-title">
              {isBondLoading ? (
                <Skeleton width="100px" />
              ) : bond.bondPrice < maxBondPrice ? (
                `${trim(bond.bondDiscount * 100, 2)}%`
              ) : (
                "-"
              )}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">Vesting Term</p>
            <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
          </div>
        </Box>
      </Slide>
    </Box>
  );
}
Example #20
Source File: BondPurchase.tsx    From rugenerous-frontend with MIT License 4 votes vote down vote up
function BondPurchase({ bond, slippage, recipientAddress }: IBondPurchaseProps) {
  const dispatch = useDispatch();
  const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

  const [quantity, setQuantity] = useState("");
  const [useAvax, setUseAvax] = useState(false);

  const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
  const [zapinOpen, setZapinOpen] = useState(false);

  const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
    return state.pendingTransactions;
  });

  const vestingPeriod = () => {
    return prettifySeconds(bond.vestingTerm, "day");
  };

  async function onBond() {
    if (await checkWrongNetwork()) return;

    if (quantity === "") {
      dispatch(warning({ text: messages.before_minting }));
      //@ts-ignore
    } else if (isNaN(quantity)) {
      dispatch(warning({ text: messages.before_minting }));
    } else if (bond.interestDue > 0 || bond.pendingPayout > 0) {
      const shouldProceed = window.confirm(messages.existing_mint);
      if (shouldProceed) {
        const trimBalance = trim(Number(quantity), 10);

        await dispatch(
          bondAsset({
            value: trimBalance,
            slippage,
            bond,
            networkID: chainID,
            provider,
            address: recipientAddress || address,
            useAvax,
          }),
        );
        clearInput();
      }
    } else {
      const trimBalance = trim(Number(quantity), 10);
      await dispatch(
        //@ts-ignore
        bondAsset({
          value: trimBalance,
          slippage,
          bond,
          networkID: chainID,
          provider,
          address: recipientAddress || address,
          useAvax,
        }),
      );
      clearInput();
    }
  }

  const clearInput = () => {
    setQuantity("");
  };

  const hasAllowance = useCallback(() => {
    return bond.allowance > 0;
  }, [bond.allowance]);

  const setMax = () => {
    let amount: any = Math.min(bond.maxBondPriceToken * 0.9999, useAvax ? bond.avaxBalance * 0.99 : bond.balance);

    if (amount) {
      amount = trim(amount);
    }

    setQuantity((amount || "").toString());
  };

  const bondDetailsDebounce = useDebounce(quantity, 1000);

  useEffect(() => {
    dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
  }, [bondDetailsDebounce]);

  const onSeekApproval = async () => {
    if (await checkWrongNetwork()) return;

    dispatch(changeApproval({ address, bond, provider, networkID: chainID }));
  };

  const handleZapinOpen = () => {
    dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
    setZapinOpen(true);
  };

  const handleZapinClose = () => {
    dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
    setZapinOpen(false);
  };

  const displayUnits = useAvax ? "AVAX" : bond.displayUnits;

  return (
    <Box display="flex" flexDirection="column">
      <Box display="flex" justifyContent="space-around" flexWrap="wrap">
        {bond.name === "wavax" && (
          <FormControl className="ohm-input" variant="outlined" color="primary" fullWidth>
            <div className="avax-checkbox">
              <input type="checkbox" checked={useAvax} onClick={() => setUseAvax(!useAvax)} />
              <p>Use AVAX</p>
            </div>
          </FormControl>
        )}
        <FormControl className="bond-input-wrap" variant="outlined" color="primary" fullWidth>
          <OutlinedInput
            placeholder="Amount"
            type="number"
            value={quantity}
            onChange={e => setQuantity(e.target.value)}
            labelWidth={0}
            className="bond-input"
            endAdornment={
              <InputAdornment position="end">
                <div className="stake-input-btn" onClick={setMax}>
                  <p>Max</p>
                </div>
              </InputAdornment>
            }
          />
        </FormControl>
        {hasAllowance() || useAvax ? (
          <div
            className="transaction-button bond-approve-btn"
            onClick={async () => {
              if (isPendingTxn(pendingTransactions, "bond_" + bond.name)) return;
              await onBond();
            }}
          >
            <p>{txnButtonText(pendingTransactions, "bond_" + bond.name, "Rug Me")}</p>
          </div>
        ) : (
          <div
            className="transaction-button bond-approve-btn"
            onClick={async () => {
              if (isPendingTxn(pendingTransactions, "approve_" + bond.name)) return;
              await onSeekApproval();
            }}
          >
            <p>{txnButtonText(pendingTransactions, "approve_" + bond.name, "Approve")}</p>
          </div>
        )}

        {/* <div className="transaction-button bond-approve-btn" onClick={handleZapinOpen}>
          <p>Zap</p>
        </div> */}

        {!hasAllowance() && !useAvax && (
          <div className="help-text">
            <p className="help-text-desc">
              Note: The "Approve" transaction is only needed when rugging yourself for the first rug; subsequent rugs
              only requires you to perform the "Rug Me" transaction.
            </p>
          </div>
        )}
      </Box>

      <Slide direction="left" in={true} mountOnEnter unmountOnExit {...{ timeout: 533 }}>
        <Box className="bond-data">
          <div className="data-row">
            <p className="bond-balance-title">Your Balance</p>
            <p className="bond-balance-title">
              {isBondLoading ? (
                <Skeleton width="100px" />
              ) : (
                <>
                  {trim(useAvax ? bond.avaxBalance : bond.balance, 4)} {displayUnits}
                </>
              )}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">You Will Get</p>
            <p className="price-data bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondQuote, 4)} RUG`}
            </p>
          </div>

          <div className={`data-row`}>
            <p className="bond-balance-title">Max You Can Buy</p>
            <p className="price-data bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.maxBondPrice, 4)} RUG`}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">ROI</p>
            <p className="bond-balance-title">
              {isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">Vesting Term</p>
            <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
          </div>

          <div className="data-row">
            <p className="bond-balance-title">Minimum purchase</p>
            <p className="bond-balance-title">0.01 RUG</p>
          </div>

          {recipientAddress !== address && (
            <div className="data-row">
              <p className="bond-balance-title">Recipient</p>
              <p className="bond-balance-title">
                {isBondLoading ? <Skeleton width="100px" /> : shorten(recipientAddress)}
              </p>
            </div>
          )}
        </Box>
      </Slide>
      {/* <Zapin open={zapinOpen} handleClose={handleZapinClose} bond={bond} /> */}
    </Box>
  );
}
Example #21
Source File: HomePage.tsx    From planning-poker with MIT License 4 votes vote down vote up
HomePage = () => {
  const isJoin = useRouteMatch('/join');
  const isSmallScreen = useMediaQuery((theme: any) => theme.breakpoints.down('xs'));

  return (
    <>
      <Grid container direction='column' justify='center' alignItems='center' spacing={2}>
        <Grid container item sm={12} lg={11} justify='center' alignItems='center' spacing={3}>
          <Grid item sm={12} lg={6}>
            <Slide direction='down' in={true} timeout={1000}>
              <div className='HomePageContainer'>
                <Typography variant='h5'>Free Planning Poker App</Typography>
                {/* {!isSmallScreen ? <img alt='Free Planning Poker App' src={LandingImage}></img> : null} */}
                <img
                  alt='Free Planning Poker App'
                  className='HomePageImage'
                  style={{ transform: isSmallScreen ? 'scale(0.5)' : 'none' }}
                  src={LandingImage}
                ></img>
                <Typography variant='subtitle1'>
                  Free / Open source Planning Poker Web App to estimate user stories for your Agile/Scrum teams. Create
                  a session and invite your team members to estimate user stories efficiently.
                </Typography>
              </div>
            </Slide>
          </Grid>
          <Grid item sm={12} lg={6}>
            <div className='HomePageContainer'>{isJoin ? <JoinGame /> : <CreateGame />}</div>
          </Grid>
        </Grid>
        <Grid container item sm={12} lg={9} justify='center' alignItems='center' spacing={3}>
          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={1000}>
              <Divider variant='middle'></Divider>
            </Slide>
          </Grid>
        </Grid>

        <Grid container item sm={12} lg={9} justify='center' alignItems='center' spacing={3}>
          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={1500}>
              <div className='HomePageContainer'>
                <RecentGames />
              </div>
            </Slide>
          </Grid>

          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={1500}>
              <div className='HomePageContainer'>
                <Typography variant='subtitle1'>
                  Here is your recent Planning/Refinement sessions, click on the session name to join the session again.
                </Typography>
              </div>
            </Slide>
          </Grid>
        </Grid>
        <Grid container item sm={12} lg={9} justify='center' alignItems='center' spacing={3}>
          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={2000}>
              <Divider variant='middle'></Divider>
            </Slide>
          </Grid>
        </Grid>
        <Grid container item sm={12} lg={9} justify='center' alignItems='center' spacing={3}>
          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={2000}>
              <div className='HomePageContainer'>
                <Typography variant='h5'> Intuitive UI Design</Typography>
                <Typography variant='subtitle1'>
                  Beautiful design for voting the story points, showing team members voting status with emojis(? -
                  Voting Done, ? - Yet to Vote). Once the card values are revealed, the card color helps to understand
                  if the team's voting is sync or not. Session Moderator has full control on revealing story points and
                  restarting the session.
                </Typography>
              </div>
            </Slide>
          </Grid>

          <Grid item sm={12} lg={6}>
            <Slide in={true} direction='up' timeout={2000}>
              <div className='HomePageContainer'>
                <img
                  className='SessionImage'
                  alt='Session controller'
                  style={{ transform: isSmallScreen ? 'scale(0.6)' : 'none' }}
                  src={SessionControllerImage}
                ></img>
              </div>
            </Slide>
          </Grid>
        </Grid>
      </Grid>
      <Footer />
    </>
  );
}
Example #22
Source File: BondRedeem.tsx    From lobis-frontend with MIT License 4 votes vote down vote up
function BondRedeem({ bond }: IBondRedeem) {
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

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

    const currentBlock = useSelector<IReduxState, number>(state => {
        return state.app.currentBlock;
    });

    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    const bondingState = useSelector<IReduxState, IBondDetails>(state => {
        return state.bonding && state.bonding[bond.name];
    });

    const bondDetails = useSelector<IReduxState, IUserBondDetails>(state => {
        return state.account.bonds && state.account.bonds[bond.name];
    });
    async function onRedeem(autostake: boolean) {
        if (await checkWrongNetwork()) return;

        if (bond.interestDue === 0 || bond.pendingPayout === 0) {
            dispatch(warning({ text: messages.nothing_to_claim }));
            return;
        }

        await dispatch(redeemBond({ address, bond, networkID: chainID, provider, autostake }));
    }

    const vestingTime = () => {
        return prettyVestingPeriod(currentBlock, bondDetails.bondMaturationBlock);
    };

    const vestingPeriod = () => {
        return prettifySeconds(bondingState.vestingTerm * 13.01, "day");
    };

    return (
        <Box display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-around" flexWrap="wrap">
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name)) return;
                        onRedeem(false);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name, "Claim")}</p>
                </div>
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name + "_autostake")) return;
                        onRedeem(true);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name + "_autostake", "Claim and Autostake")}</p>
                </div>
            </Box>

            <Slide direction="right" in={true} mountOnEnter unmountOnExit {...{ timeout: 0 }}>
                <Box className="bond-data">
                    <div className="data-row">
                        <p className="bond-balance-title">Pending Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.interestDue, 4)} ${TOKEN_NAME}`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Claimable Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.pendingPayout, 4)} ${TOKEN_NAME}`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Time until fully vested</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingTime()}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Vesting Term</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
                    </div>
                </Box>
            </Slide>
        </Box>
    );
}
Example #23
Source File: BondPurchase.tsx    From lobis-frontend with MIT License 4 votes vote down vote up
function BondPurchase({ bond, slippage, recipientAddress }: IBondPurchaseProps) {
    const SECONDS_TO_REFRESH = 60;
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

    const [quantity, setQuantity] = useState("");
    const [secondsToRefresh, setSecondsToRefresh] = useState(SECONDS_TO_REFRESH);

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

    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    const vestingPeriod = () => {
        return prettifySeconds(bond.vestingTerm * 13.01, "day");
    };

    async function onBond() {
        if (await checkWrongNetwork()) return;

        if (quantity === "") {
            dispatch(warning({ text: messages.before_minting }));
            //@ts-ignore
        } else if (isNaN(quantity)) {
            dispatch(warning({ text: messages.before_minting }));
        } else if (bond.interestDue > 0 || bond.pendingPayout > 0) {
            const shouldProceed = window.confirm(messages.existing_mint);
            if (shouldProceed) {
                await dispatch(
                    bondAsset({
                        value: quantity,
                        slippage,
                        bond,
                        networkID: chainID,
                        provider,
                        address: recipientAddress || address,
                    }),
                );
                clearInput();
            }
        } else {
            await dispatch(
                //@ts-ignore
                bondAsset({
                    value: quantity,
                    slippage,
                    bond,
                    networkID: chainID,
                    provider,
                    address: recipientAddress || address,
                }),
            );
            clearInput();
        }
    }

    const clearInput = () => {
        setQuantity("");
    };

    const hasAllowance = useCallback(() => {
        return bond.allowance > 0;
    }, [bond.allowance]);

    const setMax = () => {
        const amount = Math.min(bond.maxBondPriceToken, bond.balance);
        const am = fromExponential(amount);
        setQuantity((am || "").toString());
    };

    const bondDetailsDebounce = useDebounce(quantity, 1000);

    useEffect(() => {
        dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
    }, [bondDetailsDebounce]);

    useEffect(() => {
        let interval: any = null;
        if (secondsToRefresh > 0) {
            interval = setInterval(() => {
                setSecondsToRefresh(secondsToRefresh => secondsToRefresh - 1);
            }, 1000);
        } else {
            clearInterval(interval);
            dispatch(calcBondDetails({ bond, value: quantity, provider, networkID: chainID }));
            setSecondsToRefresh(SECONDS_TO_REFRESH);
        }
        return () => clearInterval(interval);
    }, [secondsToRefresh, quantity]);

    const onSeekApproval = async () => {
        if (await checkWrongNetwork()) return;

        dispatch(changeApproval({ address, bond, provider, networkID: chainID }));
    };

    const displayUnits = bond.displayUnits;

    return (
        <Box display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-around" flexWrap="wrap">
                <FormControl className="bond-input-wrap" variant="outlined" color="primary" fullWidth>
                    <OutlinedInput
                        placeholder="Amount"
                        type="number"
                        value={quantity}
                        onChange={e => setQuantity(e.target.value)}
                        labelWidth={0}
                        className="bond-input"
                        disabled={bond.name === lobiOHMBond.name}
                        endAdornment={
                            <InputAdornment position="end">
                                <div className="stake-input-btn" onClick={setMax}>
                                    <p>Max</p>
                                </div>
                            </InputAdornment>
                        }
                    />
                </FormControl>
                {bond.name === lobiOHMBond.name ? (
                    <div className="transaction-button bond-disabled-btn">
                        <p>{txnButtonText(pendingTransactions, "bond_" + bond.name, "Disabled Bond")}</p>
                    </div>
                ) : hasAllowance() ? (
                    Number(quantity) > bond.balance ? (
                        <div className="transaction-button bond-disabled-btn">
                            <p>{txnButtonText(pendingTransactions, "bond_" + bond.name, "Not Enough Balance")}</p>
                        </div>
                    ) : (
                        <div
                            className="transaction-button bond-approve-btn"
                            onClick={async () => {
                                if (isPendingTxn(pendingTransactions, "bond_" + bond.name)) return;
                                await onBond();
                            }}
                        >
                            <p>{txnButtonText(pendingTransactions, "bond_" + bond.name, "Mint")}</p>
                        </div>
                    )
                ) : (
                    <div
                        className="transaction-button bond-approve-btn"
                        onClick={async () => {
                            if (isPendingTxn(pendingTransactions, "approve_" + bond.name)) return;
                            await onSeekApproval();
                        }}
                    >
                        <p>{txnButtonText(pendingTransactions, "approve_" + bond.name, "Approve")}</p>
                    </div>
                )}

                {!hasAllowance() && (
                    <div className="help-text">
                        <p className="help-text-desc">
                            Note: The "Approve" transaction is only needed when minting for the first time; subsequent minting only requires you to perform the "Mint" transaction.
                        </p>
                    </div>
                )}
            </Box>

            <Slide direction="left" in={true} mountOnEnter unmountOnExit {...{ timeout: 0 }}>
                <Box className="bond-data">
                    <div className="data-row">
                        <p className="bond-balance-title">Your Balance</p>
                        <p className="bond-balance-title">
                            {isBondLoading ? (
                                <Skeleton width="100px" />
                            ) : (
                                <>
                                    {trim(bond.balance, 10)} {displayUnits}
                                </>
                            )}
                        </p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">You Will Get</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondQuote, 4)} ${TOKEN_NAME}`}</p>
                    </div>

                    <div className={`data-row`}>
                        <p className="bond-balance-title">Max You Can Buy</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.maxBondPrice, 4)} ${TOKEN_NAME}`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">ROI</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Vesting Term</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Minimum purchase</p>
                        <p className="bond-balance-title">0.01 {TOKEN_NAME}</p>
                    </div>

                    {recipientAddress !== address && (
                        <div className="data-row">
                            <p className="bond-balance-title">Recipient</p>
                            <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : shorten(recipientAddress)}</p>
                        </div>
                    )}
                </Box>
            </Slide>
        </Box>
    );
}