10 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 | - name: Polygon zkEVM Docs
4 | url: https://docs.hermez.io
5 | about: Official Polygon zkEVM Documentation
6 | - name: Telegram Group
7 | url: https://t.me/PolygonHermezChat
8 | about: Official Polygon zkEVM Telegram Group
9 | - name: Discord Community
10 | url: https://discord.gg/0xPolygon
11 | about: Official Polygon zkEVM Discord Community
12 |
--------------------------------------------------------------------------------
/src/utils/browser.ts:
--------------------------------------------------------------------------------
1 | function copyToClipboard(text: string): void {
2 | const textArea = document.createElement("textarea");
3 |
4 | textArea.value = text;
5 | textArea.style.position = "fixed";
6 | textArea.style.opacity = "0";
7 | document.body.appendChild(textArea);
8 | textArea.focus();
9 | textArea.select();
10 | document.execCommand("copy");
11 | document.body.removeChild(textArea);
12 | }
13 |
14 | export { copyToClipboard };
15 |
--------------------------------------------------------------------------------
/src/views/shared/error-message/error-message.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useErrorMessageStyles = createUseStyles((theme: Theme) => ({
6 | error: {
7 | color: theme.palette.error.main,
8 | lineHeight: "26px",
9 | textAlign: "center",
10 | whiteSpace: "break-spaces",
11 | },
12 | errorWrapper: {
13 | textAlign: "center",
14 | },
15 | }));
16 |
--------------------------------------------------------------------------------
/src/assets/icons/arrow-down.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/hooks/use-debounce.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useDebounce
15 | {children}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/views/shared/info-banner/info-banner.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useInfoBannerStyles = createUseStyles((theme: Theme) => ({
6 | infoBanner: {
7 | background: theme.palette.grey.main,
8 | borderRadius: "8px",
9 | display: "flex",
10 | gap: theme.spacing(1),
11 | maxWidth: theme.maxWidth,
12 | padding: theme.spacing(2),
13 | width: "100%",
14 | },
15 | message: {
16 | color: theme.palette.black,
17 | },
18 | }));
19 |
--------------------------------------------------------------------------------
/src/views/shared/external-link/external-link.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren } from "react";
2 |
3 | import { useExternalLinkStyles } from "src/views/shared/external-link/external-link.styles";
4 |
5 | interface ExternalLinkProps {
6 | href: string;
7 | }
8 |
9 | export const ExternalLink: FC
12 | Approval is needed once per token
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/views/home/components/token-selector/token-selector.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useTokenSelectorStyles = createUseStyles((theme: Theme) => ({
6 | background: {
7 | alignItems: "center",
8 | background: theme.palette.transparency,
9 | display: "flex",
10 | height: "100vh",
11 | justifyContent: "center",
12 | padding: [0, theme.spacing(1)],
13 | width: "100%",
14 | },
15 | card: {
16 | display: "flex",
17 | flexDirection: "column",
18 | height: 515,
19 | maxWidth: 500,
20 | padding: theme.spacing(2),
21 | width: "100%",
22 | },
23 | }));
24 |
--------------------------------------------------------------------------------
/src/views/shared/icon/icon.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | import { useIconStyles } from "src/views/shared/icon/icon.styles";
4 |
5 | interface IconProps {
6 | className?: string;
7 | isRounded?: boolean;
8 | size?: number;
9 | url: string;
10 | }
11 |
12 | export const Icon: FC
17 | 
18 |
19 | ) : (
20 |
17 |
19 | {message}
20 |
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/assets/icons/clock.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/icons/currencies/cny.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/views/login/components/wallet-icon/wallet-icon.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | interface WalletIconStylesProps {
6 | size: "sm" | "lg";
7 | }
8 |
9 | export const useWalletIconStyles = createUseStyles((theme: Theme) => ({
10 | metaMaskIcon: {
11 | background: "#fbe6df",
12 | },
13 | walletConnectIcon: {
14 | background: "#e2f0ff",
15 | },
16 | walletIcon: ({ size }: WalletIconStylesProps) => ({
17 | alignItems: "center",
18 | borderRadius: "50%",
19 | display: "flex",
20 | height: size === "sm" ? theme.spacing(6) : theme.spacing(7.5),
21 | justifyContent: "center",
22 | padding: theme.spacing(1),
23 | width: size === "sm" ? theme.spacing(6) : theme.spacing(7.5),
24 | }),
25 | }));
26 |
--------------------------------------------------------------------------------
/src/assets/icons/tokens/erc20-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/shared/portal/portal.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren, useLayoutEffect } from "react";
2 | import { createPortal } from "react-dom";
3 |
4 | import { usePortalStyles } from "src/views/shared/portal/portal.styles";
5 |
6 | export const Portal: FC
16 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/routes.ts:
--------------------------------------------------------------------------------
1 | export type RouteId =
2 | | "activity"
3 | | "bridgeConfirmation"
4 | | "bridgeDetails"
5 | | "home"
6 | | "login"
7 | | "networkError"
8 | | "settings";
9 |
10 | export const routes: {
11 | [P in RouteId]: {
12 | id: P;
13 | isPrivate: boolean;
14 | path: string;
15 | };
16 | } = {
17 | activity: {
18 | id: "activity",
19 | isPrivate: true,
20 | path: "/activity",
21 | },
22 | bridgeConfirmation: {
23 | id: "bridgeConfirmation",
24 | isPrivate: true,
25 | path: "/bridge-confirmation",
26 | },
27 | bridgeDetails: {
28 | id: "bridgeDetails",
29 | isPrivate: true,
30 | path: "/bridge-details/:bridgeId",
31 | },
32 | home: {
33 | id: "home",
34 | isPrivate: true,
35 | path: "/",
36 | },
37 | login: {
38 | id: "login",
39 | isPrivate: false,
40 | path: "/login",
41 | },
42 | networkError: {
43 | id: "networkError",
44 | isPrivate: false,
45 | path: "/network-error",
46 | },
47 | settings: {
48 | id: "settings",
49 | isPrivate: true,
50 | path: "/settings",
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/src/assets/icons/error.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/bridge-details/components/chain/chain.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | import { ReactComponent as EthChainIcon } from "src/assets/icons/chains/ethereum.svg";
4 | import { ReactComponent as PolygonZkEVMChainIcon } from "src/assets/icons/chains/polygon-zkevm.svg";
5 | import * as domain from "src/domain";
6 | import { useChainStyles } from "src/views/bridge-details/components/chain/chain.styles";
7 | import { Typography } from "src/views/shared/typography/typography.view";
8 |
9 | interface ChainProps {
10 | chain: domain.Chain;
11 | className?: string;
12 | }
13 |
14 | export const Chain: FC
21 |
23 | );
24 | }
25 | case WalletName.WALLET_CONNECT: {
26 | return (
27 |
28 |
30 | );
31 | }
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/src/views/home/components/text-match-form/text-match-form.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useTextMatchFormStyles = createUseStyles((theme: Theme) => ({
6 | checkbox: {
7 | height: 18,
8 | width: 18,
9 | },
10 | checkboxLabel: {
11 | userSelect: "none",
12 | },
13 | checkboxWrapper: {
14 | alignItems: "center",
15 | display: "flex",
16 | gap: theme.spacing(1.5),
17 | marginBottom: theme.spacing(4),
18 | },
19 | form: {
20 | display: "flex",
21 | flexDirection: "column",
22 | width: "100%",
23 | },
24 | input: {
25 | "&:focus": {
26 | borderColor: theme.palette.black,
27 | outline: "none",
28 | },
29 | "&:hover": {
30 | borderColor: theme.palette.black,
31 | },
32 | appearance: "none",
33 | borderColor: theme.palette.grey.dark,
34 | borderRadius: 8,
35 | borderStyle: "solid",
36 | fontSize: 18,
37 | fontWeight: 500,
38 | marginBottom: theme.spacing(3),
39 | marginTop: theme.spacing(1),
40 | padding: [theme.spacing(1.5), theme.spacing(1.75)],
41 | transition: theme.hoverTransition,
42 | },
43 | }));
44 |
--------------------------------------------------------------------------------
/src/utils/time.ts:
--------------------------------------------------------------------------------
1 | interface TimeFromNowParams {
2 | timestamp: number;
3 | }
4 |
5 | export const getTimeFromNow = ({ timestamp }: TimeFromNowParams): string => {
6 | const day = 24 * 60 * 60 * 1000;
7 | const now = Date.now();
8 | const diff = now - timestamp;
9 | if (diff > day) {
10 | return formatDate({ timestamp });
11 | } else {
12 | const seconds = Math.floor(diff / 1000);
13 | if (seconds < 60) {
14 | return `${seconds}s ago`;
15 | } else if (seconds < 3600) {
16 | const minutes = Math.floor(seconds / 60);
17 | return `${minutes}m ago`;
18 | } else if (seconds < 86400) {
19 | const hours = Math.floor(seconds / 3600);
20 | return `${hours}h ago`;
21 | } else {
22 | const days = Math.floor(seconds / 86400);
23 | return `${days}d ago`;
24 | }
25 | }
26 | };
27 |
28 | interface FormatDateParams {
29 | timestamp: number;
30 | }
31 |
32 | export const formatDate = ({ timestamp }: FormatDateParams): string => {
33 | const date = new Date(timestamp);
34 | return date.toLocaleDateString(undefined, {
35 | day: "numeric",
36 | hour: "numeric",
37 | minute: "numeric",
38 | month: "short",
39 | weekday: "short",
40 | year: "numeric",
41 | });
42 | };
43 |
--------------------------------------------------------------------------------
/src/views/home/components/token-adder/token-adder.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useTokenAdderStyles = createUseStyles((theme: Theme) => ({
6 | addTokenButton: {
7 | "&:hover": {
8 | backgroundColor: theme.palette.primary.dark,
9 | },
10 | backgroundColor: theme.palette.primary.main,
11 | border: "none",
12 | borderRadius: 80,
13 | color: theme.palette.white,
14 | cursor: "pointer",
15 | fontSize: "20px",
16 | lineHeight: "24px",
17 | padding: theme.spacing(2),
18 | transition: theme.hoverTransition,
19 | },
20 | disclaimerBox: {
21 | alignItems: "center",
22 | backgroundColor: theme.palette.grey.light,
23 | borderRadius: 8,
24 | display: "flex",
25 | marginTop: theme.spacing(2),
26 | padding: theme.spacing(2),
27 | },
28 | disclaimerBoxMessage: {
29 | color: theme.palette.grey.dark,
30 | },
31 | disclaimerBoxWarningIcon: {
32 | marginRight: theme.spacing(1),
33 | },
34 | tokenAdder: {
35 | display: "flex",
36 | flex: 1,
37 | flexDirection: "column",
38 | },
39 | tokenInfoTable: {
40 | flex: 1,
41 | marginTop: theme.spacing(3),
42 | },
43 | }));
44 |
--------------------------------------------------------------------------------
/src/views/home/components/token-selector-header/token-selector-header.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 |
3 | import { ReactComponent as ArrowLeftIcon } from "src/assets/icons/arrow-left.svg";
4 | import { ReactComponent as XMarkIcon } from "src/assets/icons/xmark.svg";
5 | import { useTokenSelectorHeaderStyles } from "src/views/home/components/token-selector-header/token-selector-header.styles";
6 | import { Typography } from "src/views/shared/typography/typography.view";
7 |
8 | interface TokenSelectorHeaderProps {
9 | onClose?: () => void;
10 | onGoBack?: () => void;
11 | title: string;
12 | }
13 |
14 | export const TokenSelectorHeader: FC
19 | {onGoBack && (
20 |
23 | )}
24 | {title}
25 | {onClose && (
26 |
29 | )}
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/contexts/error.context.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren, createContext, useCallback, useContext, useMemo } from "react";
2 |
3 | import { parseError } from "src/adapters/error";
4 | import { useUIContext } from "src/contexts/ui.context";
5 |
6 | interface ErrorContext {
7 | notifyError: (error: unknown) => void;
8 | }
9 |
10 | const errorContextNotReadyErrorMsg = "The error context is not yet ready";
11 |
12 | const errorContextDefaultValue: ErrorContext = {
13 | notifyError: () => {
14 | console.error(errorContextNotReadyErrorMsg);
15 | },
16 | };
17 |
18 | const errorContext = createContext-
18 |
- onSelectWallet(WalletName.METAMASK)}
21 | role="button"
22 | >
23 |
24 | 25 |30 |26 | {WalletName.METAMASK} 27 | 28 |Connect using web wallet 29 |31 |
32 |
24 |
36 | {Subtitle &&
25 |
26 |
29 |
30 | {title}
31 |
32 |
33 |
35 | {Subtitle}
}
37 |
21 | {token.symbol}
23 |
24 | );
25 |
26 | if (!token.balance) {
27 | return loader;
28 | }
29 |
30 | switch (token.balance.status) {
31 | case "pending":
32 | case "loading":
33 | case "reloading": {
34 | return loader;
35 | }
36 | case "successful":
37 | case "failed": {
38 | const formattedTokenAmount = formatTokenAmount(
39 | isAsyncTaskDataAvailable(token.balance) ? token.balance.data : BigNumber.from(0),
40 | token
41 | );
42 |
43 | return (
44 |
32 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/views/home/components/token-adder/token-adder.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react";
2 | import { ReactComponent as WarningIcon } from "src/assets/icons/warning.svg";
3 | import { Token } from "src/domain";
4 | import { useTokenAdderStyles } from "src/views/home/components/token-adder/token-adder.styles";
5 |
6 | import { TokenInfoTable } from "src/views/home/components/token-info-table/token-info-table.view";
7 | import { TokenSelectorHeader } from "src/views/home/components/token-selector-header/token-selector-header.view";
8 | import { Typography } from "src/views/shared/typography/typography.view";
9 |
10 | interface TokenAdderProps {
11 | onAddToken: (token: Token) => void;
12 | onClose: () => void;
13 | onNavigateToTokenList: () => void;
14 | token: Token;
15 | }
16 |
17 | export const TokenAdder: FC
27 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/assets/icons/chains/polygon-zkevm.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/views/shared/header/header.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useHeaderStyles = createUseStyles((theme: Theme) => ({
6 | block: {
7 | display: "flex",
8 | flex: 1,
9 | gap: theme.spacing(0.75),
10 | },
11 | bottomRow: {
12 | marginTop: theme.spacing(1.25),
13 | },
14 | centerBlock: {
15 | justifyContent: "center",
16 | },
17 | header: {
18 | alignItems: "center",
19 | display: "flex",
20 | flexDirection: "column",
21 | justifyContent: "center",
22 | margin: [theme.spacing(1.5), "auto", 0],
23 | position: "relative",
24 | width: "100%",
25 | [theme.breakpoints.upSm]: {
26 | margin: [theme.spacing(3), "auto", 0],
27 | },
28 | },
29 | icon: {
30 | height: theme.spacing(2),
31 | width: theme.spacing(2),
32 | [theme.breakpoints.upSm]: {
33 | height: theme.spacing(2.5),
34 | width: theme.spacing(2.5),
35 | },
36 | },
37 | leftBlock: {
38 | justifyContent: "left",
39 | },
40 | rightBlock: {
41 | justifyContent: "end",
42 | },
43 | sideButton: {
44 | "&:hover": {
45 | backgroundColor: theme.palette.grey.main,
46 | },
47 | alignItems: "center",
48 | backgroundColor: theme.palette.white,
49 | borderRadius: 50,
50 | cursor: "pointer ",
51 | display: "flex",
52 | justifyContent: "center",
53 | padding: theme.spacing(1),
54 | transition: theme.hoverTransition,
55 | [theme.breakpoints.upSm]: {
56 | padding: theme.spacing(1.25),
57 | },
58 | },
59 | topRow: {
60 | alignItems: "center",
61 | display: "flex",
62 | justifyContent: "center",
63 | width: "100%",
64 | },
65 | }));
66 |
--------------------------------------------------------------------------------
/src/utils/labels.ts:
--------------------------------------------------------------------------------
1 | import { Bridge, Chain, Currency, EthereumChainId } from "src/domain";
2 |
3 | export function getBridgeStatus(status: Bridge["status"], from: Bridge["from"]): string {
4 | switch (status) {
5 | case "pending": {
6 | return "Processing";
7 | }
8 | case "initiated": {
9 | if (from.key === "ethereum") {
10 | return "Processing";
11 | } else {
12 | return "Initiated";
13 | }
14 | }
15 | case "on-hold": {
16 | if (from.key === "ethereum") {
17 | return "Processing";
18 | } else {
19 | return "On Hold";
20 | }
21 | }
22 | case "completed": {
23 | return "Completed";
24 | }
25 | }
26 | }
27 |
28 | export function getEthereumNetworkName(chainId: number): string {
29 | switch (chainId) {
30 | case EthereumChainId.GOERLI: {
31 | return "Goerli Testnet";
32 | }
33 | default: {
34 | return "Ethereum";
35 | }
36 | }
37 | }
38 |
39 | export function getDeploymentName(chain: Chain): string | undefined {
40 | switch (chain.chainId) {
41 | case EthereumChainId.MAINNET: {
42 | return "Mainnet Beta";
43 | }
44 | case EthereumChainId.GOERLI: {
45 | return "Testnet";
46 | }
47 | default: {
48 | return undefined;
49 | }
50 | }
51 | }
52 |
53 | type CurrencySymbol = "€" | "$" | "¥" | "£";
54 |
55 | export function getCurrencySymbol(currency: Currency): CurrencySymbol {
56 | switch (currency) {
57 | case Currency.EUR: {
58 | return "€";
59 | }
60 | case Currency.USD: {
61 | return "$";
62 | }
63 | case Currency.GBP: {
64 | return "£";
65 | }
66 | case Currency.JPY:
67 | case Currency.CNY: {
68 | return "¥";
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/views/shared/confirmation-modal/confirmation-modal.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC, MouseEvent, ReactNode } from "react";
2 | import { Button } from "src/views/shared/button/button.view";
3 |
4 | import { Card } from "src/views/shared/card/card.view";
5 | import { useConfirmationModalStyles } from "src/views/shared/confirmation-modal/confirmation-modal.styles";
6 | import { Portal } from "src/views/shared/portal/portal.view";
7 | import { Typography } from "src/views/shared/typography/typography.view";
8 |
9 | interface ConfirmationModalProps {
10 | message: ReactNode;
11 | onClose: () => void;
12 | onConfirm: () => void;
13 | showCancelButton?: boolean;
14 | title?: string;
15 | }
16 |
17 | export const ConfirmationModal: FC
29 |
31 | Interact carefully with any new or suspicious token
32 |
33 |
34 |
35 |
36 | {title && (
37 |
38 | {title}
39 |
40 | )}
41 |
49 |
50 | {message}
42 |
43 | {showCancelButton && (
44 |
47 | )}
48 |
29 |
30 |
45 |
46 |
31 | Select chain
32 |
35 |
36 |
37 | {chains.map((chain) => (
38 |
42 | ))}
43 |
44 |
25 | {areSettingsVisible(env) && (
26 |
27 |
33 | Activity
34 |
35 |
36 |
37 |
38 |
40 |
41 |
43 |
28 |
42 | ) : (
43 |
30 | Network Error
31 |
32 | {parsedProviderError.data === ProviderError.Ethereum
33 | ? "We cannot connect to the Ethereum node."
34 | : "We cannot connect to the Polygon zkEVM node."}
35 |
36 | It will be operative again soon
37 |
38 |
41 |
57 | {children}
58 | {isLoading && (
59 |
64 | );
65 | };
66 |
--------------------------------------------------------------------------------
/src/views/activity/activity.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useActivityStyles = createUseStyles((theme: Theme) => ({
6 | bridgeCardwrapper: {
7 | "&:not(:last-child)": {
8 | marginBottom: theme.spacing(2),
9 | },
10 | },
11 | contentWrapper: {
12 | display: "flex",
13 | flex: 1,
14 | flexDirection: "column",
15 | padding: [0, theme.spacing(2)],
16 | },
17 | emptyMessage: {
18 | alignSelf: "center",
19 | maxWidth: theme.maxWidth,
20 | padding: [50, theme.spacing(2)],
21 | textAlign: "center",
22 | width: "100%",
23 | [theme.breakpoints.upSm]: {
24 | padding: 100,
25 | },
26 | },
27 | filterBox: {
28 | "&:not(:first-of-type)": {
29 | marginLeft: theme.spacing(2),
30 | },
31 | alignItems: "center",
32 | backgroundColor: "transparent",
33 | borderRadius: 8,
34 | cursor: "pointer",
35 | display: "flex",
36 | padding: [[theme.spacing(0.75), theme.spacing(1)]],
37 | transition: theme.hoverTransition,
38 | },
39 | filterBoxes: {
40 | display: "flex",
41 | margin: [theme.spacing(5), "auto", theme.spacing(2)],
42 | maxWidth: theme.maxWidth,
43 | width: "100%",
44 | },
45 | filterBoxLabel: {
46 | padding: [theme.spacing(0), theme.spacing(1)],
47 | },
48 | filterBoxSelected: {
49 | backgroundColor: theme.palette.white,
50 | color: theme.palette.grey.dark,
51 | },
52 | filterNumberBox: {
53 | alignItems: "center",
54 | backgroundColor: theme.palette.grey.main,
55 | borderRadius: 6,
56 | display: "flex",
57 | padding: [theme.spacing(0.25), theme.spacing(1)],
58 | },
59 | filterNumberBoxSelected: {
60 | backgroundColor: theme.palette.grey.light,
61 | },
62 | stickyContent: {
63 | background: theme.palette.grey.light,
64 | position: "sticky",
65 | top: 0,
66 | zIndex: 1,
67 | },
68 | stickyContentBorder: {
69 | borderBottom: `${theme.palette.grey.main} 1px solid`,
70 | },
71 | }));
72 |
--------------------------------------------------------------------------------
/src/views/core/router/router.view.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType, FC } from "react";
2 | import { Navigate, Route, Routes } from "react-router-dom";
3 |
4 | import { useEnvContext } from "src/contexts/env.context";
5 | import { RouteId, routes } from "src/routes";
6 | import { areSettingsVisible } from "src/utils/feature-toggles";
7 | import { Activity } from "src/views/activity/activity.view";
8 | import { BridgeConfirmation } from "src/views/bridge-confirmation/bridge-confirmation.view";
9 | import { BridgeDetails } from "src/views/bridge-details/bridge-details.view";
10 | import { Home } from "src/views/home/home.view";
11 | import { Login } from "src/views/login/login.view";
12 | import { NetworkError } from "src/views/network-error/network-error.view";
13 | import { Settings } from "src/views/settings/settings.view";
14 | import { PrivateRoute } from "src/views/shared/private-route/private-route.view";
15 |
16 | const components: Record
60 |
62 | )}
63 |
33 |
34 |
35 | Warning
36 |
37 |
38 | You are about to transfer tokens using the Polygon zkEVM Mainnet Beta. There are risks
39 | associated with your use of the Mainnet Beta here. You agree to the{" "}
40 | Terms of Use ,
41 | including{" "}
42 | those risks , and
43 | the Privacy Policy .
44 |
45 |
46 | To do so, type {DEPOSIT_CHECK_WORD} below to 47 | continue. 48 |
49 | onAccept(formData, hideDepositWarning)}
51 | text={DEPOSIT_CHECK_WORD}
52 | />
53 |
56 |
57 |
58 | 45 |
46 | To do so, type {DEPOSIT_CHECK_WORD} below to 47 | continue. 48 |
42 |
47 | );
48 | } else {
49 | const { parsed, text } = message;
50 |
51 | return (
52 |
43 |
46 | {message.text}
45 |
53 |
75 | );
76 | }
77 | };
78 |
--------------------------------------------------------------------------------
/src/views/home/components/amount-input/amount-input.view.tsx:
--------------------------------------------------------------------------------
1 | import { BigNumber } from "ethers";
2 | import { parseUnits } from "ethers/lib/utils";
3 | import { ChangeEvent, FC, useEffect, useState } from "react";
4 |
5 | import { Token } from "src/domain";
6 | import { formatTokenAmount } from "src/utils/amounts";
7 | import { useAmountInputStyles } from "src/views/home/components/amount-input/amount-input.styles";
8 | import { Typography } from "src/views/shared/typography/typography.view";
9 |
10 | interface AmountInputProps {
11 | balance: BigNumber;
12 | onChange: (params: { amount?: BigNumber; error?: string }) => void;
13 | token: Token;
14 | value?: BigNumber;
15 | }
16 |
17 | export const AmountInput: FC
54 |
74 | 56 | {text || reportForm.isEnabled 57 | ? "An error occurred. Would you mind reporting it?" 58 | : "An error occurred. You can see the details in the console"} 59 |
60 | {reportForm.isEnabled && ( 61 | 69 | )} 70 | 73 |
65 |
70 |
77 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/src/views/bridge-details/bridge-details.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useBridgeDetailsStyles = createUseStyles((theme: Theme) => ({
6 | alignRow: {
7 | alignItems: "center",
8 | display: "flex",
9 | gap: theme.spacing(1),
10 | },
11 | balance: {
12 | alignItems: "center",
13 | borderBottom: `1px solid ${theme.palette.grey.light}`,
14 | display: "flex",
15 | flexDirection: "column",
16 | gap: theme.spacing(1),
17 | justifyContent: "center",
18 | marginBottom: theme.spacing(1.5),
19 | paddingBottom: theme.spacing(3),
20 | },
21 | card: {
22 | margin: [theme.spacing(5), "auto", 0],
23 | maxWidth: theme.maxWidth,
24 | padding: theme.spacing(3),
25 | width: "100%",
26 | },
27 | contentWrapper: {
28 | padding: [0, theme.spacing(2)],
29 | },
30 | dotCompleted: {
31 | backgroundColor: theme.palette.success.main,
32 | borderRadius: "50%",
33 | height: 6,
34 | width: 6,
35 | },
36 | dotOnHold: {
37 | backgroundColor: theme.palette.error.main,
38 | borderRadius: "50%",
39 | height: 6,
40 | width: 6,
41 | },
42 | dotProcessing: {
43 | backgroundColor: theme.palette.warning.main,
44 | borderRadius: "50%",
45 | height: 6,
46 | width: 6,
47 | },
48 | explorerButton: {
49 | "&:hover": {
50 | backgroundColor: theme.palette.grey.main,
51 | },
52 | alignItems: "center",
53 | backgroundColor: theme.palette.grey.light,
54 | border: "none",
55 | borderRadius: 8,
56 | cursor: "pointer",
57 | display: "flex",
58 | gap: theme.spacing(1),
59 | padding: [theme.spacing(1), theme.spacing(2)],
60 | },
61 | fiat: {
62 | color: theme.palette.grey.dark,
63 | fontSize: 14,
64 | },
65 | finaliseRow: {
66 | alignItems: "center",
67 | display: "flex",
68 | flexDirection: "column",
69 | gap: theme.spacing(1),
70 | justifyContent: "center",
71 | margin: [theme.spacing(3), 0],
72 | [theme.breakpoints.upSm]: {
73 | margin: [theme.spacing(6), 0],
74 | },
75 | },
76 | finaliseSpinner: {
77 | "& path": {
78 | fill: theme.palette.white,
79 | },
80 | },
81 | lastRow: {
82 | paddingBottom: 0,
83 | },
84 | row: {
85 | alignItems: "flex-start",
86 | display: "flex",
87 | flexDirection: "column",
88 | gap: theme.spacing(1),
89 | justifyContent: "space-between",
90 | padding: [theme.spacing(2), 0],
91 | [theme.breakpoints.upSm]: {
92 | alignItems: "center",
93 | flexDirection: "row",
94 | padding: [theme.spacing(2.5), 0],
95 | },
96 | },
97 | tokenIcon: {
98 | height: 48,
99 | margin: [theme.spacing(1), 0, theme.spacing(2)],
100 | width: 48,
101 | },
102 | }));
103 |
--------------------------------------------------------------------------------
/src/assets/icons/polygon-hermez.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/views/core/layout/layout.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC, PropsWithChildren, useEffect, useState } from "react";
2 |
3 | import { reportError } from "src/adapters/error";
4 | import { useEnvContext } from "src/contexts/env.context";
5 | import { useUIContext } from "src/contexts/ui.context";
6 | import { useLayoutStyles } from "src/views/core/layout/layout.styles";
7 | import { ConfirmationModal } from "src/views/shared/confirmation-modal/confirmation-modal.view";
8 | import { ExternalLink } from "src/views/shared/external-link/external-link.view";
9 | import { Snackbar } from "src/views/shared/snackbar/snackbar.view";
10 | import { Typography } from "src/views/shared/typography/typography.view";
11 |
12 | export const Layout: FC
30 |
32 | {env && snackbar.status === "open" && (
33 | {children}
31 | 50 |
54 | {env.outdatedNetworkModal.url && ( 55 |
61 | setDepositWarningModal({ status: "closed" })}
84 | />
85 | )}
86 |
87 | )}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/src/views/settings/settings.view.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react";
2 |
3 | import { getCurrency, setCurrency } from "src/adapters/storage";
4 | import { ReactComponent as CheckedIcon } from "src/assets/icons/checkbox-checked.svg";
5 | import { ReactComponent as UncheckedIcon } from "src/assets/icons/checkbox-unchecked.svg";
6 | import { ReactComponent as CnyIcon } from "src/assets/icons/currencies/cny.svg";
7 | import { ReactComponent as EurIcon } from "src/assets/icons/currencies/eur.svg";
8 | import { ReactComponent as GbpIcon } from "src/assets/icons/currencies/gbp.svg";
9 | import { ReactComponent as JpyIcon } from "src/assets/icons/currencies/jpy.svg";
10 | import { ReactComponent as UsdIcon } from "src/assets/icons/currencies/usd.svg";
11 | import { ReactComponent as ConversionIcon } from "src/assets/icons/currency-conversion.svg";
12 | import { useEnvContext } from "src/contexts/env.context";
13 | import { Currency } from "src/domain";
14 | import { useSettingsStyles } from "src/views/settings/settings.styles";
15 | import { Card } from "src/views/shared/card/card.view";
16 | import { Header } from "src/views/shared/header/header.view";
17 | import { Typography } from "src/views/shared/typography/typography.view";
18 |
19 | export const Settings: FC = () => {
20 | const classes = useSettingsStyles();
21 | const env = useEnvContext();
22 | const [preferredCurrency, setPreferredCurrency] = useState
65 |
67 | {getPartiallyHiddenEthereumAddress(connectedProvider.data.account)}
68 |
69 |
70 |
71 |
73 |
42 | Polygon zkEVM Bridge v{bridgeVersion}}
45 | title="Settings"
46 | />
47 |
48 | {env.fiatExchangeRates.areEnabled && (
49 |
79 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/src/views/home/components/bridge-form/bridge-form.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useBridgeFormStyles = createUseStyles((theme: Theme) => ({
6 | arrowDownIcon: {
7 | backgroundColor: theme.palette.grey.main,
8 | borderRadius: "50%",
9 | display: "flex",
10 | [theme.breakpoints.upSm]: {
11 | height: 40,
12 | padding: theme.spacing(0.5),
13 | width: 40,
14 | },
15 | },
16 | arrowRow: {
17 | display: "flex",
18 | justifyContent: "center",
19 | margin: [theme.spacing(1), 0],
20 | [theme.breakpoints.upSm]: {
21 | margin: [theme.spacing(2), 0],
22 | },
23 | },
24 | button: {
25 | alignItems: "center",
26 | display: "flex",
27 | flexDirection: "column",
28 | gap: theme.spacing(2),
29 | margin: [theme.spacing(5), "auto"],
30 | },
31 | card: {
32 | padding: [theme.spacing(2), theme.spacing(3)],
33 | },
34 | form: {
35 | margin: "auto",
36 | maxWidth: theme.maxWidth,
37 | },
38 | fromChain: {
39 | "&:hover": {
40 | backgroundColor: theme.palette.grey.light,
41 | },
42 | alignItems: "center",
43 | background: "none",
44 | border: "none",
45 | borderRadius: 8,
46 | cursor: "pointer",
47 | display: "flex",
48 | gap: theme.spacing(0.75),
49 | marginBottom: -theme.spacing(0.75),
50 | marginLeft: -theme.spacing(1.25),
51 | marginTop: theme.spacing(0.5),
52 | padding: [theme.spacing(0.75), theme.spacing(1.25)],
53 | transition: theme.hoverTransition,
54 | [theme.breakpoints.upSm]: {
55 | gap: theme.spacing(1.25),
56 | },
57 | },
58 | icons: {
59 | height: 20,
60 | width: 20,
61 | [theme.breakpoints.upSm]: {
62 | height: 24,
63 | width: 24,
64 | },
65 | },
66 | leftBox: {
67 | alignItems: "flex-start",
68 | display: "flex",
69 | flexDirection: "column",
70 | justifyContent: "space-between",
71 | },
72 | middleRow: {
73 | borderTop: `1px solid ${theme.palette.grey.light}`,
74 | marginTop: theme.spacing(1.25),
75 | padding: [theme.spacing(2), 0, 0],
76 | },
77 | rightBox: {
78 | alignItems: "flex-end",
79 | display: "flex",
80 | flexDirection: "column",
81 | justifyContent: "space-between",
82 | },
83 | row: {
84 | display: "flex",
85 | justifyContent: "space-between",
86 | paddingBottom: theme.spacing(0.5),
87 | },
88 | spinner: {
89 | margin: "auto",
90 | marginTop: theme.spacing(7),
91 | },
92 | toChain: {
93 | alignItems: "center",
94 | background: "none",
95 | border: "none",
96 | borderRadius: 8,
97 | display: "flex",
98 | gap: theme.spacing(0.75),
99 | marginBottom: -theme.spacing(0.75),
100 | marginLeft: -theme.spacing(1.25),
101 | marginTop: theme.spacing(0.5),
102 | padding: [theme.spacing(0.75), theme.spacing(1.25)],
103 | [theme.breakpoints.upSm]: {
104 | gap: theme.spacing(1.25),
105 | },
106 | },
107 | tokenSelector: {
108 | "&:hover": {
109 | backgroundColor: theme.palette.grey.main,
110 | },
111 | alignItems: "center",
112 | backgroundColor: theme.palette.grey.light,
113 | border: "none",
114 | borderRadius: 8,
115 | cursor: "pointer",
116 | display: "flex",
117 | gap: theme.spacing(1),
118 | padding: [theme.spacing(1), theme.spacing(1.25)],
119 | transition: theme.hoverTransition,
120 | [theme.breakpoints.upSm]: {
121 | backgroundColor: theme.palette.grey.light,
122 | gap: theme.spacing(2),
123 | padding: [theme.spacing(1.5), theme.spacing(2)],
124 | },
125 | },
126 | }));
127 |
--------------------------------------------------------------------------------
/src/assets/icons/setting.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/views/home/components/token-list/token-list.styles.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from "react-jss";
2 |
3 | import { Theme } from "src/styles/theme";
4 |
5 | export const useTokenListStyles = createUseStyles((theme: Theme) => ({
6 | addTokenButton: {
7 | "&:hover": {
8 | background: theme.palette.grey.main,
9 | },
10 | background: theme.palette.white,
11 | border: "none",
12 | borderRadius: 8,
13 | cursor: "pointer",
14 | minWidth: 120,
15 | padding: 8,
16 | position: "absolute",
17 | right: 10,
18 | top: 10,
19 | },
20 | centeredElement: {
21 | alignItems: "center",
22 | display: "flex",
23 | height: "100%",
24 | justifyContent: "center",
25 | textAlign: "center",
26 | },
27 | clearSearchButton: {
28 | "&:hover": {
29 | background: theme.palette.black,
30 | },
31 | alignItems: "center",
32 | background: theme.palette.grey.dark,
33 | border: 0,
34 | borderRadius: "50%",
35 | cursor: "pointer",
36 | display: "flex",
37 | height: 16,
38 | justifyContent: "center",
39 | padding: theme.spacing(0.5),
40 | transition: theme.hoverTransition,
41 | width: 16,
42 | },
43 | clearSearchButtonIcon: {
44 | "& rect": {
45 | fill: theme.palette.white,
46 | stroke: theme.palette.white,
47 | strokeWidth: 2,
48 | },
49 | },
50 | list: {
51 | "&::-webkit-scrollbar": {
52 | width: "4px",
53 | },
54 | "&::-webkit-scrollbar-thumb": {
55 | backgroundColor: theme.palette.grey.main,
56 | },
57 | "&::-webkit-scrollbar-thumb:hover": {
58 | backgroundColor: theme.palette.grey.dark,
59 | },
60 | height: "100%",
61 | overflowY: "auto",
62 | },
63 | searchIcon: {
64 | marginRight: theme.spacing(1.25),
65 | },
66 | searchInput: {
67 | border: 0,
68 | outline: 0,
69 | padding: [theme.spacing(2), 0],
70 | width: "100%",
71 | },
72 | searchInputContainer: {
73 | alignItems: "center",
74 | borderBottom: `1px solid ${theme.palette.grey.light}`,
75 | display: "flex",
76 | marginBottom: theme.spacing(2),
77 | width: "100%",
78 | },
79 | tokenBalance: {
80 | color: theme.palette.black,
81 | },
82 | tokenBalanceWrapper: {
83 | marginLeft: "auto",
84 | },
85 | tokenButton: {
86 | "&:hover": {
87 | background: theme.palette.grey.main,
88 | },
89 | alignItems: "center",
90 | background: theme.palette.grey.light,
91 | border: "none",
92 | borderRadius: 8,
93 | cursor: "pointer",
94 | justifyContent: "space-between",
95 | overflow: "hidden",
96 | padding: theme.spacing(2),
97 | transition: theme.hoverTransition,
98 | width: "100%",
99 | },
100 | tokenButtonWrapper: {
101 | "&:not(:first-of-type)": {
102 | marginTop: theme.spacing(1),
103 | },
104 | position: "relative",
105 | },
106 | tokenIcon: {
107 | marginRight: theme.spacing(1),
108 | },
109 | tokenInfo: {
110 | alignItems: "center",
111 | display: "flex",
112 | },
113 | tokenInfoButton: {
114 | "&:hover": {
115 | background: theme.palette.grey.main,
116 | },
117 | background: "transparent",
118 | border: "none",
119 | borderRadius: "50%",
120 | cursor: "pointer",
121 | height: 32,
122 | padding: 8,
123 | position: "absolute",
124 | right: theme.spacing(2),
125 | top: "50%",
126 | transform: "translateY(-50%)",
127 | width: 32,
128 | },
129 | tokenInfoButtonIcon: {
130 | "& path": {
131 | fill: theme.palette.grey.dark,
132 | },
133 | },
134 | tokenInfoWithBalance: {
135 | alignItems: "center",
136 | display: "flex",
137 | marginRight: 48,
138 | },
139 | tokenList: {
140 | display: "flex",
141 | flexDirection: "column",
142 | height: "100%",
143 | },
144 | }));
145 |
--------------------------------------------------------------------------------
/scripts/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | ENV_FILENAME="/app/.env"
3 |
4 | # Create .env file
5 | touch $ENV_FILENAME
6 |
7 | # ETHEREUM env vars
8 | echo "VITE_ETHEREUM_RPC_URL=$ETHEREUM_RPC_URL" >> $ENV_FILENAME
9 | echo "VITE_ETHEREUM_EXPLORER_URL=$ETHEREUM_EXPLORER_URL" >> $ENV_FILENAME
10 | echo "VITE_ETHEREUM_BRIDGE_CONTRACT_ADDRESS=$ETHEREUM_BRIDGE_CONTRACT_ADDRESS" >> $ENV_FILENAME
11 | echo "VITE_ETHEREUM_FORCE_UPDATE_GLOBAL_EXIT_ROOT=$ETHEREUM_FORCE_UPDATE_GLOBAL_EXIT_ROOT" >> $ENV_FILENAME
12 | echo "VITE_ETHEREUM_PROOF_OF_EFFICIENCY_CONTRACT_ADDRESS=$ETHEREUM_PROOF_OF_EFFICIENCY_CONTRACT_ADDRESS" >> $ENV_FILENAME
13 | echo "VITE_ETHEREUM_ROLLUP_MANAGER_ADDRESS=$ETHEREUM_ROLLUP_MANAGER_ADDRESS" >> $ENV_FILENAME
14 |
15 | # POLYGON ZK EVM env vars
16 | echo "VITE_POLYGON_ZK_EVM_RPC_URL=$POLYGON_ZK_EVM_RPC_URL" >> $ENV_FILENAME
17 | echo "VITE_POLYGON_ZK_EVM_EXPLORER_URL=$POLYGON_ZK_EVM_EXPLORER_URL" >> $ENV_FILENAME
18 | echo "VITE_POLYGON_ZK_EVM_BRIDGE_CONTRACT_ADDRESS=$POLYGON_ZK_EVM_BRIDGE_CONTRACT_ADDRESS" >> $ENV_FILENAME
19 | echo "VITE_POLYGON_ZK_EVM_NETWORK_ID=$POLYGON_ZK_EVM_NETWORK_ID" >> $ENV_FILENAME
20 |
21 | # BRIDGE API env vars
22 | echo "VITE_BRIDGE_API_URL=$BRIDGE_API_URL" >> $ENV_FILENAME
23 |
24 | # FIAT EXCHANGE RATES API env vars
25 | echo "VITE_ENABLE_FIAT_EXCHANGE_RATES=$ENABLE_FIAT_EXCHANGE_RATES" >> $ENV_FILENAME
26 |
27 | if [ ! -z "$FIAT_EXCHANGE_RATES_API_URL" ];
28 | then
29 | echo "VITE_FIAT_EXCHANGE_RATES_API_URL=$FIAT_EXCHANGE_RATES_API_URL" >> $ENV_FILENAME
30 | fi
31 |
32 | if [ ! -z "$FIAT_EXCHANGE_RATES_API_KEY" ];
33 | then
34 | echo "VITE_FIAT_EXCHANGE_RATES_API_KEY=$FIAT_EXCHANGE_RATES_API_KEY" >> $ENV_FILENAME
35 | fi
36 |
37 | if [ ! -z "$FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS" ];
38 | then
39 | echo "VITE_FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS=$FIAT_EXCHANGE_RATES_ETHEREUM_USDC_ADDRESS" >> $ENV_FILENAME
40 | fi
41 |
42 | # OUTDATED NETWORK MODAL
43 | echo "VITE_ENABLE_OUTDATED_NETWORK_MODAL=$ENABLE_OUTDATED_NETWORK_MODAL" >> $ENV_FILENAME
44 |
45 | if [ ! -z "$OUTDATED_NETWORK_MODAL_TITLE" ];
46 | then
47 | echo "VITE_OUTDATED_NETWORK_MODAL_TITLE=$OUTDATED_NETWORK_MODAL_TITLE" >> $ENV_FILENAME
48 | fi
49 |
50 | if [ ! -z "$OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1" ];
51 | then
52 | echo "VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1=$OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_1" >> $ENV_FILENAME
53 | fi
54 |
55 | if [ ! -z "$OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2" ];
56 | then
57 | echo "VITE_OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2=$OUTDATED_NETWORK_MODAL_MESSAGE_PARAGRAPH_2" >> $ENV_FILENAME
58 | fi
59 |
60 | if [ ! -z "$OUTDATED_NETWORK_MODAL_URL" ];
61 | then
62 | echo "VITE_OUTDATED_NETWORK_MODAL_URL=$OUTDATED_NETWORK_MODAL_URL" >> $ENV_FILENAME
63 | fi
64 |
65 | # DEPOSIT WARNING
66 | echo "VITE_ENABLE_DEPOSIT_WARNING=$ENABLE_DEPOSIT_WARNING" >> $ENV_FILENAME
67 |
68 | # REPORT FORM
69 | echo "VITE_ENABLE_REPORT_FORM=$ENABLE_REPORT_FORM" >> $ENV_FILENAME
70 |
71 | if [ ! -z "$REPORT_FORM_URL" ];
72 | then
73 | echo "VITE_REPORT_FORM_URL=$REPORT_FORM_URL" >> $ENV_FILENAME
74 | fi
75 |
76 | if [ ! -z "$REPORT_FORM_ERROR_ENTRY" ];
77 | then
78 | echo "VITE_REPORT_FORM_ERROR_ENTRY=$REPORT_FORM_ERROR_ENTRY" >> $ENV_FILENAME
79 | fi
80 |
81 | if [ ! -z "$REPORT_FORM_PLATFORM_ENTRY" ];
82 | then
83 | echo "VITE_REPORT_FORM_PLATFORM_ENTRY=$REPORT_FORM_PLATFORM_ENTRY" >> $ENV_FILENAME
84 | fi
85 |
86 | if [ ! -z "$REPORT_FORM_URL_ENTRY" ];
87 | then
88 | echo "VITE_REPORT_FORM_URL_ENTRY=$REPORT_FORM_URL_ENTRY" >> $ENV_FILENAME
89 | fi
90 |
91 | echo "Generated .env file:"
92 | echo "$(cat /app/.env)"
93 |
94 | # Build app
95 | cd /app && npm run build
96 |
97 | # Copy nginx config
98 | cp /app/deployment/nginx.conf /etc/nginx/conf.d/default.conf
99 |
100 | # Copy app dist
101 | cp -r /app/dist/. /usr/share/nginx/html
102 |
103 | # Delete source code
104 | rm -rf /app
105 |
106 | # Run nginx
107 | nginx -g 'daemon off;'
108 |
--------------------------------------------------------------------------------
/src/assets/icons/metamask.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
62 |
--------------------------------------------------------------------------------
50 |
51 |
54 | Select a currency for conversion display
55 |
77 | )}
78 |
56 | {currencies.map((currency) => (
57 |
74 | ))}
75 |
76 |