Blocked address
18 | }
19 | return <>{children}
20 | }
21 |
--------------------------------------------------------------------------------
/client/src/components/Column/index.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components/macro"
2 |
3 | const Column = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: flex-start;
7 | `
8 | export const ColumnCenter = styled(Column)`
9 | width: 100%;
10 | align-items: center;
11 | `
12 |
13 | export const AutoColumn = styled.div<{
14 | gap?: "sm" | "md" | "lg" | string
15 | justify?: "stretch" | "center" | "start" | "end" | "flex-start" | "flex-end" | "space-between"
16 | }>`
17 | display: grid;
18 | grid-auto-rows: auto;
19 | grid-row-gap: ${({ gap }) => (gap === "sm" && "8px") || (gap === "md" && "12px") || (gap === "lg" && "24px") || gap};
20 | justify-items: ${({ justify }) => justify && justify};
21 | `
22 |
23 | export default Column
24 |
--------------------------------------------------------------------------------
/client/src/components/Common/styled.ts:
--------------------------------------------------------------------------------
1 | import styled from "styled-components"
2 | import { AutoColumn } from "../Column"
3 |
4 | import uImage from "../../assets/images/big_unicorn.png"
5 | import xlUnicorn from "../../assets/images/xl_uni.png"
6 | import noise from "../../assets/images/noise.png"
7 |
8 | export const TextBox = styled.div`
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | padding: 4px 12px;
13 | border: 1px solid rgba(255, 255, 255, 0.4);
14 | border-radius: 20px;
15 | width: fit-content;
16 | justify-self: flex-end;
17 | `
18 |
19 | export const DataCard = styled(AutoColumn)<{ disabled?: boolean }>`
20 | border-radius: 12px;
21 | width: 100%;
22 | position: relative;
23 | overflow: hidden;
24 | `
25 |
26 | export const CardBGImage = styled.span<{ desaturate?: boolean }>`
27 | background: url(${uImage});
28 | width: 1000px;
29 | height: 600px;
30 | position: absolute;
31 | border-radius: 12px;
32 | opacity: 0.4;
33 | top: -100px;
34 | left: -100px;
35 | transform: rotate(-15deg);
36 | user-select: none;
37 |
38 | ${({ desaturate }) => desaturate && `filter: saturate(0)`}
39 | `
40 |
41 | export const CardBGImageSmaller = styled.span<{ desaturate?: boolean }>`
42 | background: url(${xlUnicorn});
43 | width: 1200px;
44 | height: 1200px;
45 | position: absolute;
46 | border-radius: 12px;
47 | top: -300px;
48 | left: -300px;
49 | opacity: 0.4;
50 | user-select: none;
51 |
52 | ${({ desaturate }) => desaturate && `filter: saturate(0)`}
53 | `
54 |
55 | export const CardNoise = styled.span`
56 | background: url(${noise});
57 | background-size: cover;
58 | mix-blend-mode: overlay;
59 | border-radius: 12px;
60 | width: 100%;
61 | height: 100%;
62 | opacity: 0.15;
63 | position: absolute;
64 | top: 0;
65 | left: 0;
66 | user-select: none;
67 | `
68 |
69 | export const CardSection = styled(AutoColumn)<{ disabled?: boolean }>`
70 | padding: 1rem;
71 | z-index: 1;
72 | opacity: ${({ disabled }) => disabled && "0.4"};
73 | `
74 |
75 | export const Break = styled.div`
76 | width: 100%;
77 | background-color: rgba(255, 255, 255, 0.2);
78 | height: 1px;
79 | `
80 |
--------------------------------------------------------------------------------
/client/src/components/Confetti/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactConfetti from "react-confetti"
3 | import { useWindowSize } from "../../hooks/useWindowSize"
4 |
5 | // eslint-disable-next-line react/prop-types
6 | export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {
7 | const { width, height } = useWindowSize()
8 |
9 | const _variant = variant ? variant : height && width && height > 1.5 * width ? "bottom" : variant
10 |
11 | return start && width && height ? (
12 |
32 |
35 | app.trojan.finance
34 |
40 |
44 | app.trojan.finance - bookmark
42 | it to be safe.
43 |
31 | {success ?
33 |
27 |
28 |
29 | {isSorted ? currencyA.symbol + " price " : currencyB.symbol + " price "}
30 |
31 |
32 | {isSorted ? currencyB.symbol + " price " : currencyA.symbol + " price "}
33 |
34 |
35 |
36 | ) : null
37 | }
38 |
--------------------------------------------------------------------------------
/client/src/components/Row/index.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components/macro"
2 | import { Box } from "rebass/styled-components"
3 |
4 | const Row = styled(Box)<{
5 | width?: string
6 | align?: string
7 | justify?: string
8 | padding?: string
9 | border?: string
10 | borderRadius?: string
11 | }>`
12 | width: ${({ width }) => width ?? "100%"};
13 | display: flex;
14 | padding: 0;
15 | align-items: ${({ align }) => align ?? "center"};
16 | justify-content: ${({ justify }) => justify ?? "flex-start"};
17 | padding: ${({ padding }) => padding};
18 | border: ${({ border }) => border};
19 | border-radius: ${({ borderRadius }) => borderRadius};
20 | `
21 |
22 | export const RowBetween = styled(Row)`
23 | justify-content: space-between;
24 | `
25 |
26 | export const RowFlat = styled.div`
27 | display: flex;
28 | align-items: flex-end;
29 | `
30 |
31 | export const AutoRow = styled(Row)<{ gap?: string; justify?: string }>`
32 | flex-wrap: wrap;
33 | margin: ${({ gap }) => gap && `-${gap}`};
34 | justify-content: ${({ justify }) => justify && justify};
35 |
36 | & > * {
37 | margin: ${({ gap }) => gap} !important;
38 | }
39 | `
40 |
41 | export const RowFixed = styled(Row)<{ gap?: string; justify?: string }>`
42 | width: fit-content;
43 | margin: ${({ gap }) => gap && `-${gap}`};
44 | `
45 |
46 | export default Row
47 |
--------------------------------------------------------------------------------
/client/src/components/SearchModal/SortButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Text } from "rebass"
3 | import styled from "styled-components/macro"
4 | import { RowFixed } from "../Row"
5 |
6 | export const FilterWrapper = styled(RowFixed)`
7 | padding: 8px;
8 | background-color: ${({ theme }) => theme.bg2};
9 | color: ${({ theme }) => theme.text1};
10 | border-radius: 8px;
11 | user-select: none;
12 | & > * {
13 | user-select: none;
14 | }
15 | :hover {
16 | cursor: pointer;
17 | }
18 | `
19 |
20 | export default function SortButton({
21 | toggleSortOrder,
22 | ascending,
23 | }: {
24 | toggleSortOrder: () => void
25 | ascending: boolean
26 | }) {
27 | return (
28 | {key}
32 | {value}
33 |
20 |
22 | ),
23 | ],
24 | }
25 |
26 | export const MultiToggleExample = () => {
27 | const [active, setActive] = useState(0)
28 |
29 | function doSomethingWithIndex(index: number) {
30 | // here's where youd update state based on index choice
31 | // switch(index){} ...
32 | setActive(index)
33 | }
34 | return
35 | {children}
36 |
37 |
52 | {children}
53 |
54 |
45 |
46 | {text}
47 |
48 |
49 |