{title}
+{content}
+
+
+
+ MIR Airdrop
+
+ Claim
+
+
+ )
+}
+
+export default AirdropToast
diff --git a/src/airdrop/airdrop.d.ts b/src/airdrop/airdrop.d.ts
new file mode 100644
index 000000000..01c9159bc
--- /dev/null
+++ b/src/airdrop/airdrop.d.ts
@@ -0,0 +1,6 @@
+interface Airdrop {
+ stage: number
+ address: string
+ amount: string
+ proof: string
+}
diff --git a/src/airdrop/gqldocs.ts b/src/airdrop/gqldocs.ts
new file mode 100644
index 000000000..8dd200372
--- /dev/null
+++ b/src/airdrop/gqldocs.ts
@@ -0,0 +1,9 @@
+import { gql } from "@apollo/client"
+
+const AIRDROP = gql`
+ query airdrop($address: String!, $network: String = "TERRA") {
+ airdrop(address: $address, network: $network)
+ }
+`
+
+export default AIRDROP
diff --git a/src/components/AppFooter.module.scss b/src/components/AppFooter.module.scss
new file mode 100644
index 000000000..7ed1f8c7a
--- /dev/null
+++ b/src/components/AppFooter.module.scss
@@ -0,0 +1,56 @@
+@import "mixins";
+@import "variables";
+
+.footer {
+ color: $slate;
+
+ @include desktop {
+ height: $footer-height;
+ }
+
+ @include mobile {
+ height: $footer-height-mobile;
+ }
+
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+}
+
+.container {
+ @include desktop {
+ @include flex(space-between);
+ }
+}
+
+/* network */
+.network {
+ @include flex;
+ color: white;
+ text-transform: capitalize;
+
+ i {
+ margin-right: 5px;
+ }
+}
+
+/* author */
+.community {
+ @include flex;
+ margin: -10px;
+
+ @include mobile {
+ margin-top: 20px;
+ }
+}
+
+.link {
+ @include flex;
+ @include transition(opacity);
+ padding: 10px;
+ opacity: 0.3;
+
+ &:hover {
+ opacity: 1;
+ }
+}
diff --git a/src/components/AppFooter.tsx b/src/components/AppFooter.tsx
new file mode 100644
index 000000000..544d68a6e
--- /dev/null
+++ b/src/components/AppFooter.tsx
@@ -0,0 +1,73 @@
+import medium from "./Community/medium.png"
+import discord from "./Community/discord.png"
+import telegram from "./Community/telegram.png"
+import twitter from "./Community/twitter.png"
+import github from "./Community/github.png"
+
+import Container from "./Container"
+import ExtLink from "./ExtLink"
+import Icon from "./Icon"
+import styles from "./AppFooter.module.scss"
+
+interface Props {
+ network?: string
+ project: string
+}
+
+const AppFooter = ({ network, project }: Props) => {
+ const community = [
+ {
+ href: `https://github.com/Mirror-Protocol/${project}`,
+ src: github,
+ alt: "Github",
+ },
+ {
+ href: "https://medium.com/@mirror-protocol",
+ src: medium,
+ alt: "Medium",
+ },
+ {
+ href: "https://t.me/mirror_protocol",
+ src: telegram,
+ alt: "Telegram",
+ },
+ {
+ href: "https://discord.gg/KYC22sngFn",
+ src: discord,
+ alt: "Discord",
+ },
+ {
+ href: "https://twitter.com/mirror_protocol",
+ src: twitter,
+ alt: "Twitter",
+ },
+ ]
+
+ return (
+
+ )
+}
+
+export default AppFooter
diff --git a/src/components/AppHeader.module.scss b/src/components/AppHeader.module.scss
new file mode 100644
index 000000000..017cfc70b
--- /dev/null
+++ b/src/components/AppHeader.module.scss
@@ -0,0 +1,69 @@
+@import "mixins";
+@import "variables";
+
+.header {
+ background: $header;
+ box-shadow: 0 10px 10px 0 fade-out($bg, 0.5);
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+}
+
+@include mobile {
+ .header {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .collapsed {
+ position: sticky;
+ }
+}
+
+.container {
+ @include desktop {
+ @include flex(space-between);
+ }
+}
+
+.wrapper {
+ @include flex(space-between);
+}
+
+.logo {
+ @include flex;
+ height: $nav-height;
+}
+
+.toggle {
+ @include desktop {
+ display: none;
+ }
+}
+
+.support {
+ @include desktop {
+ @include flex;
+ }
+
+ @include mobile {
+ .collapsed & {
+ display: none;
+ }
+ }
+}
+
+.connect {
+ padding-left: 15px;
+
+ @include mobile {
+ display: none;
+ }
+}
+
+.hr {
+ margin: 0;
+}
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
new file mode 100644
index 000000000..c1e5dee1d
--- /dev/null
+++ b/src/components/AppHeader.tsx
@@ -0,0 +1,58 @@
+import { useState, useEffect, ReactNode } from "react"
+import { Link, useLocation } from "react-router-dom"
+import classNames from "classnames/bind"
+import Container from "./Container"
+import Icon from "./Icon"
+import Menu from "./Menu"
+import styles from "./AppHeader.module.scss"
+
+const cx = classNames.bind(styles)
+
+interface Props {
+ logo: ReactNode
+ menu: MenuItem[]
+ connect: ReactNode
+ border?: boolean
+}
+
+const AppHeader = ({ logo, menu, connect, border }: Props) => {
+ const { key } = useLocation()
+ const [isOpen, setIsOpen] = useState(false)
+ const toggle = () => setIsOpen(!isOpen)
+ const hideToggle = menu.every((item) => item.desktopOnly)
+
+ useEffect(() => {
+ setIsOpen(false)
+ }, [key])
+
+ return (
+ Claim your MIR tokens
+ +
+
+
+
+
+
+
+
+
+ {border && + + {logo} + +
+ + {!hideToggle && ( + + )} +{connect}
+ } +
{title}
+{title}
+ + ), + + [HeaderType.ICON]: ( + <> +{title}
+ + ), + }[headerType] + + return !(header || title) ? null : ( +-
+ {list.map(({ title, content }, index) => (
+
-
+
+ +
+ ))}
+
+
+ {balance && {balance}}
+
+
+ {isOpen && info(close)}
+
+ )
+}
+
+export default ConnectedButton
diff --git a/src/components/ConnectedInfo.module.scss b/src/components/ConnectedInfo.module.scss
new file mode 100644
index 000000000..a17dd1c8a
--- /dev/null
+++ b/src/components/ConnectedInfo.module.scss
@@ -0,0 +1,55 @@
+@import "mixins";
+@import "variables";
+
+.wallet {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 10px;
+ padding: 25px;
+ width: 310px;
+
+ background: $darkblue;
+ border: 1px solid fade-out($blue, 0.75);
+ border-radius: 10px;
+ box-shadow: 0 20px 40px fade-out(black, 0.5);
+
+ i {
+ margin-right: 5px;
+ }
+}
+
+.header {
+ @include flex(space-between);
+ margin-bottom: 30px;
+}
+
+.address {
+ @include flex;
+
+ color: white;
+ font-size: 16px;
+}
+
+.disconnect {
+ font-size: 10px;
+}
+
+.actions {
+ @include flex(space-between);
+ font-size: 12px;
+
+ .button {
+ @include flex;
+ @include link($blue, lighten($blue, 25%));
+ text-decoration: none;
+ }
+
+ i {
+ font-size: 14px;
+ }
+}
+
+.send {
+ margin-top: 20px;
+}
diff --git a/src/components/ConnectedInfo.tsx b/src/components/ConnectedInfo.tsx
new file mode 100644
index 000000000..32fdfa4e4
--- /dev/null
+++ b/src/components/ConnectedInfo.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react"
+import { LinkProps } from "react-router-dom"
+import Icon from "./Icon"
+import Button from "./Button"
+import Tooltip from "./Tooltip"
+import ExtLink from "./ExtLink"
+import LinkButton from "./LinkButton"
+import styles from "./ConnectedInfo.module.scss"
+
+interface Props {
+ address: string
+ truncated: string
+ link: { href: string; children: string }
+ footer?: LinkProps
+ disconnect?: () => void
+ close: () => void
+}
+
+const ConnectedInfo = (props: Props) => {
+ const { address, truncated, link, footer, disconnect, close } = props
+ const { copy, copied, reset } = useCopyAddress(address)
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {footer && (
+
+ {footer.children}
+
+ )}
+
+ )
+}
+
+export default ConnectedInfo
+
+/* hooks */
+const useCopyAddress = (address: string) => {
+ const [copied, setCopied] = useState(false)
+ const reset = () => setCopied(false)
+
+ const copy = async () => {
+ try {
+ await navigator.clipboard.writeText(address)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 1000)
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ return { copy, copied, reset }
+}
diff --git a/src/components/Container.module.scss b/src/components/Container.module.scss
new file mode 100644
index 000000000..48301e2ef
--- /dev/null
+++ b/src/components/Container.module.scss
@@ -0,0 +1,12 @@
+@import "variables";
+
+.container {
+ margin: 0 auto;
+ padding: 0 $gutter;
+ max-width: ($max-width + 2 * $gutter);
+}
+
+.sm {
+ margin: 60px auto;
+ max-width: 620px;
+}
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
new file mode 100644
index 000000000..450254c93
--- /dev/null
+++ b/src/components/Container.tsx
@@ -0,0 +1,16 @@
+import { FC } from "react"
+import classNames from "classnames/bind"
+import styles from "./Container.module.scss"
+
+const cx = classNames.bind(styles)
+
+interface Props {
+ className?: string
+ sm?: boolean
+}
+
+const Container: FC
+
+ <>
+
+
+
+ {children}
+)
+
+export default Container
diff --git a/src/components/Count.tsx b/src/components/Count.tsx
new file mode 100644
index 000000000..ae934f9a3
--- /dev/null
+++ b/src/components/Count.tsx
@@ -0,0 +1,52 @@
+import { useRef, useState, useEffect } from "react"
+import { plus, minus, div, gt, lt } from "../libs/math"
+import { format, lookupSymbol } from "../libs/parse"
+
+const FPS = 15
+const INTERVAL = 1000 / FPS
+const DURATION = 300
+
+const Count = ({ children: target = "0", ...props }: CountOptions) => {
+ const { symbol, ...config } = props
+ const prevRef = useRef- {list.map(renderItem)}
Delisted
+
+export default Delisted
diff --git a/src/components/Dl.module.scss b/src/components/Dl.module.scss
new file mode 100644
index 000000000..899136680
--- /dev/null
+++ b/src/components/Dl.module.scss
@@ -0,0 +1,79 @@
+@import "mixins";
+@import "variables";
+
+.dl {
+ font-weight: 500;
+}
+
+.dt {
+ color: $battleship;
+ text-transform: capitalize;
+}
+
+.dd {
+ color: white;
+}
+
+/* variant */
+.horizontal {
+ @include flex(flex-start);
+}
+
+@include desktop {
+ .horizontal {
+ .dt {
+ margin-right: 5px;
+ }
+
+ .dd:not(:last-child) {
+ margin-right: 30px;
+ }
+ }
+}
+
+@include mobile {
+ .horizontal {
+ flex-wrap: wrap;
+
+ .dt,
+ .dd {
+ margin-top: 5px;
+ width: 50%;
+ }
+
+ .dd {
+ text-align: right;
+ }
+ }
+}
+
+.vertical {
+ .dt,
+ .dd {
+ display: block;
+ }
+
+ .dt {
+ font-size: 12px;
+ margin-bottom: 5px;
+ }
+
+ .dd:not(:last-child) {
+ margin-bottom: 20px;
+ }
+}
+
+/* footer */
+.footer {
+ @include desktop {
+ @include flex;
+ }
+}
+
+.margin {
+ margin-top: $gutter;
+}
+
+.item {
+ flex: 1;
+}
diff --git a/src/components/Dl.tsx b/src/components/Dl.tsx
new file mode 100644
index 000000000..fcd289e42
--- /dev/null
+++ b/src/components/Dl.tsx
@@ -0,0 +1,64 @@
+import { Fragment } from "react"
+import classNames from "classnames/bind"
+import styles from "./Dl.module.scss"
+
+const cx = classNames.bind(styles)
+
+interface Options {
+ fontSize?: number
+ type?: "horizontal" | "vertical"
+ align?: "left" | "center"
+ className?: string
+ ddClassName?: string
+}
+
+type DiProps = Content & Options
+export const Di = ({ title, content, ...options }: DiProps) => (
+ -
+ {list.map(({ title, content }, index) => (
+
- {title} +
- + {content} + +
{children}
+
+ {label && (
+
+
+
+
+
+ )}
+
+
+ {list.map(({ attrs, label }) => (
+
+
+)
+
+export default FormCheck
diff --git a/src/components/FormFeedback.module.scss b/src/components/FormFeedback.module.scss
new file mode 100644
index 000000000..b87c5ed63
--- /dev/null
+++ b/src/components/FormFeedback.module.scss
@@ -0,0 +1,13 @@
+@import "mixins";
+@import "variables";
+
+.component {
+ @include flex(flex-start, flex-start);
+ font-size: 12px;
+ margin-top: 30px;
+}
+
+.icon {
+ color: $red;
+ margin-right: 10px;
+}
diff --git a/src/components/FormFeedback.tsx b/src/components/FormFeedback.tsx
new file mode 100644
index 000000000..ae25c5481
--- /dev/null
+++ b/src/components/FormFeedback.tsx
@@ -0,0 +1,12 @@
+import { FC } from "react"
+import Icon from "./Icon"
+import styles from "./FormFeedback.module.scss"
+
+const FormFeedback: FC = ({ children }) => (
+
+
+
+ {label}
+
+
+ ))}
+
+
+)
+
+export default FormFeedback
diff --git a/src/components/FormGroup.module.scss b/src/components/FormGroup.module.scss
new file mode 100644
index 000000000..55b91115b
--- /dev/null
+++ b/src/components/FormGroup.module.scss
@@ -0,0 +1,103 @@
+@import "mixins";
+@import "variables";
+
+.group + .group {
+ margin-top: 20px;
+}
+
+.component {
+ input,
+ textarea {
+ width: 100%;
+ }
+
+ ::placeholder {
+ color: fade-out(#f0f0f0, 0.8);
+ }
+}
+
+$padding: 10px 20px;
+
+.border {
+ @include transition(border-color);
+ border-radius: 5px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: fade-out($slate, 0.5);
+ padding: $padding;
+ position: relative;
+
+ &.readOnly {
+ $bg: fade-out($slate, 0.9);
+ border-color: $bg;
+ background: $bg;
+ }
+
+ &.focused {
+ border-color: $blue;
+ }
+
+ &.error {
+ border-color: $red;
+ }
+}
+
+.select > button {
+ @include flex(space-between);
+ width: 100%;
+}
+
+/* field */
+.header,
+.wrapper {
+ @include flex(space-between);
+
+ .label,
+ .field {
+ flex: 1;
+ }
+
+ .help,
+ .unit {
+ flex: none;
+ text-align: right;
+ @include flex(flex-end);
+ }
+}
+
+.header {
+ color: $battleship;
+ font-size: 12px;
+ margin-bottom: 10px;
+}
+
+.wrapper {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 2;
+}
+
+.label > label {
+ display: block;
+ font-weight: 600;
+}
+
+.help {
+ white-space: pre;
+}
+
+.max {
+ margin-right: 10px;
+}
+
+/* assets */
+.assets {
+ margin-top: 10px;
+}
+
+/* feedback */
+.feedback {
+ color: $red;
+ font-size: 12px;
+ margin-top: 10px;
+}
diff --git a/src/components/FormGroup.tsx b/src/components/FormGroup.tsx
new file mode 100644
index 000000000..fbd0bb80b
--- /dev/null
+++ b/src/components/FormGroup.tsx
@@ -0,0 +1,66 @@
+import classNames from "classnames/bind"
+import Button from "./Button"
+import styles from "./FormGroup.module.scss"
+
+const cx = classNames.bind(styles)
+
+const FormGroup = ({ input, textarea, select, value, ...props }: FormGroup) => {
+ const { label, help, unit, max, assets, focused, error, type = 1 } = props
+ const { skipFeedback } = props
+
+ const border = cx(styles.border, { focused, error, readOnly: value })
+ const maxProps = {
+ type: "button",
+ className: styles.max,
+ onClick: max,
+ color: "secondary",
+ size: "xs",
+ outline: true,
+ children: "Max",
+ }
+
+ return (
+ {children}
+
+
+ )
+}
+
+export default FormGroup
diff --git a/src/components/Grid.module.scss b/src/components/Grid.module.scss
new file mode 100644
index 000000000..be44d3cfe
--- /dev/null
+++ b/src/components/Grid.module.scss
@@ -0,0 +1,45 @@
+@import "mixins";
+
+$gutter: 30px;
+$margin: ($gutter / 2);
+
+.row {
+ @include flex(flex-start);
+ align-items: stretch;
+ margin: -$margin;
+
+ > * {
+ flex: 1;
+ margin: $margin;
+ }
+
+ @include mobile {
+ flex-direction: column;
+ }
+
+ & + & {
+ margin-top: $margin;
+ }
+}
+
+@include desktop {
+ .wrap {
+ flex-wrap: wrap;
+
+ > * {
+ flex: none;
+ }
+ }
+
+ .wrap-2 > * {
+ width: calc((100% / 2) - #{$gutter});
+ }
+
+ .wrap-3 > * {
+ width: calc((100% / 3) - #{$gutter});
+ }
+
+ .wrap-4 > * {
+ width: calc((100% / 4) - #{$gutter});
+ }
+}
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
new file mode 100644
index 000000000..06812ee9c
--- /dev/null
+++ b/src/components/Grid.tsx
@@ -0,0 +1,13 @@
+import { FC } from "react"
+import classNames from "classnames/bind"
+import styles from "./Grid.module.scss"
+
+const cx = classNames.bind(styles)
+
+const Grid: FC<{ wrap?: number }> = ({ children, wrap }) => (
+
+ {label && (
+
+
+
+
+
+ {help && (
+
+ {help.title}: {help.content}
+
+ )}
+
+ )}
+
+
+
+
+ {input ? (
+
+ ) : textarea ? (
+
+ ) : select ? (
+
+
+ {max && }
+ {unit}
+
+
+ {assets && {assets} }
+
+
+
+ {error && !skipFeedback && {select}
+ ) : (
+ {value}
+ )}
+ {error}
} +
+ {children}
+
+)
+
+export default Grid
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
new file mode 100644
index 000000000..18e5a0927
--- /dev/null
+++ b/src/components/Icon.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames"
+
+interface Props {
+ name: string
+ size?: string | number
+ className?: string
+}
+
+const Icon = ({ name, size, className }: Props) => (
+
+ {name}
+
+)
+
+export default Icon
diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
new file mode 100644
index 000000000..fda769be4
--- /dev/null
+++ b/src/components/LinkButton.tsx
@@ -0,0 +1,15 @@
+import { Link, LinkProps as Props } from "react-router-dom"
+import { getAttrs } from "./Button"
+
+export type LinkProps = ButtonProps & Props
+const LinkButton = (props: LinkProps) => {
+ const { children, ...attrs } = getAttrs(props)
+
+ return props.disabled ? (
+ {children}
+ ) : (
+ {children}
+ )
+}
+
+export default LinkButton
diff --git a/src/components/ListCard.module.scss b/src/components/ListCard.module.scss
new file mode 100644
index 000000000..d5e00735a
--- /dev/null
+++ b/src/components/ListCard.module.scss
@@ -0,0 +1,9 @@
+@import "variables";
+
+.item {
+ padding: 20px 30px;
+
+ &:not(:first-child) {
+ border-top: $border;
+ }
+}
diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx
new file mode 100644
index 000000000..c7140a31b
--- /dev/null
+++ b/src/components/ListCard.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from "react"
+import Card from "./Card"
+import styles from "./ListCard.module.scss"
+
+const ListCard = ({ list }: { list: ReactNode[] }) => (
+ -
+ {list.map((item, index) => (
+
- + {item} + + ))} +
+
+)
+
+export default Loading
diff --git a/src/components/LoadingTitle.module.scss b/src/components/LoadingTitle.module.scss
new file mode 100644
index 000000000..a987a5c80
--- /dev/null
+++ b/src/components/LoadingTitle.module.scss
@@ -0,0 +1,9 @@
+@import "mixins";
+
+.wrapper {
+ @include flex(flex-start);
+}
+
+.loading {
+ margin-left: 10px;
+}
diff --git a/src/components/LoadingTitle.tsx b/src/components/LoadingTitle.tsx
new file mode 100644
index 000000000..6847c324c
--- /dev/null
+++ b/src/components/LoadingTitle.tsx
@@ -0,0 +1,19 @@
+import { FC } from "react"
+import classNames from "classnames"
+import Loading from "./Loading"
+import styles from "./LoadingTitle.module.scss"
+
+interface Props {
+ loading?: boolean
+ size?: number
+ className?: string
+}
+
+const LoadingTitle: FC
+ {children}
+ {loading &&
+)
+
+export default LoadingTitle
diff --git a/src/components/Menu.module.scss b/src/components/Menu.module.scss
new file mode 100644
index 000000000..8596717a0
--- /dev/null
+++ b/src/components/Menu.module.scss
@@ -0,0 +1,36 @@
+@import "mixins";
+@import "variables";
+
+$padding: 15px;
+
+.menu {
+ @include desktop {
+ @include flex;
+ }
+}
+
+.link {
+ @include link;
+ display: block;
+ font-weight: 500;
+
+ @include desktop {
+ padding: 0 $padding;
+ line-height: $nav-height;
+ }
+
+ @include mobile {
+ font-size: 24px;
+ line-height: 2;
+ }
+}
+
+.item {
+ .submenu {
+ display: none;
+ }
+
+ &:hover .submenu {
+ display: block;
+ }
+}
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
new file mode 100644
index 000000000..b872e6b07
--- /dev/null
+++ b/src/components/Menu.tsx
@@ -0,0 +1,27 @@
+import { NavLink } from "react-router-dom"
+import classNames from "classnames"
+import styles from "./Menu.module.scss"
+
+const Menu = ({ list }: { list: MenuItem[] }) => {
+ return (
+ -
+ {list.map(({ attrs, desktopOnly }) => {
+ return (
+
-
+
+
+ )
+ })}
+
{title}
+ {action &&} + + {sm ?
{stringify(children)}
+)
+
+export default Pre
+
+/* helpers */
+const stringify = (param: any) => {
+ try {
+ return JSON.stringify(param, null, 2)
+ } catch (error) {
+ return param
+ }
+}
diff --git a/src/components/PreLine.module.scss b/src/components/PreLine.module.scss
new file mode 100644
index 000000000..b37833bf2
--- /dev/null
+++ b/src/components/PreLine.module.scss
@@ -0,0 +1,3 @@
+.component {
+ white-space: pre-line;
+}
diff --git a/src/components/PreLine.tsx b/src/components/PreLine.tsx
new file mode 100644
index 000000000..74add40af
--- /dev/null
+++ b/src/components/PreLine.tsx
@@ -0,0 +1,11 @@
+import { FC, HTMLAttributes } from "react"
+import styles from "./PreLine.module.scss"
+
+type Props = HTMLAttributes+ {children} +
+) + +export default PreLine diff --git a/src/components/Progress.module.scss b/src/components/Progress.module.scss new file mode 100644 index 000000000..e0a245059 --- /dev/null +++ b/src/components/Progress.module.scss @@ -0,0 +1,90 @@ +@import "mixins"; +@import "variables"; + +.component { + user-select: none; +} + +.cursor { + cursor: crosshair; +} + +/* axis */ +$axis-height: 25px; +.axis { + position: relative; + height: $axis-height; +} + +.x { + position: absolute; + top: 0; + color: $slate; + font-size: 12px; + font-weight: 500; + height: $axis-height; + transform: translate(-50%, 0); + + &:after { + content: ""; + display: block; + width: 1px; + height: 5px; + background: $slate; + + position: absolute; + left: 50%; + bottom: 0; + } +} + +/* track */ +.track { + @include flex(flex-start, stretch); + background: $slate; + border-radius: 4px; + height: 8px; + overflow: hidden; +} + +.item { + @include transition; +} + +/* feedback */ +.feedback { + margin-top: 5px; +} + +.label { + font-size: 12px; + font-weight: 600; + text-transform: uppercase; +} + +/* feedback:ratio */ +.ratio { + @include transition; + transform: translate(-50%, 0); +} + +/* feedback:vote */ +.vote { + @include flex(space-between); +} + +.text { + text-align: center; + + &:first-child { + text-align: left; + } + + &:last-child { + text-align: right; + } +} + +.percent { + font-size: 16px; +} diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx new file mode 100644 index 000000000..7ec8b83a5 --- /dev/null +++ b/src/components/Progress.tsx @@ -0,0 +1,75 @@ +import { MouseEvent, ReactNode, useRef } from "react" +import classNames from "classnames/bind" +import { div } from "../libs/math" +import { percent } from "../libs/num" +import styles from "./Progress.module.scss" + +const cx = classNames.bind(styles) + +interface Item { + value: string + label?: string + color?: "blue" | "orange" | "red" +} + +interface Props { + data: Item[] + axis?: { x: string; label: ReactNode }[] + className?: string + onClick?: (x: string) => void + noLabel?: boolean +} + +const Progress = ({ data, axis, className, onClick, noLabel }: Props) => { + const componentRef = useRef
+ {axis && (
+
+ {data.map(({ value, label, color }, index) => (
+
+ )}
+
+ )
+}
+
+export default Progress
diff --git a/src/components/StakeDetailsHeader.module.scss b/src/components/StakeDetailsHeader.module.scss
new file mode 100644
index 000000000..143b1bcbb
--- /dev/null
+++ b/src/components/StakeDetailsHeader.module.scss
@@ -0,0 +1,24 @@
+@import "mixins";
+
+.wrapper {
+ @include flex(flex-start);
+
+ .title {
+ font-size: 20px;
+ font-weight: 500;
+ margin-left: 10px;
+ }
+}
+
+.center {
+ .title {
+ font-size: 16px;
+ font-weight: 600;
+ text-align: center;
+ margin-top: 10px;
+ }
+}
+
+.title {
+ color: white;
+}
diff --git a/src/components/StakeDetailsHeader.tsx b/src/components/StakeDetailsHeader.tsx
new file mode 100644
index 000000000..7a5ff2169
--- /dev/null
+++ b/src/components/StakeDetailsHeader.tsx
@@ -0,0 +1,17 @@
+import getLpName from "../libs/getLpName"
+import TokenPair from "./TokenPair"
+import styles from "./StakeDetailsHeader.module.scss"
+
+interface Props {
+ center?: boolean
+ children: string
+}
+
+const StakeDetailsHeader = ({ center, children: symbol }: Props) => (
+
+ {axis.map(({ x, label }, index) => (
+
+ )}
+
+
+ {label}
+
+ ))}
+
+ {data.map(({ value, color }, index) => (
+
+ ))}
+
+
+ {!noLabel && (
+
+ {label}
+
+ ))}
+
+
+)
+
+export default StakeDetailsHeader
diff --git a/src/components/StakeItemCard.module.scss b/src/components/StakeItemCard.module.scss
new file mode 100644
index 000000000..338bd181e
--- /dev/null
+++ b/src/components/StakeItemCard.module.scss
@@ -0,0 +1,87 @@
+@import "mixins";
+@import "variables";
+
+.component {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ position: relative;
+ height: 100%;
+}
+
+.action {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+}
+
+.main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+}
+
+.header {
+ @include flex;
+ margin-top: 10px;
+ margin-bottom: 30px;
+
+ &.to {
+ margin-left: 20px;
+ }
+}
+
+.heading {
+ $font-size: 16px;
+ color: white;
+ font-size: $font-size;
+ text-align: center;
+ height: ($font-size * $line-height);
+
+ &:empty {
+ background: white;
+ margin: 0 auto;
+ opacity: 0.1;
+ width: 50%;
+ }
+}
+
+/* stats */
+.stats {
+ border-top: $border;
+ padding-top: 20px;
+ padding-bottom: 10px;
+}
+
+.dd {
+ font-size: 16px;
+ font-weight: normal;
+}
+
+.vertical {
+ border-top: $border;
+ padding: 20px;
+}
+
+.item {
+ @include flex(space-between);
+ font-size: 12px;
+ margin-bottom: 5px;
+}
+
+.title {
+ color: fade-out(white, 0.6);
+ font-weight: 500;
+}
+
+.content {
+ color: $light;
+}
+
+/* emphasize */
+.emphasize {
+ border-color: fade-out($blue, 0.75);
+ box-shadow: 0 0 15px 0 fade-out($blue, 0.5);
+}
diff --git a/src/components/StakeItemCard.tsx b/src/components/StakeItemCard.tsx
new file mode 100644
index 000000000..78490c777
--- /dev/null
+++ b/src/components/StakeItemCard.tsx
@@ -0,0 +1,82 @@
+import { FC, ReactNode } from "react"
+import classNames from "classnames/bind"
+import { insertIf } from "../libs/utils"
+import getLpName from "../libs/getLpName"
+import Card from "./Card"
+import Icon from "./Icon"
+import TokenPair from "./TokenPair"
+import { DlFooter } from "./Dl"
+import styles from "./StakeItemCard.module.scss"
+
+const cx = classNames.bind(styles)
+
+export interface Props {
+ token: string
+ symbol: string
+ name?: string
+
+ staked: boolean
+ stakable: boolean
+
+ apr: ReactNode
+ totalStaked: ReactNode
+ price?: ReactNode
+
+ to?: string
+ action?: ReactNode
+ emphasize?: boolean
+}
+
+const StakeItemCard: FC{getLpName(symbol)}
+
+
+
+
+ {price ? (
+
+ {stats.map(({ title, content }) => (
+
+
+ ))}
+
+ ) : (
+
+
+ {children}
+ {name ?? getLpName(symbol)}
+ {to &&{title}
+{content}
+
+ {children}
+
+
+ {footer && }
+ {title}
+
+
+
+ {colspan && (
+
+
+ )
+}
+
+export default Table
diff --git a/src/components/TokenPair.module.scss b/src/components/TokenPair.module.scss
new file mode 100644
index 000000000..5556efc51
--- /dev/null
+++ b/src/components/TokenPair.module.scss
@@ -0,0 +1,28 @@
+@import "mixins";
+@import "variables";
+
+.images {
+ @include flex;
+
+ .fill,
+ .outline {
+ @include flex;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ }
+
+ .fill {
+ z-index: 1;
+ }
+
+ .outline {
+ border: 1px solid $battleship;
+ margin-left: -10px;
+ z-index: 0;
+ }
+}
+
+.text {
+ font-size: 11px;
+}
diff --git a/src/components/TokenPair.tsx b/src/components/TokenPair.tsx
new file mode 100644
index 000000000..d80c7ea5b
--- /dev/null
+++ b/src/components/TokenPair.tsx
@@ -0,0 +1,26 @@
+import classNames from "classnames"
+import styles from "./TokenPair.module.scss"
+
+interface Props {
+ symbol: string
+ bg?: string
+}
+
+const ICON_SIZE = { width: 25, height: 25 }
+const ICON_URL = "https://whitelist.mirror.finance/images"
+export const getIcon = (symbol: string) =>
+ `${ICON_URL}/${symbol.startsWith("m") ? symbol.slice(1) : symbol}.png`
+
+const TokenPair = ({ symbol, bg = "bg" }: Props) => (
+ | + {render?.(value, record, index) ?? value} + | + ) + } + + return ( +
+ })
+
+
+
+ ![]({getIcon("UST")})
+
+
+ {children}
+
+)
+
+export default Tooltip
diff --git a/src/components/TxLink.module.scss b/src/components/TxLink.module.scss
new file mode 100644
index 000000000..7d8a82d38
--- /dev/null
+++ b/src/components/TxLink.module.scss
@@ -0,0 +1,6 @@
+@import "mixins";
+
+.link {
+ @include link(inherit, inherit);
+ text-decoration: underline;
+}
diff --git a/src/components/TxLink.tsx b/src/components/TxLink.tsx
new file mode 100644
index 000000000..e43fae668
--- /dev/null
+++ b/src/components/TxLink.tsx
@@ -0,0 +1,11 @@
+import { truncate } from "../libs/text"
+import ExtLink from "./ExtLink"
+import styles from "./TxLink.module.scss"
+
+const TxLink = ({ hash, link }: { hash: string; link: string }) => (
+
+
+
+
+ {hash}
}
+
+ {status === STATUS.FAILURE ? (
+ {children}
+ ) : ( + children + )} +
+
+
+ {list.map(({ title, content }) => (
+
+
+ )
+}
+
+export default ContractError
+
+/* hook */
+export const useParseContractError = (message: string) => {
+ const { contracts, getSymbol } = useContractsAddress()
+ const { address } = useWallet()
+ const getURL = useURL()
+
+ try {
+ const [, path1] = message.split("wasm/contracts/")
+ const [contractAddress, path2] = path1.split("/store?query_msg=")
+ const [query_msg, error] = path2.split(": ")
+ const url = getURL(contractAddress, query_msg)
+ const link = | {title} | +{content} | +
|---|
{message}
+ ) : (
+ {children}
+ )
+ }
+
+ return dataOnly || (data && !(loading && loadingFirst))
+ ? render()
+ : loading
+ ? renderLoading()
+ : error
+ ? renderError(error)
+ : null
+}
+
+export default WithResult
diff --git a/src/forms/AirdropForm.tsx b/src/forms/AirdropForm.tsx
new file mode 100644
index 000000000..438d07d22
--- /dev/null
+++ b/src/forms/AirdropForm.tsx
@@ -0,0 +1,43 @@
+import { gt } from "../libs/math"
+import useNewContractMsg from "../terra/useNewContractMsg"
+import { MIR } from "../constants"
+import { formatAsset } from "../libs/parse"
+import { useContractsAddress } from "../hooks"
+import useAirdrops from "../statistics/useAirdrops"
+import FormContainer from "./FormContainer"
+
+const AirdropForm = () => {
+ /* context */
+ const { airdrop, loading, amount } = useAirdrops()
+ const { contracts } = useContractsAddress()
+
+ /* confirm */
+ const contents = !airdrop?.length
+ ? undefined
+ : [{ title: "Amount", content: formatAsset(amount, MIR) }]
+
+ /* submit */
+ const newContractMsg = useNewContractMsg()
+ const data =
+ airdrop?.map(({ amount, proof, stage }) =>
+ newContractMsg(contracts["airdrop"], {
+ claim: { amount, stage, proof: JSON.parse(proof) },
+ })
+ ) ?? []
+
+ const messages =
+ !loading && !airdrop?.length ? ["Airdrop not found"] : undefined
+ const disabled = !gt(amount, 0)
+
+ /* result */
+ const parseTx = undefined
+ const container = { contents, messages, disabled, data, parseTx }
+ const props = {
+ tab: { tabs: ["Airdrop"], current: "Airdrop" },
+ label: "Claim",
+ }
+
+ return + {formatTokenName?.(symbol) ?? lookupSymbol(symbol)} +
+ + {name !== UST &&{name}
} +
+
+
+
+ setValue(e.target.value)}
+ autoComplete="off"
+ autoFocus
+ />
+
+
+
+ )
+}
+
+export default Assets
diff --git a/src/forms/AuctionForm.tsx b/src/forms/AuctionForm.tsx
new file mode 100644
index 000000000..32eb833cc
--- /dev/null
+++ b/src/forms/AuctionForm.tsx
@@ -0,0 +1,37 @@
+import useNewContractMsg from "../terra/useNewContractMsg"
+import { formatAsset } from "../libs/parse"
+import { toBase64 } from "../libs/formHelpers"
+import { useContractsAddress } from "../hooks"
+import FormContainer from "./FormContainer"
+
+interface Props {
+ idx: string
+ position: MintPosition
+}
+
+const AuctionForm = ({ idx, position }: Props) => {
+ const { contracts, getSymbol, parseToken } = useContractsAddress()
+ const { amount, token } = parseToken(position.asset)
+ const symbol = getSymbol(token)
+
+ /* confirm */
+ const contents = [
+ { title: "ID", content: idx },
+ { title: "Amount", content: formatAsset(amount, symbol) },
+ ]
+
+ /* submit */
+ const newContractMsg = useNewContractMsg()
+ const auction = { auction: { position_idx: idx } }
+
+ const data = [
+ newContractMsg(token, {
+ send: { contract: contracts["mint"], amount, msg: toBase64(auction) },
+ }),
+ ]
+
+ const container = { contents, data, label: "Auction" }
+ return -
+ {list
+ .filter(({ symbol, name }) =>
+ // search result
+ [symbol, name].some((text) =>
+ text.toLowerCase().includes(value.toLowerCase())
+ )
+ )
+ .sort(({ token: a }, { token: b }) => {
+ const hasA = balanceKey && gt(find(balanceKey, a), 0) ? 1 : 0
+ const hasB = balanceKey && gt(find(balanceKey, b), 0) ? 1 : 0
+ return hasB - hasA
+ })
+ .map((item) => {
+ const { token, price } = item
+ const isSelected = token === selected
+
+ return (
+
- + + + ) + })} +
{introduction}
+ +-
+ {body.map(({ title, content }, index) => (
+
-
+
+ ++ {index + 1}. {title} +
+{content}
+
+ ))}
+
{conclusion}
+ + + + +