@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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
transition = (props: TransitionProps) => <Slide {...props} direction="down" />
Example #7
| Source File: Toolbar.tsx From planning-poker with MIT License | 5 votes |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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>
);
}
