• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• frontend-v1-master
  • src
    • App.tsx
    • utils
      • errors.ts
      • math.ts
      • bridge.ts
      • chains.ts
      • index.ts
      • address.ts
      • onboard.ts
      • pool.ts
      • notify.ts
      • format.ts
      • weiMath.ts
      • constants.ts
    • views
      • Send.tsx
      • About.tsx
      • Confirmation
        • Confirmation.tsx
        • NewConfirmation.tsx
        • NewConfirmation.styles.ts
        • index.ts
        • Confirmation.styles.ts
      • index.ts
      • Pool.tsx
    • onboard-override.css
    • index.tsx
    • state
      • send.ts
      • transactions.ts
      • hooks.ts
      • index.ts
      • poolsApi.ts
      • blocks.ts
      • connection.ts
      • pools.ts
      • deposits.ts
      • chainApi.ts
    • hooks
      • useClickOutsideModal.ts
      • index.ts
      • useERC20.ts
      • usePrevious.ts
    • context
      • ErrorContext.tsx
    • components
      • Layout
        • index.ts
        • Layout.tsx
      • SuperHeader
        • SuperHeader.tsx
        • index.ts
      • Section
        • index.ts
        • Section.tsx
      • ChainSelection
        • ChainSelection.tsx
        • ChainSelection.styles.tsx
        • index.ts
      • Dialog
        • Dialog.tsx
        • index.ts
        • Dialog.styles.tsx
      • index.ts
      • PoolSelection
        • PoolSelection.tsx
        • PoolSelection.styles.ts
        • index.ts
      • Wallet
        • index.ts
        • Wallet.tsx
        • Wallet.styles.ts
      • Header
        • MobileMenu.tsx
        • Header.styles.tsx
        • index.ts
        • MenuToggle.tsx
        • Header.tsx
      • AddressSelection
        • index.ts
        • AddressSelection.styles.ts
        • AddressSelection.tsx
      • SendAction
        • SendAction.styles.ts
        • index.ts
        • SendAction.tsx
      • Buttons
        • index.ts
        • BaseButton.tsx
      • Box
        • index.ts
        • Box.tsx
      • GlobalStyles
        • GlobalStyles.tsx
        • reset.ts
        • index.ts
      • Tabs
        • index.ts
        • Tab.tsx
        • Tabs.styled.tsx
        • Tabs.tsx
      • InformationDialog
        • index.ts
        • InformationDialog.tsx
      • PoolForm
        • DepositSuccess.tsx
        • AddLiquidityForm.tsx
        • PoolForm.styles.ts
        • index.ts
        • UserBalance.tsx
        • PoolFormSlider.tsx
        • PoolForm.tsx
        • AddLiquidityForm.styles.ts
        • RemoveLiquidityForm.tsx
        • RemoveLiquidityForm.styles.ts
      • CoinSelection
        • CoinSelection.styles.ts
        • index.ts
        • CoinSelection.tsx
      • BouncingDotsLoader
        • index.ts
        • BouncingDotsLoader.tsx
    • Routes.tsx
    • sitemap-generator.js
    • sitemap-routes.js
    • react-app-env.d.ts
    • assets
  • public
    • robots.txt
    • sitemap.xml
    • fonts
    • index.html
  • LICENSE
  • api
    • suggested-fees.js
    • limits.js
    • utils.js
  • README.md
  • package.json
  • vercel.json
  • tsconfig.json
  • .gitignore

import styled from "@emotion/styled";
import { QUERIES } from "utils";

export const Wrapper = styled.div`
  min-height: 80%;
  flex: 1;
  background-color: var(--color-primary);
  border-radius: 12px 12px 0 0;
  padding: 0 10px;
  @media ${QUERIES.tabletAndUp} {
    padding: 0 30px;
  }
`;

export const Info = styled.div`
  text-align: center;
`;
export const InfoText = styled.h3`
  font-size: ${24 / 16}rem;
  color: var(--color-gray);
  margin-bottom: 16px;
`;

export const ROIWrapper = styled.div`
  margin-top: 8px;
  text-align: left;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 16px;
`;

export const Logo = styled.img`
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-right: 10px;
  background-color: var(--color-white);
  border-radius: 16px;
  margin-top: 12px;
`;

export const TabContentWrapper = styled.div`
  background-color: var(--color-gray);
  padding: 20px;
  padding-bottom: 40px;
`;

export const Position = styled.div`
  background-color: var(--color-white-transparent);
  border-radius: 5px;
  padding: 15px;
  color: var(--color-gray);
  margin-bottom: 5px;
`;

export const PositionItem = styled.div`
  display: flex;
  justify-content: space-between;
  &:not(:last-of-type) {
    margin-bottom: 15px;
  }
  &:last-of-type {
    font-weight: 700;
  }
`;

export const ROI = styled.div`
  color: var(--color-gray);
  padding: 15px;
`;

export const ROIItem = styled.div`
  display: flex;
  justify-content: space-between;
  &:not(:last-of-type) {
    margin-bottom: 15px;
  }
`;

export const LiquidityBlocked = styled.div`
  backdrop-filter: blur(6px);
  height: 254px;
  width: 440px;
  position: absolute;
  margin: -20px;
  z-index: 1000;
  display: flex;
  > div {
    text-align: center;
    border-radius: 5px;
    background-color: var(--color-error);
    color: var(--color-gray);
    width: 90%;
    height: 70px;
    margin: 4rem auto 0;
    padding: 1rem 0.5rem;
    font-size: ${14 / 16}rem;
    line-height: ${19 / 16}rem;
  }
`;