rebass#Box TypeScript Examples

PricingCard = ({
  title,
  description,
  cta,
  pricing,
  features,
}: {
  title: string;
  description: string;
  cta: React.ReactElement;
  pricing: React.ReactElement;
  features: React.ReactElement;
}) => {
  return (
    <div className="flex-1 m-2 p-4 border rounded shadow-md dark:border-gray-500">
      <H3>{title}</H3>
      <Paragraph style={{minHeight: 44}}>{description}</Paragraph>
      <Box my={3}>{cta}</Box>
      <Box style={{fontSize: 16}}>{pricing}</Box>
      <hr className="border-t border-gray-100 my-4" />
      {features}
    </div>
  );
}

BlogPost = ({post}: {post: any}) => {
  const {title, date, href, snippet, author = {}} = post;

  return (
    <Box p={4} className="border-b">
      <p className="text-gray-500 text-xs mb-3 uppercase">{date}</p>
      <Link href={href}>
        <a>
          <H2>{title}</H2>
        </a>
      </Link>

      <p className="text-base">{snippet}</p>

      <Flex my={4} sx={{justifyContent: 'space-between', alignItems: 'center'}}>
        <Flex sx={{alignItems: 'center'}}>
          <Box
            className="items-center justify-center rounded-full"
            style={{
              height: 40,
              width: 40,
              backgroundPosition: 'center',
              backgroundSize: 'cover',
              backgroundImage: `url(${author.avatar})`,
            }}
          />

          <Box mx={3}>
            <p className="text-sm">{author.name}</p>
            <p className="text-xs text-gray-400">{author.position}</p>
          </Box>
        </Flex>

        {/* TODO: use proper link */}
        <Link href={href}>
          <a className="hover:bg-gray-50 hover:text-blue-500 opacity-80 hover:opacity-100 font-medium py-2 px-4 rounded inline-flex items-center transition-all">
            <span>Read more</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-4 w-4 ml-1 transform translate-y-px"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 5l7 7m0 0l-7 7m7-7H3"
              />
            </svg>
          </a>
        </Link>
      </Flex>
    </Box>
  );
}

FAQ = () => {
  return (
    <Flex flexDirection="column" justify-content="center" alignItems="center">
      <Box mb={4}>
        <H2>Why use Papercups?</H2>
      </Box>

      <Flex mx={-4} flexDirection={['column', 'row']}>
        <FadeIn delay={0}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Open source</H4>
            <Paragraph>
              We've built Papercups open source and in the public since day one.
              Our source code is available and accessible on GitHub so anyone
              can read it and verify what we do with your data.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={100}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Cookie free</H4>
            <Paragraph>
              Papercups is built with privacy first. We don't use any cookies so
              you don't need the cookies consent banners in your chat widget.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={200}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Reply from Slack</H4>
            <Paragraph>
              Our Slack integration lets you reply directly from Slack in a
              single channel. Other integrations spam your Slack with links to
              their website or open a new channel everytime.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={300}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>10 minute installation</H4>
            <Paragraph>
              Papercups is made by and for developers. We make sure that the
              installation process is frictionless for your development team so
              they can set it up quickly and go back to building their features.
            </Paragraph>
          </Box>
        </FadeIn>
      </Flex>
    </Flex>
  );
}

ConvertModal: React.FC<ConvertModalProps> = ({
  onConfirm,
  onDismiss = () => {},
  pair = '',
  token0 = '',
  token1 = ''
}) => {
  const [pendingTx, setPendingTx] = useState(false)
  return (
    <Modal>
      <ModalTitle
        text={
          <>
            {'Convert This Pair: '}
            <StyledPairText>{pair}</StyledPairText>
          </>
        }
      />
      <Box mb={[3, 4]}>
        <StyledNote>
          <ul>
            <li>{'This “CONVERT” button will trigger reward distribution for the selected pair.'}</li>
            <li>{'Anyone can trigger distribution at any time by selecting the “CONVERT” buttons.'}</li>
            <li>{'Users need to pay the gas fee for the distribution if they choose to do it themselves.'}</li>
          </ul>
        </StyledNote>
      </Box>
      <Box px={4}>
        <StyledNote>{`Are you sure you want to convert ${pair}?`}</StyledNote>
      </Box>
      <ModalActions>
        <Button text="Cancel" variant="secondary" onClick={onDismiss} />
        <Button
          disabled={pendingTx}
          text={pendingTx ? 'Pending Confirmation' : 'Confirm'}
          onClick={async () => {
            setPendingTx(true)
            await onConfirm(token0, token1)
            setPendingTx(false)
            onDismiss()
          }}
        />
      </ModalActions>
    </Modal>
  )
}

StyledPoolCard = styled(Box)`
  border-radius: 15px;
  background-color: #313535;
`

PoolCard: React.FC<PoolCardProps> = ({ pool }) => {
  const { onConvert } = useConvert()
  const [onPresentConvert] = useModal(
    <ConvertModal
      onConfirm={onConvert}
      pair={`${pool.token0Symbol} - ${pool.token1Symbol}`}
      token0={pool.token0Addresses}
      token1={pool.token1Addresses}
    />
  )
  const [failedIconList, setFailedIconList] = useState<string[]>([])
  useEffect(() => {
    if (pool) {
      const newList = []
      if (!TOKEN_ICONS[pool.token0Symbol]) {
        newList.push(pool.token0Symbol)
      }
      if (!TOKEN_ICONS[pool.token1Symbol]) {
        newList.push(pool.token1Symbol)
      }

      setFailedIconList(newList)
    }
  }, [pool])

  return (
    <StyledPoolCard m={2} p={4} width={['calc(100% - 16px)', 'calc(50% - 16px)', 'calc(100% / 3 - 16px)']}>
      <Flex justifyContent="center" mb={3}>
        {failedIconList.some(token => token === pool.token0Symbol) ? (
          <StyledDefaultIcon>{pool.token0Symbol}</StyledDefaultIcon>
        ) : (
          <StyledTokenIcon
            src={TOKEN_ICONS[pool.token0Symbol]}
            title={pool.token0Symbol}
            onError={() => setFailedIconList(list => list.concat(pool.token0Symbol))}
          />
        )}
        {failedIconList.some(token => token === pool.token1Symbol) ? (
          <StyledDefaultIcon>{pool.token1Symbol}</StyledDefaultIcon>
        ) : (
          <StyledTokenIcon
            src={TOKEN_ICONS[pool.token1Symbol]}
            title={pool.token1Symbol}
            onError={() => setFailedIconList(list => list.concat(pool.token1Symbol))}
          />
        )}
      </Flex>
      <StyledPoolDescription>
        <Box>{'LP Token'}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.lpBalance, 9)}</Box>
      </StyledPoolDescription>
      <StyledPoolDescription>
        <Box>{pool.token0Symbol}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.token0Balance, 3)}</Box>
      </StyledPoolDescription>
      <StyledPoolDescription>
        <Box>{pool.token1Symbol}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.token1Balance, 3)}</Box>
      </StyledPoolDescription>
      <Box mt={[3, 4]}>
        <StyledAccessButton disabled={!new BigNumber(pool.lpBalance).isGreaterThan(0)} onClick={onPresentConvert}>
          {'Convert'}
        </StyledAccessButton>
      </Box>
    </StyledPoolCard>
  )
}

StakeLua: React.FC<StakeLuaProps> = () => {
  const tokenName = 'LUA'
  const [requestedApproval, setRequestedApproval] = useState(false)

  const allowance = useAllowanceStaking()
  const { onApprove } = useApproveStaking()
  const sushi = useSushi()
  const tokenBalance = useTokenBalance(getSushiAddress(sushi))
  const { onEnter } = useEnter()
  // const { onLeave } = useLeave()

  const [onPresentDeposit] = useModal(<DepositModal max={tokenBalance} onConfirm={onEnter} tokenName={tokenName} />)

  const handleApprove = useCallback(async () => {
    try {
      setRequestedApproval(true)
      const txHash = await onApprove()
      // user rejected tx or didn't go thru
      if (!txHash) {
        setRequestedApproval(false)
      }
    } catch (e) {
      console.log(e)
    }
  }, [onApprove, setRequestedApproval])

  return (
    <Card p={[3, 4]}>
      <CardHeader mb={[4, 5]}>
        <Box mb={[3, 4]}>
          <Label text={'YOUR LUA'} />
        </Box>
        <Value value={getBalanceNumber(tokenBalance)} />
        <Label text={'LUA Tokens Available'} />
      </CardHeader>
      <CardActions>
        {!allowance.toNumber() ? (
          <Button disabled={requestedApproval} onClick={handleApprove} text={`Approve LUA`} />
        ) : (
          <Button disabled={tokenBalance.eq(new BigNumber(0))} text="Stake" onClick={onPresentDeposit} />
        )}
      </CardActions>
    </Card>
  )
}

InfoBox = styled(Box)`
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  color: #fabc44;
  opacity: 0.7;
`

ChatDemo = ({
  height,
  width,
}: {
  height?: number | string;
  width?: number | string;
}) => {
  const colors = [
    '#3B82F6',
    '#6366F1',
    '#8B5CF6',
    '#EC4899',
    '#EF4444',
    '#F59E0B',
    '#10B981',
  ];
  const titles = [
    'Welcome to Papercups ?',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
  ];

  const [primaryColor, setPrimaryColor] = React.useState(colors[0]);
  const [title, setHeaderTitle] = React.useState(titles[0]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      const idx = colors.indexOf(primaryColor);

      setPrimaryColor(colors[(idx + 1) % colors.length]);
      setHeaderTitle(titles[(idx + 1) % titles.length]);
    }, 2000);

    return () => clearInterval(interval);
  }, [colors, primaryColor]);

  return (
    <ChatBuilder config={config}>
      {({config, state, scrollToRef, onSendMessage}) => {
        return (
          <Box
            className="border rounded"
            sx={{
              height: height || 560,
              width: width || 376,
              overflow: 'hidden',
            }}
          >
            <Flex
              style={{
                background: '#fff',
                flexDirection: 'column',
                height: '100%',
                width: '100%',
                flex: 1,
              }}
            >
              <Header title={title} color={primaryColor} />

              <Box
                style={{
                  flex: 1,
                  overflowY: 'scroll',
                }}
              >
                <Body
                  color={primaryColor}
                  state={state}
                  scrollToRef={scrollToRef}
                />
              </Box>

              <ChatFooter config={config} onSendMessage={onSendMessage} />
            </Flex>
          </Box>
        );
      }}
    </ChatBuilder>
  );
}

render() {
    const {title, width, dark = false, className = '', children} = this.props;

    return (
      <Flex
        className={`flex-auto flex-col min-h-0 ${
          dark ? 'dark bg-gray-900' : 'bg-white'
        }`}
      >
        <Head>
          <title>
            Papercups | {title || 'Open Source Intercom Alternative'}
          </title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
          <script
            async
            src="https://platform.twitter.com/widgets.js"
            charSet="utf-8"
          ></script>
        </Head>

        <NavMenu dark={dark} />

        <main className="flex-auto min-h-0 dark:text-white">
          <Box
            className={className}
            mx="auto"
            style={{maxWidth: width || 800}}
            pt={5}
            px={4}
            pb={6}
          >
            <MDXProvider components={this.state}>{children}</MDXProvider>
          </Box>
        </main>

        <footer className="bg-gray-800 flex-0">
          <div
            className="max-w-5xl mx-auto px-4"
            style={{maxWidth: width || 800}}
          >
            <Flex py={5} sx={{justifyContent: 'space-between'}}>
              <Flex sx={{alignItems: 'center'}}>
                <p className="text-white pr-3">
                  Backed by <b>Y Combinator</b>
                </p>

                <Image sx={{width: '20px', height: '20px'}} src="yc-logo.png" />
              </Flex>

              <Box>
                <a href="/privacy" className="white_link">
                  Privacy
                </a>
              </Box>
            </Flex>
          </div>
        </footer>

        {this.isWindowReady() && (
          <ChatWidget
            token="eb504736-0f20-4978-98ff-1a82ae60b266"
            inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
            title="Welcome to Papercups!"
            subtitle="Ask us anything in the chat window below ?"
            greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
            primaryColor="#1890ff"
            iconVariant="filled"
            requireEmailUpfront
            showAgentAvailability
            // Pops up initial message after 2s when `shouldPopUpInitialMessage` return `true`
            popUpInitialMessage={
              this.shouldPopUpInitialMessage() ? 2000 : false
            }
            setDefaultGreeting={(settings) => {
              const path = window.location.pathname;

              switch (path) {
                case '/pricing':
                  return "Hi there! Let us know if you have any questions about pricing :) (we're offering deals to startups and international founders)";
                default:
                  return "Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!";
              }
            }}
          />
        )}
      </Flex>
    );
  }

render() {
    return (
      <Flex className="flex-auto flex-col min-h-0 bg-white">
        <Head>
          <title>Papercups | Open Source Intercom Alternative</title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
        </Head>

        <NavMenu />

        <main className="flex-auto min-h-0">
          <Box mx="auto" style={{maxWidth: 960}} py={5} px={4}>
            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box pt={100} flex={1} mx={[0, 4]} mb={[4, 0]}>
                <Box mb={6}>
                  <H1 className="mb-5">
                    Connect and chat with customers from your website
                  </H1>

                  <p className="leading-relaxed text-xl text-gray-700">
                    Open source customer messaging, built for both startups and
                    enterprise.
                  </p>

                  <Flex my={4}>
                    <Box mr={2}>
                      <a
                        href="https://app.papercups.io/demo"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                          Demo
                        </button>
                      </a>
                    </Box>
                    <Box mr={2}>
                      <a
                        href="https://app.papercups.io/register"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <button className="flex items-center bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded">
                          <span className="mr-2">Sign up for free</span>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M14 5l7 7m0 0l-7 7m7-7H3"
                            />
                          </svg>
                        </button>
                      </a>
                    </Box>
                  </Flex>
                </Box>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <ChatDemo />
                </Flex>
              </Box>
            </Flex>

            <Box mb={[4, 6]}>
              <Flex
                mb={4}
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>One powerful dashboard</H2>
                <P>
                  Streamline customer support and feedback with our feature-rich
                  dashboard.
                </P>
              </Flex>

              <Box>
                {/* TODO: find better images/screenshots! */}
                <Image
                  sx={{width: '100%'}}
                  src="images/demo-conversations.png"
                />
              </Box>
            </Box>
            <Box mx={[4, 6]} pb={50}>
              <Flex
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>Our customers</H2>

                <Box flex={1}>
                  <Flex
                    mx={-5}
                    justifyContent="space-between"
                    flexDirection={['column', 'row']}
                  >
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="batch-logo.svg"
                      />
                    </Box>
                    <Box pt={60} mx={[0, 4]}>
                      <img
                        style={{
                          height: '35px',
                        }}
                        src="ycombinator-logo.svg"
                      />
                    </Box>
                    <Box pt={60} mx={[0, 4]}>
                      <img
                        style={{
                          height: '35px',
                        }}
                        src="posthog-logo.svg"
                      />
                    </Box>
                    <Box pt={68} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="pry-logo.svg"
                      />
                    </Box>
                  </Flex>
                  <Flex
                    mx={-3}
                    justifyContent="space-between"
                    mb={0}
                    flexDirection={['column', 'row']}
                  >
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="quadranteye-logo.svg"
                      />
                    </Box>
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="jovian-logo.svg"
                      />
                    </Box>
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="cotter-logo.svg"
                      />
                    </Box>
                  </Flex>
                </Box>
              </Flex>
            </Box>

            <Box className="border-b" mb={[5, 6]}></Box>

            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="setup.svg"
                  />
                </Flex>
              </Box>

              <Box flex={1} mx={[0, 4]} my={[4, 0]}>
                <H3>Reply directly from Slack</H3>
                <P>
                  Directly talk to your users from a single Slack channel.
                  Remove the friction of having to login to another dashboard.
                  Set up our Slack integration in minutes.
                </P>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Brand and customize your widget</H3>
                <P>
                  Our widget is highly customizable. Change your color,
                  greetings, text and more through our simple UI without needing
                  any code.
                </P>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="customize.svg"
                  />
                </Flex>
              </Box>
            </Flex>
            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="secure.svg"
                  />
                </Flex>
              </Box>
              <Box pt={100} flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Save your developers time</H3>
                <P>
                  Papercups is open source and made with a developer in mind. We
                  support HTML, React, React Native and Flutter integrations.
                  Our integration takes minutes to setup and if you can't do it
                  in minutes we'll hop on a zoom call and do it for you!
                </P>
              </Box>
            </Flex>

            <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
              <H2>Papercups for Enterprise</H2>
            </Flex>

            <Flex
              mx={-3}
              justifyContent="space-between"
              mb={6}
              flexDirection={['column', 'row']}
            >
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Self-managed</H3>
                <P>
                  Papercups can be deployed in your cloud, for painless adoption
                  and onboarding. Whether it's AWS, Docker, or Heroku, we've got
                  you covered.
                </P>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Unlimited volume</H3>
                <P>
                  Papercups is built with Elixir on top of BEAM for incredible
                  scalability. This scalability extends to our open core pricing
                  model.
                </P>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Personalized support</H3>
                <P>
                  We can manage your deployment on your infrastructure. Get the
                  benefits of self-hosting with the reliability and scalability
                  of the cloud.
                </P>
              </Flex>
            </Flex>

            <Flex justifyContent="center" mb={[3, 4]} mt={[6, 0]}>
              <H2>Connect with us</H2>
            </Flex>

            <Flex
              mx={-3}
              justifyContent="space-between"
              mb={6}
              flexDirection={['column', 'row']}
            >
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://join.slack.com/t/papercups-io/shared_invite/zt-h0c3fxmd-hZi1Zp8~D61S6GD16aMqmg"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="slack-v1.svg" style={{height: 144}} />
                </a>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://github.com/papercups-io/papercups"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="github-v1.svg" style={{height: 144}} />
                </a>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://discord.gg/Dq2A3eh"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="discord-color.svg" style={{height: 144}} />
                </a>
              </Flex>
            </Flex>

            <Flex
              mb={5}
              justifyContent="center"
              alignItems="center"
              flexDirection="column"
            >
              <H1>What's new?</H1>

              <Flex my={4} mx={-2}>
                <Box mx={2}>
                  <a
                    href="https://github.com/papercups-io/papercups"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                      Find out on Github
                    </button>
                  </a>
                </Box>
                <Box mx={2}>
                  <button
                    className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
                    onClick={Papercups.toggle}
                  >
                    Ask us!
                  </button>
                </Box>
              </Flex>
            </Flex>
          </Box>
        </main>

        <footer
          className=""
          style={{flex: '0 0 auto', backgroundColor: '#001529'}}
        >
          <Flex
            mx="auto"
            py={5}
            px={4}
            sx={{justifyContent: 'space-between', maxWidth: 960}}
          >
            <Flex p={3} sx={{alignItems: 'center'}}>
              <p className="text-white pr-3">
                Backed by <b>Y Combinator</b>
              </p>

              <img
                style={{
                  width: '20px',
                  height: '20px',
                }}
                src="yc-logo.png"
              />
            </Flex>

            <Box p={3}>
              <a href="/privacy" className="white_link">
                Privacy
              </a>
            </Box>
          </Flex>
        </footer>

        <ChatWidget
          token="eb504736-0f20-4978-98ff-1a82ae60b266"
          inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
          title="Welcome to Papercups!"
          subtitle="Ask us anything in the chat window below ?"
          greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
          emailInputPlaceholder="What's your email address?"
          newMessagesNotificationText="See new messages"
          primaryColor="#1890ff"
          iconVariant="filled"
          requireEmailUpfront
          showAgentAvailability
          popUpInitialMessage={8000}
        />
      </Flex>
    );
  }

render() {
    return (
      <Flex className="flex-auto flex-col min-h-0 bg-white">
        <Head>
          <title>Papercups | Open Source Intercom Alternative</title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
        </Head>

        <NavMenu dark />

        <main className="flex-auto min-h-0">
          {/* Hero section */}
          <div className="dark bg-gray-900 pb-16">
            <div className="max-w-7xl mx-auto px-4 pt-12 pb-6 dark:text-white">
              <div className="flex flex-col sm:flex-row">
                <div className="flex-1 pt-24 sm:pt-36 pr-12">
                  <Box className="mb-6">
                    <H1 className="font-bold text-4xl sm:text-6xl mb-5">
                      Streamline communication with your customers
                    </H1>

                    <p className="leading-relaxed text-lg sm:text-xl text-gray-700 dark:text-gray-300">
                      Coordinate and reply to messages over chat, email, Slack,
                      and SMS. A privacy-focused, open-source alternative to
                      Intercom, Drift, and Zendesk.
                    </p>

                    <Flex my={4}>
                      <Box mr={2}>
                        <a
                          href="https://app.papercups.io/demo"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <button className="bg-white hover:bg-gray-100 text-black text-base py-2 px-5 rounded border">
                            See the demo
                          </button>
                        </a>
                      </Box>
                      <Box mr={2}>
                        <a
                          href="https://app.papercups.io/register"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <button className="flex items-center bg-blue-500 hover:bg-blue-400 border border-blue-500 hover:border-blue-400 text-white text-base py-2 px-5 rounded">
                            <span className="mr-2">Get started for free</span>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-4 w-4"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M14 5l7 7m0 0l-7 7m7-7H3"
                              />
                            </svg>
                          </button>
                        </a>
                      </Box>
                    </Flex>
                  </Box>
                </div>

                <div style={{flex: 1.6}}>
                  <div className="hidden sm:flex flex-col justify-center items-center py-16 sm:py-0">
                    <FadeIn direction="left">
                      <Image
                        className="w-full rounded"
                        style={{minWidth: 720, minHeight: 680}}
                        src="papercups-hero.svg"
                      />
                    </FadeIn>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* Customers section */}
          <div className="dark pt-16 pb-32 border-gray-800 bg-gray-900">
            <div className="max-w-5xl mx-auto flex justify-center items-center flex-col">
              <H2 className="dark:text-white">Our customers</H2>

              <div className="flex-1">
                <Flex
                  mx={-4}
                  justifyContent="center"
                  flexDirection={['column', 'row']}
                >
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="batch-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image sx={{height: '35px'}} src="ycombinator-logo.svg" />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image sx={{height: '35px'}} src="posthog-logo.svg" />
                  </Box>
                  <Box pt={68} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="pry-logo.svg"
                    />
                  </Box>
                </Flex>
                <Flex
                  mx={-4}
                  mb={0}
                  justifyContent="center"
                  flexDirection={['column', 'row']}
                >
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="quadranteye-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="jovian-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="cotter-logo.svg"
                    />
                  </Box>
                </Flex>
              </div>
            </div>
          </div>

          {/* Dashboard highlight section */}
          <div className="">
            <div className="max-w-5xl mx-auto px-4 pt-24 pb-16 mb-16 border-b">
              <Flex
                mb={4}
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>One powerful dashboard</H2>
                <P>
                  Streamline customer support and feedback with our feature-rich
                  dashboard.
                </P>
              </Flex>

              <Box>
                <FadeIn delay={200}>
                  <Image
                    sx={{
                      width: '100%',
                      borderRadius: 8,
                      boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                    }}
                    src="dashboard.png"
                  />
                </FadeIn>
              </Box>
            </div>
          </div>

          <div className="max-w-5xl mx-auto px-4">
            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <FadeIn direction="right" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                        borderRadius: 4,
                        boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                      }}
                      src="reply-from-slack.gif"
                    />
                  </Flex>
                </FadeIn>
              </Box>

              <Box flex={1} mx={[0, 4]} my={[4, 0]}>
                <H3>Reply from where you work</H3>
                <P>
                  You can reply to conversations from Slack, our dashboard, or
                  our mobile app. Remove the friction of having to log in to
                  another dashboard.
                </P>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Brand and customize your widget</H3>
                <P>
                  Our widget is highly customizable. Change your color,
                  greetings, text and more through our simple UI without needing
                  any code.
                </P>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <FadeIn direction="left" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                      }}
                      src="customize.gif"
                    />
                    {/* <ChatDemo /> */}
                  </Flex>
                </FadeIn>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]}>
                <FadeIn direction="right" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                        borderRadius: 4,
                        boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                      }}
                      src="papercups-js.png"
                    />
                  </Flex>
                </FadeIn>
              </Box>
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Save your developers time</H3>
                <P>
                  Papercups is open source and made with a developer in mind. We
                  support HTML, React, React Native and Flutter integrations.
                  Our integration takes minutes to setup and if you can't do it
                  in minutes we'll hop on a zoom call and do it for you!
                </P>
              </Box>
            </Flex>
          </div>

          <div className="dark bg-gray-900 py-24">
            <div className="max-w-5xl mx-auto px-4">
              <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
                <H2>Papercups for Enterprise</H2>
              </Flex>

              <Flex
                mx={-3}
                justifyContent="space-between"
                mb={6}
                flexDirection={['column', 'row']}
              >
                <FadeIn delay={100}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Self-managed</H3>
                    <P>
                      Papercups can be deployed in your cloud, for painless
                      adoption and onboarding. Whether it's AWS, Docker, or
                      Heroku, we've got you covered.
                    </P>
                  </Flex>
                </FadeIn>
                <FadeIn delay={200}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Unlimited volume</H3>
                    <P>
                      Papercups is built with Elixir on top of BEAM for
                      incredible scalability. This scalability extends to our
                      open core pricing model.
                    </P>
                  </Flex>
                </FadeIn>
                <FadeIn delay={300}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Personalized support</H3>
                    <P>
                      We can manage your deployment on your infrastructure. Get
                      the benefits of self-hosting with the reliability and
                      scalability of the cloud.
                    </P>
                  </Flex>
                </FadeIn>
              </Flex>

              <Flex
                justifyContent="center"
                alignItems="center"
                flexDirection="column"
              >
                <H1>What's new?</H1>

                <Flex my={4} mx={-2}>
                  <Box mx={2}>
                    <a
                      href="https://github.com/papercups-io/papercups"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <button className="inline-flex h-10 items-center justify-center bg-white hover:bg-gray-100 text-black text-base py-2 px-5 rounded border">
                        <img src="github-v1.svg" className="h-full mr-2" />
                        <span>Find out on Github</span>
                      </button>
                    </a>
                  </Box>
                  <Box mx={2}>
                    <button
                      className="h-10 bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
                      onClick={Papercups.toggle}
                    >
                      Ask us!
                    </button>
                  </Box>
                </Flex>
              </Flex>
            </div>
          </div>
        </main>

        <footer className="bg-gray-800 flex-0">
          <div className="max-w-5xl mx-auto px-4">
            <Flex py={5} sx={{justifyContent: 'space-between'}}>
              <Flex sx={{alignItems: 'center'}}>
                <p className="text-white pr-3">
                  Backed by <b>Y Combinator</b>
                </p>

                <Image sx={{width: '20px', height: '20px'}} src="yc-logo.png" />
              </Flex>

              <Box>
                <a href="/privacy" className="white_link">
                  Privacy
                </a>
              </Box>
            </Flex>
          </div>
        </footer>

        <ChatWidget
          token="eb504736-0f20-4978-98ff-1a82ae60b266"
          inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
          title="Welcome to Papercups!"
          subtitle="Ask us anything in the chat window below ?"
          greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
          emailInputPlaceholder="What's your email address?"
          newMessagesNotificationText="See new messages"
          primaryColor="#1890ff"
          iconVariant="filled"
          requireEmailUpfront
          showAgentAvailability
          popUpInitialMessage={8000}
        />
      </Flex>
    );
  }

PgNewsletter = () => {
  const [email, setEmail] = React.useState('');
  const [isPending, setPending] = React.useState(false);
  const [error, setErrorMessage] = React.useState<string | null>(null);
  const [hasSuccessfullySubscribed, setSuccessfullySubscribed] = React.useState(
    false
  );

  const handleChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) =>
    setEmail(e.target.value);

  const handleSubscribe = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPending(true);

    subscribe(email)
      .then((res) => {
        if (res.data.ok) {
          setSuccessfullySubscribed(true);
        } else {
          const err = res.data.error || DEFAULT_ERROR_MESSAGE;

          setErrorMessage(err);
        }
      })
      .catch((err) => {
        console.error('Failed to subscribe:', err);

        setErrorMessage(DEFAULT_ERROR_MESSAGE);
      })
      .finally(() => setPending(false));
  };

  if (hasSuccessfullySubscribed) {
    return (
      <Layout width={560}>
        <Flex
          flexDirection="column"
          justify-content="center"
          paddingBottom="20px"
        >
          <H2>Thanks for subscribing!</H2>

          <Paragraph>
            You should start receiving the newsletter within 24 hours.
          </Paragraph>
        </Flex>
      </Layout>
    );
  }

  return (
    <Layout width={560}>
      <Flex
        flexDirection="column"
        justify-content="center"
        paddingBottom="20px"
      >
        <H2>Subscribe to the newsletter</H2>

        <Paragraph>
          Enter your email to receive one of Paul Graham's essays in your inbox
          on a daily basis.
        </Paragraph>

        <form onSubmit={handleSubscribe}>
          <Flex my={2}>
            <input
              className="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="email"
              name="email"
              type="email"
              placeholder="[email protected]"
              onChange={handleChangeEmail}
            />

            <Box ml={1}>
              {/* TODO: handle loading/isPending state */}
              <button
                type="submit"
                className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
              >
                Subscribe
              </button>
            </Box>
          </Flex>
        </form>

        {error && (
          <Box my={3}>
            <Text danger>{error}</Text>
          </Box>
        )}
      </Flex>
    </Layout>
  );
}

Storytime = () => {
  const displayDemoAsGif = true; // TODO

  return (
    <Layout title="Storytime" width={960}>
      <Box pt={80} mx={[0, 4]} mb={5}>
        <Box mb={5} sx={{textAlign: 'center'}}>
          <H2>View and chat with your users in real time.</H2>

          <Paragraph>
            Open source customer messaging with built-in screen sharing through
            the browser. Get started in minutes.
          </Paragraph>

          <Flex my={3} sx={{justifyContent: 'center', alignItems: 'center'}}>
            <Box mr={2}>
              <a
                href="https://github.com/papercups-io/papercups"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                  GitHub
                </button>
              </a>
            </Box>
            <Box mr={2}>
              <a
                href="https://app.papercups.io/register"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="flex items-center bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded">
                  <span className="mr-2">Get started for free</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-4 w-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M14 5l7 7m0 0l-7 7m7-7H3"
                    />
                  </svg>
                </button>
              </a>
            </Box>
          </Flex>
        </Box>
      </Box>

      <Box mx={[0, 4]} mb={6}>
        <Flex
          alignItems="center"
          justifyContent="center"
          style={{
            width: '100%',
            height: 400,
          }}
        >
          {displayDemoAsGif ? (
            <img
              style={{
                width: '100%',
                boxShadow: '0 24px 48px rgba(17, 16, 62, 0.12)',
              }}
              src="https://user-images.githubusercontent.com/5264279/96898977-56c27d00-145e-11eb-907b-ca8db13a0fa0.gif"
            />
          ) : (
            <iframe
              src="https://player.vimeo.com/video/471072025?autoplay=1&loop=1&muted=1"
              style={{boxShadow: '0 24px 48px rgba(17, 16, 62, 0.12)'}}
              width="100%"
              height="100%"
              frameBorder="0"
              allow="autoplay; fullscreen"
              allowFullScreen
            ></iframe>
          )}
        </Flex>
      </Box>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="online-collab.svg"
            />
          </Flex>
        </Box>
        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>View and collaborate in real time</H3>
          <Paragraph>
            Watch how your users are interacting with your website and chat with
            them in real time. See exactly what they're seeing and help them
            with anything they need.
          </Paragraph>
        </Box>
      </Flex>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column-reverse', 'row']}>
        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>Built with security in mind</H3>
          <Paragraph>
            Password inputs, iframes, and other sensitive data are blocked by
            default. Customize which elements are blocked with simple CSS class
            tags to protect user privacy.
          </Paragraph>
        </Box>

        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="secure-v2.svg"
            />
          </Flex>
        </Box>
      </Flex>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="online-message.svg"
            />
          </Flex>
        </Box>

        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>Chat directly with your users</H3>
          <Paragraph>
            Convert more website visitors into customers with real-time chat.
            Don't lose out on prospects because of unanswered questions!
          </Paragraph>
        </Box>
      </Flex>

      <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
        <H2>Papercups for Enterprise</H2>
      </Flex>

      <Flex
        mx={-3}
        justifyContent="space-between"
        mb={6}
        flexDirection={['column', 'row']}
      >
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Self-managed</H3>
          <Paragraph>
            Papercups can be deployed in your cloud, for painless adoption and
            onboarding. Whether it's AWS, Docker, or Heroku, we've got you
            covered.
          </Paragraph>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Unlimited volume</H3>
          <Paragraph>
            Papercups is built with Elixir on top of BEAM for incredible
            scalability. This scalability extends to our open core pricing
            model.
          </Paragraph>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Personalized support</H3>
          <Paragraph>
            We can manage your deployment on your infrastructure. Get the
            benefits of self-hosting with the reliability and scalability of the
            cloud.
          </Paragraph>
        </Flex>
      </Flex>

      <Flex justifyContent="center" mb={[3, 4]} mt={[6, 0]}>
        <H2>Connect with us</H2>
      </Flex>

      <Flex
        mx={-3}
        justifyContent="space-between"
        mb={6}
        flexDirection={['column', 'row']}
      >
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://join.slack.com/t/papercups-io/shared_invite/zt-h0c3fxmd-hZi1Zp8~D61S6GD16aMqmg"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="slack-v1.svg" style={{height: 144}} />
          </a>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://github.com/papercups-io/papercups"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="github-v1.svg" style={{height: 144}} />
          </a>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://discord.gg/Dq2A3eh"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="discord-color.svg" style={{height: 144}} />
          </a>
        </Flex>
      </Flex>

      <Flex
        mb={5}
        justifyContent="center"
        alignItems="center"
        flexDirection="column"
      >
        <H1>What's new?</H1>

        <Flex my={4} mx={-2}>
          <Box mx={2}>
            <a
              href="https://github.com/papercups-io/papercups"
              target="_blank"
              rel="noopener noreferrer"
            >
              <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                Find out on Github
              </button>
            </a>
          </Box>
          <Box mx={2}>
            <button
              className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
              onClick={Papercups.toggle}
            >
              Ask us!
            </button>
          </Box>
        </Flex>
      </Flex>
    </Layout>
  );
}

UnstakeXLua: React.FC<UnstakeXLuaProps> = ({ xLuaAddress }) => {
  const { chainId } = useWeb3React()
  const IsTomo = IsTomoChain(chainId)
  const sushi = useSushi()
  const myXLua = useTokenBalance(xLuaAddress)
  const totalLuaInSafe = useTokenBalance(getSushiAddress(sushi), xLuaAddress)
  const [totalSupplyXLua, setTotalSupplyXLua] = useState<BigNumber>(new BigNumber(0))
  const [pendingTx, setPendingTx] = useState(false)
  const trackingAPYBalanceXLua = useTokenBalance(xLuaAddress, '0xdEad000000000000000000000000000000000000')
  const trackingAPYBalanceXLuaTomo = useTokenBalance(xLuaAddress, '0x854f882771b61b26e91F8644dc0c9c94301FaD2d')

  useEffect(() => {
    async function fetchTotalSupplyXLua() {
      const supply = await getXSushiSupply(sushi)
      setTotalSupplyXLua(supply)
    }
    if (sushi) {
      fetchTotalSupplyXLua()
    }
  }, [sushi, setTotalSupplyXLua])

  const xLuaToLua = myXLua.multipliedBy(totalLuaInSafe).dividedBy(totalSupplyXLua)

  const trackingReward = IsTomo
    ? trackingAPYBalanceXLuaTomo
        .multipliedBy(totalLuaInSafe)
        .dividedBy(totalSupplyXLua)
        .minus(10 * 10 ** 18)
    : trackingAPYBalanceXLua
        .multipliedBy(totalLuaInSafe)
        .dividedBy(totalSupplyXLua)
        .minus(10 * 10 ** 18)

  const { onLeave } = useLeave()
  const tokenName = 'xLUA'
  const oneDay = 1000 * 60 * 60 * 24 // hours*minutes*seconds*milliseconds
  const initStakeAt = IsTomo ? new Date(1615349347000) : new Date(1603904400000) //1614226890000
  const toDay = new Date() // Today
  const differenceMs = Math.abs(toDay.getTime() - initStakeAt.getTime())
  const totalStakedDay = Math.round(differenceMs / oneDay)

  const [onPresentLeave] = useModal(<WithdrawModal max={myXLua} onConfirm={onLeave} tokenName={tokenName} />)
  return (
    <Card p={[3, 4]}>
      <CardHeader mb={[4, 5]}>
        <Box mb={[3, 4]}>
          <Label text={'YOUR xLUA'} />
        </Box>
        <Value value={getBalanceNumber(myXLua)} />
        <Label text={`~ ${xLuaToLua.div(10 ** 18).toFixed(2)} LUA`} />
      </CardHeader>
      <CardActions mb={[3, 4]}>
        <Button
          disabled={!myXLua.toNumber() || pendingTx}
          text={pendingTx ? 'pending Withdraw' : 'Unstake'}
          onClick={async () => {
            setPendingTx(true)
            await onPresentLeave()
            setPendingTx(false)
          }}
        />
      </CardActions>
      <CardInsight>
        <span>{'APY'}</span>
        <span style={{ fontWeight: 'bold', color: '#4caf50' }}>
          {trackingReward
            ? `${parseFloat(
                trackingReward
                  .div(totalStakedDay)
                  .div(10 * 10 ** 18)
                  .times(100)
                  .times(365)
                  .toFixed(2)
              ).toLocaleString('en-US')}%`
            : '~'}
        </span>
      </CardInsight>
      <CardInsight>
        <span>{'Unstake fee'}</span>
        <span style={{ fontWeight: 'bold', color: '#4caf50' }}>{'0.5%'}</span>
      </CardInsight>
    </Card>
  )
}

SafePage: React.FC<SafePageProps> = ({ location }) => {
  const { chainId, library: ethereum } = useWeb3React()
  const [poolKey, setPoolKey] = useState('')
  const [pools, setPools] = useState<PoolItemProps[]>([])
  const [totalStake, setTotalStake] = useState<BigNumber>(new BigNumber(0))
  const sushi = useSushi()
  const luaAddress = getSushiAddress(sushi)
  const xLuaAddress = getXLuaAddress(sushi)

  useEffect(() => {
    requestStakingPools((data: any) => setPools(data), chainId)
  }, [chainId])

  useEffect(() => {
    if (location && location.search) {
      const searchParams: any = new URLSearchParams(location.search)

      setPoolKey(searchParams.get('pool'))
    } else {
      setPoolKey('')
    }
  }, [location])

  useEffect(() => {
    const fetchLuaStakeTotal = async () => {
      if (ethereum && ethereum.provider) {
        const luaStakeTotal = await getBalance(ethereum.provider, luaAddress, xLuaAddress)

        setTotalStake(new BigNumber(luaStakeTotal))
      }
    }
    if (sushi) {
      fetchLuaStakeTotal()
    }
  }, [sushi])

  return (
    <>
      <PageWrapper>
        <SwapPoolTabs active="lua-safe" />
        <Header>
          <HeaderImg src={logoSrc} />
          <HeaderTitle>{'Welcome to the LuaSafe, stake LUA to earn tokens!'}</HeaderTitle>
          <HeaderSubTitle>
            {`LuaSafe Currently Has `}
            <TotalSupplyText>{reduceFractionDigit(getBalanceNumber(new BigNumber(totalStake)), 2)}</TotalSupplyText>
            {` LUA Staked`}
          </HeaderSubTitle>
        </Header>
        <FarmContainer mb={[3, 4]}>
          <CardGrid>
            <CardContainer>
              <UnstakeXLua xLuaAddress={xLuaAddress} />
            </CardContainer>
            <CardContainer>
              <StakeLua />
            </CardContainer>
          </CardGrid>
        </FarmContainer>
        <InfoBox>
          {
            'Users who stake LUA in LuaSafe will receive xLUA LP tokens which represent their proportion of LUA staked. Stakers will need to unstake their xLUA LP tokens in order to receive their LUA reward.'
          }
        </InfoBox>
        <Box width="100%" my={[4, 5]}>
          <div style={{ border: '1px solid #2C3030' }} />
        </Box>
        {poolKey ? (
          <Details />
        ) : pools.length > 0 && Object.keys(pools[0]).length > 0 ? (
          <List items={pools} />
        ) : (
          <LoaderContainer>
            <Loader size="40px" />
          </LoaderContainer>
        )}
      </PageWrapper>
      {/* {IsTomo ? <NoticeModal /> : ''} */}
    </>
  )
}