@material-ui/icons#Launch TypeScript Examples
The following examples show how to use
@material-ui/icons#Launch.
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: WithdrawButton.tsx From anchor-web-app with Apache License 2.0 | 6 votes |
|
Component = (props: WithdrawButtonProps) => {
const { className, onClick } = props;
return (
<button className={className} onClick={onClick}>
CLAIM
<Launch />
</button>
);
}
Example #2
| Source File: PageTitle.tsx From anchor-web-app with Apache License 2.0 | 6 votes |
|
function PageTitleBase({ className, title, tooltip, docs }: PageTitleProps) {
return (
<h1 className={className}>
<IconSpan>
{title}
{tooltip && (
<>
{' '}
<InfoTooltip>{tooltip}</InfoTooltip>
</>
)}
</IconSpan>
{docs && (
<a href={docs} target="anchor-docs" rel="noreferrer">
Docs
<Launch />
</a>
)}
</h1>
);
}
Example #3
| Source File: CollateralList.tsx From anchor-web-app with Apache License 2.0 | 6 votes |
|
renderBuyLink = (collateral: WhitelistCollateral) => {
// TODO: think of a sustainable way to do this
const href =
collateral.symbol === 'bETH'
? 'https://anchor.lido.fi/'
: collateral.symbol === 'bATOM'
? 'https://app.pstake.finance/anchor'
: null;
return (
href && (
<BuyLink
href={href}
target="_blank"
rel="noreferrer"
style={{ transform: 'translateY(-5px)' }}
>
GET <Launch />
</BuyLink>
)
);
}
Example #4
| Source File: gameCard.tsx From mano-aloe with MIT License | 6 votes |
|
renderGame(): JSX.Element {
const gameUrl = linkToString(this.props.object.gameLink);
return (
<div>
<div className="button-row">
<div className="game-text">{this.props.object.title}</div>
<div className="button-right">
<IconButton onClick={this.toggleGame}>
<PlayCircleOutline style={{fontSize: 50, color: 'white'}}/>
</IconButton>
<IconButton onClick={() => this.launchGameNewWindow(gameUrl)}>
<Launch style={{fontSize: 50, color: 'white'}}/>
</IconButton>
</div>
</div>
{this.renderGameThumbnail()}
<div className="game-description">{this.props.object.description}</div>
{this.state.renderGame ?
this.renderGameWindow() :
<div/>}
</div>
)
}
Example #5
| Source File: index.tsx From aqualink-app with MIT License | 6 votes |
|
CustomLink = ({
to,
tooltipTitle,
isIcon,
content,
classes,
}: CustomLinkProps) => {
return (
<Tooltip title={tooltipTitle} placement="top" arrow>
<Link className={classes.link} to={to}>
{isIcon ? (
<IconButton className={classes.button}>
<Launch color="primary" />
</IconButton>
) : (
content
)}
</Link>
</Tooltip>
);
}
Example #6
| Source File: TokenList.tsx From anchor-web-app with Apache License 2.0 | 5 votes |
|
export function TokenListBase(props: TokenListProps) {
const { className, onClose, onBuyUST, onAddToken } = props;
const { uUST, uaUST, uANC, uNative } = useBalances();
const formatters = useFormatters();
return (
<ul className={className}>
<li>
<span>{formatters.native.symbol}</span>
<span>
{formatters.native.formatOutput(formatters.native.demicrofy(uNative))}
</span>
</li>
{(big(uUST).gt(0) || onAddToken) && (
<li>
<span className="symbol">
{onAddToken && <AddButton onClick={() => onAddToken('UST')} />}
{formatters.ust.symbol}
{onBuyUST && (
<BuyButton
className="buy-button"
onClick={() => {
onBuyUST();
onClose();
}}
>
BUY
<Launch />
</BuyButton>
)}
</span>
<span>
{formatters.ust.formatOutput(formatters.ust.demicrofy(uUST))}
</span>
</li>
)}
{(big(uaUST).gt(0) || onAddToken) && (
<li>
<span className="symbol">
{onAddToken && <AddButton onClick={() => onAddToken('aUST')} />}
{formatters.aUST.symbol}
</span>
<span>
{formatters.aUST.formatOutput(formatters.aUST.demicrofy(uaUST))}
</span>
</li>
)}
{(big(uANC).gt(0) || onAddToken) && (
<li>
<span className="symbol">
{onAddToken && <AddButton onClick={() => onAddToken('ANC')} />}
{formatters.anc.symbol}
</span>
<span>
{formatters.anc.formatOutput(formatters.anc.demicrofy(uANC))}
</span>
</li>
)}
</ul>
);
}
Example #7
| Source File: useParticipateInLiquidationsDialog.tsx From anchor-web-app with Apache License 2.0 | 5 votes |
|
function ComponentBase({
className,
closeDialog,
}: DialogProps<FormParams, FormReturn>) {
return (
<Modal open onClose={() => closeDialog()}>
<Dialog className={className} onClose={() => closeDialog()}>
<h1>Participate in Liquidations</h1>
<section>
<EmbossButton
component="a"
href="https://app.lighthousedefi.com/"
target="_blank"
rel="noreferrer"
>
<span>
Lighthouse Defi{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={lighthouse} alt="Lighthouse Defi" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://orca.kujira.app/"
target="_blank"
rel="noreferrer"
>
<span>
Kujira{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={kujira} alt="Kujira" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://www.terratoolbox.com/freewilly"
target="_blank"
rel="noreferrer"
>
<span>
Terra Toolbox{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={freewilly} alt="Terra Toolbox" id="free-willy" />
</i>
</EmbossButton>
</section>
</Dialog>
</Modal>
);
}
Example #8
| Source File: icons.tsx From jupyter-extensions with Apache License 2.0 | 5 votes |
|
SmallLaunchIcon = withStyles({
root: {
fontSize: '16px',
paddingLeft: '2px',
},
})(Launch)
Example #9
| Source File: Content.tsx From anchor-web-app with Apache License 2.0 | 4 votes |
|
ContentBase = (props: ContentProps) => {
const {
className,
walletAddress,
connection,
onClose,
onDisconnectWallet,
onSend,
onBuyUST,
} = props;
const { availablePost } = useAccount();
const { network } = useNetwork();
const viewOnTerraFinder = useCallback(() => {
window.open(getAccountUrl(network.chainID, walletAddress), '_blank');
}, [network.chainID, walletAddress]);
return (
<WalletContent
className={className}
walletAddress={walletAddress}
connectionName={connection.name}
connectionIcon={connection.icon}
readonly={connection.type === ConnectType.READONLY}
onDisconnectWallet={onDisconnectWallet}
>
<>
<TokenList onClose={onClose} onBuyUST={onBuyUST} />
{availablePost && (
<>
<div className="bridge">
<div>
<Tooltip
title="Transfer Terra assets from Ethereum"
placement="top"
>
<FlatButton
component="a"
href="https://bridge.terra.money/"
target="_blank"
rel="noreferrer"
>
<img src="/assets/bridge.png" alt="Terra Bridge" />
</FlatButton>
</Tooltip>
<FlatButton
component="a"
href="https://docs.anchorprotocol.com/user-guide/interchain-transfers"
target="_blank"
rel="noreferrer"
>
Docs <Launch />
</FlatButton>
</div>
</div>
<div className="send">
<FlatButton onClick={onSend}>SEND</FlatButton>
</div>
<div className="outlink">
<button onClick={viewOnTerraFinder}>
View on Terra Finder{' '}
<i>
<KeyboardArrowRight />
</i>
</button>
{process.env.NODE_ENV === 'development' && (
<a
href="https://faucet.terra.money/"
target="_blank"
rel="noreferrer"
>
Go to Faucet{' '}
<i>
<KeyboardArrowRight />
</i>
</a>
)}
</div>
</>
)}
</>
</WalletContent>
);
}
Example #10
| Source File: useBuyUstDialog.tsx From anchor-web-app with Apache License 2.0 | 4 votes |
|
function ComponentBase({
className,
closeDialog,
}: DialogProps<FormParams, FormReturn>) {
return (
<Modal open onClose={() => closeDialog()}>
<Dialog className={className} onClose={() => closeDialog()}>
<h1>Buy UST</h1>
<section>
<h2>Exchanges</h2>
<EmbossButton
component="a"
href="https://www.binance.com/en/trade/UST_USDT"
target="_blank"
rel="noreferrer"
>
<span>
Binance{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={binance} alt="Binance" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://trading.bitfinex.com/t/TERRAUST:USD?demo=true"
target="_blank"
rel="noreferrer"
>
<span>
Bitfinex{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={bitfinex} alt="Bitfinex" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://trade.kucoin.com/USDT-UST"
target="_blank"
rel="noreferrer"
>
<span>
KuCoin{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={kucoin} alt="KuCoin" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://www.okex.com/trade-spot/ust-usdt"
target="_blank"
rel="noreferrer"
>
<span>
OKex{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={okex} alt="OKex" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://ftx.com/trade/UST/USD"
target="_blank"
rel="noreferrer"
>
<span>
FTX{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={ftx} alt="FTX" />
</i>
</EmbossButton>
</section>
<section>
<h2>With Fiat</h2>
<EmbossButton
component="a"
href="https://global.transak.com/?apiKey=db70aca0-ca84-4344-8dcc-036f470414fc&cryptoCurrencyList=UST,LUNA&defaultCryptoCurrency=UST&networks=terra"
target="_blank"
rel="noreferrer"
>
<span>
Transak{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={transak} alt="Transak" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://ramp.kado.money"
target="_blank"
rel="noreferrer"
>
<span>
Kado Ramp{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={kado} alt="Kado Ramp" />
</i>
</EmbossButton>
</section>
</Dialog>
</Modal>
);
}
Example #11
| Source File: useInsuranceCoverageDialog.tsx From anchor-web-app with Apache License 2.0 | 4 votes |
|
function ComponentBase({
className,
closeDialog,
}: DialogProps<FormParams, FormReturn>) {
return (
<Modal open onClose={() => closeDialog()}>
<Dialog className={className} onClose={() => closeDialog()}>
<h1>Protect Your Deposit</h1>
<section>
<h2>UST Peg</h2>
<EmbossButton
component="a"
href="https://unslashed.finance/"
target="_blank"
rel="noreferrer"
>
<span>
Unslashed{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={unslashed} alt="Unslashed" />
</i>
</EmbossButton>
</section>
<section>
<h2>Smart Contracts</h2>
<EmbossButton
component="a"
href="https://nexusmutual.io/"
target="_blank"
rel="noreferrer"
>
<span>
Nexus Mutual{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={nexusMutual} alt="Nexus Mutual" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://app.insurace.io/Insurance/Cart?id=56&referrer=1403699302269502414217348026580880651844264120067"
target="_blank"
rel="noreferrer"
>
<span>
InsurAce{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={insurAce} alt="InsurAce" />
</i>
</EmbossButton>
<EmbossButton
component="a"
href="https://www.bridgemutual.io/"
target="_blank"
rel="noreferrer"
>
<span>
Bridge Mutual{' '}
<sub>
<Launch />
</sub>
</span>
<i>
<img src={bridgeMutual} alt="Bridge Mutual" />
</i>
</EmbossButton>
</section>
</Dialog>
</Modal>
);
}
