@material-ui/lab#Skeleton TypeScript Examples
The following examples show how to use
@material-ui/lab#Skeleton.
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: FieldSkeleton.tsx From firetable with Apache License 2.0 | 6 votes |
|
export default function FieldSkeleton(props: SkeletonProps) {
const theme = useTheme();
return (
<Skeleton
variant="rect"
width="100%"
height={56}
animation="wave"
style={{ borderRadius: theme.shape.borderRadius }}
{...props}
/>
);
}
Example #2
| Source File: SenderAccountsLoading.tsx From parity-bridges-ui with GNU General Public License v3.0 | 6 votes |
|
export default function SenderAccountsLoading() {
const classes = useStyles();
return (
<Box display="flex" flexDirection="column" alignItems="center" className={classes.skeleton}>
<Skeleton animation="wave" width="100%" height={50} />
<Skeleton animation="wave" width="100%" height={50} />
<Skeleton animation="wave" width="100%" height={300} />
</Box>
);
}
Example #3
| Source File: index.tsx From wonderland-frontend with MIT License | 6 votes |
|
function RebaseTimer() {
const currentBlockTime = useSelector<IReduxState, number>(state => {
return state.app.currentBlockTime;
});
const nextRebase = useSelector<IReduxState, number>(state => {
return state.app.nextRebase;
});
const timeUntilRebase = useMemo(() => {
if (currentBlockTime && nextRebase) {
const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
return prettifySeconds(seconds);
}
}, [currentBlockTime, nextRebase]);
return (
<Box className="rebase-timer">
<p>
{currentBlockTime ? (
timeUntilRebase ? (
<>
<strong>{timeUntilRebase}</strong> to Next Rebase
</>
) : (
<strong>Rebasing</strong>
)
) : (
<Skeleton width="200px" />
)}
</p>
</Box>
);
}
Example #4
| Source File: SkeletonList.tsx From frontend with Apache License 2.0 | 6 votes |
|
SkeletonList: React.FunctionComponent = () => {
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
return (
<Box height={1} overflow="auto">
{list.map((i) => (
<Box p={0.2} key={i}>
<Skeleton variant="rect" height={80} />
</Box>
))}
</Box>
);
}
Example #5
| Source File: skeleten-loader.tsx From react-spring-messenger-project with MIT License | 6 votes |
|
export function SkeletonLoader() {
const toLoad: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
return (
<>
{
toLoad.map((index) => (
<ListItem key={index}>
<Avatar>
<Skeleton variant="circle" width={40} height={40}/>
</Avatar>
<ListItemText primary={
<React.Fragment>
<Skeleton variant="text"/>
</React.Fragment>
}
secondary={
<React.Fragment>
<Skeleton variant="text"/>
</React.Fragment>
}/>
</ListItem>
))
}
</>
)
}
Example #6
| Source File: index.tsx From rugenerous-frontend with MIT License | 6 votes |
|
function WarmUpTimer() {
const currentBlockTime = useSelector<IReduxState, number>(state => {
return state.app.currentBlockTime;
});
const nextRebase = useSelector<IReduxState, number>(state => {
return state.app.nextRebase;
});
const timeUntilRebase = useMemo(() => {
if (currentBlockTime && nextRebase) {
const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
return prettifySeconds(seconds);
}
}, [currentBlockTime, nextRebase]);
return (
<Box className="rebase-timer">
<p>
{currentBlockTime ? (
timeUntilRebase ? (
<>
<strong>{timeUntilRebase}</strong> till claimable
</>
) : (
<strong>Rebasing</strong>
)
) : (
<Skeleton width="200px" />
)}
</p>
</Box>
);
}
Example #7
| Source File: AnalyticsPairs.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
AnalyticsPairs: React.FC = () => {
const classes = useStyles();
const [topPairs, updateTopPairs] = useState<any[] | null>(null);
useEffect(() => {
const fetchTopPairs = async () => {
updateTopPairs(null);
const [newPrice] = await getEthPrice();
const pairs = await getTopPairs(500);
const formattedPairs = pairs
? pairs.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTopPairs(pairData);
}
};
fetchTopPairs();
}, [updateTopPairs]);
return (
<Box width='100%' mb={3}>
<Typography>All Pairs</Typography>
<Box mt={4} className={classes.panel}>
{topPairs ? (
<PairTable data={topPairs} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</Box>
);
}
Example #8
| Source File: index.tsx From lobis-frontend with MIT License | 6 votes |
|
function RebaseTimer() {
const currentBlockTime = useSelector<IReduxState, number>(state => {
return state.app.currentBlock;
});
const nextRebase = useSelector<IReduxState, number>(state => {
return state.app.nextRebase;
});
const timeUntilRebase = useMemo(() => {
if (currentBlockTime && nextRebase) {
const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
return prettifySeconds(seconds);
}
}, [currentBlockTime, nextRebase]);
return (
<Box className="rebase-timer">
<p>
{currentBlockTime ? (
timeUntilRebase ? (
<>
<strong>{timeUntilRebase}</strong> to Next Rebase
</>
) : (
<strong>Rebasing</strong>
)
) : (
<Skeleton width="200px" />
)}
</p>
</Box>
);
}
Example #9
| Source File: HeroSection.tsx From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
HeroSection: React.FC<{ globalData: any }> = ({ globalData }) => {
const classes = useStyles();
const history = useHistory();
const { account } = useActiveWeb3React();
const { ethereum } = window as any;
const toggleWalletModal = useWalletModalToggle();
return (
<Box className={classes.heroSection}>
<Typography variant='body2' style={{ fontWeight: 'bold' }}>
Total Value Locked
</Typography>
{globalData ? (
<Box display='flex' pt='5px'>
<Typography variant='h3'>$</Typography>
<Typography variant='h1'>
{Number(globalData.totalLiquidityUSD).toLocaleString(undefined, {
maximumFractionDigits: 0,
})}
</Typography>
</Box>
) : (
<Box my={1}>
<Skeleton variant='rect' width={400} height={72} />
</Box>
)}
<Typography variant='h5'>
Top Asset Exchange on the Polygon Network
</Typography>
<Box mt={2} width={200} height={48}>
<Button
fullWidth
style={{
backgroundColor: '#004ce6',
borderRadius: '30px',
height: '100%',
fontSize: 16,
fontWeight: 500,
}}
onClick={() => {
ethereum && !isSupportedNetwork(ethereum)
? addMaticToMetamask()
: account
? history.push('/swap')
: toggleWalletModal();
}}
>
{ethereum && !isSupportedNetwork(ethereum)
? 'Switch to Polygon'
: account
? 'Enter App'
: 'Connect Wallet'}
</Button>
</Box>
</Box>
);
}
Example #10
| Source File: index.tsx From rugenerous-frontend with MIT License | 5 votes |
|
function Footer() {
const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
const stakingAPY = useSelector<IReduxState, number>(state => {
return state.app.stakingAPY;
});
const treasuryBalance = useSelector<IReduxState, number>(state => {
return state.app.treasuryBalance;
});
const circSupply = useSelector<IReduxState, number>(state => {
return state.app.circSupply;
});
const trimmedStakingAPY = trim(stakingAPY * 100, 1);
return (
<div className="landing-footer">
<Grid container spacing={1}>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Total Staked</p>
<p className="landing-footer-item-value">
{isAppLoading ? (
<Skeleton width="180px" />
) : (
new Intl.NumberFormat("en-US", {
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(circSupply)
)}
</p>
</div>
</Grid>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Treasury Balance</p>
<p className="landing-footer-item-value">
{isAppLoading ? (
<Skeleton width="180px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(treasuryBalance)
)}
</p>
</div>
</Grid>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Current APY</p>
<p className="landing-footer-item-value">
{stakingAPY ? (
<>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</>
) : (
<Skeleton width="150px" />
)}
</p>
</div>
</Grid>
</Grid>
</div>
);
}
Example #11
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
const { tokens, loading } = useTokens();
const [quantity, setQuantity] = useState("");
const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
let addressTest = true;
if (quantity && quantity.length === 42) {
addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
}
let nameTest = true;
if (quantity && quantity.length < 10) {
nameTest = name.toLowerCase().includes(quantity.toLowerCase());
}
let lpFilter = true;
if (bond.name === mim.name) {
lpFilter = mimToken.address !== address;
}
if (bond.name === wavax.name) {
lpFilter = isAvax ? false : wavaxToken.address !== address;
}
return nameTest && addressTest && lpFilter;
});
return (
<Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
<Paper className="ohm-card ohm-popover choose-token-poper">
<div className="cross-wrap">
<IconButton onClick={handleClose}>
<SvgIcon color="primary" component={XIcon} />
</IconButton>
</div>
<Box>
<div className="choose-token-poper-header">
<p className="choose-token-poper-header-title">Choose token</p>
<OutlinedInput
placeholder="Search name or paste address"
className="choose-token-poper-header-input"
value={quantity}
onChange={e => setQuantity(e.target.value)}
labelWidth={0}
startAdornment={
<InputAdornment position="start">
<Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
<img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
</Box>
</InputAdornment>
}
/>
</div>
<div className="choose-token-poper-body">
{filtredTokens.map(token => (
<div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
<img className="choose-token-poper-body-item-img" src={token.img} alt="" />
<div className="choose-token-poper-body-item-desc">
<p className="choose-token-poper-body-item-name">{token.name}</p>
<div className="choose-token-poper-body-item-balance">{loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}</div>
</div>
</div>
))}
</div>
</Box>
</Paper>
</Modal>
);
}
Example #12
| Source File: index.tsx From rugenerous-frontend with MIT License | 5 votes |
|
function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
const { tokens, loading } = useTokens();
const [quantity, setQuantity] = useState("");
const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
let addressTest = true;
if (quantity && quantity.length === 42) {
addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
}
let nameTest = true;
if (quantity && quantity.length < 10) {
nameTest = name.toLowerCase().includes(quantity.toLowerCase());
}
let lpFilter = true;
if (bond.name === mim.name) {
lpFilter = mimToken.address !== address;
}
// if (bond.name === wavax.name) {
// lpFilter = isAvax ? false : wavaxToken.address !== address;
// }
return nameTest && addressTest && lpFilter;
});
return (
<Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
<Paper className="ohm-card ohm-popover choose-token-poper">
<div className="cross-wrap">
<IconButton onClick={handleClose}>
<SvgIcon color="primary" component={XIcon} />
</IconButton>
</div>
<Box>
<div className="choose-token-poper-header">
<p className="choose-token-poper-header-title">Choose token</p>
<OutlinedInput
placeholder="Search name or paste address"
className="choose-token-poper-header-input"
value={quantity}
onChange={e => setQuantity(e.target.value)}
labelWidth={0}
startAdornment={
<InputAdornment position="start">
<Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
<img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
</Box>
</InputAdornment>
}
/>
</div>
<div className="choose-token-poper-body">
{filtredTokens.map(token => (
<div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
<img className="choose-token-poper-body-item-img" src={token.img} alt="" />
<div className="choose-token-poper-body-item-desc">
<p className="choose-token-poper-body-item-name">{token.name}</p>
<div className="choose-token-poper-body-item-balance">
{loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}
</div>
</div>
</div>
))}
</div>
</Box>
</Paper>
</Modal>
);
}
Example #13
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function Bond({ bond }: IBondProps) {
const { address } = useWeb3Context();
const [slippage, setSlippage] = useState(0.5);
const [view, setView] = useState(0);
const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
const onSlippageChange = (value: any) => {
return setSlippage(value);
};
const changeView = (newView: number) => () => {
setView(newView);
};
return (
<Fade in={true} mountOnEnter unmountOnExit>
<Grid className="bond-view">
<Backdrop open={true}>
<Fade in={true}>
<div className="bond-card">
<BondHeader bond={bond} slippage={slippage} onSlippageChange={onSlippageChange} />
{/* @ts-ignore */}
<Box direction="row" className="bond-price-data-row">
<div className="bond-price-data">
<p className="bond-price-data-title">Mint Price</p>
<p className="bond-price-data-value">
{isBondLoading ? <Skeleton /> : bond.isLP || bond.name === "wavax" ? `$${trim(bond.bondPrice, 2)}` : `${trim(bond.bondPrice, 2)} MIM`}
</p>
</div>
<div className="bond-price-data">
<p className="bond-price-data-title">TIME Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
</div>
</Box>
<div className="bond-one-table">
<div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
<p>Mint</p>
</div>
<div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
<p>Redeem</p>
</div>
</div>
<TabPanel value={view} index={0}>
<BondPurchase bond={bond} slippage={slippage} />
</TabPanel>
<TabPanel value={view} index={1}>
<BondRedeem bond={bond} />
</TabPanel>
</div>
</Fade>
</Backdrop>
</Grid>
</Fade>
);
}
Example #14
| Source File: TradingInfo.tsx From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
TradingInfo: React.FC<{ globalData: any }> = ({ globalData }) => {
const classes = useStyles();
const lairInfo = useLairInfo();
const [openStakeModal, setOpenStakeModal] = useState(false);
const dQUICKAPY = useLairDQUICKAPY(lairInfo);
const totalRewardsUSD = useTotalRewardsDistributed();
return (
<>
{openStakeModal && (
<StakeQuickModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
/>
)}
<Box className={classes.tradingSection}>
{globalData ? (
<Typography variant='h3'>
{Number(globalData.oneDayTxns).toLocaleString()}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24H TRANSACTIONS</Typography>
</Box>
<Box className={classes.tradingSection}>
{globalData ? (
<Box display='flex'>
<Typography variant='h6'>$</Typography>
<Typography variant='h3'>
{formatCompact(globalData.oneDayVolumeUSD)}
</Typography>
</Box>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24H TRADING VOLUME</Typography>
</Box>
<Box className={classes.tradingSection}>
{totalRewardsUSD ? (
<Box display='flex'>
<Typography variant='h6'>$</Typography>
<Typography variant='h3'>
{totalRewardsUSD.toLocaleString()}
</Typography>
</Box>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>24h REWARDS DISTRIBUTED</Typography>
</Box>
<Box className={classes.tradingSection}>
{globalData ? (
<Typography variant='h3'>
{Number(globalData.pairCount).toLocaleString(undefined, {
maximumFractionDigits: 0,
})}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>TOTAL TRADING PAIRS</Typography>
</Box>
<Box className={classes.tradingSection} pt='20px'>
{dQUICKAPY ? (
<Typography variant='h3'>{dQUICKAPY.toLocaleString()}%</Typography>
) : (
<Skeleton variant='rect' width={100} height={45} />
)}
<Typography>dQUICK APY</Typography>
<Typography variant='h4' onClick={() => setOpenStakeModal(true)}>
stake {'>'}
</Typography>
</Box>
</>
);
}
Example #15
| Source File: index.tsx From wonderland-frontend with MIT License | 5 votes |
|
function Footer() {
const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
const stakingAPY = useSelector<IReduxState, number>(state => {
return state.app.stakingAPY;
});
const treasuryBalance = useSelector<IReduxState, number>(state => {
return state.app.treasuryBalance;
});
const circSupply = useSelector<IReduxState, number>(state => {
return state.app.circSupply;
});
const trimmedStakingAPY = trim(stakingAPY * 100, 1);
return (
<div className="landing-footer">
<Grid container spacing={1}>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Total Staked</p>
<p className="landing-footer-item-value">
{isAppLoading ? (
<Skeleton width="180px" />
) : (
new Intl.NumberFormat("en-US", {
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(circSupply)
)}
</p>
</div>
</Grid>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Treasury Balance</p>
<p className="landing-footer-item-value">
{isAppLoading ? (
<Skeleton width="180px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(treasuryBalance)
)}
</p>
</div>
</Grid>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="landing-footer-item-wrap">
<p className="landing-footer-item-title">Current APY</p>
<p className="landing-footer-item-value">
{stakingAPY ? <>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</> : <Skeleton width="150px" />}
</p>
</div>
</Grid>
</Grid>
</div>
);
}
Example #16
| Source File: PlayerList.tsx From uno-game with MIT License | 5 votes |
|
PlayerListSkeleton: React.FC = () => {
const classes = useStyles()
const cards = [...new Array(3)].map((_, index) => (
<React.Fragment key={index}>
<Card>
<CardContent className={classes.cardContentPlayerItem}>
<Grid container justify="space-between">
<Skeleton
animation="wave"
variant="rect"
height={30}
width="30%"
/>
<Skeleton
animation="wave"
variant="circle"
height={30}
/>
<Skeleton
animation="wave"
variant="rect"
height={30}
width="10%"
/>
</Grid>
</CardContent>
</Card>
<Divider orientation="horizontal" size={2} />
</React.Fragment>
))
return (
<Grid container direction="column">
<Divider orientation="horizontal" size={4} />
<Card>
<CardContent className={classes.cardContentButton}>
<Grid container justify="center">
<Skeleton
animation="wave"
variant="rect"
height={20}
width="10%"
/>
</Grid>
</CardContent>
</Card>
<Divider orientation="horizontal" size={5} />
{cards}
</Grid>
)
}
Example #17
| Source File: BondRow.tsx From lobis-frontend with MIT License | 5 votes |
|
export function BondTableData({ bond }: IBondProps) {
const isBondLoading = !bond.bondPrice ?? true;
const dispatch = useDispatch();
const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();
const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
return state.pendingTransactions;
});
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 }));
}
return (
<TableRow>
<TableCell align="left">
<BondLogo bond={bond} />
<div className="bond-name">
<p className="bond-name-title">{bond.displayName}</p>
{bond.isLP && (
<Link color="primary" href={bond.lpUrl} target="_blank">
<p className="bond-name-title-link">View Contract</p>
</Link>
)}
</div>
</TableCell>
<TableCell align="center">
<p className="bond-name-title">
<>{isBondLoading ? <Skeleton width="50px" /> : `$${trim(bond.bondPrice, 2)}`}</>
</p>
</TableCell>
<TableCell align="right">
<p className="bond-name-title">{isBondLoading ? <Skeleton width="50px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
</TableCell>
<TableCell align="right">
<p className="bond-name-title">
{isBondLoading ? (
<Skeleton width="50px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(bond.purchased)
)}
</p>
</TableCell>
<TableCell>
<Link component={NavLink} to={`/mints/${bond.name}`}>
<div className="bond-table-btn">
<p>Mint</p>
</div>
</Link>{" "}
</TableCell>
</TableRow>
);
}
Example #18
| Source File: index.tsx From aqualink-app with MIT License | 5 votes |
|
LoadingSkeleton: FC<LoadingSkeletonProps> = ({
loading,
children,
variant,
width,
height,
lines,
image,
dark = true,
className,
longText,
textHeight,
}) => {
const classes = useStyles({ image, textHeight });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
const [lineWidths, setLineWidths] = useState<
{ key: number; width: number }[]
>([]);
const rectSkeletonProps: SkeletonProps =
variant === "rect" &&
(typeof width !== "undefined" || typeof height !== "undefined")
? { width, height }
: {};
useEffect(() => {
if (typeof lines === "number") {
setLineWidths(
times(lines, (i) => ({
key: i,
width: random(
longText || isMobile ? 50 : 20,
longText || isMobile ? 100 : 40
),
}))
);
}
}, [isMobile, lines, longText]);
if (!loading) {
return <>{children}</>;
}
if (variant === "text" && typeof lines === "number" && lineWidths.length) {
return (
<>
{lineWidths.map(({ key, width: lineWidth }) => (
<Skeleton
animation="wave"
className={classNames(classes.root, classes.textHeight, className, {
[classes.dark]: dark,
})}
key={key}
variant={variant}
width={width || `${lineWidth}%`}
/>
))}
</>
);
}
return (
<Skeleton
animation="wave"
className={classNames(classes.root, classes.image, className, {
[classes.dark]: dark,
})}
variant={variant}
{...rectSkeletonProps}
/>
);
}
Example #19
| Source File: GameList.tsx From uno-game with MIT License | 5 votes |
|
GameListSkeleton: React.FC = () => {
const classes = useStyles()
const cards = [...new Array(3)].map((_, index) => (
<React.Fragment key={index}>
<Card>
<CardContent className={classes.cardContentGameItem}>
<Grid container justify="space-between">
<Skeleton
animation="wave"
variant="rect"
height={30}
width="30%"
/>
<Skeleton
animation="wave"
variant="circle"
height={30}
/>
<Skeleton
animation="wave"
variant="rect"
height={30}
width="10%"
/>
</Grid>
</CardContent>
</Card>
<Divider orientation="horizontal" size={2} />
</React.Fragment>
))
return (
<Grid container direction="column">
<Skeleton
animation="wave"
variant="rect"
height={30}
width="30%"
/>
<Divider orientation="horizontal" size={5} />
{cards}
</Grid>
)
}
Example #20
| Source File: index.tsx From lobis-frontend with MIT License | 5 votes |
|
function Bond({ bond }: IBondProps) {
const { provider, address } = useWeb3Context();
const [slippage, setSlippage] = useState(0.5);
const [recipientAddress, setRecipientAddress] = useState(address);
const [view, setView] = useState(0);
const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
const onRecipientAddressChange = (e: any) => {
return setRecipientAddress(e.target.value);
};
const onSlippageChange = (e: any) => {
return setSlippage(e.target.value);
};
useEffect(() => {
if (address) setRecipientAddress(address);
}, [provider, address]);
const changeView = (newView: number) => () => {
setView(newView);
};
return (
<Grid className="bond-view">
<Backdrop open={true}>
<Fade in={true}>
<div className="bond-card">
<BondHeader
bond={bond}
slippage={slippage}
recipientAddress={recipientAddress}
onSlippageChange={onSlippageChange}
onRecipientAddressChange={onRecipientAddressChange}
/>
{/* @ts-ignore */}
<Box direction="row" className="bond-price-data-row">
<div className="bond-price-data">
<p className="bond-price-data-title">Mint Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.bondPrice, 2)}`}</p>
</div>
<div className="bond-price-data">
<p className="bond-price-data-title">{TOKEN_NAME} Price</p>
<p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
</div>
</Box>
<div className="bond-one-table">
<div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
<p>Mint</p>
</div>
<div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
<p>Redeem</p>
</div>
</div>
<TabPanel value={view} index={0}>
<BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
</TabPanel>
<TabPanel value={view} index={1}>
<BondRedeem bond={bond} />
</TabPanel>
</div>
</Fade>
</Backdrop>
</Grid>
);
}
Example #21
| Source File: AnalyticsTokens.tsx From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
AnalyticsTokens: React.FC = () => {
const classes = useStyles();
const { palette } = useTheme();
const [tokensFilter, setTokensFilter] = useState(0);
const [topTokens, updateTopTokens] = useState<any[] | null>(null);
const { bookmarkTokens } = useBookmarkTokens();
const favoriteTokens = useMemo(() => {
if (topTokens) {
return topTokens.filter(
(token: any) => bookmarkTokens.indexOf(token.id) > -1,
);
} else {
return [];
}
}, [topTokens, bookmarkTokens]);
useEffect(() => {
const fetchTopTokens = async () => {
updateTopTokens(null); //set top tokens as null to show loading status when fetching tokens data
const [newPrice, oneDayPrice] = await getEthPrice();
const topTokensData = await getTopTokens(newPrice, oneDayPrice, 200);
if (topTokensData) {
updateTopTokens(topTokensData);
}
};
fetchTopTokens();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updateTopTokens]);
return (
<Box width='100%' mb={3}>
<TopMovers background={palette.grey.A700} hideArrow={true} />
<Box my={4} px={2} display='flex' flexWrap='wrap' alignItems='center'>
<Box
className={classes.tokensFilter}
onClick={() => setTokensFilter(0)}
color={
tokensFilter === 0 ? palette.primary.main : palette.text.disabled
}
>
<Typography variant='h6'>All Cryptos</Typography>
</Box>
<Box
className={classes.tokensFilter}
color={
tokensFilter === 1 ? palette.primary.main : palette.text.disabled
}
onClick={() => setTokensFilter(1)}
>
<Typography variant='h6'>Favourites</Typography>
</Box>
<Box
className={classes.tokensFilter}
color={
tokensFilter === 2 ? palette.primary.main : palette.text.disabled
}
onClick={() => setTokensFilter(2)}
>
<Typography variant='h6'>New Listing</Typography>
</Box>
</Box>
<Box className={classes.panel}>
{topTokens && topTokens.length === 200 ? (
<TokensTable data={tokensFilter === 0 ? topTokens : favoriteTokens} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</Box>
);
}
Example #22
| Source File: TechDocsReaderPageHeader.tsx From backstage with Apache License 2.0 | 5 votes |
|
skeleton = <Skeleton animation="wave" variant="text" height={40} />
Example #23
| Source File: index.tsx From wonderland-frontend with MIT License | 4 votes |
|
function Calculator() {
const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
const marketPrice = useSelector<IReduxState, number>(state => {
return state.app.marketPrice;
});
const stakingAPY = useSelector<IReduxState, number>(state => {
return state.app.stakingAPY;
});
const memoBalance = useSelector<IReduxState, string>(state => {
return state.account.balances && state.account.balances.memo;
});
const trimmedStakingAPY = trim(stakingAPY * 100, 1);
const trimmedMemoBalance = trim(Number(memoBalance), 6);
const trimeMarketPrice = trim(marketPrice, 2);
const [memoAmount, setMemoAmount] = useState(trimmedMemoBalance);
const [rewardYield, setRewardYield] = useState(trimmedStakingAPY);
const [priceAtPurchase, setPriceAtPurchase] = useState(trimeMarketPrice);
const [futureMarketPrice, setFutureMarketPrice] = useState(trimeMarketPrice);
const [days, setDays] = useState(30);
const [rewardsEstimation, setRewardsEstimation] = useState("0");
const [potentialReturn, setPotentialReturn] = useState("0");
const calcInitialInvestment = () => {
const memo = Number(memoAmount) || 0;
const price = parseFloat(priceAtPurchase) || 0;
const amount = memo * price;
return trim(amount, 2);
};
const calcCurrentWealth = () => {
const memo = Number(memoAmount) || 0;
const price = parseFloat(trimeMarketPrice);
const amount = memo * price;
return trim(amount, 2);
};
const [initialInvestment, setInitialInvestment] = useState(calcInitialInvestment());
useEffect(() => {
const newInitialInvestment = calcInitialInvestment();
setInitialInvestment(newInitialInvestment);
}, [memoAmount, priceAtPurchase]);
const calcNewBalance = () => {
let value = parseFloat(rewardYield) / 100;
value = Math.pow(value - 1, 1 / (365 * 3)) - 1 || 0;
let balance = Number(memoAmount);
for (let i = 0; i < days * 3; i++) {
balance += balance * value;
}
return balance;
};
useEffect(() => {
const newBalance = calcNewBalance();
setRewardsEstimation(trim(newBalance, 6));
const newPotentialReturn = newBalance * (parseFloat(futureMarketPrice) || 0);
setPotentialReturn(trim(newPotentialReturn, 2));
}, [days, rewardYield, futureMarketPrice, memoAmount]);
return (
<div className="calculator-view">
<Zoom in={true}>
<div className="calculator-card">
<Grid className="calculator-card-grid" container direction="column" spacing={2}>
<Grid item>
<div className="calculator-card-header">
<p className="calculator-card-header-title">Calculator</p>
<p className="calculator-card-header-subtitle">Estimate your returns</p>
</div>
</Grid>
<Grid item>
<div className="calculator-card-metrics">
<Grid container spacing={2}>
<Grid item xs={12} sm={4} md={4} lg={4}>
<div className="calculator-card-apy">
<p className="calculator-card-metrics-title">TIME Price</p>
<p className="calculator-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trimeMarketPrice}`}</p>
</div>
</Grid>
<Grid item xs={6} sm={4} md={4} lg={4}>
<div className="calculator-card-tvl">
<p className="calculator-card-metrics-title">Current APY</p>
<p className="calculator-card-metrics-value">
{isAppLoading ? <Skeleton width="100px" /> : <>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</>}
</p>
</div>
</Grid>
<Grid item xs={6} sm={4} md={4} lg={4}>
<div className="calculator-card-index">
<p className="calculator-card-metrics-title">Your MEMO Balance</p>
<p className="calculator-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : <>{trimmedMemoBalance} MEMO</>}</p>
</div>
</Grid>
</Grid>
</div>
</Grid>
<div className="calculator-card-area">
<div>
<div className="calculator-card-action-area">
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<div className="calculator-card-action-area-inp-wrap">
<p className="calculator-card-action-area-inp-wrap-title">MEMO Amount</p>
<OutlinedInput
type="number"
placeholder="Amount"
className="calculator-card-action-input"
value={memoAmount}
onChange={e => setMemoAmount(e.target.value)}
labelWidth={0}
endAdornment={
<InputAdornment position="end">
<div onClick={() => setMemoAmount(trimmedMemoBalance)} className="stake-card-action-input-btn">
<p>Max</p>
</div>
</InputAdornment>
}
/>
</div>
</Grid>
<Grid item xs={12} sm={6}>
<div className="calculator-card-action-area-inp-wrap">
<p className="calculator-card-action-area-inp-wrap-title">APY (%)</p>
<OutlinedInput
type="number"
placeholder="Amount"
className="calculator-card-action-input"
value={rewardYield}
onChange={e => setRewardYield(e.target.value)}
labelWidth={0}
endAdornment={
<InputAdornment position="end">
<div onClick={() => setRewardYield(trimmedStakingAPY)} className="stake-card-action-input-btn">
<p>Current</p>
</div>
</InputAdornment>
}
/>
</div>
</Grid>
<Grid item xs={12} sm={6}>
<div className="calculator-card-action-area-inp-wrap">
<p className="calculator-card-action-area-inp-wrap-title">TIME price at purchase ($)</p>
<OutlinedInput
type="number"
placeholder="Amount"
className="calculator-card-action-input"
value={priceAtPurchase}
onChange={e => setPriceAtPurchase(e.target.value)}
labelWidth={0}
endAdornment={
<InputAdornment position="end">
<div onClick={() => setPriceAtPurchase(trimeMarketPrice)} className="stake-card-action-input-btn">
<p>Current</p>
</div>
</InputAdornment>
}
/>
</div>
</Grid>
<Grid item xs={12} sm={6}>
<div className="calculator-card-action-area-inp-wrap">
<p className="calculator-card-action-area-inp-wrap-title">Future TIME market price ($)</p>
<OutlinedInput
type="number"
placeholder="Amount"
className="calculator-card-action-input"
value={futureMarketPrice}
onChange={e => setFutureMarketPrice(e.target.value)}
labelWidth={0}
endAdornment={
<InputAdornment position="end">
<div onClick={() => setFutureMarketPrice(trimeMarketPrice)} className="stake-card-action-input-btn">
<p>Current</p>
</div>
</InputAdornment>
}
/>
</div>
</Grid>
</Grid>
</div>
<div className="calculator-days-slider-wrap">
<p className="calculator-days-slider-wrap-title">{`${days} day${days > 1 ? "s" : ""}`}</p>
<Slider className="calculator-days-slider" min={1} max={365} value={days} onChange={(e, newValue: any) => setDays(newValue)} />
</div>
<div className="calculator-user-data">
<div className="data-row">
<p className="data-row-name">Your initial investment</p>
<p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${initialInvestment}</>}</p>
</div>
<div className="data-row">
<p className="data-row-name">Current wealth</p>
<p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${calcCurrentWealth()}</>}</p>
</div>
<div className="data-row">
<p className="data-row-name">TIME rewards estimation</p>
<p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>{rewardsEstimation} TIME</>}</p>
</div>
<div className="data-row">
<p className="data-row-name">Potential return</p>
<p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${potentialReturn}</>}</p>
</div>
<div className="data-row">
<p className="data-row-name">Potential number of lambos</p>
<p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>{Math.floor(Number(potentialReturn) / 220000)}</>}</p>
</div>
</div>
</div>
</div>
</Grid>
</div>
</Zoom>
</div>
);
}
Example #24
| Source File: Notes.tsx From vscode-crossnote with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Notes(props: Props) {
const classes = useStyles(props);
const { t } = useTranslation();
const [notes, setNotes] = useState<Note[]>([]);
const [notesListElement, setNotesListElement] = useState<HTMLElement>(null);
const [forceUpdate, setForceUpdate] = useState<number>(Date.now());
const searchValue = props.searchValue;
const orderBy = props.orderBy;
const orderDirection = props.orderDirection;
const selectedNote = props.selectedNote;
const setSelectedNote = props.setSelectedNote;
useEffect(() => {
const pinned: Note[] = [];
const unpinned: Note[] = [];
props.notes.forEach((note) => {
if (searchValue.trim().length) {
const regexp = new RegExp(
"(" +
searchValue
.trim()
.split(/\s+/g)
.map((s) => s.replace(/[.!@#$%^&*()_+\-=[\]]/g, (x) => `\\${x}`)) // escape special regexp characters
.join("|") +
")",
"i"
);
if (note.markdown.match(regexp) || note.filePath.match(regexp)) {
if (note.config.pinned) {
pinned.push(note);
} else {
unpinned.push(note);
}
}
} else {
if (note.config.pinned) {
pinned.push(note);
} else {
unpinned.push(note);
}
}
});
const sort = (notes: Note[]) => {
if (orderBy === OrderBy.ModifiedAt) {
if (orderDirection === OrderDirection.DESC) {
notes.sort(
(a, b) =>
b.config.modifiedAt.getTime() - a.config.modifiedAt.getTime()
);
} else {
notes.sort(
(a, b) =>
a.config.modifiedAt.getTime() - b.config.modifiedAt.getTime()
);
}
} else if (orderBy === OrderBy.CreatedAt) {
if (orderDirection === OrderDirection.DESC) {
notes.sort(
(a, b) =>
b.config.createdAt.getTime() - a.config.createdAt.getTime()
);
} else {
notes.sort(
(a, b) =>
a.config.createdAt.getTime() - b.config.createdAt.getTime()
);
}
} else if (orderBy === OrderBy.Title) {
if (orderDirection === OrderDirection.DESC) {
notes.sort((a, b) =>
(
(b.config.encryption && b.config.encryption.title) ||
getHeaderFromMarkdown(b.markdown)
).localeCompare(
(a.config.encryption && a.config.encryption.title) ||
getHeaderFromMarkdown(a.markdown)
)
);
} else {
notes.sort((a, b) =>
(
(a.config.encryption && a.config.encryption.title) ||
getHeaderFromMarkdown(a.markdown)
).localeCompare(
(b.config.encryption && b.config.encryption.title) ||
getHeaderFromMarkdown(b.markdown)
)
);
}
}
return notes;
};
setNotes([...sort(pinned), ...sort(unpinned)]);
}, [props.notes, searchValue, orderBy, orderDirection]);
useEffect(() => {
if (
notes &&
notes.length > 0 &&
(!selectedNote || selectedNote.notebookPath !== notes[0].notebookPath)
) {
setSelectedNote(notes[0]);
}
}, [notes, selectedNote]);
useEffect(() => {
if (selectedNote) {
const message: Message = {
action: MessageAction.OpenNoteIfNoNoteSelected,
data: selectedNote,
};
vscode.postMessage(message);
}
}, [selectedNote]);
/*
useEffect(() => {
if (notesListElement) {
const keyDownHandler = (event: KeyboardEvent) => {
const selectedNote = crossnoteContainer.selectedNote;
if (!selectedNote || !notes.length) {
return;
}
const currentIndex = notes.findIndex(
(n) => n.filePath === selectedNote.filePath
);
if (currentIndex < 0) {
crossnoteContainer.setSelectedNote(notes[0]);
} else if (event.which === 40) {
// Up
if (currentIndex >= 0 && currentIndex < notes.length - 1) {
crossnoteContainer.setSelectedNote(notes[currentIndex + 1]);
}
} else if (event.which === 38) {
// Down
if (currentIndex > 0 && currentIndex < notes.length) {
crossnoteContainer.setSelectedNote(notes[currentIndex - 1]);
}
}
};
notesListElement.addEventListener("keydown", keyDownHandler);
return () => {
notesListElement.removeEventListener("keydown", keyDownHandler);
};
}
}, [notesListElement, notes, crossnoteContainer.selectedNote]);
*/
useEffect(() => {
if (notesListElement) {
// Hack: fix note cards not displaying bug when searchValue is not empty
const hack = () => {
const initialHeight = notesListElement.style.height;
const initialFlex = notesListElement.style.flex;
notesListElement.style.flex = "initial";
notesListElement.style.height = "10px";
notesListElement.scrollTop += 1;
notesListElement.scrollTop -= 1;
notesListElement.style.height = initialHeight;
notesListElement.style.flex = initialFlex;
};
window.addEventListener("resize", hack);
hack();
return () => {
window.removeEventListener("resize", hack);
};
}
}, [notes, notesListElement]);
/*
useInterval(() => {
if (crossnoteContainer.needsToRefreshNotes) {
crossnoteContainer.setNeedsToRefreshNotes(false);
setForceUpdate(Date.now());
}
}, 15000);
*/
return (
<div
className={clsx(classes.notesList)}
ref={(element: HTMLElement) => {
setNotesListElement(element);
}}
>
{/*crossnoteContainer.selectedNotebook &&
crossnoteContainer.selectedNotebook.localSha !==
crossnoteContainer.selectedNotebook.remoteSha && (
<Box className={clsx(classes.updatePanel)}>
<Typography style={{ marginBottom: "8px" }}>
{"? " + t("general/notebook-updates-found")}
</Typography>
<Button
color={"primary"}
variant={"outlined"}
onClick={pullNotebook}
disabled={
crossnoteContainer.isPullingNotebook ||
crossnoteContainer.isPushingNotebook
}
>
<CloudDownloadOutline
style={{ marginRight: "8px" }}
></CloudDownloadOutline>
{t("general/update-the-notebook")}
</Button>
</Box>
)*/}
{(notes || []).map((note) => {
return (
<LazyLoad
key={"lazy-load-note-card-" + note.filePath}
placeholder={
<Box
style={{
textAlign: "center",
height: `${lazyLoadPlaceholderHeight}px`,
paddingTop: "16px",
paddingBottom: "16px",
boxSizing: "border-box",
}}
>
<Skeleton />
<Skeleton animation={false} />
<Skeleton animation="wave" />
</Box>
}
height={lazyLoadPlaceholderHeight}
overflow={true}
once={true}
scrollContainer={notesListElement}
resize={true}
>
<NoteCard
key={"note-card-" + note.filePath}
note={note}
selectedNote={selectedNote}
setSelectedNote={setSelectedNote}
></NoteCard>
</LazyLoad>
);
})}
{
/*crossnoteContainer.initialized &&
!crossnoteContainer.isLoadingNotebook &&*/
notes.length === 0 && (
<Typography
style={{
textAlign: "center",
marginTop: "32px",
}}
variant={"body2"}
>
{"? " + t("general/no-notes-found")}
</Typography>
)
}
</div>
);
}
Example #25
| Source File: index.tsx From wonderland-frontend with MIT License | 4 votes |
|
function ChooseBond() {
const { bonds } = useBonds();
const isSmallScreen = useMediaQuery("(max-width: 733px)"); // change to breakpoint query
const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
const marketPrice = useSelector<IReduxState, number>(state => {
return state.app.marketPrice;
});
const treasuryBalance = useSelector<IReduxState, number>(state => {
return state.app.treasuryBalance;
});
return (
<div className="choose-bond-view">
<Zoom in={true}>
<div className="choose-bond-view-card">
<div className="choose-bond-view-card-header">
<p className="choose-bond-view-card-title"> Mint (?, ?)</p>
</div>
<Grid container item xs={12} spacing={2} className="choose-bond-view-card-metrics">
<Grid item xs={12} sm={6}>
<Box textAlign="center">
<p className="choose-bond-view-card-metrics-title">Treasury Balance</p>
<p className="choose-bond-view-card-metrics-value">
{isAppLoading ? (
<Skeleton width="180px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(treasuryBalance)
)}
</p>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box textAlign="center">
<p className="choose-bond-view-card-metrics-title">TIME Price</p>
<p className="choose-bond-view-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trim(marketPrice, 2)}`}</p>
</Box>
</Grid>
</Grid>
{!isSmallScreen && (
<Grid container item>
<TableContainer className="choose-bond-view-card-table">
<Table>
<TableHead>
<TableRow>
<TableCell align="center">
<p className="choose-bond-view-card-table-title">Mint</p>
</TableCell>
<TableCell align="center">
<p className="choose-bond-view-card-table-title">Price</p>
</TableCell>
<TableCell align="center">
<p className="choose-bond-view-card-table-title">ROI</p>
</TableCell>
<TableCell align="right">
<p className="choose-bond-view-card-table-title">Purchased</p>
</TableCell>
<TableCell align="right"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{bonds.map(bond => (
<BondTableData key={bond.name} bond={bond} />
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
)}
</div>
</Zoom>
{isSmallScreen && (
<div className="choose-bond-view-card-container">
<Grid container item spacing={2}>
{bonds.map(bond => (
<Grid item xs={12} key={bond.name}>
<BondDataCard key={bond.name} bond={bond} />
</Grid>
))}
</Grid>
</div>
)}
</div>
);
}
Example #26
| Source File: Table.tsx From uno-game with MIT License | 4 votes |
|
TableSkeleton: React.FC = () => {
const classes = useStyles()
return (
<Grid container style={{ height: "100%", overflow: "hidden" }}>
<Grid container>
<Grid item xs={1}>
</Grid>
<Grid item xs={10}>
<Grid container justify="center" alignItems="center">
<Card>
<CardContent className={classes.cardContentCardDeckPlaceholder}>
<Skeleton
variant="rect"
height={50}
width={100}
/>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid item xs={1}>
<Skeleton
variant="rect"
height={50}
width="10%"
/>
</Grid>
</Grid>
<Grid container alignItems="center">
<Grid item xs={2}>
<Grid container justify="flex-start">
<Card>
<CardContent className={classes.cardContentCardDeckPlaceholder}>
<Skeleton
variant="rect"
height={50}
width={100}
/>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid item xs={8}>
<Grid container justify="center" alignItems="center">
<Card>
<CardContent className={classes.cardContentCardDeckPlaceholder}>
<Skeleton
variant="circle"
height={100}
width={100}
/>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid item xs={2}>
<Grid container justify="flex-end">
<Card>
<CardContent className={classes.cardContentCardDeckPlaceholder}>
<Skeleton
variant="rect"
height={50}
width={100}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
<Grid container alignItems="flex-end">
<Grid item xs={1}></Grid>
<Grid item xs={10}>
<Grid container justify="center">
<Card>
<CardContent className={classes.cardContentCardDeckPlaceholder}>
<Skeleton
variant="rect"
height={50}
width={100}
/>
</CardContent>
</Card>
</Grid>
</Grid>
<Grid item xs={1}></Grid>
</Grid>
</Grid>
)
}
Example #27
| 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 #28
| Source File: index.tsx From multisig-react with MIT License | 4 votes |
|
Coins = (props: Props): React.ReactElement => {
const { showReceiveFunds, showSendFunds } = props
const classes = useStyles()
const columns = generateColumns()
const autoColumns = columns.filter((c) => !c.custom)
const selectedCurrency = useSelector(currentCurrencySelector)
const currencyRate = useSelector(currencyRateSelector)
const activeTokens = useSelector(extendedSafeTokensSelector)
const currencyValues = useSelector(safeFiatBalancesListSelector)
const granted = useSelector(grantedSelector)
const filteredData: List<BalanceData> = useMemo(
() => getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate),
[activeTokens, selectedCurrency, currencyValues, currencyRate],
)
return (
<TableContainer>
<Table
columns={columns}
data={filteredData}
defaultFixed
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
defaultRowsPerPage={10}
label="Balances"
size={filteredData.size}
>
{(sortedData) =>
sortedData.map((row, index) => (
<TableRow className={classes.hide} data-testid={BALANCE_ROW_TEST_ID} key={index} tabIndex={-1}>
{autoColumns.map((column) => {
const { align, id, width } = column
let cellItem
switch (id) {
case BALANCE_TABLE_ASSET_ID: {
cellItem = <AssetTableCell asset={row[id]} />
break
}
case BALANCE_TABLE_BALANCE_ID: {
cellItem = <div data-testid={`balance-${row[BALANCE_TABLE_ASSET_ID].symbol}`}>{row[id]}</div>
break
}
case BALANCE_TABLE_VALUE_ID: {
// If there are no values for that row but we have balances, we display as '0.00 {CurrencySelected}'
// In case we don't have balances, we display a skeleton
const showCurrencyValueRow = row[id] || row[BALANCE_TABLE_BALANCE_ID]
const valueWithCurrency = row[id] ? row[id] : `0.00 ${selectedCurrency}`
cellItem =
showCurrencyValueRow && selectedCurrency ? (
<div className={classes.currencyValueRow}>
{valueWithCurrency}
<CurrencyTooltip
valueWithCurrency={valueWithCurrency}
balanceWithSymbol={row[BALANCE_TABLE_BALANCE_ID]}
/>
</div>
) : (
<Skeleton animation="wave" />
)
break
}
default: {
cellItem = null
break
}
}
return (
<TableCell align={align} component="td" key={id} style={cellWidth(width)}>
{cellItem}
</TableCell>
)
})}
<TableCell component="td">
<Row align="end" className={classes.actions}>
{granted && (
<Button
className={classes.send}
color="primary"
onClick={() => showSendFunds(row.asset.address)}
size="small"
testId="balance-send-btn"
variant="contained"
>
{/* <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> */}
Send
</Button>
)}
<Button
className={classes.receive}
color="primary"
onClick={showReceiveFunds}
size="small"
variant="contained"
>
{/* <CallReceived
alt="Receive Transaction"
className={classNames(classes.leftIcon, classes.iconSmall)}
/> */}
Receive
</Button>
</Row>
</TableCell>
</TableRow>
))
}
</Table>
</TableContainer>
)
}
Example #29
| Source File: index.tsx From wonderland-frontend with MIT License | 4 votes |
|
function Dashboard() {
const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
const app = useSelector<IReduxState, IAppSlice>(state => state.app);
const trimmedStakingAPY = trim(app.stakingAPY * 100, 1);
return (
<div className="dashboard-view">
<div className="dashboard-infos-wrap">
<Zoom in={true}>
<Grid container spacing={4}>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">TIME Price</p>
<p className="card-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trim(app.marketPrice, 2)}`}</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Market Cap</p>
<p className="card-value">
{isAppLoading ? (
<Skeleton width="160px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.marketCap)
)}
</p>
</div>
</Grid>
{/* <Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Supply (Staked/Total)</p>
<p className="card-value">
{isAppLoading ? (
<Skeleton width="250px" />
) : (
`${new Intl.NumberFormat("en-US", {
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.circSupply)}
/
${new Intl.NumberFormat("en-US", {
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.totalSupply)}`
)}
</p>
</div>
</Grid> */}
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">TVL</p>
<p className="card-value">
{isAppLoading ? (
<Skeleton width="250px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.stakingTVL)
)}
</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">APY</p>
<p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%`}</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Current Index</p>
<p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${trim(Number(app.currentIndex), 2)} TIME`}</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Treasury Balance</p>
<p className="card-value">
{isAppLoading ? (
<Skeleton width="250px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.treasuryBalance)
)}
</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Backing per $TIME</p>
<p className="card-value">
{isAppLoading ? (
<Skeleton width="250px" />
) : (
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(app.rfv)
)}
</p>
</div>
</Grid>
<Grid item lg={6} md={6} sm={6} xs={12}>
<div className="dashboard-card">
<p className="card-title">Runway</p>
<p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${trim(Number(app.runway), 1)} Days`}</p>
</div>
</Grid>
</Grid>
</Zoom>
</div>
</div>
);
}
