react-bootstrap#Tooltip JavaScript Examples
The following examples show how to use
react-bootstrap#Tooltip.
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: RequestLanding.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function RequestLanding() {
const [isRequestFormShown, setRequestFormShow] = useState(false);
return (<>
<TButton
tooltip={<Tooltip id={"request"}><Message msgId={"cadastrapp.demande"}/></Tooltip>}
glyph="features-grid" onClick={() => { setRequestFormShow(true); }}/>
<Modal
isShown={isRequestFormShown}
onClose={() => setRequestFormShow(false)}
/>
</>);
}
Example #2
| Source File: SoftwareSkill.js From portfolio with MIT License | 6 votes |
|
render() {
return (
<div>
<div className="software-skills-main-div">
<ul className="dev-icons">
{/* {skillsSection.softwareSkills.map(skills => {
return (
<li className="software-skill-inline" name={skills.skillName}>
<i className={skills.fontAwesomeClassname}></i>
</li>
);
})} */}
{this.props.logos.map((logo) => {
return (
<OverlayTrigger
key={logo.skillName}
placement={"top"}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{logo.skillName}</strong>
</Tooltip>
}
>
<li className="software-skill-inline" name={logo.skillName}>
<span
className="iconify"
data-icon={logo.fontAwesomeClassname}
style={logo.style}
data-inline="false"
></span>
</li>
</OverlayTrigger>
);
})}
</ul>
</div>
</div>
);
}
Example #3
| Source File: FABAction.js From anutimetable with Creative Commons Attribution Share Alike 4.0 International | 6 votes |
|
FABAction = ({ title, content, onClick, ...props }) => {
const overlay = <Tooltip>{title}</Tooltip>
return <OverlayTrigger placement='left' overlay={overlay} trigger={['hover', 'click']} {...props}>
<Button className='fab-action' variant='primary' onClick={onClick} >
{content}
</Button>
</OverlayTrigger>
}
Example #4
| Source File: ProjectLanguages.js From portfolio with MIT License | 6 votes |
|
render() {
return (
<div>
<div className="software-skills-main-div">
<ul className="dev-icons-languages">
{this.props.logos.map((logo) => {
return (
<OverlayTrigger
key={logo.name}
placement={"top"}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{logo.name}</strong>
</Tooltip>
}
>
<li
className="software-skill-inline-languages"
name={logo.skillName}
>
<span
className="iconify"
data-icon={logo.iconifyClass}
data-inline="false"
></span>
</li>
</OverlayTrigger>
);
})}
</ul>
</div>
</div>
);
}
Example #5
| Source File: ChartContainer.jsx From cosmoscan-front with Apache License 2.0 | 6 votes |
|
ChartContainer = ({ title, chart, select, titleTooltip }) => (
<Card>
<ChartHeader>
<TitleChart>
<span>
{title}
{titleTooltip && (
<OverlayTrigger
// placement="right"
delay={{ show: 250, hide: 400 }}
overlay={<Tooltip id="button-tooltip">{titleTooltip}</Tooltip>}
>
<Icon icon="question-circle" style={{ marginLeft: '5px' }} />
</OverlayTrigger>
)}
</span>
</TitleChart>
{select}
</ChartHeader>
<Card.Body>{chart}</Card.Body>
</Card>
)
Example #6
| Source File: CompetitiveSites.js From portfolio with MIT License | 6 votes |
|
render() {
return (
<div className="competitive-sites-main-div">
<ul className="dev-icons">
{this.props.logos.map((logo) => {
return (
<OverlayTrigger
key={logo.siteName}
placement={"top"}
style={{ marginBottom: "5px" }}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{logo.siteName}</strong>
</Tooltip>
}
>
<li className="competitive-sites-inline" name={logo.siteName}>
<a
href={logo.profileLink}
target="_blank"
rel="noopener noreferrer"
>
<span
className="iconify"
data-icon={logo.iconifyClassname}
style={logo.style}
data-inline="false"
></span>
</a>
</li>
</OverlayTrigger>
);
})}
</ul>
</div>
);
}
Example #7
| Source File: connectMeta.js From RC4Community with Apache License 2.0 | 6 votes |
|
ShowBalance = ({ balance, account }) => {
return (
<div>
<div className={styles.account}>
{WeiToEth(parseInt(balance, 16))} ETH
<OverlayTrigger
overlay={
<Tooltip placement="right" id="tooltip-disabled">
Account Id!
</Tooltip>
}
>
<Badge className={styles.pill} pill>
{`${account.substr(0, 4)}...${account.substr(
account.length - 4,
account.length
)}`}
</Badge>
</OverlayTrigger>
</div>
</div>
);
}
Example #8
| Source File: PlotSelection.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
function PlotSelectionTabActionButtons({onNewTab = () => {}, onTabDelete = () => {}}) {
return (
<ButtonGroup className="pull-right">
<OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.addTab'}/></Tooltip>}>
<Button
className="pull-right"
onClick={onNewTab}
><span className="glyphicon glyphicon-plus"></span>
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.search.deleteTab'}/></Tooltip>}>
<ConfirmButton
className="pull-right"
confirmContent={<Message msgId={'cadastrapp.search.confirmDeleteTab'}/>}
onClick={onTabDelete}>
<Glyphicon glyph="trash" />
</ConfirmButton>
</OverlayTrigger>
</ButtonGroup>
);
}
Example #9
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
SignupLink = () => {
const { loginWithRedirect } = useAuth0();
return (
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="tooltip-signup">Sign Up</Tooltip>}
>
<Nav.Link
onClick={() => loginWithRedirect({ screen_hint: 'signup' })}
>
<FontAwesomeIcon icon={faUserPlus} size="lg" />
</Nav.Link>
</OverlayTrigger>
);
}
Example #10
| Source File: ThemeToggle.react.js From dash_trich_components with MIT License | 6 votes |
|
render() {
const {
bg_color_dark,
icon_color_dark,
bg_color_light,
icon_color_light,
tooltip_text,
className,
id,
style
} = this.props
const { checked } = this.state
let background = checked ? bg_color_dark : bg_color_light
let color = checked ? icon_color_dark : icon_color_light
const Label = styled.label`
background: ${background};
color: ${color};
`
return (
<div className={`${className} themeToggle`} id={id} style={style}>
<OverlayTrigger placement='bottom' delay={{ show: 1000 }} overlay={
<Tooltip id="tooltip-bottom">
{tooltip_text}
</Tooltip>
}>
<form>
<input type="checkbox" id="theme_toggle" onChange={this.onChange} />
<Label htmlFor="theme_toggle"></Label>
</form>
</OverlayTrigger>
</div>
);
}
Example #11
| Source File: SoftwareSkill.js From developerPortfolio with MIT License | 6 votes |
|
render() {
return (
<div>
<div className="software-skills-main-div">
<ul className="dev-icons">
{this.props.logos.map((logo) => {
return (
<OverlayTrigger
key={logo.skillName}
placement={"top"}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{logo.skillName}</strong>
</Tooltip>
}
>
<li className="software-skill-inline" name={logo.skillName}>
<span
className="iconify"
data-icon={logo.fontAwesomeClassname}
style={logo.style}
data-inline="false"
/>
</li>
</OverlayTrigger>
);
})}
</ul>
</div>
</div>
);
}
Example #12
| Source File: action-tooltip.js From stacker.news with MIT License | 6 votes |
|
export default function ActionTooltip ({ children, notForm, disable, overlayText }) {
// if we're in a form, we want to hide tooltip on submit
let formik
if (!notForm) {
formik = useFormikContext()
}
if (disable) {
return children
}
return (
<OverlayTrigger
placement='bottom'
overlay={
<Tooltip>
{overlayText || '1 sat'}
</Tooltip>
}
trigger={['hover', 'focus']}
show={formik?.isSubmitting ? false : undefined}
>
{children}
</OverlayTrigger>
)
}
Example #13
| Source File: Participant.js From talk4free with MIT License | 6 votes |
|
// class Participant extends React.Component {
// render() {
// const { participant } = this.props;
// const style = {
// backgroundImage: `url(${participant.img})`
// };
// // console.log("EN participants", participant);
// return <div className="participant" style={style}></div>;
// // return <p>hello</p>;
// }
// }
// export default Participant;
function Participant(props) {
const { participant } = props;
// const style = {
// backgroundImage: `url(${participant.img})`
// };
return (
<OverlayTrigger
placement="top"
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{participant.username}</strong>
</Tooltip>
}
>
<div
className="participant"
style={{ backgroundImage: `url(${participant.img})` }}
></div>
</OverlayTrigger>
);
}
Example #14
| Source File: ProjectLanguages.js From developerPortfolio with MIT License | 6 votes |
|
render() {
return (
<div>
<div className="software-skills-main-div">
<ul className="dev-icons-languages">
{this.props.logos.map((logo) => {
return (
<OverlayTrigger
key={logo.name}
placement={"top"}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{logo.name}</strong>
</Tooltip>
}
>
<li
className="software-skill-inline-languages"
name={logo.skillName}
>
<span
className="iconify"
data-icon={logo.iconifyClass}
data-inline="false"
/>
</li>
</OverlayTrigger>
);
})}
</ul>
</div>
</div>
);
}
Example #15
| Source File: MainToolbar.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function MainToolbar(props) {
// following array values are
// 0: glyphicon
// 1: action name
// 2: tooltip text
let toolbarOptions = [
["resize-full", "zoom", "Zoom to whole selection"],
["map-marker", "select-by-point", "Select / Activate / Unselect one plot with a simple click "],
["polyline", "select-by-linestring", "Select / Activate / Unselect plots which intersects a line"],
["polygon", "select-by-polygon", "Select / Activate / Unselect plots which intersects a polygon"],
["th-list", "unit-de-fonc", "Landed property information"],
["zoom-to", "search-plots", "Plots Search"],
["search", "search-owners", "Owners Search"],
["user", "coownership", "Co-ownership data Search"],
["features-grid", "request-form", "Request on landholding trust"],
["cog", "preferences", "Preferences"],
["question-sign", "help", "Help"]
];
let clickHandler = (action) => {
return () => {
props.onClick(action);
};
};
let tooltipGenerator = (text) => {
return <Tooltip id="tooltip">{text}</Tooltip>;
};
return (
<div className="side-bar pull-left">
{toolbarOptions.map((v) => (
<OverlayTrigger placement="left" overlay={tooltipGenerator(v[2])}>
<Button
onClick={clickHandler(v[1])}
bsStyle="primary"
className={props.selected === v[1] ? "square-button btn-selected" : "square-button"}>
<span className={"glyphicon glyphicon-" + v[0]}></span>
</Button>
</OverlayTrigger>
))}
</div>
);
}
Example #16
| Source File: WidgetStats.jsx From cosmoscan-front with Apache License 2.0 | 5 votes |
|
WidgetStats = ({
title,
mainInfo,
sparklineData,
extraInfo,
isVertical,
tooltip,
}) => {
const theme = useContext(ThemeContext);
return (
<Card modifiers="height100">
<CardBodyWidget>
<WidgetItem isVertical={isVertical}>
{tooltip ? (
<OverlayTrigger
delay={{ show: 250, hide: 400 }}
overlay={<Tooltip id="title-tooltip">{tooltip}</Tooltip>}
>
<TitleMinor>{title}</TitleMinor>
</OverlayTrigger>
) : (
<TitleMinor>{title}</TitleMinor>
)}
<div>
{sparklineData && sparklineData.length > 1 && (
<div>
<Sparkline
data={sparklineData}
color={
sparklineData[sparklineData.length - 1].y >
sparklineData[0].y
? theme.success
: theme.danger
}
/>
</div>
)}
</div>
</WidgetItem>
<WidgetItem>
<div>{mainInfo}</div>
<div>
{sparklineData && sparklineData.length && (
<Percent
prevVal={sparklineData[0].y}
currVal={sparklineData[sparklineData.length - 1].y}
/>
)}
{extraInfo}
</div>
</WidgetItem>
</CardBodyWidget>
</Card>
);
}
Example #17
| Source File: BuildingButtons.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function BuildingsButtons({
setShowDescription = () => {},
selected = [],
data = [],
dnubat,
parcelle
}) {
let [propertiesSelected, setPropertiesSelected] = useState(false);
let [bundleSelected, setBundleSelected] = useState(false);
const onPropertiesClick = () => {
setBundleSelected(false);
setPropertiesSelected(!propertiesSelected);
};
const onBundleClick = () => {
setPropertiesSelected(false);
setBundleSelected(!bundleSelected);
};
// auto close panel if no row has been selected
useEffect(() => {
if (selected.length === 0) {
setPropertiesSelected(false);
}
}, [selected]);
return (<>
<ButtonGroup className="pull-right">
<OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.releve.depropriete'}/></Tooltip>}>
<Button
disabled={selected.length === 0}
bsStyle={propertiesSelected ? "primary" : "default"}
onClick={onPropertiesClick}>
<Glyphicon glyph="th-list" />
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_descriptif'}/></Tooltip>}>
<Button
onClick={() => setShowDescription(true)}
disabled={selected.length === 0}>
<Glyphicon glyph="info-sign" />
</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={<Tooltip><Message msgId={'cadastrapp.duc.batiment_bundle'}/></Tooltip>}>
<Button
bsStyle={bundleSelected ? "primary" : "default"}
onClick={onBundleClick}>
<Glyphicon glyph="compressed" /></Button>
</OverlayTrigger>
</ButtonGroup>
<PropertiesRadio parcelle={parcelle} expanded={propertiesSelected} data={data} selected={selected} />
<BundleRadio
dnubat={dnubat}
parcelle={parcelle}
show={bundleSelected} />
</>);
}
Example #18
| Source File: Step1.js From katanapools with GNU General Public License v2.0 | 5 votes |
|
render() {
const {address, weight, idx, addressChanged, weightChanged, poolType, symbol, name} = this.props;
let removeRow = <FontAwesomeIcon icon={faTimes} className="remove-icon-btn" onClick={()=>this.props.removeTokenRow(idx)}/>;
if (idx === 0 && poolType === 'any') {
removeRow = <span/>;
}
function reserveRatioTooltip(props) {
return <Tooltip {...props}>
<div>
Reserve ratio defines the ratio between the total value of the reserves & the market cap of the pool token.
</div>
<div>
While most pools have a network hub token and a pool token kept in a 50/50 reserve ratio,
</div>
<div>
You can also create pools with an array of reserves in any arbitrary reserve ratio.
</div>
<div>
Provided the sum of all reserves is less than or equal to 100.
</div>
</Tooltip>;
}
let tokenDetails = <span/>;;
if (symbol && name) {
tokenDetails = <div>Symbol: {symbol} Name: {name}</div>
}
return (
<Row>
<Col lg={8}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Convertible Reserve Token Address</Form.Label>
<Form.Control type="text" placeholder="address of the ERC20 token contract" value={address} onChange={this.addressChanged} onBlur={this.addressOrSymbolSet}/>
<Form.Text className="text-muted">
{tokenDetails}
</Form.Text>
</Form.Group>
</Col>
<Col lg={4} className="token-weight-slider-container">
<div className="slidecontainer">
<Row>
<Col lg={8} className="reserve-ratio-field-container">
Token Reserve Ratio
</Col>
<Col lg={4}>
<Form.Control type="number" value={weight} onChange={this.weightChanged} className="amount-row"/>
</Col>
</Row>
<Row>
<input type="range" min="0" max="100" value={weight} className="slider"
id="myRange" onChange={this.weightChanged}/>
</Row>
</div>
{removeRow}
</Col>
</Row>
)
}
Example #19
| Source File: MonitoringStatus.js From SaraAlert with Apache License 2.0 | 5 votes |
|
renderPHARefreshTooltip(props) {
return (
<Tooltip id="button-tooltip" {...props}>
{this.state.public_health_action === 'None' && <span>You can't add an additional "None" public health action.</span>}
{this.state.public_health_action != 'None' && <span>Add an additional "{this.state.public_health_action}" public health action.</span>}
</Tooltip>
);
}
Example #20
| Source File: SearchTools.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
tooltip = (id, msgId) => <Tooltip id={"id"}><Message msgId={msgId}/></Tooltip>
Example #21
| Source File: MainCard.js From Frontend with Apache License 2.0 | 5 votes |
|
renderTooltip1 = (props) => (
<Tooltip id="button-tooltip" {...props}>
Add to Problem List
</Tooltip>
)
Example #22
| Source File: SimpleModal.js From plenty-interface with GNU General Public License v3.0 | 5 votes |
|
SimpleModal = (props) => {
return (
<Modal
show={props.open}
onHide={props.onClose}
backdrop="static"
keyboard={false}
dialogClassName={clsx(
styles.simpleModal,
props.className,
props.isConfirmSwap && styles.confirmSwap,
props.title === 'Transaction Submitted' && 'centerAlign',
props.isConfirmTransaction && 'removeCloseIcon',
)}
centered={true}
>
{/* * Header */}
<div
className={clsx('d-flex', props.isConfirmSwap ? styles.confirmSwapHeader : styles.header, {
[styles.noTitle]: !props.title,
})}
>
<div className={clsx(styles.title, 'flex-grow-1')}>
{props.title}
{props.title === 'Transaction Submitted' && (
<OverlayTrigger
placement="right"
overlay={
<Tooltip id="button-tooltip-ts" {...props}>
Your transaction has been added to the mempool. It can take up to 30 seconds
before your transaction is confirmed.
</Tooltip>
}
>
<span
style={{ cursor: 'pointer' }}
className="material-icons-round ml-1 info-transaction-submitted"
>
help_outline
</span>
</OverlayTrigger>
)}
</div>
{!props.isConfirmTransaction && (
<div className={styles.closeBtn} onClick={props.onClose}>
<span className="material-icons-round">close</span>
</div>
)}
</div>
{/* * Header */}
{/* * Body */}
<div
className={clsx(props.isConfirmSwap ? styles.confirmSwapContent : styles.content, {
[styles.noTopPadding]: !props.title,
})}
>
{props.children}
</div>
{/* * Body */}
</Modal>
);
}
Example #23
| Source File: Webcam.jsx From makerverse with GNU General Public License v3.0 | 4 votes |
|
render() {
const { state, actions } = this.props;
const {
disabled,
mediaSource,
deviceId,
url,
scale,
rotation,
flipHorizontally,
flipVertically,
crosshair,
muted
} = state;
if (disabled) {
return (
<div className={styles['webcam-off-container']}>
<h4><i className={styles['icon-webcam']} /></h4>
<h5>{i18n._('Webcam is off')}</h5>
</div>
);
}
const transformStyle = [
'translate(-50%, -50%)',
`rotateX(${flipVertically ? 180 : 0}deg)`,
`rotateY(${flipHorizontally ? 180 : 0}deg)`,
`rotate(${(rotation % 4) * 90}deg)`
].join(' ');
return (
<div className={styles['webcam-on-container']}>
{mediaSource === MEDIA_SOURCE_LOCAL && (
<div style={{ width: '100%' }}>
<WebcamComponent
className={styles.center}
style={{ transform: transformStyle }}
width={(100 * scale).toFixed(0) + '%'}
height="auto"
muted={muted}
video={!!deviceId ? deviceId : true}
/>
</div>
)}
{mediaSource === MEDIA_SOURCE_MJPEG && (
<Image
ref={node => {
this.imageSource = node;
}}
src={mapMetaAddressToHostname(url)}
style={{
width: (100 * scale).toFixed(0) + '%',
transform: transformStyle
}}
className={styles.center}
/>
)}
{crosshair && (
<div>
<Line
className={classNames(
styles.center,
styles['line-shadow']
)}
length="100%"
/>
<Line
className={classNames(
styles.center,
styles['line-shadow']
)}
length="100%"
vertical
/>
<Circle
className={classNames(
styles.center,
styles['line-shadow']
)}
diameter={20}
/>
<Circle
className={classNames(
styles.center,
styles['line-shadow']
)}
diameter={40}
/>
</div>
)}
<div className={styles.toolbar}>
<div className={styles.scaleText}>{scale}x</div>
<div className="pull-right">
{mediaSource === MEDIA_SOURCE_LOCAL && (
<Anchor
className={styles.btnIcon}
onClick={actions.toggleMute}
>
<i
className={classNames(
styles.icon,
styles.inverted,
{ [styles.iconUnmute]: !muted },
{ [styles.iconMute]: muted }
)}
/>
</Anchor>
)}
<OverlayTrigger
overlay={<Tooltip id="rotate-left">{i18n._('Rotate Left')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.rotateLeft}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconRotateLeft
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="rotate-right">{i18n._('Rotate Right')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.rotateRight}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconRotateRight
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="flip-horizontally">{i18n._('Flip Horizontally')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleFlipHorizontally}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconFlipHorizontally
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="flip-vertically">{i18n._('Flip Vertically')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleFlipVertically}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconFlipVertically
)}
/>
</Anchor>
</OverlayTrigger>
<OverlayTrigger
overlay={<Tooltip id="crosshair">{i18n._('Crosshair')}</Tooltip>}
placement="top"
>
<Anchor
className={styles.btnIcon}
onClick={actions.toggleCrosshair}
>
<i
className={classNames(
styles.icon,
styles.inverted,
styles.iconCrosshair
)}
/>
</Anchor>
</OverlayTrigger>
</div>
</div>
<div className={styles['image-scale-slider']}>
<Slider
defaultValue={scale}
min={0.1}
max={10}
step={0.1}
tipFormatter={null}
onChange={actions.changeImageScale}
/>
</div>
</div>
);
}
Example #24
| Source File: instructorForm.js From front-end with MIT License | 4 votes |
|
export default function InstructorForm(){
let textField = {height:'3rem', fontSize:'x-large'};
let textFieldGroup = {width:'70%', margin:'3rem auto'};
const [formState, setFormState] = useState({
name:'',
email:'',
code:'',
website:''
})
const changeHandeler = (event) => {
setFormState({
...formState,
[event.target.name]: event.target.value
})
}
const submitHandeler = (event) => {
event.preventDefault();
console.log(`Name: ${formState.name}, Email: ${formState.email}, Authentication Code: ${formState.code}, Website: ${formState.website}`)
setFormState({
name:'',
email:'',
code:'',
website:''
})
}
const buttonColor = () => {
if(formState.name.length >= 1 && formState.email.length>=1 && formState.code.length>=1 && formState.website.length>=1 ){
const filledText = '#FF6900'
return filledText
}
else{
return '#BDBDBD'
}
}
return (
<div style={{width:'100%', height:'100%'}}>
<div className='header'>
<Navbar expand="lg" variant="light" bg="#FF6900" style={{backgroundColor:'#FF6900', padding:'1rem'}}>
<Link to="/Dashboard" style={{width:'100%', color:'black', margin:'.5rem auto'}}>Anywhere Fitness</Link>
</Navbar>
</div>
<div>
<img style=
{{width:'50%',
margin:'0',
display:'inline',
float:'left',
height:'55rem',
// backgroundSize:'cover'
}}
src={img}/>
<form style={{display:'inline', float:'right', width:'50%'}} onSubmit={submitHandeler}>
<h1 style={{paddingTop:'10rem', fontSize:'4.5rem'}}>Instructor Sign Up</h1>
<Form.Group style={textFieldGroup} controlId="name">
<Form.Control onChange={changeHandeler} name='name' value={formState.name} type="name" placeholder="Name" style={textField} />
</Form.Group>
<Form.Group style={textFieldGroup} controlId="email">
<Form.Control onChange={changeHandeler} name='email' value={formState.email} type="email" placeholder="Email" style={textField} />
</Form.Group>
<Form.Group style={textFieldGroup} controlId="code">
{['bottom'].map((placement) => (
<OverlayTrigger
placement={placement}
delay={{hide: 4500}}
overlay={
<Tooltip>
Recieved from invite email. For more information and to request an authentication code, please visit our <a href='/'>help</a> page.
</Tooltip>
}
>
<img className='codeInfo' src={icon} style={{marginLeft:'100%'}} />
</OverlayTrigger>
))}
<Form.Control onChange={changeHandeler} name='code' value={formState.code} type="text" placeholder="Authentication Code" style={textField} />
</Form.Group>
<Form.Group style={textFieldGroup} controlId="website">
<Form.Control onChange={changeHandeler} name='website' value={formState.website} type="text" placeholder="Website" style={textField} />
</Form.Group>
<Button
style=
{{width:'70%',
height:'3rem',
fontSize:'x-large',
margin:'auto',
backgroundColor: buttonColor()
}}
type ='submit'
>
Confirm
</Button>
</form>
</div>
</div>
)
}
Example #25
| Source File: PullRequestCard.js From developerPortfolio with MIT License | 4 votes |
|
render() {
const pullRequest = this.props.pullRequest;
var iconPR;
var bgColor;
if (pullRequest["state"] === "OPEN") {
iconPR = {
iconifyClass: "octicon:git-pull-request",
style: { color: "#4CAF50" }
};
bgColor = "#dcffe4";
} else if (pullRequest["state"] === "MERGED") {
iconPR = {
iconifyClass: "octicon:git-merge",
style: { color: "#512DA8" }
};
bgColor = "#f5f0ff";
} else {
iconPR = {
iconifyClass: "octicon:git-pull-request",
style: { color: "#D32F2F" }
};
bgColor = "#ffdce0";
}
var subtitleString =
"#" +
pullRequest["number"] +
" opened on " +
pullRequest["createdAt"].split("T")[0];
var mergedBy;
if (pullRequest["mergedBy"] !== null) {
const name = pullRequest["mergedBy"]["login"];
mergedBy = (
<OverlayTrigger
key={name}
placement={"top"}
style={{ marginBottom: "5px" }}
overlay={
<Tooltip id={`tooltip-top`}>
<strong>{`Merged by ${name}`}</strong>
</Tooltip>
}
>
<a
href={pullRequest["mergedBy"]["url"]}
target="_blank"
rel="noopener noreferrer"
>
<img
className="merge-by-img"
src={pullRequest["mergedBy"]["avatarUrl"]}
alt=""
/>
</a>
</OverlayTrigger>
);
} else {
mergedBy = <noscript></noscript>;
}
return (
<Fade bottom duration={2000} distance="40px">
<div
className="pull-request-card"
style={{
backgroundColor: bgColor,
border: `1px solid ${iconPR.style.color}`
}}
>
<div className="pr-top">
<div className="pr-header">
<span
className="iconify pr-icons"
data-icon={iconPR.iconifyClass}
style={iconPR.style}
data-inline="false"
/>
<div className="pr-title-header">
<p className="pr-title">
<a
href={pullRequest["url"]}
target="_blank"
rel="noopener noreferrer"
>
{pullRequest["title"]}
</a>
</p>
<p className="pr-subtitle">{subtitleString}</p>
</div>
</div>
<div className="files-changed-header">
<p
className="files-changed-text"
style={{ backgroundColor: iconPR.style.color }}
>
{pullRequest["changedFiles"]}
</p>
<p className="files-changed-text-2">Files Changed</p>
</div>
</div>
<div className="pr-down">
<div className="changes-repo">
<p className="parent-repo">
Repository:{" "}
<a
style={{ color: iconPR.style.color }}
href={pullRequest["baseRepository"]["url"]}
>
{pullRequest["baseRepository"]["owner"]["login"]}/
{pullRequest["baseRepository"]["name"]}
</a>
</p>
<div className="changes-files">
<p className="additions-files">
<strong>{pullRequest["additions"]} + </strong>
</p>
<p className="deletions-files">
<strong>{pullRequest["deletions"]} - </strong>
</p>
{mergedBy}
</div>
</div>
<div className="owner-img-div">
<a
href={pullRequest["baseRepository"]["owner"]["url"]}
target="_blank"
rel="noopener noreferrer"
>
<img
className="owner-img"
src={pullRequest["baseRepository"]["owner"]["avatarUrl"]}
alt=""
/>
</a>
</div>
</div>
</div>
</Fade>
);
}
Example #26
| Source File: BridgeModal.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
BridgeModal = (props) => {
const dispatch = useDispatch();
const [errorMessage, setErrorMessage] = useState(null);
const [isError, setIsError] = useState(false);
const [showMetamaskTooltip, setShowMetamaskTooltip] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [show, setShow] = useState(false);
const [userBalances, setUserBalances] = useState({});
const [isLoading, SetisLoading] = useState(false);
const [isTokenInSelected, setIsTokenInSelected] = useState(false);
const [isBridgeSelected, setIsBridgeSelected] = useState(false);
const [isTokenSelected, setIsTokenSelected] = useState(false);
const [isBridgeClicked, setIsBridgeClicked] = useState(false);
const [pendingTransCount, setPendingTransCount] = useState(0);
const [animationClass, setAnimationClass] = useState('leftToRightFadeInAnimation-4-bridge');
const [isHistoryLoading, setIsHistoryLoading] = useState(true);
const selector = useRef('BRIDGES');
const delay = useRef(5000);
const firstTimeLoading = useRef(true);
const {
walletAddress,
transaction,
setTransaction,
fromBridge,
toBridge,
tokenIn,
tokenOut,
firstTokenAmount,
secondTokenAmount,
fee,
operation,
setFromBridge,
setToBridge,
setTokenIn,
setTokenOut,
setFirstTokenAmount,
setSecondTokenAmount,
setFee,
setOperation,
tokenList,
loadedTokensList,
theme,
setOpeningFromHistory,
metamaskAddress,
currentChain,
metamaskChain,
displayMessage,
setSwitchButtonPressed,
connectWalletHandler,
setIsApproved,
} = props;
const [connectBridgeWallet, setConnectBrigeWallet] = useState({
name: fromBridge.name,
image: fromBridge.image,
buttonImage: fromBridge.buttonImage,
});
useEffect(() => {
if (currentChain !== metamaskChain && transaction === 1) {
if (metamaskChain !== null) {
displayMessage({
type: 'warning',
duration: FLASH_MESSAGE_DURATION,
title: 'Chain mismatch',
content: `Change wallet chain to ${titleCase(currentChain)}.`,
isFlashMessageALink: false,
flashMessageLink: '#',
});
setTimeout(async () => {
try {
await changeNetwork({ networkName: currentChain });
} catch (error) {
displayMessage({
type: 'error',
duration: FLASH_MESSAGE_DURATION,
title: 'Chain change failed',
content: 'Failed to force change the chain. Please change in wallet.',
isFlashMessageALink: false,
flashMessageLink: '#',
});
}
}, CHANGE_NETWORK_PROMPT_DELAY);
}
}
}, [currentChain, metamaskChain]);
useEffect(() => {
if (currentChain === metamaskChain && isError) {
setIsError(false);
}
}, [metamaskChain]);
useEffect(() => {
setOpeningFromHistory(false);
setIsApproved(false);
}, []);
useEffect(() => {
if (walletAddress) {
dispatch(setConnectWalletTooltip(false));
setIsError(false);
}
}, [walletAddress]);
useEffect(async () => {
if (metamaskAddress) {
setShowMetamaskTooltip(false);
setIsError(false);
}
if (firstTimeLoading.current && metamaskAddress && walletAddress) {
const pendingHistoryCount = await getActionRequiredCount({
ethereumAddress: metamaskAddress,
tzAddress: walletAddress,
});
setPendingTransCount(pendingHistoryCount.count);
setIsHistoryLoading(false);
firstTimeLoading.current = false;
}
}, [metamaskAddress]);
useEffect(async () => {
setUserBalances((prevState) => ({ ...prevState, [tokenIn.name]: null }));
if (
tokenIn.name !== 'Token NA' &&
walletAddress &&
metamaskAddress &&
metamaskChain === currentChain
) {
if (operation === 'BRIDGE') {
const balanceResult = await getBalance(tokenIn.tokenData.CONTRACT_ADDRESS, metamaskAddress);
if (balanceResult.success) {
setUserBalances((prevState) => ({
...prevState,
[tokenIn.name]: new BigNumber(balanceResult.balance).div(new BigNumber(10).pow(tokenIn.tokenData.DECIMALS)).toString(),
}));
} else {
setUserBalances((prevState) => ({ ...prevState, [tokenIn.name]: -1 }));
}
} else {
const tokenInDecimals = BridgeConfiguration.getOutTokenUnbridgingWhole(
toBridge.name,
tokenIn.name,
).DECIMALS;
const balanceResult = await getBalanceTez(
tokenIn.tokenData.CONTRACT_ADDRESS,
tokenIn.tokenData.TOKEN_ID,
walletAddress,
tokenInDecimals,
);
if (balanceResult.success) {
setUserBalances((prevState) => ({
...prevState,
[tokenIn.name]: new BigNumber(balanceResult.balance).toString(),
}));
} else {
setUserBalances((prevState) => ({ ...prevState, [tokenIn.name]: -1 }));
}
}
} else {
setUserBalances((prevState) => ({ ...prevState, [tokenIn.name]: -1 }));
}
}, [tokenIn, walletAddress, metamaskAddress, metamaskChain]);
useInterval(async () => {
if (metamaskAddress && walletAddress) {
const pendingHistoryCount = await getActionRequiredCount({
ethereumAddress: metamaskAddress,
tzAddress: walletAddress,
});
setPendingTransCount(pendingHistoryCount.count);
setIsHistoryLoading(false);
}
}, delay.current);
const onClickAmount = () => {
const value = userBalances[tokenIn.name] ?? 0;
handleFromTokenInput(value);
};
const handleFromTokenInput = (input) => {
setIsError(false);
if (!walletAddress && !metamaskAddress) {
dispatch(setConnectWalletTooltip(true));
setShowMetamaskTooltip(true);
displayMessage({
type: 'info',
duration: FLASH_MESSAGE_DURATION,
title: 'Connect wallet',
content: 'Connect both the wallets and proceed.',
isFlashMessageALink: false,
flashMessageLink: '#',
});
setErrorMessage('Please connect to both the wallets.');
setIsError(true);
} else if (!walletAddress && metamaskAddress) {
dispatch(setConnectWalletTooltip(true));
setErrorMessage('Please connect to tezos wallet.');
setIsError(true);
} else if (!metamaskAddress && walletAddress) {
setShowMetamaskTooltip(true);
setErrorMessage(
`Please connect to ${
fromBridge.name === 'TEZOS' ? toBridge.name : fromBridge.name
} wallet.`,
);
setIsError(true);
} else {
if (
input === '' ||
isNaN(input) ||
tokenIn.name === 'Token NA' ||
userBalances[tokenIn.name] === null ||
userBalances[tokenIn.name] < 0
) {
setFirstTokenAmount('');
setSecondTokenAmount('');
setFee(0);
} else {
setFirstTokenAmount(input);
if (new BigNumber(input).gt(new BigNumber(userBalances[tokenIn.name]))) {
setErrorMessage('Insufficient balance');
setIsError(true);
} else {
if (operation === 'BRIDGE') {
setFee(
new BigNumber(input)
.multipliedBy(BridgeConfiguration.getFeesForChain(fromBridge.name).WRAP_FEES)
.div(10000)
.toString(),
);
const outputAmount = new BigNumber(input)
.minus(
new BigNumber(input)
.multipliedBy(BridgeConfiguration.getFeesForChain(fromBridge.name).WRAP_FEES)
.div(10000),
)
.toString();
setSecondTokenAmount(outputAmount);
} else {
setFee(
new BigNumber(input)
.multipliedBy(BridgeConfiguration.getFeesForChain(toBridge.name).UNWRAP_FEES)
.div(10000)
.toString(),
);
const outputAmount = new BigNumber(input)
.minus(
new BigNumber(input)
.multipliedBy(BridgeConfiguration.getFeesForChain(toBridge.name).UNWRAP_FEES)
.div(10000),
)
.toString();
setSecondTokenAmount(outputAmount);
}
}
}
}
};
const handelClickWithMetaAddedBtn = async () => {
setIsError(false);
if (firstTokenAmount === '' || isNaN(firstTokenAmount) || firstTokenAmount === 0) {
setErrorMessage('Enter an amount to proceed');
setIsError(true);
} else if (new BigNumber(firstTokenAmount).gt(new BigNumber(userBalances[tokenIn.name]))) {
setErrorMessage('Insufficient balance');
setIsError(true);
} else {
if (currentChain !== metamaskChain) {
displayMessage({
type: 'warning',
duration: FLASH_MESSAGE_DURATION,
title: 'Chain mismatch',
content: `Change wallet chain to ${titleCase(currentChain)}.`,
isFlashMessageALink: false,
flashMessageLink: '#',
});
setTimeout(async () => {
try {
await changeNetwork({ networkName: currentChain });
} catch (error) {
displayMessage({
type: 'error',
duration: FLASH_MESSAGE_DURATION,
title: 'Chain change failed',
content: 'Failed to force change the chain. Please change in wallet.',
isFlashMessageALink: false,
flashMessageLink: '#',
});
}
}, CHANGE_NETWORK_PROMPT_DELAY);
} else {
SetisLoading(true);
if (operation === 'BRIDGE') {
const allowanceResult = await getAllowance(tokenIn, metamaskAddress, fromBridge.name);
if (allowanceResult.success) {
if (new BigNumber(allowanceResult.allowance).gte(new BigNumber(firstTokenAmount))) {
setIsApproved(true);
}
setAnimationClass('rightToLeftFadeOutAnimation-4');
setTimeout(() => {
SetisLoading(false);
setTransaction(3);
}, 600);
} else {
displayMessage({
type: 'error',
duration: FLASH_MESSAGE_DURATION,
title: 'Allowance error',
content: 'Failed to fetch allowance for user. Please try again.',
isFlashMessageALink: false,
flashMessageLink: '#',
});
SetisLoading(false);
}
} else {
setAnimationClass('rightToLeftFadeOutAnimation-4');
setTimeout(() => {
SetisLoading(false);
setTransaction(3);
}, 600);
}
}
}
};
const handleClose = () => {
setShow(false);
setIsBridgeClicked(false);
setSearchQuery('');
};
const handleInputFocus = () => {
setIsError(false);
setIsTokenInSelected(true);
if (walletAddress && metamaskAddress && currentChain !== metamaskChain) {
setErrorMessage(`Please select ${titleCase(currentChain)} chain in wallet.`);
setIsError(true);
}
};
const selectBridge = (bridge) => {
setFirstTokenAmount('');
setSecondTokenAmount('');
setFee(0);
if (bridge.name === 'TEZOS') {
const currentFrom = {
name: fromBridge.name,
image: fromBridge.image,
buttonImage: fromBridge.buttonImage,
};
if (currentFrom.name !== 'TEZOS') {
setToBridge({
name: currentFrom.name,
image: currentFrom.image,
buttonImage: currentFrom.buttonImage,
});
}
setOperation('UNBRIDGE');
} else {
setConnectBrigeWallet({
name: bridge.name,
image: bridge.image,
buttonImage: bridge.buttonImage,
});
if (operation === 'UNBRIDGE') {
setToBridge({ name: 'TEZOS', image: tezos, buttonImage: '' });
setOperation('BRIDGE');
}
}
setFromBridge({ name: bridge.name, image: bridge.image, buttonImage: bridge.buttonImage });
setIsBridgeSelected(true);
handleClose();
};
const handleBridgeSelect = () => {
selector.current = 'BRIDGES';
setIsBridgeClicked(true);
setShow(true);
};
const selectToken = (token) => {
setFirstTokenAmount('');
setSecondTokenAmount('');
setFee(0);
setTokenIn({
name: token.name,
image: token.image,
tokenData: token.tokenData,
});
if (fromBridge.name === 'TEZOS') {
const outTokenName = BridgeConfiguration.getOutTokenUnbridging(toBridge.name, token.name);
setTokenOut({
name: outTokenName,
image: Object.prototype.hasOwnProperty.call(allTokens, outTokenName)
? allTokens[outTokenName]
: allTokens.fallback,
});
} else {
const outTokenName = BridgeConfiguration.getOutTokenBridging(fromBridge.name, token.name);
setTokenOut({
name: outTokenName,
image: Object.prototype.hasOwnProperty.call(allTokens, outTokenName)
? allTokens[outTokenName]
: allTokens.fallback,
});
}
setIsTokenSelected(true);
handleClose();
};
const handleTokenSelect = () => {
selector.current = 'TOKENS';
setShow(true);
};
const switchHandler = () => {
setSwitchButtonPressed(true);
setFirstTokenAmount('');
setSecondTokenAmount('');
setFee(0);
const currentFrom = {
name: fromBridge.name,
image: fromBridge.image,
buttonImage: fromBridge.buttonImage,
};
const currentTo = {
name: toBridge.name,
image: toBridge.image,
buttonImage: toBridge.buttonImage,
};
const currentTokenIn = tokenIn.name;
const currentTokenOut = tokenOut.name;
const tokenData =
operation === 'BRIDGE'
? loadedTokensList.TEZOS[currentFrom.name].find((token) => token.name === currentTokenOut)
.tokenData
: loadedTokensList[currentTo.name].find((token) => token.name === currentTokenOut)
.tokenData;
if(tokenIn.tokenData.deprecated) {
displayMessage({
type: 'warning',
duration: FLASH_MESSAGE_DURATION,
title: 'Deprecated token selected',
content: 'Bridging not allowed for deprecated token. Please select non deprecated token to switch.',
isFlashMessageALink: false,
flashMessageLink: '#',
});
setSwitchButtonPressed(false);
} else {
setToBridge({
name: currentFrom.name,
image: currentFrom.image,
buttonImage: currentFrom.buttonImage,
});
setFromBridge({
name: currentTo.name,
image: currentTo.image,
buttonImage: currentTo.buttonImage,
});
setTokenIn({
name: currentTokenOut,
image: Object.prototype.hasOwnProperty.call(allTokens, currentTokenOut)
? allTokens[currentTokenOut]
: allTokens.fallback,
tokenData,
});
setTokenOut({
name: currentTokenIn,
image: Object.prototype.hasOwnProperty.call(allTokens, currentTokenIn)
? allTokens[currentTokenIn]
: allTokens.fallback,
});
if (operation === 'BRIDGE') {
setOperation('UNBRIDGE');
} else {
setOperation('BRIDGE');
}
}
};
return (
<div
className={`justify-content-center mx-auto col-20 col-md-10 col-lg-12 col-xl-12 mb-3 ${styles.gov} ${animationClass}`}
>
<div className={styles.border}>
<div className={` ${styles.bridgeModal}`}>
<div>
<div className={styles.resultsHeader}>
<p className={styles.heading}>
Bridge{' '}
{metamaskAddress && (
<OverlayTrigger
overlay={(props) => (
<Tooltip className="connect-wallet-tooltip wallet-message-tooltip" {...props}>
Disconnect Ethereum wallets through wallet.
</Tooltip>
)}
placement="top"
>
<span className={styles.metamaskAddressText}>{`(${truncateMiddle(
metamaskAddress,
5,
4,
'...',
)})`}</span>
</OverlayTrigger>
)}
</p>
{walletAddress &&
metamaskAddress &&
(isHistoryLoading ? (
<p className={`${styles.resLoading} shimmer`}>View history</p>
) : (
<p
className={`${styles.res}`}
onClick={() => {
setAnimationClass('rightToLeftFadeOutAnimation-4');
setTimeout(() => {
setTransaction(2);
}, 600);
}}
style={{ cursor: 'pointer' }}
>
View history{' '}
{pendingTransCount > 0 && (
<span className={styles.actionRequiredCount}>{pendingTransCount}</span>
)}
</p>
))}
</div>
<div className={`mb-2 ${styles.lineBottom} `}></div>
<div className={`mt-4 ${styles.from}`}>From</div>
<div className={`mt-2 ${styles.fromBridgeSelectBox}`}>
<div>
<p className={`mb-1 ${styles.fromLabelTop}`}>Select blockchain </p>
<p className={`mb-0 ${styles.fromLabelBottom}`}>Start the bridge process</p>
</div>
<div
className={clsx(
styles.bridgeSelector,
styles.selector,
isBridgeClicked && styles.fromBridgeClicked,
)}
onClick={handleBridgeSelect}
style={{ boxShadow: isBridgeSelected && 'none' }}
>
<img src={fromBridge.image} className="button-logo" />
<span>{titleCase(fromBridge.name)} </span>
<span className="span-themed material-icons-round" style={{ fontSize: '20px' }}>
expand_more
</span>
</div>
</div>
<div className={`my-3 ${styles.lineMid} `}></div>
<p className={styles.midLabel}>Select your token and enter the amount</p>
<div
className={`mt-2 ${styles.tokenSelectBox} ${
isTokenInSelected && styles.tokenInSelected
} ${styles.inputSelectBox} ${isError && styles.inputError}`}
>
<div
className={clsx(styles.selector, styles.toTokenSelector)}
onClick={handleTokenSelect}
style={{ boxShadow: isTokenSelected && 'none' }}
>
<img src={tokenIn.image} className="button-logo" />
<span>{tokenIn.name} </span>
<span className="span-themed material-icons-round" style={{ fontSize: '18px' }}>
expand_more
</span>
</div>
<div className={clsx(styles.inputWrapper)}>
<input
type="text"
className={`text-right ${styles.tokenUserInput}`}
placeholder="0.0"
value={firstTokenAmount}
onChange={(e) => handleFromTokenInput(e.target.value)}
onFocus={handleInputFocus}
onBlur={() => setIsTokenInSelected(false)}
/>
</div>
</div>
<div
className="flex justify-between"
style={{ flex: '0 0 100%', marginBottom: '2vh', height: '24px' }}
>
<p className={clsx(styles.errorText)}>{isError ? errorMessage : ' '}</p>
<p className={clsx('wallet-token-balance', styles.balanceText)}>
{userBalances[tokenIn.name] >= 0 && userBalances[tokenIn.name] !== null && (
<>
Balance:{' '}
<span className={styles.balanceValue} onClick={onClickAmount}>
{fromExponential(userBalances[tokenIn.name])}
</span>
</>
)}
{userBalances[tokenIn.name] === null && (
<>
Balance: <span className="shimmer">0.0000</span>
</>
)}
</p>
</div>
<OverlayTrigger
overlay={(props) => (
<Tooltip id={styles.switchTooltip} className="switchTooltip" {...props}>
Switch
</Tooltip>
)}
placement="right"
>
<div
className={`mx-auto flex justify-content-center align-items-center ${styles.arrowSwap}`}
onClick={switchHandler}
>
<img src={theme === 'light' ? switchImg : switchImgDark} alt={'switch-image'} />
</div>
</OverlayTrigger>
<div className={`mt-2 ${styles.to}`}>To</div>
<div
className={`mt-2 ${styles.toBridgeSelectBox} ${styles.inputSelectBox} ${
isTokenInSelected ? styles.toBridgeSelected : null
}`}
>
<div className={clsx(styles.toBridgeWrapper)}>
<div className={styles.toBridgeSelector}>
<img src={toBridge.image} className="button-logo" />
<span>{titleCase(toBridge.name)}</span>
</div>
<div className={clsx(styles.lineVertical, 'mx-2')}></div>
<div className={clsx(styles.inputWrapper)}>
<p className={styles.toLabel}>You will receive</p>
<OverlayTrigger
overlay={
secondTokenAmount === '' || secondTokenAmount <= 0 ? (
<span></span>
) : (
(props) => (
<Tooltip className="switchTooltip token-output-tooltip" {...props}>
{fromExponential(secondTokenAmount)}
</Tooltip>
)
)
}
placement="top"
>
<input
type="text"
className={`text-left ${styles.toTokenOutput}`}
placeholder="0.0"
value={fromExponential(secondTokenAmount)}
disabled
/>
</OverlayTrigger>
</div>
</div>
<span
className={`flex justify-content-center align-items-center ml-2 ${styles.toTokenLabel}`}
>
{tokenOut.name}
</span>
</div>
<p className={clsx('mt-2', styles.feeEstimateText)}>
Bridge fee:{' '}
<span style={{ fontWeight: '700' }}>
{Number(fee) > 0 ? fromExponential(Number(Number(fee).toFixed(16))) : 0}
{` ${operation === 'BRIDGE' ? tokenOut.name : tokenIn.name}`}
</span>
</p>
{metamaskAddress === null ? (
<OverlayTrigger
overlay={(props) => (
<Tooltip className="connect-wallet-tooltip metamask-wallet-tooltip" {...props}>
Connect wallet
</Tooltip>
)}
placement="top"
show={showMetamaskTooltip}
>
<Button
className={clsx('px-md-3', 'mt-3', 'w-100', 'connect-wallet-btn', 'button-bg')}
onClick={connectWalletHandler}
>
<div className={clsx('connect-wallet-btn')}>
<div className="flex flex-row align-items-center">
<connectBridgeWallet.buttonImage />
<span className="ml-2">
Connect to {titleCase(connectBridgeWallet.name)} wallet
</span>
</div>
</div>
</Button>
</OverlayTrigger>
) : (
<>
<Button
className={clsx(
'px-md-3',
'mt-3',
'w-100',
'connect-wallet-btn',
'button-bg',
firstTokenAmount === '' ? styles.disabledProceedButton : '',
)}
onClick={handelClickWithMetaAddedBtn}
loading={isLoading}
>
<div className={clsx('connect-wallet-btn')}>
<div className="flex flex-row align-items-center">
<span className="ml-2">Proceed</span>
</div>
</div>
</Button>
</>
)}
</div>
</div>
</div>
<SelectorModal
show={show}
onHide={handleClose}
selectToken={selector.current === 'BRIDGES' ? selectBridge : selectToken}
tokens={
selector.current === 'BRIDGES'
? bridgesList
: operation === 'UNBRIDGE'
? [...tokenList]
.filter((token) => token.name !== 'WRAP')
.sort(
(a, b) =>
a.tokenData.deprecated - b.tokenData.deprecated || a.name.localeCompare(b.name),
)
: [...tokenList]
.filter((token) => !token.tokenData.deprecated)
.sort((a, b) => a.name.localeCompare(b.name))
}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
title={selector.current === 'BRIDGES' ? 'Select a chain' : 'Select a token'}
selector={selector.current}
/>
</div>
);
}
Example #27
| Source File: EmojiRating.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
function EmojiRating() {
return (
<div className={styles.emojis}>
{/*MODIFIED the emojis in the experience form*/}
{/*Triggers Tooltips on hover*/}
<OverlayTrigger
placement="top"
delay={{ show: 200, hide: 200 }}
overlay={<Tooltip>Liked it</Tooltip>}
>
<label>
<input
className={styles.radio}
type="radio"
value="1"
name="feedback"
/>
<span className={styles.emoji}>👍</span>
</label>
</OverlayTrigger>
<OverlayTrigger
placement="top"
delay={{ show: 200, hide: 200 }}
overlay={<Tooltip>Dislike</Tooltip>}
>
<label>
<input
className={styles.radio}
type="radio"
value="2"
name="feedback"
/>
<span className={styles.emoji}>👎</span>
</label>
</OverlayTrigger>
<OverlayTrigger
placement="top"
delay={{ show: 200, hide: 200 }}
overlay={<Tooltip>Appreciate</Tooltip>}
>
<label>
<input
className={styles.radio}
type="radio"
value="3"
name="feedback"
defaultChecked
/>
<span className={styles.emoji}>👏</span>
</label>
</OverlayTrigger>
<OverlayTrigger
placement="top"
delay={{ show: 200, hide: 200 }}
overlay={<Tooltip>Loved it</Tooltip>}
>
<label>
<input
className={styles.radio}
type="radio"
value="4"
name="feedback"
/>
<span className={styles.emoji}>💓</span>
</label>
</OverlayTrigger>
<OverlayTrigger
placement="top"
delay={{ show: 200, hide: 200 }}
overlay={<Tooltip>Mind blowing</Tooltip>}
>
<label>
<input
className={styles.radio}
type="radio"
value="5"
name="feedback"
/>
<span className={styles.emoji}>🤯</span>
</label>
</OverlayTrigger>
</div>
);
}
Example #28
| Source File: FarmCardBottom.js From plenty-interface with GNU General Public License v3.0 | 4 votes |
|
FarmCardBottom = (props) => {
const dispatch = useDispatch();
const { properties, farmData, values } = props.farmCardData;
const [isExpanded, toggleExpand] = useState(false);
const target = useRef(null);
const onWithdrawalFeeClick = () => {
dispatch(
openCloseFarmsModal({
open: FARM_PAGE_MODAL.WITHDRAWAL,
contractAddress: farmData.CONTRACT,
withdrawalFeeType: farmData.withdrawalFeeType,
}),
);
};
const stakedAmount = useMemo(() => {
return Object.prototype.hasOwnProperty.call(props.userStakes, farmData.CONTRACT)
? props.userStakes[farmData.CONTRACT].stakedAmount
: 0;
}, [farmData.CONTRACT, props.userStakes, props.userAddress]);
return (
<>
<div
className={clsx(styles.plentyCardContent, {
'mt-4': isExpanded,
'pt-0': !isExpanded,
[styles.topBorder]: isExpanded,
[styles.bottomBorder]: isExpanded,
})}
>
{(stakedAmount > 0 || isExpanded) && (
<div className="d-flex">
{properties.isDualFarm ? (
<div
className={`${styles.harvestStakeAmt} mr-2 d-flex justify-content-between align-center`}
style={{ paddingRight: '8px' }}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.04)',
paddingRight: '16%',
}}
>
<Image
height={17}
src={properties.harvestImg}
fuild
className="mt-auto mb-auto ml-2"
/>
<span style={{ fontSize: '10px', marginLeft: '6px' }}>
{values &&
props.userAddress !== null &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms,
props.isActiveOpen,
) &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms[props.isActiveOpen],
farmData.CONTRACT,
) &&
props.harvestValueOnFarms[props.isActiveOpen][farmData.CONTRACT]
.totalRewards[0] > 0 ? (
props.harvestValueOnFarms[props.isActiveOpen][
farmData.CONTRACT
].totalRewards[0].toFixed(4)
) : (
<span className="shimmer">99999</span>
)}
</span>
</div>
<div>
<Image
height={17}
src={properties.harvestImg1}
fuild
className="mt-auto mb-auto ml-2"
/>
<span style={{ fontSize: '10px', marginLeft: '6px' }}>
{values &&
props.userAddress !== null &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms,
props.isActiveOpen,
) &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms[props.isActiveOpen],
farmData.CONTRACT,
) &&
props.harvestValueOnFarms[props.isActiveOpen][farmData.CONTRACT]
.totalRewards[1] > 0
? props.harvestValueOnFarms[props.isActiveOpen][
farmData.CONTRACT
].totalRewards[1].toFixed(4)
: 0}
</span>
</div>
</div>
) : (
<div className={clsx(styles.harvestStakeAmt, 'mr-2 justify-content-between')}>
<Image
height={31}
src={properties.harvestImg}
fuild
className="mt-auto mb-auto ml-2"
/>
<span>
{values &&
props.userAddress !== null &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms,
props.isActiveOpen,
) &&
Object.prototype.hasOwnProperty.call(
props.harvestValueOnFarms[props.isActiveOpen],
farmData.CONTRACT,
) &&
props.harvestValueOnFarms[props.isActiveOpen][farmData.CONTRACT].totalRewards >
0 ? (
props.harvestValueOnFarms[props.isActiveOpen][
farmData.CONTRACT
].totalRewards.toFixed(6)
) : (
<span className="shimmer">99999999</span>
)}
</span>
</div>
)}
<Button
onClick={() => {
props.setShowConfirmTransaction(true);
props.setLoader(true);
localStorage.setItem('stakePair', properties.source);
props.setFloaterValue({
value: properties.isDualFarm
? props.harvestValueOnFarms[props.isActiveOpen][farmData.CONTRACT]
.totalRewards[0] > 0
? props.harvestValueOnFarms[props.isActiveOpen][
farmData.CONTRACT
].totalRewards[0].toFixed(4)
: null
: props.harvestValueOnFarms[props.isActiveOpen][farmData.CONTRACT]
.totalRewards > 0
? props.harvestValueOnFarms[props.isActiveOpen][
farmData.CONTRACT
].totalRewards.toFixed(6)
: null,
pair: localStorage.getItem('stakePair'),
type: 'Harvest',
});
props.harvestOnFarm(
props.farmCardData.identifier,
props.isActiveOpen,
props.farmCardData.position,
props.setShowConfirmTransaction,
props.setLoader,
);
}}
color={stakedAmount > 0 ? 'primary' : 'default'}
loading={
props.harvestOperation.tokenPair === props.identifier &&
props.harvestOperation.isLoading
}
>
Harvest
</Button>
</div>
)}
{isExpanded && (
<>
<div className="mt-3 mb-2">{props.title}</div>
<div className="d-flex">
<div
className={clsx(styles.harvestStakeAmt, 'mr-2 justify-content-end', {
[styles.empty]: !stakedAmount,
})}
>
<span>{stakedAmount?.toFixed(5)}</span>
</div>
<span />
{stakedAmount > 0 || !props.isActiveOpen ? (
<QuantityButton
onAddDisabled={!props.isActiveOpen}
onRemoveDisabled={stakedAmount <= 0}
onAdd={() =>
props.openFarmsStakeModal(
props.farmCardData.identifier,
properties.title,
farmData.CONTRACT,
props.farmCardData.position,
)
}
onRemove={() =>
props.openFarmsUnstakeModal(
props.farmCardData.identifier,
farmData.CONTRACT,
properties.title,
farmData.withdrawalFeeType,
props.farmCardData.position,
)
}
/>
) : (
props.isActiveOpen && (
<Button
onClick={() =>
props.openFarmsStakeModal(
props.farmCardData.identifier,
properties.title,
farmData.CONTRACT,
props.farmCardData.position,
)
}
color={'default'}
>
Stake
</Button>
)
)}
</div>
</>
)}
</div>
{isExpanded && (
<>
<div className={clsx(styles.plentyCardContent, styles.bottomBorder, 'd-flex')}>
<div className={clsx(styles.rightBorder, 'w-50 text-center')}>
<div>Deposit Fee</div>
<OverlayTrigger
key="top"
placement="top"
overlay={
<Tooltip id={'deposit-fee-tooltip'} arrowProps={{ styles: { display: 'none' } }}>
No deposit fee
</Tooltip>
}
>
<Button
id={'deposit-fee'}
ref={target}
size="small"
color="mute"
startIcon="help_outline"
className="mt-1 ml-auto mr-auto"
rounded={false}
onClick={undefined}
>
0%
</Button>
</OverlayTrigger>
</div>
<div className={'w-50 text-center'}>
<div>Withdrawal Fee</div>
{props.farmCardData.identifier === 'CTEZ - TEZ' ? (
<OverlayTrigger
key="top"
placement="top"
overlay={
<Tooltip
id={'deposit-fee-tooltip'}
arrowProps={{ styles: { display: 'none' } }}
>
No Withdrawal Fee
</Tooltip>
}
>
<Button
size="small"
color="mute"
startIcon="help_outline"
className="mt-1 ml-auto mr-auto"
rounded={false}
>
0 %{' '}
</Button>
</OverlayTrigger>
) : (
<Button
size="small"
color="mute"
startIcon="help_outline"
className="mt-1 ml-auto mr-auto"
rounded={false}
onClick={onWithdrawalFeeClick}
>
Variable
</Button>
)}
</div>
</div>
<div className={styles.plentyCardContent}>
<Button
className="w-100"
color={'default'}
onClick={() =>
window.open(
`https://better-call.dev/mainnet/${farmData.CONTRACT}/operations`,
'_blank',
)
}
>
View On Tezos
</Button>
</div>
</>
)}
<div className="d-flex justify-content-center">
<Button
onClick={() => toggleExpand(!isExpanded)}
isIconBtn={true}
startIcon={isExpanded ? 'expand_less' : 'expand_more'}
color={'mute'}
/>
</div>
</>
);
}
Example #29
| Source File: SelectedPool.js From katanapools with GNU General Public License v2.0 | 4 votes |
|
render() {
const {pool: {currentSelectedPool, currentSelectedPoolError}} = this.props;
const {reservesNeeded, reservesAdded, fundAllReservesActive, fundOneReserveActive, singleTokenFundConversionPaths,
withdrawAllReservesActive, withdrawOneReserveActive, singleTokenWithdrawReserveSelection, singleTokenFundReserveSelection,
singleTokenWithdrawConversionPaths, calculatingFunding, calculatingWithdraw, submitFundingEnabled, fundingCalculateInit, withdrawCalculateInit,
calculatingAllInputFunding, calculatingAllInputWithdraw,
fundReserveSelection, withdrawSelection
} = this.state;
const self = this;
let isPurchaseBtnDisabled = false;
let isFundingLoading = <span/>;
let isWithdrawLoading = <span/>;
if (calculatingFunding && !fundingCalculateInit) {
isFundingLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
}
if (calculatingWithdraw && !withdrawCalculateInit) {
isWithdrawLoading = <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>;
}
let isWithdrawBtnDisabled = false;
if (calculatingFunding) {
// isPurchaseBtnDisabled = true;
}
if (calculatingWithdraw) {
isWithdrawBtnDisabled = true;
}
let reserveRatio = '';
reserveRatio = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ?currentSelectedPool.reserves.map(function(item){
if (item) {
return parseInt(item.reserveRatio) / 10000;
} else {
return null;
}
}).filter(Boolean).join("/") : '';
if (currentSelectedPoolError) {
return (<div>
<div>Could not fetch pool details.</div>
<div>Currently only pool contracts which expose reserveTokenCount() and reserveTokens() methods are supported.</div>
</div>)
}
const { fundAmount, liquidateAmount } = this.state;
let minTotalSupply = currentSelectedPool.totalSupply ?
parseFloat(fromDecimals(currentSelectedPool.totalSupply, currentSelectedPool.decimals)).toFixed(4) : "";
let reserveTokenList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
return <div key={`token-${idx}`}>
<div className="holdings-label">{item.name}</div>
<div className="holdings-data"> {parseFloat(fromDecimals(item.reserveBalance, item.decimals)).toFixed(4)}</div>
</div>
}) : <span/>;
let userHoldingsList = currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0 ? currentSelectedPool.reserves.map(function(item, idx){
let userBalanceItem = parseFloat(item.userBalance);
let userBalanceDisplay = "-";
if (!isNaN(userBalanceItem)) {
userBalanceDisplay = userBalanceItem.toFixed(4);
}
return (<div key={`token-${idx}`}>
<div className="holdings-label">{item.name}</div>
<div className="holdings-data"> {userBalanceDisplay}</div>
</div>)
}) : <span/>;
let poolHoldings = "";
if (currentSelectedPool.senderBalance ) {
poolHoldings = parseFloat(fromDecimals(currentSelectedPool.senderBalance, currentSelectedPool.decimals)).toFixed(4) + " " + currentSelectedPool.symbol;
}
let liquidateInfo = <span/>;
if (liquidateAmount && liquidateAmount > 0 && reservesAdded && reservesAdded.length > 0) {
liquidateInfo = (
<div>
<div>You will receive</div>
{reservesAdded.map(function(item, idx){
return <div key={`reserve-added-${idx}`}>{item.addedDisplay} {item.symbol}</div>
})}
</div>
)
}
let fundInfo = <span/>;
if (fundAmount && fundAmount > 0 && reservesNeeded && reservesNeeded.length > 0) {
fundInfo = (
<div>
<div>You will needs to stake</div>
{reservesNeeded.map(function(item, idx){
return <div key={`reserve-needed-${idx}`}>{item.neededDisplay} {item.symbol}</div>
})}
</div>
)
}
let conversionFee = "";
if (currentSelectedPool && currentSelectedPool.conversionFee) {
conversionFee = currentSelectedPool.conversionFee + "%";
}
let poolLiquidateAction = <span/>;
let poolFundAction = <span/>;
let tokenAllowances = <span/>;
let tokenAllowanceRowVisible = "row-hidden";
if (this.state.approvalDisplay) {
tokenAllowanceRowVisible = "row-visible";
}
if (currentSelectedPool.reserves && currentSelectedPool.reserves.length > 0){
if (withdrawAllReservesActive === 'reserve-active') {
poolLiquidateAction = (
<div>
<div className="select-reserve-container">
<Form.Control type="number" placeholder="Enter amount to liquidate" onChange={this.onLiquidateInputChanged}/>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputWithdraw}>Calculate</Button>
</div>
<div className="action-info-col">
{liquidateInfo}
<Button onClick={this.submitSellPoolToken} className="pool-action-btn">Sell</Button>
</div>
</div>
)
} else if (withdrawOneReserveActive === 'reserve-active') {
let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`}>{item.symbol}</Dropdown.Item>
});
let withdrawActiveAmount = <span/>;
if (singleTokenWithdrawConversionPaths && singleTokenWithdrawConversionPaths.length > 0) {
let totalReserveAmount = 0;
singleTokenWithdrawConversionPaths.forEach(function(item){
totalReserveAmount += parseFloat(item.quantity);
});
totalReserveAmount = totalReserveAmount.toFixed(4);
withdrawActiveAmount = <div>{isWithdrawLoading} You will receive {totalReserveAmount} {singleTokenWithdrawReserveSelection.symbol}</div>
}
poolLiquidateAction = (
<div>
<div className="select-reserve-container">
<div>
<label>
Reserve token in which to withdraw
</label>
<DropdownButton id="dropdown-basic-button" title={singleTokenWithdrawReserveSelection.symbol} onSelect={this.withdrawSingleBaseChanged}>
{reserveOptions}
</DropdownButton>
</div>
<div>
<label>Amount of pool tokens to withdraw</label>
<div>
<Form.Control type="number" placeholder="Pool tokens to withdraw" onChange={this.onSingleReserveLiquidateFundChanged}/>
<Button className="calculate-btn" onClick={this.calculateSingleInputWithdraw}>Calculate</Button>
</div>
</div>
</div>
<div className="action-info-col">
{withdrawActiveAmount}
<Button onClick={this.submitSellPoolTokenWithSingleReserve} disabled={isWithdrawBtnDisabled} className="pool-action-btn">Withdraw</Button>
</div>
</div>
)
}
if (fundAllReservesActive === 'reserve-active' && fundReserveSelection.length > 0) {
poolFundAction = (
<div className="select-reserve-container">
<div>
{
fundReserveSelection.map(function(item, idx){
return <Form.Control type="number" placeholder={`Enter amount of ${item.symbol} to fund`} value={item.value}
onChange={self.fundInputAmountChange.bind(self, idx)}/>
})
}
<div>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateAllInputFund}>Calculate</Button>
</div>
</div>
<div className="action-info-col">
{fundInfo}
<Button onClick={this.submitBuyPoolToken} className="pool-action-btn">Purchase</Button>
</div>
</div>
)
} else if (fundOneReserveActive === 'reserve-active') {
let reserveOptions = currentSelectedPool.reserves.map(function(item, key){
return <Dropdown.Item eventKey={item.symbol} key={`${item.symbol}-${key}`} >{item.symbol}</Dropdown.Item>
});
let fundActiveAmount = <span/>;
if (singleTokenFundConversionPaths) {
let totalReserveAmount = 0;
singleTokenFundConversionPaths.forEach(function(item){
totalReserveAmount += parseFloat(item.quantity);
});
totalReserveAmount = totalReserveAmount.toFixed(4);
fundActiveAmount = <div>{isFundingLoading} You will need to stake {totalReserveAmount} {singleTokenFundReserveSelection.symbol}</div>
}
poolFundAction = (
<div>
<div className="select-reserve-container">
<div>
<label>
Reserve token with which to fund.
</label>
<DropdownButton id="dropdown-basic-button" title={singleTokenFundReserveSelection.symbol} onSelect={this.fundSingleBaseChanged}>
{reserveOptions}
</DropdownButton>
</div>
<div>
<label>Amount of {singleTokenFundReserveSelection.symbol} to fund</label>
<div>
<Form.Control type="number" placeholder={`Enter amount of ${singleTokenFundReserveSelection.symbol} to fund`} onChange={this.onSingleReserveFundInputChanged} className="single-reserve-amount-text"/>
<Button className="calculate-btn" disabled={isPurchaseBtnDisabled} onClick={this.calculateSingleInputFund}>Calculate</Button>
</div>
</div>
</div>
<div className="action-info-col">
{fundActiveAmount}
<Button onClick={this.submitBuyPoolTokenWithSingleReserve} className="pool-action-btn">Purchase</Button>
</div>
</div>
)
}
let tokenAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
return <div key={`allowance-${idx}`} className="selected-pool-balance">
{item.symbol} {item.userAllowance ? parseFloat(item.userAllowance).toFixed(5) : '-'}
</div>
});
let tokenSwapAllowanceReserves = currentSelectedPool.reserves.map(function(item, idx){
return <div key={`allowance-${idx}`} className="selected-pool-balance">
{item.symbol} {item.swapAllowance ? parseFloat(item.swapAllowance).toFixed(5) : '-'}
</div>
});
tokenAllowances =
<div className={`${tokenAllowanceRowVisible}`}>
<div className="approval-type-label">
Approvals for pool converter contract.
</div>
<Row className={`token-allowances-display-row`}>
<Col lg={8}>
{tokenAllowanceReserves}
</Col>
<Col lg={4}>
<Button onClick={()=>this.showApprovalDialog("pool")}>Approve reserves </Button>
<Button onClick={()=>this.showRevokeDialog("pool")} className="revoke-approval-btn">Revoke approval </Button>
</Col>
</Row>
<div className="approval-type-label">
Approvals for Bancor Network contract.
</div>
<Row className="single-token-description">
<Col lg={12}>
If you using single token funding, it is also recommended that you approve BancorNetwork contract for swaps.
</Col>
</Row>
<Row>
<Col lg={8}>
{tokenSwapAllowanceReserves}
</Col>
<Col lg={4}>
<Button onClick={()=>this.showApprovalDialog("swap")}>Approve reserves </Button>
<Button onClick={()=>this.showRevokeDialog("swap")} className="revoke-approval-btn">Revoke approval </Button>
</Col>
</Row>
</div>
}
function allowanceToolTip(props) {
return <Tooltip {...props}>
<div>Token allowances refer to amount you have approved the converter contract to spend.</div>
<div>Set allowances for BancorConverter for faster pool funding and liquidation and save on Gas costs</div>
</Tooltip>;
}
let currentPoolTransactions = <span/>;
if (currentSelectedPool.poolVersion === '1') {
currentPoolTransactions = (
<div>
<Col lg={6}>
<div className="allowance-label">Fund Pool Holdings</div>
{poolFundAction}
</Col>
<Col lg={6}>
<div className="allowance-label">Liquitate Pool Holdings</div>
{poolLiquidateAction}
</Col>
</div>
)
} else {
currentPoolTransactions = (
<div>
<SelectedV2PoolContainer pool={this.props.pool}/>
</div>
)
}
return (
<div>
<Row className="select-pool-row-1">
<Col lg={1} className="pool-logo-container">
<img src={currentSelectedPool.imageURI} className="selected-pool-image" alt="pool-token-img"/>
</Col>
<Col lg={2}>
<div className="cell-label">{currentSelectedPool.symbol}</div>
<div className="cell-data">{currentSelectedPool.name}</div>
</Col>
<Col lg={2}>
<div className="cell-label">Address</div>
<div className="cell-data"><AddressDisplay address={currentSelectedPool.address}/></div>
</Col>
<Col lg={2}>
<div className="cell-label">Pool Supply</div>
<div className="cell-data">{minTotalSupply}</div>
</Col>
<Col lg={3}>
<div>
<div className="cell-label">Reserves</div>
<div className="cell-data">{reserveTokenList}</div>
</div>
</Col>
<Col lg={2}>
<div className="cell-label">Reserve Ratio</div>
<div className="cell-data">{reserveRatio}</div>
</Col>
</Row>
<Row className="selected-pool-meta-row">
<Col lg={3}>
<div className="cell-label">Conversion fee generated</div>
<div className="cell-data">{conversionFee}</div>
</Col>
<Col lg={3}>
<div className="cell-label">Your pool token holdings</div>
<div className="cell-data">{poolHoldings}</div>
</Col>
<Col lg={4}>
<div className="cell-label">Your reserve token holdings</div>
<div className="cell-data">{userHoldingsList}</div>
</Col>
</Row>
<div className="pool-action-container pool-allowance-container">
<Row>
<Col lg={12}>
<div className="pool-approval-container">
<div className="allowance-label">
Your pool allowances
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={allowanceToolTip}>
<FontAwesomeIcon icon={faQuestionCircle} className="info-tooltip-btn"/>
</OverlayTrigger>
</div>
<FontAwesomeIcon icon={faChevronDown} className="show-approval-toggle" onClick={this.toggleApprovalDisplay}/>
{tokenAllowances}
</div>
</Col>
</Row>
<Row className="selected-pool-buy-sell-row">
<Col lg={12}>
{currentPoolTransactions}
</Col>
</Row>
</div>
</div>
)
}
