react-bootstrap#Image JavaScript Examples

render() {
        const options = {
            legend: {
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }}]
            },
            plugins: {
                datalabels: {
                    display: function(context) {
                        return context
                    },
                    font: {
                        weight: 'bold'
                    }
                }
            },
            tooltips: {
                enabled: false
            }
        };

        return (
            <div>
                <Image src={azureImage} style={{width: "98%"}} />
                <h3 className="text-left my-3">实时统计</h3>
                <Bar data={this.state.chartData} options={options} plugins={DataLabels}/>
                <NoticeAlert />
            </div>
        )
    }

render() {
        return (
            <Container fluid>
                <Row>
                    <Col xs={{ span: 2, offset: 10 }}  md={{ span: 1, offset: 11 }}>
                        <Image src={staffImage} roundedCircle fluid className="border border-primary my-3" />
                    </Col>
                </Row>
                <Row>
                    <Col md="6" className="mb-3">
                        <Form onSubmit={this.submitNotice}>
                            <Form.Group controlId="ControlTextarea">
                                <Form.Control className="" style={{backgroundColor: 'rgba(255, 255, 255, 6%)'}} value={this.state.formText} onChange={this.changeNotice} name="formText" as="textarea" rows="10" placeholder="输入通知消息..."/>
                            </Form.Group>
                            <Button variant="primary" type="submit" className="float-right">通知</Button>
                        </Form>
                    </Col>
                    <Col md="6">
                        <Image src={azureImage} fluid />
                    </Col>
                </Row>
            </Container>
        );
    }

render() {
        return (
            <div>
                <div className="position-relative overflow-hidden">
                    <video controls className="w-100" src={this.state.videoSource}></video>
                    {this.state.comments.map((comment, index) =>
                        <p key={index} className="h4 comment text-dark" style={{top: comment.position + "px"}}>{comment.text}</p>
                    )}
                </div>
                <form style={{backgroundColor: '#262930'}} className="form-inline py-1 px-3" onSubmit={this.submitComment}>
                    <div className="form-group m-0">
                        <input name="commentText" value={this.state.commentText} onChange={this.changeComment} type="text" className="form-control" placeholder="聊天..." id="comment" />
                    </div>
                    <Button variant="primary" type="submit" className="mx-2">发送</Button>
                    <Image src={staffImage} roundedCircle fluid className="border border-primary position-absolute" style={{ width: "5%", right: "40px" }} />
                </form>
            </div>
        )
    }

TokenAvatar = (props) => {
  if (!props.imgPath1) {
    return <Image src={null} height={32} width={32} alt={''} />;
  }

  if (props.imgPath2) {
    return (
      <div className={styles.root}>
        <Image src={props.imgPath1.url} height={32} width={32} alt={''} className={styles.token1} />
        <Image src={props.imgPath2.url} height={32} width={32} alt={''} className={styles.token2} />
      </div>
    );
  }

  return <Image src={props.imgPath1.url} height={32} width={32} alt={''} />;
}

function MaintenancePage() {
  return (
    <Container className="common-page-maintenance-container">
      <Row className="center-row">
        <Col>
          <h2 className="main-heading">
            <PowerIcon />
            Under Maintenance
          </h2>
          <Image
            src={maintenanceImage}
            className="common-page-maintenance-image"
          />
          <h6 className="common-page-maintenance-message">
            We are currently under maintenance. Apologies for the
            inconvenience caused. Please check back sometime later.
          </h6>
        </Col>
      </Row>
    </Container>
  );
}

Member = (props) => {
    return (
        <>
            <div className="member">
                <Image className="circle-icon" src={props.img} alt="member" />

                <a href={props.link} target="_blank" rel="noreferrer">
                    <Image className="ln-icon" src={linkedinIcon} alt="member" />
                </a>
            </div>
            <div className="details">
                <h4><strong>{props.name}</strong></h4>
                <h5>{props.designation}</h5>
            </div>
        </>
    )
}

MemberResponsive = (props) => {
    return (
        <>
            <div className="member-responsive">
                <Image className="rect-icon" src={props.img} alt="member" />
            </div>

            <div className="details-responsive">
                <h4><strong>{props.name}</strong></h4>
                <h5>{props.designation}</h5>
                <a href={props.link} target="_blank" rel="noreferrer">
                    <Image className="ln-icon-resp" src={linkedinIcon} alt="member" />
                </a>
            </div>
        </>
    )
}

function CardCourse({ title, description, icon, url, color }) {

  const history = useHistory();

  function handleClick() {
    history.push(url);
  }

  return (
    <Col md='4' style={{ padding: '15px' }} >
      <Card className={['dark', color, 'shadow'].join(' ')} bg="dark" text="white">
        <Card.Body className="text-white">
          <Card.Title className={color}>
            <h3>{title}</h3>
          </Card.Title>
          <Image fluid={true} src={icon} />
          <h5>{description}</h5>
          <Button
            onClick={handleClick}
            variant='dark'
          >
            <h5 style={{ margin: 0 }} >EM BREVE</h5>
          </Button>
        </Card.Body>
      </Card>
    </Col>
  );
}

export default function MainHeader(props) {
    const renderMenuItem = (activeOnView, label, onClick) => {
        const isActive = props.view === activeOnView;
        return (<Col className={isActive ? "menu-link-active" : ""}>
        <p className="pointer" onClick={() => onClick()}>
            {label}
        </p>
    </Col>)
    }

    return (
        <Row id="header" className="main-header">
                <Col sm={2} className="main-header-logo">
                    <Image src={require("./../../img/white-logo.svg")}/>
                </Col>
            

                <Col sm={6} className="d-flex">
                    {renderMenuItem('home', 'Home', props.goHome)}
                    {renderMenuItem('market', 'Market', props.goToMarket)}
                    {renderMenuItem('merchant', 'Merchant', props.goToMerchant)}
                    {renderMenuItem('tokens', 'Tokens', props.goToTokens)}                
                </Col>

                <Col sm={2} className="">
                    <BiCog tabIndex={4} size={40} className="m-3 pointer" onClick={props.goToSettings}/>

                    <BiPowerOff tabIndex={5} size={40} className="m-3 pointer" onClick={props.logout}/>
                </Col>
        </Row>
    )
}

render() {
        return (
            <div className="width100 height100 d-flex flex-column text-center intro-background-image">
                <Container fluid className="height100 flex-column d-flex justify-content-center">
                    <Image onClick={() => app.quit()} className="entry-off-button pointer" src={require("./../../img/off_black.svg")}/>

                    <Row className="row justify-content-md justify-content-center p-3 intro-safex-logo">
                        <Image className="w-50 intro-safex-logo " src={require("./../../img/safex-home-multi.png")}/>
                    </Row>

                    <button onClick={this.open_select} className="w-50 custom-button-entry my-5 intro-safex-logo">
                        Get Started
                    </button>
                </Container>  
            </div>
        );
    }

export default function ErrorPage() {
  return (
    <div>
      <div className="Container">
        <p className="NotFoundMessage">
          The page you are looking for doesn’ t exist!
        </p>
        <Col className="ImgColumn">
          <Image
            className="NotFoundImage"
            src={NotFound}
            alt="Page Not Found"
          />
        </Col>
      </div>
    </div>
  );
}

/**
 *  Navbar Component using {Link}
 */
function NavigationBar() {
  const { isAuthenticated } = useAuth0();

  return (
    <Navbar bg="light" shadow="lg" expand="lg">
      <Navbar.Brand href="/">
        <Image src={logo} className="custom-img" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="navbar-nav" />
      <Navbar.Collapse>
        {isAuthenticated ? (
          <Nav className="ml-auto color-link">
            <NavDropdown title="Events" id="basic-nav-dropdown">
              <NavDropdown.Item href="/events">
                Your Events
              </NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="/events/new">
                Create New
              </NavDropdown.Item>
            </NavDropdown>
            <ProfileLink />
            <LogoutLink />
          </Nav>
        ) : (
          <Nav className="ml-auto color-link">
            <LoginLink />
            <SignupLink />
          </Nav>
        )}
      </Navbar.Collapse>
    </Navbar>
  );
}

Stats = (props) => {
  const loading = useMemo(() => {
    return (
      props.valueLocked == null || props.plentyInWallet == null || props.plentyToHarvest == null
    );
  }, [props.plentyInWallet, props.plentyToHarvest, props.valueLocked]);

  return (
    <div className={clsx('p-3', 'bg-themed', styles.container)}>
      <Row className="p-1">
        <Col xs={12}>
          <span className="d-flex font-weight-bold m-0 py-3">
            Your Stats
            <Image className="ml-2" src={greenBullet} />
          </span>
          <hr />
        </Col>
      </Row>

      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={
              loading ? null : (
                <NumericLabel params={currencyOptionsWithSymbol}>
                  {props.valueLocked.toFixed(0)}
                </NumericLabel>
              )
            }
            subText={'Total value locked'}
            icon={dollar}
            iconClass={'mt-1'}
            className={'pt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyToHarvest?.toFixed(5)}`}
            subText={'PLENTY to harvest'}
            icon={plentyToHarvest}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>

      <hr className="mt-0" />
      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyInWallet?.toFixed(5)}`}
            subText={'PLENTY in wallet'}
            icon={plentyInWallet}
            iconClass={'mt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.xplentyBalance?.toFixed(5)}`}
            subText={'xPLENTY in wallet'}
            icon={xplentyIcon}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>
      <Row className="p-1 mt-1">
        <Col>
          <Button
            onClick={props.harvestAll}
            color={'primary'}
            className={'w-100'}
            disabled={false}
            loading={props.harvestAllOperations.loading}
          >
            Harvest all
          </Button>
        </Col>
      </Row>
    </div>
  );
}

FirstTimeDisclaimer = () => {
  const [checked, setChecked] = useState([false, false]);

  const onAccept = () => {
    localStorage.setItem(FIRST_TIME_DISCLAIMER, 'true');
    window.location.reload(); // ? Try moving this to redux later
  };

  return (
    <div className="d-flex justify-content-center align-center vh-100 vw-100">
      <div className={clsx(styles.card, 'p-4')}>
        <div className="d-flex justify-content-center p-2">
          <Image src={PlentyLogo} alt={'Plenty'} className={styles.logo} />
        </div>

        <hr />

        <div>
          <div className={clsx('d-flex', styles.checkbox)}>
            <input
              value={checked[0]}
              type="checkbox"
              onChange={(ev) => setChecked([ev.target.checked, checked[1]])}
              id="d-01"
            />

            <label className={clsx(styles.disclaimerItem, 'ml-3 mb-2 p-3')} htmlFor="d-01">
              I understand that I am using this product in beta at my own risk. Any losses incurred
              due to my actions are my own responsibility.
            </label>
          </div>

          <div className={clsx('d-flex', styles.checkbox)}>
            <input
              value={checked[1]}
              type="checkbox"
              onChange={(ev) => setChecked([checked[0], ev.target.checked])}
              id="d-02"
            />

            <label className={clsx(styles.disclaimerItem, 'ml-3 mb-2 p-3')} htmlFor="d-02">
              I understand that this product is still in beta. I am participating at my own risk.
            </label>
          </div>
        </div>

        <Button
          onClick={onAccept}
          color={'primary'}
          disabled={!checked.every((x) => x)}
          className="w-100"
        >
          Confirm
        </Button>
      </div>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <Navbar style={{ backgroundColor: '#F2F0E9', width: '100%' }} >
          <Navbar.Brand href="#home" variant="dark" style={{ fontFamily: 'lato', color: 'grey'}}>Masakhane</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav" className="justify-content-start">
            <Nav className="ml-auto">
            <Nav.Link href="/">Home</Nav.Link>
                <Nav.Link href="/about">About</Nav.Link>
                <Nav.Link href="/faq">FAQ</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Jumbotron xs={12} style={{ backgroundColor: '#F2F0E9', paddingTop: '50px', paddingBottom: '50px',backgroundSize: 'cover', backgroundSize: 'cover'}} fluid>
          <Container style={{display:'flex', flexDirection:'row', alignItems:'center', justifyContent:'center'}}>
            <Image src={image}  className="d-none d-sm-block" width='240' height='250' roundedCircle style={{position:"absolute", left:0, right:0}}/>
            <Row xs={12} md={8} style={{display:'flex', flexDirection:'column' ,justifyContent:'center', alignItems:'center'}}>
              <h1 style={{ fontFamily: 'lato, sans-serif', fontWeight: 'lighter', fontSize: 80 }}>Masakhane</h1>
              <p>Machine translation service for African languages</p>
            </Row>
          </Container>
        </Jumbotron>

        <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/faq">
              <FAQPage />
            </Route>
          </Switch>
        {/* <Container className="my-4">
          <br />
          <br />
          <TranslateCard />
          <br />
          <p style={{fontSize: 12, color: 'gray'}}>This is a community research project. Read more about it <span style={{color: 'blue'}}>here</span></p>
        </Container> */}
      </div>
    </Router>
  );
}

Jumbotron = props => {
  const signInHandler = () => {
    document.getElementById("signInBtn").click();
  };
  return (
    <section className="jumbotron">
      <Container>
        <Row className="mt-5">
          <Col md="6">
            <h1>Practice lenguages at anytime.</h1>
            <p className="lead mt-5 mb-5">
              Talk4Free is created to talk to people around the world in many
              languages such as English, Mandarin, Spanish, French, German,
              Italian, Portuguese, Arabic, Russian, Japanese among others.
              <br />
              <br />
              People can exchange languages and culture, make friends and meet
              up people around the world.
            </p>
            <div className="callToActions">
              <a
                href="#test"
                className="btn btn-primary my-2"
                onClick={props.isLoggedIn ? console.log("") : signInHandler}
              >
                Join & Talk Now! <FaSignInAlt />
              </a>
              <a
                type="btn"
                href="#test"
                className="btn btn-secondary my-2 ml-4"
              >
                Rules & Penalies <FaSkull />
              </a>
            </div>
          </Col>
          <Col md="6" className="introImage">
            <Image src={require("./logo10x10.png")} />
          </Col>
        </Row>
      </Container>
    </section>
  );
}

function MM(props) {
    let { post, expanded = false, className } = props
    let style = {
        card: {
            maxHeight: !expanded ? '350' : 'fit-content',
            overflow: 'hidden',
        },
    }
    let { entities = {}, text } = post
    let {
        media: [photo] = [],
        urls: [url],
    } = entities
    if (photo) {
        photo = <Image fluid rounded={true} src={photo.media_url_https} alt="media preview" />
    }
    if (!url) {
        // TODO see if this even necessary
        let unparsed_urls = Array.from(getUrls(text))
        if (unparsed_urls.length) {
            url = {
                expanded_url: unparsed_urls[0], // just the first one
            }
        }
    }
    if (url) {
        url = (
            <ReactTinyLink
                width="100%"
                cardSize={expanded ? 'large' : 'small'}
                autoPlay={expanded}
                showGraphic={true}
                maxLine={2}
                minLine={1}
                url={url.expanded_url}
            />
        )
    }
    if (photo || url)
        return (
            <Card className={`${className} w-100 bg-transparent`} style={style.card}>
                {photo}
                <div className="mt-1">{url}</div>
            </Card>
        )
    else return <></>
}

export default function Header() {
    const [errorModal, setErrorModal] = useState(false);

    const handleConnectMetamask = () => {
        if (isMetamaskInstalled()) {
            initContract();
        } else {
            setErrorModal(true);
        }
    };

    const isMetamaskInstalled = () => {
        return (typeof window.ethereum !== 'undefined');
    }

    return (
        <div>
            <Navbar collapseOnSelect bg="light" variant="light">
                <Navbar.Brand href="#">
                    <Image width="120px" src={logo} />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Nav className="mr-auto">
                    <Nav.Link href="#create-pool">Create Pool</Nav.Link>
                    <Nav.Link href="#swap-token">Swap Token</Nav.Link>
                </Nav>
                <Nav>
                    <Image
                        style={{ cursor: "pointer" }}
                        width="60px"
                        src={metamask}
                        onClick={handleConnectMetamask}
                    />
                </Nav>
            </Navbar>

            <AlertModal
                open={errorModal}
                toggle={() => setErrorModal(false)}
            >
                You can't use these features without Metamask.
                <br />
                Please install
                <Image width="50px" src={metamask}></Image>
                first !!
            </AlertModal>
        </div>
    )
}

export default function SwapTokens() {
    const [showMetamaskError, setShowMetamaskError] =
        useState(false);

    useEffect(() => {
        if (typeof window.ethereum === 'undefined' ||
            !window.ethereum.selectedAddress
        ) {
            setShowMetamaskError(true);
        }
    }, []);

    return (
        <div>
            {showMetamaskError ?
                <AlertModal
                    open={showMetamaskError}
                    toggle={() => {
                        setShowMetamaskError(false);
                        history.push('/');
                    }}
                >
                    <div>
                        {typeof window.ethereum === 'undefined' ?
                            <div>
                                You can't use these features without Metamask.
                                <br />
                                Please install
                                <Image width="50px" src={metamask}></Image>
                                first !!
                            </div>
                            :
                            <div>
                                Please connect to
                                <Image width="50px" src={metamask}></Image>
                                to use this feature !!
                            </div>
                        }
                    </div>
                </AlertModal>
                :
                <CardDeck style={{ marginTop: "12%" }}>
                    <Card className="hidden-card"></Card>
                    <SwapToken fixedBuyToken={false} buyToken="DAI" />
                    <Card className="hidden-card"></Card>
                </CardDeck>
            }
        </div>
    );
}

export default function MerchantTabs(props) {

    return (
            <div className="merchant-tabs-box">
                <div onClick={props.handleNewAccountForm} className="merchant-tab pointer">
                    <Image
                    onClick={props.handleNewAccountForm} 
                        width={75}
                        height={75}
                        src={props.newAccountImage}
                        roundedCircle
                    />

                    <h1 onClick={props.handleNewAccountForm} >Make a New Account</h1>
                    
                </div>
                
                <div onClick={props.showAccounts} className="merchant-tab pointer">
                    <Image
                        width={75}
                        height={75}
                        src={props.accountsImage}
                        roundedCircle
                    />

                    <h1>See Your Accounts</h1>
                    
                </div>
                
                <div onClick={props.handleNewOfferForm} className="merchant-tab pointer">
                    <Image
                        width={75}
                        height={75}
                        src={props.newOfferImage}
                        roundedCircle
                    />

                    <h1>Make a New Offer</h1>
                    
                </div>
                
                <div onClick={props.showOffers} className="merchant-tab pointer">
                    <Image
                        width={75}
                        height={75}
                        src={props.offersImage}
                        roundedCircle
                    />

                    <h1>See Your Offers</h1>
                    
                </div>
                
            </div>

    )
}

render() {
        return (
            <div className="width100 height100 d-flex flex-column text-center">
                
                <Container fluid className="height100 flex-column d-flex justify-content-center start-background-image">

                    
                    <Image onClick={this.back} className="entry-off-button pointer" src={require("./../../img/off_black.svg")}/>
                    

                    <Row className="rowjustify-content-md-center justify-content-center p-3">
                        <Image className="w-25" src={require("./../../img/safex-home-multi.png")}/>
                    </Row>

                    <Col className="my-5">
                        <Col className="my-2 p-3">
                            <button onClick={this.open_existing} className="custom-button-entry">Open Existing Wallet</button>
                        </Col>

                        <Col className="my-2 p-3">
                            <button onClick={this.create_new} className="custom-button-entry">Create New Wallet</button>
                        </Col>

                        <Col className="my-2 p-3">
                            <button onClick={this.restore_keys} className="custom-button-entry">Recover Wallet From Keys</button>
                        </Col>

                        <Col className="my-2 p-3">
                            <button onClick={this.seed_phrase} className="custom-button-entry">Recover Wallet From Seed Phrase</button>
                        </Col>

                        {this.state.legacy_detected ? 
                        (
                            <Col className="my-5 p-3">
                                <button className="custom-button-entry orange-border" onClick={() => this.setState({showLegacyAlert: !this.state.showLegacyAlert})}>Open Legacy Wallet</button>
                                <Collapse in={this.state.showLegacyAlert}>
                                <Alert 
                                    variant="info" 
                                    transition={false}
                                    className="mt-3 w-50 mx-auto entry-back-text"    
                                >
                                    <Alert.Heading>We are working on this feature. Thank you for your patience!</Alert.Heading>
                                   
                                </Alert>
                                </Collapse>
                            </Col>
                        ) 
                        : 
                            (<div></div>)
                        }
                        
                    </Col>
                </Container>  
            </div>);
    }

export default function fourZeroFour () {
  return (
    <LayoutError>
      <Image width='500' height='376' src='/maze.gif' fluid />
      <h1 className={styles.fourZeroFour}><span>404</span><span className={styles.notFound}>page not found</span></h1>
    </LayoutError>
  )
}

export default function fourZeroFour () {
  return (
    <LayoutError>
      <Image width='500' height='375' src='/falling.gif' fluid />
      <h1 className={styles.fourZeroFour}><span>500</span><span className={styles.notFound}>server error</span></h1>
    </LayoutError>
  )
}

Transactions = () => {
  const [txs, setTxs] = React.useState([]);
  const [isActive, setActive] = React.useState('all');
  const [showModal, setShowModal] = React.useState({ show: false });
  const [delay, setDelay] = React.useState(50);
  const [etherscan] = React.useState(
    ChainIdMapping[process.env.REACT_APP_MODE].chainName === 'Ethereum Mainnet'
      ? 'etherscan.io'
      : 'goerli.etherscan.io',
  );

  const initialPrices = {};
  supportedTokens.forEach(t => {
    initialPrices[t.id] = 0;
  }, {});

  const [currencyValues, setCurrencyValues] = React.useState({ now: 0, ...initialPrices });

  React.useEffect(async () => {
    if (!getPricing()) await setPricing(supportedTokens.map(t => t.id));
    else if (Date.now() - getPricing().time > 86400)
      await setPricing(supportedTokens.map(t => t.id));
    setCurrencyValues(getPricing());
  }, []);

  useInterval(async () => {
    console.log('currencyVals', currencyValues);
    const transactionsDB = await getAllTransactions();
    const commitmentsDB = await getAllCommitments();
    const commits = commitmentsDB.map(c => c._id);
    const nullifiers = commitmentsDB.map(c => c.nullifier);

    const transactions = Array.from(new Set(transactionsDB)).filter(
      t =>
        t.commitments.some(c => commits.includes(c)) ||
        t.nullifiers.some(n => nullifiers.includes(n)),
    );
    const shieldContractAddress = shieldAddressGet();
    const shieldContractInstance = await getContractInstance(
      SHIELD_CONTRACT_NAME,
      shieldContractAddress,
    );
    setDelay(20000);

    const blocks = await findBlocksFromBlockNumberL2(-1);
    const promisedTxs = transactions.map(async tx => {
      const safeTransactionType = BigInt(tx.transactionType).toString();
      let value = BigInt(tx.value);
      // The value of transfers need to be derived from the components making up the transfer
      // Add sum nullifiers in transactions
      // Subtract sum of commitments we have.
      if (safeTransactionType === '1' || safeTransactionType === '2')
        commitmentsDB.forEach(c => {
          if (tx.nullifiers.includes(c.nullifier)) value -= BigInt(c.preimage.value);
          else if (tx.commitments.includes(c._id)) value += BigInt(c.preimage.value);
        });

      const safeValue = value.toString();
      const { ercAddress } = commitmentsDB.find(c => {
        return tx.commitments.includes(c._id) || tx.nullifiers.includes(c.nullifier);
      })?.preimage ?? {
        ercAddress: '0x00',
      };

      // eslint-disable-next-line no-param-reassign
      if (tx?.blockNumberL2) tx.isOnChain = tx.blockNumberL2; // Temp for handling transfers
      blocks.forEach(b => {
        if (tx.isOnChain >= 0) return;
        if (b.transactionHashes.includes(tx._id)) {
          // eslint-disable-next-line no-param-reassign
          tx.isOnChain = b.blockNumberL2;
        }
        // eslint-disable-next-line no-param-reassign
        else tx.isOnChain = -1;
      });

      let withdrawReady = false;
      if (
        safeTransactionType === '3' &&
        tx.isOnChain > 0 &&
        tx.withdrawState !== 'finalised' &&
        Math.floor(Date.now() / 1000) - tx.createdTime > 3600 * 24 * 7
      ) {
        withdrawReady = await isValidWithdrawal(tx._id, shieldContractAddress);
      }
      if (tx.withdrawState === 'instant') {
        const newOwner = await shieldContractInstance.methods.advancedWithdrawals(tx._id).call();
        const myAddress = await Web3.getAccount();
        if (newOwner.toLowerCase() !== ZERO && newOwner.toLowerCase() !== myAddress.toLowerCase())
          // eslint-disable-next-line no-param-reassign
          tx.withdrawState = 'fulfilled';
      }

      const { logoURI, decimals, id, symbol } = supportedTokens.find(
        t => t.address.toLowerCase() === `0x${ercAddress.slice(-40).toLowerCase()}`,
      ) ?? {
        logoURI: null,
        decimals: 0,
        id: '',
      };
      const currencyValue = id !== '' ? currencyValues[id] : 0;
      return {
        ...tx,
        transactionHash: tx._id,
        txType: safeTransactionType,
        value: safeValue,
        now: Math.floor(Date.now() / 1000),
        logoURI,
        decimals,
        currencyValue,
        symbol,
        withdrawReady,
      };
    });
    const mappedTxs = (await Promise.all(promisedTxs)).sort(
      (a, b) => b.createdTime - a.createdTime,
    );
    console.log('Transactions', transactions);
    setTxs(mappedTxs);
  }, delay);

  function downloadFile(content) {
    const a = document.createElement('a');
    const file = new Blob([content], { type: 'text/plain' });
    a.href = URL.createObjectURL(file);
    a.download = 'pnf_bkp.json';
    a.click();
  }

  const handleExportIndedexDB = async () => {
    const exportedDB = await exportIndexdDB('nightfall_commitments');
    const filteredTables = exportedDB.filter(
      arr => arr.table === 'commitments' || arr.table === 'transactions',
    );
    downloadFile(JSON.stringify(filteredTables));
  };

  return (
    <div className="pagePartition" style={{ width: '100%' }}>
      <TxInfoModal onHide={() => setShowModal(false)} {...showModal} />
      <div className="infoWrapper">
        <div className="wrapperTabList">
          <div className="tab-list">
            <div
              className={`tab-list-item ${isActive === 'all' ? 'active' : ''}`}
              onClick={() => setActive('all')}
            >
              All Transactions
            </div>
            <div
              className={`tab-list-item ${isActive === 'pending' ? 'active' : ''}`}
              onClick={() => setActive('pending')}
            >
              Pending
            </div>
            <div
              className={`tab-list-item ${isActive === 'deposit' ? 'active' : ''}`}
              onClick={() => setActive('deposit')}
            >
              Deposits
            </div>
            <div
              className={`tab-list-item ${isActive === 'transfer' ? 'active' : ''}`}
              onClick={() => setActive('transfer')}
            >
              Transfers
            </div>
            <div
              className={`tab-list-item ${isActive === 'withdraw' ? 'active' : ''}`}
              onClick={() => setActive('withdraw')}
            >
              Withdraws
            </div>
          </div>
          <div>
            <button onClick={() => handleExportIndedexDB()} className="exportTransactionsButton">
              Export transactions
            </button>
          </div>
        </div>
        <div className="separator" />
        <div className="innerWrapper">
          {txs
            .filter(f => {
              switch (isActive) {
                case 'deposit':
                  return f.txType === '0';
                case 'transfer':
                  return f.txType === '1' || f.txType === '2';
                case 'withdraw':
                  return f.txType === '3';
                case 'pending':
                  return f.isOnChain === -1;
                default:
                  return f;
              }
            })
            .map(tx => (
              <Row
                key={tx.transactionHash}
                className="transactionRow"
                onClick={() =>
                  setShowModal({
                    show: true,
                    transactionhash: tx.transactionHash,
                    symbol: tx.symbol,
                    value: new BigFloat(BigInt(tx.value), tx.decimals).toFixed(4),
                    _id: tx._id,
                    recipientaddress: tx.recipientAddress,
                    withdrawready: tx.withdrawReady ? 1 : 0,
                    txtype: tx.txType,
                  })
                }
              >
                <Row>
                  <div className="transactionDetails">
                    <div>
                      {tx.isOnChain >= 0 ? (
                        <Image src={tickBox} />
                      ) : (
                        <Spinner animation="border" variant="warning" />
                      )}
                    </div>
                    <div style={{ marginLeft: '14px' }}>
                      {/* Details */}
                      <div style={{ display: 'flex', fontWeight: '600', fontSize: '14px' }}>
                        {/* tx-type-time */}
                        <div style={{ textTransform: 'capitalize' }}>
                          {txTypeOptions[tx.txType]}
                        </div>
                        {/* tx-type-time-type */}
                        <div style={{ color: '#b0b4bb', paddingLeft: '5px' }}>
                          {/* tx-type-time-time */}
                          {displayTime(tx.createdTime, tx.now)}
                        </div>
                      </div>
                      <div
                        style={{
                          display: 'flex',
                          color: '#52555d',
                          fontWeight: '400',
                          fontSize: '12px',
                          lineHeight: '16px',
                        }}
                      >
                        {/* tx-status-hash */}
                        {/* <div> 1/3 • Action Required • From Mumbai to Goerli</div> */}
                        <div style={{ textTransform: 'capitalize' }}>
                          {tx.isOnChain >= 0 ? 'Success' : 'Pending'} • {txTypeDest[tx.txType]}{' '}
                          {!tx.withdrawState ? '' : `• ${tx.withdrawState}`}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    style={{
                      padding: '20px',
                      width: '42%',
                      alignItems: 'center',
                      display: 'flex',
                    }}
                  >
                    {/* details-section */}
                    <div style={{ display: 'block' }}>
                      {/* token-image */}
                      <img src={tx.logoURI} alt="" height="32" width="32" />
                    </div>
                    <div
                      style={{
                        width: 'calc(50% - 50px)',
                        marginLeft: '8px',
                        flexShrink: '0',
                      }}
                    >
                      {/* amount-details */}
                      <div style={{ fontWeight: '600', fontSize: '14px', lineHeight: '20px' }}>
                        {new BigFloat(BigInt(tx.value), tx.decimals).toFixed(4)} {tx.symbol}
                      </div>
                      <div
                        style={{
                          color: '#52555d',
                          marginTop: '4px',
                          wordBreak: 'break-all',
                          fontWeight: '400',
                          fontSize: '12px',
                          lineHeight: '16px',
                        }}
                      >
                        $
                        {new BigFloat(BigInt(tx.value), tx.decimals)
                          .mul(tx.currencyValue)
                          .toFixed(4)}
                      </div>
                    </div>
                    <div
                      style={{
                        marginLeft: '8px',
                        width: 'calc(50% - 50px)',
                        flexShrink: '0',
                      }}
                    >
                      {/* Transaction Details */}
                      <div style={{ fontWeight: '600', fontSize: '14px', lineHeight: '20px' }}>
                        {/* Transaction Hash label */}
                        Transaction Hash
                      </div>
                      <div
                        style={{
                          color: '#52555d',
                          marginTop: '4px',
                          display: 'flex',
                          alignItems: 'center',
                          cursor: 'pointer',
                          fontWeight: '400',
                          fontSize: '12px',
                          lineHeight: '16px',
                        }}
                      >
                        {/* Tooltip */}
                        <img src={polygonChainImage} alt="Polygon Chain" height="16" width="16" />
                        <div style={{ marginLeft: '4px' }}>{`${tx.transactionHash.slice(
                          0,
                          5,
                        )}...${tx.transactionHash.slice(-5)}`}</div>
                      </div>
                    </div>
                    <a
                      href={`https://${etherscan}/tx/${tx.l1Hash}`}
                      className="etherscanLink"
                      rel="noopener noreferrer"
                      target="_blank"
                      style={{ marginLeft: '20px' }}
                      onClick={e => e.stopPropagation()}
                    >
                      <Image src={etherscanArrow} />
                    </a>
                  </div>
                </Row>
                {tx.txType === '3' && tx.isOnChain > 0 && !tx.withdrawState ? (
                  <WithdrawTransaction
                    withdrawready={tx.withdrawReady}
                    transactionhash={tx.transactionHash}
                  />
                ) : (
                  <></>
                )}
              </Row>
            ))}
        </div>
        <Row>
          <div className="bottomSection">
            <img src={bridgeInfoImage} alt="" height="219" width="326" />
          </div>
        </Row>
      </div>
    </div>
  );
}

export default function ChangeImages(props) {
    const [imageBox, setImageBox] = useState(false);
    const [movieBackdropResult, setMovieBackdropResult] = useState([]);
    const [moviePosterResult, setMoviePosterResult] = useState([]);
    const {server, id, serverToken, type} = props;
    const Router = useRouter();

    const updateImages = () => {
        let poster;
        let backdrop;
        console.log(selectedImages);
        for (let image of selectedImages) {
          if (image.type === 'POSTER') {
            poster = image.id;
          } else if (image.type === 'BACKDROP') {
            backdrop = image.id;
          }
        }
        console.log(selectedImages);
        console.log(poster);
        console.log(backdrop);
  
        validateServerAccess(server, (serverToken) => {
          fetch(`${server.server_ip}/api/${type}/${id}/setImages?poster=${poster}&backdrop=${backdrop}&token=${serverToken}`)
          .then(r => r.json())
          .then(json => {
            if (json.success) {
              Router.reload(window.location.pathname);
            }
          });
        });
      }
  
      const selectImage = (imageID, type) => {
        let selected = [];
  
        // Add the other type that we did not select to the new selected list
        for (let image of selectedImages) {
          if (image.type !== type) {
            selected.push(image);
          } else {
            // Remove the active class
            document.body.querySelector(`img[data-imageid="${image.id}"]`).classList.remove(Styles.activeImage);
          }
        }
  
        document.body.querySelector(`img[data-imageid="${imageID}"]`).classList.add(Styles.activeImage);
  
        selected.push({
          id: imageID,
          type: type
        })
        selectedImages = [];
        for (let image of selected) {
          selectedImages.push(image);
        }
      }

    const getImages = () => {
      validateServerAccess(server, (serverToken) => {
        fetch(`${server.server_ip}/api/${type}/${id}/getImages?token=${serverToken}`)
        .then(r => r.json())
        .then(images => {
          let backdropElements = [];
          let posterElements = [];
          let count = 0;
          selectedImages = [];
          for (let image of images) {
            let img = `https://image.tmdb.org/t/p/w500/${image.path}`
            if (image.active) {
              selectedImages.push({
                id: image.id,
                type: image.type
              });
            }
            let active = image.active;
            if (image.type === 'BACKDROP') {
              backdropElements.push(
                <Col key={count} className={Styles.metadataSearchRow}>
                  <Image style={{width: "500px"}} src={img} alt="" className={'imageSearchImg', active ? Styles.activeImage : ''} onClick={() => selectImage(image.id, image.type)} data-imageid={image.id}/>
                </Col>
              );
            } else {
              posterElements.push(
                <Col key={count} className={Styles.metadataSearchRow}>
                  <Image style={{width: "200px"}} src={img} alt="" className={'imageSearchImg', active ? Styles.activeImage : ''} onClick={() => selectImage(image.id, image.type)} data-imageid={image.id}/>
                </Col>
              );
            }
            count++;
          }
          setMoviePosterResult(posterElements);
          setMovieBackdropResult(backdropElements);
          setImageBox(true);
        });
      });
    }

    return (
        <>
            <div style={{marginLeft: "27px"}} className={Styles.actionButton}>
                <div style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/search.svg')`}} className={Styles.playButton} onClick={() => getImages()}></div>
                <p style={{marginTop: "5px", fontSize: '14px'}}>Choose image</p>
            </div>

            {imageBox &&
            <div className="metadataBox">

                <Container>
                    <Button style={{display: 'table', margin: '0 auto'}} variant="primary" type="submit" onClick={() => updateImages()}>
                        Save
                    </Button>
                <h3>Backdrops</h3>
                <Row>
                    {movieBackdropResult}
                </Row>
                <h3>Posters</h3>
                <Row>
                    {moviePosterResult}
                </Row>
                </Container>
                
            </div>
            }
        </>
    )
}

export default function Home(props) {
  const server = props.server;
  const router = useRouter();
  const { id } = router.query;
  const serverToken = props.serverToken;
  const [metadata, setMetadata] = useState({});
  const [watched, setWatched] = useState(false);
  const [inWatchList, setInWatchList] = useState(false);
  const [actors, setActors] = useState([]);
  const [recommended, setRecommended] = useState([]);

  const [viewTrailer, setViewTrailer] = useState(false);
  const [trailer, setTrailer] = useState(false);

  const [loaded, setLoaded] = useState(false)
  const [recommendedLoaded, setRecommendedLoaded] = useState(false);

  const videoRef = useRef();
  const windowSize = useWindowSize();



  // Used for manual metadata search
  const [metadataBox, setMetadataBox] = useState(false);
  const [metadataSearchResult, setMetadataSearchResult] = useState([]);
  const metadataSearch = useRef(null);



  // This has it's own useEffect because if it doesn't videojs doesn't work (????)
  useEffect(() => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/getRecommended?token=${serverToken}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
      })
      .then(r => r.json())
      .then(result => {
        if (result.success) {
          console.log(result);
          result.movies.forEach(movie => {
            for (let image of movie.images) {
                if (image.active) {
                    if (image.type === 'BACKDROP') {
                        if (image.path === 'no_image') {
                            movie.backdrop = null;
                        } else {
                            movie.backdrop = image.path;
                        }
                    } else {
                        if (image.path === 'no_image') {
                            movie.backdrop = null;
                        } else {
                            movie.poster = image.path;
                        }
                    }

                    if (movie.backdrop != null && movie.poster != null) {
                        break;
                    }
                }
            }
        });
          setRecommended(result.movies);
        }
      })
      .then(() => {
        setRecommendedLoaded(true);
      });



      fetch(`${server.server_ip}/api/movies/${id}?token=${serverToken}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
      })
      .then(r => r.json())
      .then(result => {
        let meta = result.result;
        console.log(meta)
        let finish_at = new Date(new Date().getTime() + meta.runtime * 60000);
        meta.finish_at = finish_at.getHours() + ":" + finish_at.getMinutes();
        for (let image of meta.images) {
          if (image.active && image.type === 'BACKDROP') {
            meta.backdrop = image.path;
          }
          if (image.active && image.type === 'POSTER') {
            meta.poster = image.path;
          }
        }
        
        let new_added_date = new Date(parseInt(meta.added_date));
        let added_year = new_added_date.getFullYear();
        let added_month = new_added_date.getMonth() + 1;
        if(added_month < 10) {
          added_month = "0" + added_month.toString();
        }
        let adde_date = new_added_date.getDate();
        if(adde_date < 10) {
          adde_date = "0" + adde_date.toString();
        }
        meta.added_date = `${added_year}-${added_month}-${adde_date}`
  
        let currentTime = "";
        let hours = Math.floor(meta.currentTime / 60 / 60)
        let minutes = Math.floor((meta.currentTime / 60) % 60)
        let seconds = Math.floor(meta.currentTime % 60);
        if (hours >= 1) {
          currentTime += `${hours}:`
        }
        if (minutes < 10) {
          minutes = `0${minutes}`;
        }
        if (seconds < 10) {
          seconds = `0${seconds}`
        }
        currentTime += `${minutes}:${seconds}`
        meta.currentTimeSeconds = meta.currentTime;
        meta.currentTime = currentTime;
        console.log(videoRef)
        videoRef.current.setTitle(meta.title);
  
        setInWatchList(meta.inwatchlist);
        setWatched(meta.watched);
        setMetadata(meta);
        setTrailer(meta.trailer);
        meta.actors = meta.actors.sort((a, b) => {
          return parseFloat(a.order) - parseFloat(b.order);
        });
        setActors(meta.actors);

        if (router.query.autoPlay) {
          videoRef.current.show();
        }
      }).then(() => {
        setLoaded(true)
      });
    });
  }, []);

  const markAsWatched = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/setWatched?watched=true&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setWatched(true);
        } else {
          console.log("ERROR MARKING AS WATCHED: " + status);
        }
      }).catch(err => {
        console.log(err);
      });
    });

  }

  const markAsNotWatched = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/setWatched?watched=false&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setWatched(false);
        } else {
          console.log("ERROR MARKING AS WATCHED: " + status);
        }
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  const addToWatchList = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/addToWatchList?add=true&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setInWatchList(true);
        } else {
          console.log("ERROR adding to watchlist: " + status);
        }
      })      .catch(err => {
        console.log(err);
      });
    });
  }

  const removeFromWatchList = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/addToWatchList?add=false&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setInWatchList(false);
        } else {
          console.log("ERROR removing from watchlist: " + status);
        }
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  const searchMetadata = (event) => {
    let search = metadataSearch.current.value;
    if(search != ""){
      validateServerAccess(server, (serverToken) => {
        fetch(`${server.server_ip}/api/movies/searchMetadata?search=${search}&token=${serverToken}`)
        .then(r => r.json())
        .then(result => {
          console.log(result);
          let metadataElements = [];
          for (let movie of result) {
            const img = movie.poster_path !== null ? `https://image.tmdb.org/t/p/w500/${movie.poster_path}` : 'https://via.placeholder.com/500x750' 
            metadataElements.push(
              <ListGroup.Item key={movie.id} className={Styles.metadataSearchRow} data-metadataid={movie.id}>
                <Image src={img} alt="" />
                <div>
                  <h5>{movie.title}</h5>
                  <p>{movie.overview}</p>
                </div>
                <Button onClick={() => updateMetadata(movie.id)}>Välj</Button>
              </ListGroup.Item>
            );        
          }
          setMetadataSearchResult(metadataElements);
        });
      });
    }
   
    event.preventDefault();
  }

  const updateMetadata = (metadataID) => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/updateMetadata?metadataID=${metadataID}&token=${serverToken}`)
      .then(r => r.json())
      .then(json => {
        if (json.success) {
          Router.reload(window.location.pathname);
        }
      });
    });
  }


  const getActors = () => {
    let elements = [];
    for (const actor of actors) {
      elements.push(
        <Actor key={actor.order} name={actor.name} characterName={actor.character} image={actor.image} />
      )
    }
    return elements;
  }

  const getRecommended = () => {
    let elements = [];
    for (const movie of recommended) {
      let img = movie.backdrop !== null ? `https://image.tmdb.org/t/p/w500/${movie.backdrop}` : 'https://via.placeholder.com/2000x1000' 
      elements.push(
          <MovieBackdrop markAsDoneButton id={movie.id} time={0} runtime={0} title={movie.title} overview={movie.overview} backdrop={img} onClick={(id) => selectMovie(movie.id)}></MovieBackdrop>
      );
    }
    return elements;
  }

  const selectMovie = (id) => {
    Router.push(`/server/${server.server_id}/movies/video/${id}`);
    Router.events.on("routeChangeComplete", () => {
      Router.reload(window.location.pathname);


    });
  }
  
  const scrollLeft = (id) => {
    document.getElementById(id).scrollLeft -= (window.innerWidth)*0.8;
    window.scrollTo(window.scrollX, window.scrollY - 1);
    window.scrollTo(window.scrollX, window.scrollY + 1);
  }
  const scrollRight = (id) => {
      document.getElementById(id).scrollLeft += (window.innerWidth)*0.8;
      window.scrollTo(window.scrollX, window.scrollY - 1);
      window.scrollTo(window.scrollX, window.scrollY + 1);
  }
  return (
    <>
    <HlsPlayer
      ref={videoRef}
      server={server}
      id={id}
      type={"movie"}>

    </HlsPlayer>
   
    {(!loaded || !recommendedLoaded) &&
    <>
      <Head>
        <title>Dose</title>
      </Head>
      <div className={Styles.loadingioSpinnerEclipse}>
          <div className={Styles.ldio}>
              <div></div>
          </div>
      </div>
    </>
    }
    {loaded && recommendedLoaded && 
    <>


  <Head>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet" />
      <title>{metadata.title + " (" + metadata.release_date.split('-')[0] + ")"}</title>
      <meta name="title" content={metadata.title + " (" + metadata.release_date + ")"} />
      <meta name="description" content={metadata.overview} />

      <meta property="og:type" content="website" />
      <meta property="og:title" content={metadata.title + " (" + metadata.release_date.split('-')[0] + ")"} />
      <meta property="og:description" content={metadata.overview} />
      <meta property="og:image" content={"https://image.tmdb.org/t/p/original" + metadata.backdrop} />

      <meta property="twitter:card" content="summary_large_image" />
      <meta property="twitter:title" content={metadata.title + " (" + metadata.release_date.split('-')[0] + ")"} />
      <meta property="twitter:description" content={metadata.overview} />
      <meta property="twitter:image" content={"https://image.tmdb.org/t/p/original" + metadata.backdrop} />
    </Head>

    {trailer !== false && viewTrailer &&
    <VideoTrailer onClose={() => setViewTrailer(false)} videoPath={trailer} />
    }


    <div id="container">
    <div style={{backgroundImage: `url('https://image.tmdb.org/t/p/original${metadata.backdrop}')`}} className={Styles.background}></div>
    <div className="backIcon" onClick={() => {
      Router.back();
      Router.events.on("routeChangeComplete", () => {
        Router.reload(window.location.pathname);
      });
      }}></div>


    {metadataBox &&
      <div className="metadataBox">
        <Form onSubmit={searchMetadata}>
          <Form.Group controlId="formSearch">
            <Form.Label>Update metadata for {metadata.path}</Form.Label>
            <Form.Control ref={metadataSearch} type="text" placeholder="Search for new metadata..." />
          </Form.Group>
          <Button variant="primary" type="submit">
            Search
          </Button>
        </Form>
        <div style={{clear: 'both'}}></div>

        <ListGroup id="metadataSearchResult">
          {metadataSearchResult}
        </ListGroup>
      </div>
    }


    <div className={Styles.top}>
      <div className={Styles.poster} style={{backgroundImage: `url('https://image.tmdb.org/t/p/original${metadata.poster}')`}} />
      <div className={Styles.description}>
        <h1>{metadata.title}</h1>
        <div className={Styles.metadata}>
          <p className={Styles.releaseDate}>{metadata.release_date}</p>
          <p className={Styles.runtime}>{Math.floor(metadata.runtime / 60) + "h " + metadata.runtime%60+"m"}</p>
          <p className={Styles.endsat}>Ends At {metadata.finish_at}</p>
          <p className={Styles.addedDate}>Added {metadata.added_date}</p>
        </div>
        <div className={Styles.overview}>
            <p>{metadata.overview}</p>
        </div>
        <div className={Styles.actions}>
          {metadata.currentTimeSeconds > 0 &&
          <div style={{marginRight: "15px"}} className={Styles.actionButton}>
            <div className={Styles.playButton} onClick={() => videoRef.current.show(metadata.currentTimeSeconds)}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Resume from {metadata.currentTime}</p>
          </div>
          }
          <div style={{marginRight: "15px"}} className={Styles.actionButton}>
            <div className={Styles.playButton} onClick={() => videoRef.current.show()}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Play from start</p>
          </div>
          <div className={`${Styles.actionButton} ${Styles.buttonHiddenForMobile}`}>
            <div className={Styles.playButton} onClick={() => setViewTrailer(true)}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Show trailer</p>
          </div>
          {watched &&
              <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="markAsWatched" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/cross.svg')`}} className={Styles.playButton} onClick={() => markAsNotWatched()}></div>
              <p id="markAsWatchedText" style={{marginTop: "5px", fontSize: '14px'}}>Mark as watched</p>
              </div>
          }
          {!watched &&
            <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="markAsWatched" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/eye.svg')`}} className={Styles.playButton} onClick={() => markAsWatched()}></div>
              <p id="markAsWatchedText" style={{marginTop: "5px", fontSize: '14px'}}>Unmark as watched</p>
            </div>
          }
          {inWatchList &&
              <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="inWatchList" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/cross.svg')`}} className={Styles.playButton} onClick={() => removeFromWatchList()}></div>
              <p id="inWatchListText" style={{marginTop: "5px", fontSize: '14px'}}>Remove from watchlist</p>
              </div>
          }
          {!inWatchList &&
            <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="inWatchList" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/eye.svg')`}} className={Styles.playButton} onClick={() => addToWatchList()}></div>
              <p id="inWatchListText" style={{marginTop: "5px", fontSize: '14px'}}>Add to watchlist</p>
            </div>
          }
          <div className={`${Styles.actionButton} ${Styles.buttonHiddenForMobile}`}>
            <div style={{marginLeft: "15px", backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/search.svg')`}} className={Styles.playButton} onClick={() => setMetadataBox(true)}></div>
            <p style={{marginLeft: "15px", marginTop: "5px", fontSize: '14px'}}>Update metadata</p>
          </div>

          <ChangeImages  id={id} server={server} serverToken={serverToken} type="movies"></ChangeImages>
          <div style={{clear: 'both'}}></div>
        </div>
      </div>
    </div>
    <div className={Styles.bottom}>
      <h1>Actors</h1>
      <div className={Styles.actors}>
        <div id="actors" className={Styles.actorBox}>
          {getActors()}
        </div>
        {actors.length * 200 > windowSize.width &&
                                <>
                                    <div className={Styles.scrollButton} onClick={() => scrollLeft('actors')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/left.svg`} width="70" height="70" />
                                    </div>
                                    <div className={Styles.scrollButton} style={{right: '0'}} onClick={() => scrollRight('actors')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/right.svg`} width="70" height="70" />
                                    </div>
                                </>
                            }
      </div>

    <h1>Recommended</h1>
    {recommended.length > 0 &&
                    <div style={{position: 'relative'}}>
                        <div className={Styles.movieRow}>
                            <div id="recommended" className={Styles.scrollable}>
                                {getRecommended()}
                            </div>
                            {recommended.length * 480 > windowSize.width &&
                                <div>
                                    <div className={Styles.scrollButton} onClick={() => scrollLeft('recommended')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/left.svg`} width="70" height="70" />
                                    </div>
                                    <div className={Styles.scrollButton} style={{right: '0'}} onClick={() => scrollRight('recommended')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/right.svg`} width="70" height="70" />
                                    </div>
                                </div>
                            }
                        </div> 
                    <hr className={Styles.divider}></hr>
                    </div> 
                }
    </div>
    </div>
    </>
    }
    </>
  )
}

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>
    </>
  );
}

SwapDetails = (props) => {
  const [isOpen, setOpen] = useState(false);
  const [isConvert, setConvert] = useState(false);

  const swapRoute = useMemo(() => {
    if (props.routePath?.length > 2) {
      return props.routePath.map((tokenName) => tokens.find((token) => token.name === tokenName));
    }

    return null;
  }, [props.routePath]);

  if (!props.firstTokenAmount && !swapRoute) {
    return null;
  }
  const ratesConvert = (e) => {
    e.stopPropagation();
    setConvert(!isConvert);
  };

  return (
    <>
      <div
        className={clsx(
          'swap-detail-wrapper',
          !isOpen && 'closedbg',
          isOpen && 'open-swap-detail-wrapper-first',
        )}
        onClick={() => setOpen(!isOpen)}
        id="topdiv"
      >
        <div className="space-between justify-content-between" style={{ cursor: 'pointer' }}>
          <div className="flex">
            <p className="price-formula whitespace-prewrap  flex flex-row">
              1{' '}
              {isConvert
                ? props.tokenOut.name === 'tez'
                  ? 'TEZ'
                  : props.tokenOut.name === 'ctez'
                  ? 'CTEZ'
                  : props.tokenOut.name
                : props.tokenIn.name === 'tez'
                ? 'TEZ'
                : props.tokenIn.name === 'ctez'
                ? 'CTEZ'
                : props.tokenIn.name}{' '}
              ={' '}
              <OverlayTrigger
                placement="top"
                overlay={
                  <Tooltip id="button-tooltip" {...props}>
                    {props.isStableSwap
                      ? fromExponential(Number(props.computedOutDetails.data.exchangeRate))
                      : fromExponential(
                          Number(props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn),
                        )}
                  </Tooltip>
                }
              >
                <div>
                  {props.isStableSwap
                    ? isConvert
                      ? Number(1 / props.computedOutDetails.data.exchangeRate).toFixed(3)
                      : Number(props.computedOutDetails.data.exchangeRate).toFixed(3)
                    : props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn
                    ? isConvert
                      ? Number(
                          1 / props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn,
                        ).toFixed(3)
                      : Number(props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn).toFixed(3)
                    : 0}{' '}
                  {isConvert
                    ? props.tokenIn.name === 'tez'
                      ? 'TEZ'
                      : props.tokenIn.name === 'ctez'
                      ? 'CTEZ'
                      : props.tokenIn.name
                    : props.tokenOut.name === 'tez'
                    ? 'TEZ'
                    : props.tokenOut.name === 'ctez'
                    ? 'CTEZ'
                    : props.tokenOut.name}
                </div>
              </OverlayTrigger>
              <span
                className="material-icons-round convert ml-1"
                onClick={(e) => ratesConvert(e)}
                style={{ cursor: 'pointer' }}
              >
                cached
              </span>
            </p>
          </div>
          <span
            className={`material-icons-round buttonanim button--trigger open ${
              props.firstTokenAmount > 0 && isOpen ? 'dropdown-open' : 'dropdown-close'
            }`}
            style={{ cursor: 'pointer' }}
          >
            expand_more
          </span>
          {/* {props.firstTokenAmount > 0 && isOpen ? (
            <span
              className="material-icons-round buttonanim button--trigger-todisappear flex open"
              style={{ cursor: 'pointer' }}
            >
              keyboard_arrow_up
            </span>
          ) : (
            <span
              className="material-icons-round buttonanim button--trigger flex open"
              style={{ cursor: 'pointer' }}
            >
              keyboard_arrow_down
            </span>
          )} */}
        </div>
      </div>
      {props.firstTokenAmount > 0}
      {isOpen && (
        <div className={clsx('swap-detail-wrapper-open', 'buttonanim button--disapear')}>
          <div className="scale-in-animation">
            {/* {isOpen ? ( */}
            <>
              <div className="flex flex-row  align-items-center swap-sub-details">
                {' '}
                <p className="swap-detail-amt-details">Minimum received </p>
                <OverlayTrigger
                  placement="top"
                  key="top"
                  overlay={
                    <Tooltip id="button-tooltip-swap-details-minimum-received" {...props}>
                      Your transaction will revert if there is a large, unfavorable price movement
                      before it is confirmed.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p className="swap-detail-amt-details-value ml-auto">
                  {props.computedOutDetails.data.finalMinimumOut
                    ? props.computedOutDetails.data.finalMinimumOut
                    : '0.00'}{' '}
                  {props.tokenOut.name === 'tez'
                    ? 'TEZ'
                    : props.tokenOut.name === 'ctez'
                    ? 'CTEZ'
                    : props.tokenOut.name}
                </p>
              </div>
              <div className="flex flex-row align-items-center swap-sub-details">
                <p className="swap-detail-amt-details">Price Impact </p>
                <OverlayTrigger
                  key="top"
                  placement="top"
                  overlay={
                    <Tooltip id="button-tooltip-swap-details" {...props}>
                      The difference between the market price and estimated price due to trade size.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p
                  className={clsx(
                    'swap-detail-amt-details-value ml-auto',
                    props.computedOutDetails.data?.priceImpact > 3 && 'error-text-color',
                  )}
                >
                  {props.computedOutDetails.data.priceImpact
                    ? props.computedOutDetails.data.priceImpact
                    : '0.00'}{' '}
                  %
                </p>
              </div>
              <div className="flex flex-row align-items-center  swap-sub-details-padding">
                <p className="swap-detail-amt-details">Fee </p>
                <OverlayTrigger
                  placement="top"
                  key="top"
                  overlay={
                    <Tooltip id="button-tooltip-swap-details" {...props}>
                      Fees are 0.35% for each volatile swap and 0.10% for each stable swap.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p className="swap-detail-amt-details-value ml-auto">
                  {props.isStableSwap ? '0.10' : props.computedOutDetails.data.maxfee} %
                </p>
              </div>
              {props.isConfirmSwap && !props.isStableSwap && (
                <div className="flex flex-row align-items-center">
                  <p className="swap-detail-amt-details">xPlenty Fee </p>
                  <OverlayTrigger
                    placement="top"
                    key="top"
                    overlay={
                      <Tooltip
                        id="button-tooltip-swap-details"
                        arrowProps={{ styles: { display: 'none' } }}
                      >
                        A portion of each trade (0.09%) goes to xPLENTY holders as a protocol
                        incentive.
                      </Tooltip>
                    }
                  >
                    <span
                      style={{ cursor: 'pointer' }}
                      className="material-icons-round ml-1 swap-detail-amt-details"
                    >
                      help_outline
                    </span>
                  </OverlayTrigger>
                  <p className="swap-detail-amt-details-value ml-auto">
                    {props.firstTokenAmount / 1000}{' '}
                    {props.tokenIn.name === 'tez'
                      ? 'TEZ'
                      : props.tokenIn.name === 'ctez'
                      ? 'CTEZ'
                      : props.tokenIn.name}
                  </p>
                </div>
              )}
              {props.isConfirmSwap ? (
                <div className="flex flex-row align-items-center">
                  <p className="swap-detail-amt-details">Slippage tolerance </p>
                  <OverlayTrigger
                    placement="top"
                    key="top"
                    overlay={
                      <Tooltip
                        id="button-tooltip-swap-details"
                        arrowProps={{ styles: { display: 'none' } }}
                      >
                        Change the slippage tolerance in the transaction settings.
                      </Tooltip>
                    }
                  >
                    <span
                      style={{ cursor: 'pointer' }}
                      className="material-icons-round ml-1 swap-detail-amt-details"
                    >
                      help_outline
                    </span>
                  </OverlayTrigger>
                  <p className="swap-detail-amt-details ml-auto">{props.slippage} %</p>
                </div>
              ) : null}
            </>
            {/* ) : null} */}
            {props.firstTokenAmount && swapRoute && <hr className="swap-details-divider" />}
            {props.firstTokenAmount && swapRoute && (
              <>
                <div className="flex flex-row">
                  <p className="swap-detail-amt-details route-heading">Route </p>
                  <OverlayTrigger
                    placement="top"
                    key="top"
                    overlay={
                      <Tooltip id="button-tooltip-swap-details-router" {...props}>
                        Routing through these tokens results in the best price for your trade.
                        <div className="flex flex-row">
                          {props.theme === 'light' ? <Router /> : <RouterDark />}
                          {props.theme === 'light' ? (
                            <Bracket className="router-bracket" />
                          ) : (
                            <BracketDark className="router-bracket" />
                          )}
                          <MdChevronRight className={clsx('router-arrow', 'ml-1')} fontSize={20} />
                          <span className="router-text">Stable pair</span>
                        </div>
                      </Tooltip>
                    }
                  >
                    <span
                      style={{ cursor: 'pointer' }}
                      className="material-icons-round ml-1 swap-detail-amt-details"
                    >
                      help_outline
                    </span>
                  </OverlayTrigger>
                </div>

                <div className="swap-detail-route-container mt-3">
                  {swapRoute.map((token, idx) => (
                    <div key={token.name} className="d-flex my-2 align-self-center">
                      <div
                        className={clsx(
                          idx !== 0 &&
                            props.stableList[idx - 1] === true &&
                            'outer-border-stableswap d-flex',
                        )}
                      >
                        {idx !== 0 && props.stableList[idx - 1] === true && (
                          <div>
                            <span className="stableswap-img">
                              {props.theme === 'light' ? <Stableswap /> : <StableswapDark />}
                            </span>
                          </div>
                        )}
                        <div
                          className={clsx(
                            idx !== 0 && props.stableList[idx - 1] === true
                              ? 'stablepair-outline'
                              : 'route-Outline',
                          )}
                        >
                          <Image src={token.image} height={18} width={18} alt={''} />
                          <span className="ml-1 my-auto token-name-route">
                            {token.name === 'tez'
                              ? 'TEZ'
                              : token.name === 'ctez'
                              ? 'CTEZ'
                              : token.name}
                          </span>
                        </div>
                      </div>
                      {swapRoute[idx + 1] && (
                        <MdChevronRight
                          className={clsx(
                            idx !== 0 && props.stableList[idx - 1] === true
                              ? 'route-arrow-stable'
                              : 'route-arrow',
                          )}
                          fontSize={20}
                        />
                      )}
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </>
  );
}

SwapDetailsConfirmSwap = (props) => {
  const [isOpen, setOpen] = useState(false);

  const swapRoute = useMemo(() => {
    if (props.routePath?.length > 2) {
      return props.routePath.map((tokenName) => tokens.find((token) => token.name === tokenName));
    }

    return null;
  }, [props.routePath]);

  if (!props.firstTokenAmount && !swapRoute) {
    return null;
  }

  return (
    <div className={clsx('swap-detail-wrapper-cs', isOpen ? 'bg-themed-light' : 'closedbg')}>
      <div
        className="space-between-confirmswap"
        onClick={() => setOpen(!isOpen)}
        style={{ cursor: 'pointer' }}
      >
        <div className="flex">
          <p className="price-formula-cs whitespace-prewrap  flex flex-row">
            1 {props.tokenIn.name} ={' '}
            <OverlayTrigger
              placement="auto"
              overlay={
                <Tooltip id="swap-token-out-tooltip" {...props}>
                  {props.isStableSwap
                    ? Number(props.computedOutDetails.data.exchangeRate).toFixed(6)
                    : fromExponential(props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn)}
                </Tooltip>
              }
            >
              <div>
                {props.isStableSwap
                  ? Number(props.computedOutDetails.data.exchangeRate).toFixed(3)
                  : props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn
                  ? Number(props.routeData.bestRouteUntilNoInput.tokenOutPerTokenIn).toFixed(3)
                  : 0}{' '}
                {props.tokenOut.name === 'tez'
                  ? 'TEZ'
                  : props.tokenOut.name === 'ctez'
                  ? 'CTEZ'
                  : props.tokenOut.name}
              </div>
            </OverlayTrigger>
          </p>
        </div>
        <span
          className={`material-icons-round buttonanim button--trigger open-confirmswap-details ${
            isOpen ? 'dropdown-open' : 'dropdown-close'
          }`}
        >
          expand_more
        </span>
        {/* {isOpen ? (
          <span className="material-icons-round flex buttonanim button--trigger-todisappear  open-confirmswap-details">
            keyboard_arrow_up
          </span>
        ) : (
          <span className="material-icons-round buttonanim button--trigger flex open-confirmswap-details">
            keyboard_arrow_down
          </span>
        )} */}
      </div>
      <div className="buttonanim button--disapear-cs">
        {props.firstTokenAmount &&
          (isOpen ? (
            <div className="scale-in-animation-confirm-swap">
              <div className="flex flex-row mt-3 align-items-center">
                <p className="swap-detail-amt-details-cs">Minimum received </p>
                <OverlayTrigger
                  key="top"
                  placement="top"
                  overlay={
                    <Tooltip
                      id="button-tooltip-swap-details-minimum-received"
                      arrowProps={{ styles: { display: 'none' } }}
                    >
                      Your transaction will revert if there is a large, unfavorable price movement
                      before it is confirmed.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details-cs"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p className="swap-detail-amt-details-cs ml-auto">
                  {props.computedOutDetails.data.finalMinimumOut
                    ? props.computedOutDetails.data.finalMinimumOut
                    : '0.00'}{' '}
                  {props.tokenOut.name === 'tez'
                    ? 'TEZ'
                    : props.tokenOut.name === 'ctez'
                    ? 'CTEZ'
                    : props.tokenOut.name}
                </p>
              </div>
              <div className="flex flex-row align-items-center">
                <p className="swap-detail-amt-details-cs">Price Impact </p>
                <OverlayTrigger
                  key="top"
                  placement="top"
                  overlay={
                    <Tooltip
                      id="button-tooltip-swap-details"
                      arrowProps={{ styles: { display: 'none' } }}
                    >
                      The difference between the market price and estimated price due to trade size.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details-cs"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p className="swap-detail-amt-details-cs ml-auto">
                  {props.computedOutDetails.data.priceImpact
                    ? props.computedOutDetails.data.priceImpact
                    : '0.00'}{' '}
                  %
                </p>
              </div>
              <div className="flex flex-row align-items-center">
                <p className="swap-detail-amt-details-cs">Fee </p>
                <OverlayTrigger
                  key="top"
                  placement="top"
                  overlay={
                    <Tooltip
                      id="button-tooltip-swap-details"
                      arrowProps={{ styles: { display: 'none' } }}
                    >
                      Fees are 0.35% for each volatile swap and 0.10% for each stable swap.
                    </Tooltip>
                  }
                >
                  <span
                    style={{ cursor: 'pointer' }}
                    className="material-icons-round ml-1 swap-detail-amt-details-cs"
                  >
                    help_outline
                  </span>
                </OverlayTrigger>
                <p className="swap-detail-amt-details-cs ml-auto">
                  {props.isStableSwap ? '0.10' : props.computedOutDetails.data.maxfee} %
                </p>
              </div>
              {/* {props.isConfirmSwap && !props.isStableSwap && (
                <div className="flex flex-row align-items-center">
                  <p className="swap-detail-amt-details-cs">xPlenty Fee </p>
                  <OverlayTrigger
                    key="top"
                    placement="top"
                    overlay={
                      <Tooltip
                        id="button-tooltip-swap-details"
                        arrowProps={{ styles: { display: 'none' } }}
                      >
                        A portion of each trade (0.09%) goes to xPLENTY holders as a protocol
                        incentive.
                      </Tooltip>
                    }
                  >
                    <span
                      style={{ cursor: 'pointer' }}
                      className="material-icons-round ml-1 swap-detail-amt-details-cs"
                    >
                      help_outline
                    </span>
                  </OverlayTrigger>
                  <p className="swap-detail-amt-details-cs ml-auto">
                    {props.firstTokenAmount / 1000} {props.tokenIn.name}
                  </p>
                </div>
              )} */}
              {props.isConfirmSwap ? (
                <div className="flex flex-row align-items-center">
                  <p className="swap-detail-amt-details-cs">Slippage tolerance </p>
                  <OverlayTrigger
                    key="top"
                    placement="top"
                    overlay={
                      <Tooltip
                        id="button-tooltip-swap-details"
                        arrowProps={{ styles: { display: 'none' } }}
                      >
                        Change the slippage tolerance in the transaction settings.
                      </Tooltip>
                    }
                  >
                    <span
                      style={{ cursor: 'pointer' }}
                      className="material-icons-round ml-1 swap-detail-amt-details-cs"
                    >
                      help_outline
                    </span>
                  </OverlayTrigger>
                  <p className="swap-detail-amt-details-cs ml-auto">{props.slippage} %</p>
                </div>
              ) : null}
            </div>
          ) : null)}
        {props.firstTokenAmount && swapRoute && <hr />}
        {swapRoute && (
          <>
            <div className="flex flex-row">
              <p className="swap-detail-amt-details-cs">Route </p>
              <OverlayTrigger
                key="top"
                placement="top"
                overlay={
                  <Tooltip
                    id="button-tooltip-swap-details"
                    arrowProps={{ styles: { display: 'none' } }}
                  >
                    Routing through these tokens results in the best price for your trade
                  </Tooltip>
                }
              >
                <span
                  style={{ cursor: 'pointer' }}
                  className="material-icons-round ml-1 swap-detail-amt-details-cs"
                >
                  help_outline
                </span>
              </OverlayTrigger>
            </div>

            <div className="swap-detail-route-container mt-3">
              {swapRoute.map((token, idx) => (
                <div key={token.name} className="d-flex my-2">
                  <Image src={token.image} height={20} width={20} alt={''} />
                  <span className="ml-1 my-auto">{token.name}</span>
                  {swapRoute[idx + 1] && <MdChevronRight className="" fontSize={20} />}
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}