(null);
20 |
21 | useEffect(() => {
22 | hljs.highlightElement(ref.current);
23 | }, [contractInfo?.decompiled, ref.current]);
24 |
25 | return (
26 |
36 |
37 |
43 | {contractInfo?.decompiled
44 | ?.trim()
45 | .split("\n")
46 | .map((_, i) => i + 1)
47 | .join("\n")}
48 |
49 |
50 | {contractInfo?.decompiled}
51 |
52 |
53 | {button}
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/FileTable.styled.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "@mui/system";
2 | import TableCell from "@mui/material/TableCell";
3 |
4 | const DirectoryBox = styled("input")({
5 | display: "flex",
6 | alignItems: "center",
7 | width: 300,
8 | height: 44,
9 | background: "#FFFFFF",
10 | border: "1px solid #D8D8D8",
11 | borderRadius: "12px",
12 | fontSize: 14,
13 | fontFamily: "Mulish",
14 | paddingLeft: 10,
15 | outline: "none",
16 | "&:hover": {
17 | border: "1px solid #b0b0b0",
18 | },
19 | "&:focus": {
20 | border: "1px solid #807e7e",
21 | },
22 | });
23 |
24 | const BorderLessCell = styled(TableCell)({
25 | border: "none",
26 | padding: 0,
27 | });
28 |
29 | const HeaderCell = styled(TableCell)({
30 | fontWeight: 700,
31 | });
32 |
33 | const HR = styled("hr")({
34 | display: "block",
35 | width: "100%",
36 | height: 1,
37 | backgroundColor: "#ccc",
38 | border: "none",
39 | });
40 |
41 | export { DirectoryBox, HR, HeaderCell, BorderLessCell };
42 |
--------------------------------------------------------------------------------
/src/components/FileUploaderArea.tsx:
--------------------------------------------------------------------------------
1 | import { useFileStore, acceptedFileExtensions } from "../lib/useFileStore";
2 | import { useDropzone } from "react-dropzone";
3 | import React from "react";
4 | import { Box, useMediaQuery } from "@mui/material";
5 | import { CenteringBox, IconBox, TitleBox, TitleText } from "./Common.styled";
6 | import sourcesDefault from "../assets/sources.svg";
7 | import sourcesVerified from "../assets/verified-bold.svg";
8 | import { AppButton } from "./AppButton";
9 | import upload from "../assets/upload.svg";
10 | import { styled } from "@mui/system";
11 | import { STEPS, usePublishStore } from "../lib/usePublishSteps";
12 | import { useAddressInput } from "../lib/useAddressInput";
13 |
14 | const FilesDropzone = styled(CenteringBox)({
15 | justifyContent: "center",
16 | backgroundColor: "#F7F9FB",
17 | textAlign: "center",
18 | height: 148,
19 | overflow: "hidden",
20 | border: "1px dashed #E3E8EA",
21 | color: "#728A96",
22 | borderRadius: 20,
23 | lineHeight: 148,
24 | cursor: "pointer",
25 | "&:hover": {
26 | border: "1px dashed #9da3a5",
27 | },
28 | });
29 |
30 | export function FileUploaderArea() {
31 | const { addFiles, hasFiles } = useFileStore();
32 | const { step } = usePublishStore();
33 | const isExtraSmallScreen = useMediaQuery("(max-width: 450px)");
34 | const { active } = useAddressInput();
35 |
36 | const onDrop = (acceptedFiles: any) => {
37 | addFiles(acceptedFiles);
38 | };
39 |
40 | const { getRootProps, getInputProps, isDragActive } = useDropzone({
41 | onDrop,
42 | accept: { "text/plain": acceptedFileExtensions.map((ext) => `.${ext}`) },
43 | // noClick: true,
44 | });
45 |
46 | return (
47 | <>
48 |
49 |
55 |
56 |
57 | 
63 |
64 | Add sources
65 |
66 | {hasFiles() && step !== STEPS.PUBLISH && (
67 |
68 |
75 | 
76 | Upload source
77 |
78 |
45 | TON VERIFIER
46 |
47 |
48 |
49 |
54 |
59 |
60 |
61 |
62 |
63 |
64 | © 2023
65 |
66 |
67 |
68 | Contributed with
69 |
70 | 
71 |
72 | by
73 |
74 | 
75 |
76 |
80 | Orbs
81 |
82 |
83 |
84 |
85 |
86 | Support
87 |
88 | {!window.isTestnet && (
89 | {
91 | switchNetwork();
92 | }}
93 | sx={{ ml: 2, cursor: "pointer" }}
94 | variant="body2">
95 | Switch to Testnet
96 |
97 | )}
98 |
99 |
100 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/src/components/Getters.styled.tsx:
--------------------------------------------------------------------------------
1 | import { Box, styled, TableCell, Typography } from "@mui/material";
2 |
3 | export const TitleText = styled(Typography)({
4 | fontSize: 14,
5 | fontWeight: 700,
6 | });
7 |
8 | export const TitleSubtext = styled(Typography)({
9 | fontSize: 12,
10 | color: "#949597",
11 | });
12 |
13 | export const GetterBox = styled(Box)({
14 | border: "1px solid #D9D9D988",
15 | overflow: "hidden",
16 | borderRadius: 14,
17 | width: "100%",
18 | paddingBottom: 6,
19 | });
20 |
21 | export const FlexBoxColumn = styled(Box)({
22 | display: "flex",
23 | flexDirection: "column",
24 | });
25 |
26 | export const FlexBoxRow = styled(Box)({
27 | display: "flex",
28 | flexDirection: "row",
29 | alignItems: "center",
30 | });
31 |
32 | export const TitleBox = styled(FlexBoxRow)({
33 | background: "#F7F9FB",
34 | padding: "14px 20px",
35 | });
36 |
37 | export const ContentBox = styled(FlexBoxColumn)({
38 | fontSize: 14,
39 | });
40 |
41 | export const TableCellStyled = styled(TableCell)({
42 | padding: "10px 6px",
43 | borderBottom: 0,
44 | });
45 |
46 | export const TypeChip = styled(Box)({
47 | border: "1px solid #D8D8D8",
48 | background: "white",
49 | borderRadius: 6,
50 | padding: "0px 10px",
51 | fontSize: 12,
52 | textAlign: "center",
53 | display: "inline-block",
54 | "&:hover": {
55 | border: "1px solid #b0b0b0",
56 | },
57 | });
58 |
59 | export const ValueBox = styled(Box)({
60 | borderRadius: 10,
61 | padding: "10px 14px",
62 | whiteSpace: "break-spaces",
63 | wordBreak: "break-all",
64 | "&:hover": {
65 | background: "#f8f8f8",
66 | },
67 | });
68 |
69 | export const ParameterInput = styled("input")({
70 | display: "flex",
71 | alignItems: "center",
72 | paddingLeft: 10,
73 | width: "100%",
74 | boxSizing: "border-box",
75 | height: 40,
76 | background: "#FFFFFF",
77 | border: "1px solid #D8D8D8",
78 | borderRadius: "12px",
79 | fontSize: 14,
80 | fontFamily: "Mulish",
81 | outline: "none",
82 | "&:hover": {
83 | border: "1px solid #b0b0b0",
84 | },
85 | "&:focus": {
86 | border: "1px solid #807e7e",
87 | },
88 | });
89 |
90 | export const CustomGetterInput = styled("input")({
91 | display: "flex",
92 | alignItems: "center",
93 | paddingLeft: 14,
94 | boxSizing: "border-box",
95 | height: 34,
96 | background: "#FFFFFF",
97 | border: "1px solid #D8D8D8",
98 | borderRadius: "12px",
99 | fontSize: 14,
100 | fontFamily: "Mulish",
101 | outline: "none",
102 | "&:hover": {
103 | border: "1px solid #b0b0b0",
104 | },
105 | "&:focus": {
106 | border: "1px solid #807e7e",
107 | },
108 | });
109 |
--------------------------------------------------------------------------------
/src/components/HintItem.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@mui/material";
2 | import { styled } from "@mui/material/styles";
3 | import { CompileResult, Hints, useSubmitSources } from "../lib/useSubmitSources";
4 | import { TELEGRAM_SUPPORT_LINK } from "./Footer";
5 |
6 | const _HintItem = styled("li")({
7 | maxWidth: 650,
8 | fontSize: 14,
9 | fontWeight: 400,
10 | marginBottom: 10,
11 | });
12 |
13 | function hintToElem(hint: Hints, compileResult: CompileResult | undefined) {
14 | switch (hint) {
15 | case Hints.ENTRYPOINT_MISSING:
16 | return "There usually should be at least one file containing an entrypoint (recv_internal, main)";
17 | case Hints.STDLIB_ORDER:
18 | return "stdlib.fc should usually be the first file in the list (unless it's imported from another file)";
19 | case Hints.STDLIB_MISSING:
20 | return "You can try to add stdlib.fc to your sources.";
21 | case Hints.NOT_SIMILAR:
22 | return "Source code compiles correctly but does not match the on-chain contract hash. Make sure you are using the correct compiler version, command line and file order.";
23 | case Hints.FILE_ORDER:
24 | return "Make sure all files in the command line are in the correct order";
25 | case Hints.COMPILER_VERSION:
26 | return "Try to use the same compiler version as the contract was compiled with";
27 | case Hints.REQUIRED_FILES:
28 | return "Make sure all required files are included in the command line";
29 | case Hints.SUPPORT_GROUP:
30 | return (
31 |
32 | If you are still facing issues, you can use the{" "}
33 |
40 | Telegram support group
41 |
42 |
43 | );
44 | }
45 | }
46 |
47 | export const HintItem = ({ hint }: { hint: Hints }) => {
48 | const { data: submitSourcesData } = useSubmitSources();
49 | return <_HintItem>{hintToElem(hint, submitSourcesData?.result.compileResult)};
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/HoverableIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Box, Link, styled } from "@mui/material";
3 |
4 | interface IconProps {
5 | iconUrl: string;
6 | hoveredIconUrl: string;
7 | disabled?: boolean;
8 | }
9 |
10 | const Icon = styled(Box)((props: IconProps) => ({ theme }) => ({
11 | display: "flex",
12 | alignItems: "center",
13 | justifyContent: "center",
14 | width: theme.spacing(3),
15 | height: theme.spacing(3),
16 | background: `url(${props.iconUrl})`,
17 | "&:hover": {
18 | transitionDuration: ".25s",
19 | background: `url(${props.disabled ? props.iconUrl : props.hoveredIconUrl})`,
20 | cursor: props.disabled ? "cursor" : "pointer",
21 | },
22 | }));
23 |
24 | interface HoverableIconProps extends IconProps {
25 | link: string;
26 | }
27 |
28 | export const HoverableIcon: React.FC = ({ iconUrl, hoveredIconUrl, link }) => {
29 | return !link.length ? (
30 |
31 | ) : (
32 |
33 |
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/components/InfoPiece.css:
--------------------------------------------------------------------------------
1 | /*TODO delete*/
2 | .InfoPiece {
3 | display: flex;
4 | gap: 10px;
5 | }
6 |
7 | .InfoPiece-Label {
8 | font-weight: 700;
9 | min-width: 112px;
10 | /* TODO denis table-like behavior */
11 | }
12 |
13 | .InfoPiece-Data {
14 | color: #728a96;
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/InfoPiece.tsx:
--------------------------------------------------------------------------------
1 | //TODO replace with DataRow
2 | import "./InfoPiece.css";
3 |
4 | function InfoPiece({ label, data }: { label: string; data: string }) {
5 | return (
6 |
7 |
{label}
8 |
{data}
9 |
80 |
85 | {contract.mainFile}
86 |
87 | {contract.compiler}
88 |
89 |
90 | ))}
91 |
92 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/MobileMenu.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Drawer, IconButton, styled } from "@mui/material";
3 | import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
4 | import { Box } from "@mui/system";
5 | import { githubLink } from "../const";
6 | import github from "../assets/github-dark.svg";
7 | import { AppLogo, GitLogo, LinkWrapper } from "./TopBar.styled";
8 | import icon from "../assets/icon.svg";
9 | import { useNavigatePreserveQuery } from "../lib/useNavigatePreserveQuery";
10 | import { useTonAddress } from "@tonconnect/ui-react";
11 | import { StyledTonConnectButton } from "../styles";
12 |
13 | interface MobileMenuProps {
14 | closeMenu?: () => void;
15 | showMenu?: boolean;
16 | }
17 |
18 | export function MobileMenu({ closeMenu, showMenu }: MobileMenuProps) {
19 | const navigate = useNavigatePreserveQuery();
20 | const address = useTonAddress();
21 |
22 | return (
23 |
24 |
33 |
34 |
35 |
36 |
39 | {} : closeMenu}>
40 |
41 |
42 |
43 | 
44 | GitHub
45 |
46 |
47 | navigate("/")}>
48 |
49 | TON VERIFIER
50 |
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/SearchResults.tsx:
--------------------------------------------------------------------------------
1 | import { IconButton, Typography } from "@mui/material";
2 | import { AppButton } from "./AppButton";
3 | import close from "../assets/close.svg";
4 | import recentSearch from "../assets/recent-search.svg";
5 | import { CenteringBox } from "./Common.styled";
6 | import { SearchResultsItem, SearchResultsWrapper } from "./SearchRusults.styled";
7 |
8 | interface HeaderSearchResultsProps {
9 | searchResults: string[];
10 | onItemClick: (item: string) => void;
11 | onItemDelete: (e: React.MouseEvent, item: string) => void;
12 | onHistoryClear: () => void;
13 | }
14 |
15 | export const SearchResults: React.FC = ({
16 | searchResults,
17 | onItemClick,
18 | onItemDelete,
19 | onHistoryClear,
20 | }) => {
21 | return (
22 |
23 | {searchResults.map((result) => (
24 | onItemClick(result)}>
25 |
26 |
27 | 
28 |
29 | {result}
30 |
31 | onItemDelete(e, result)}>
32 | 
33 |
34 |
35 | ))}
36 |
37 |
38 | Clear History
39 |
40 |
41 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/src/components/SearchRusults.styled.tsx:
--------------------------------------------------------------------------------
1 | import { Box, styled } from "@mui/system";
2 |
3 | const SearchResultsWrapper = styled(Box)(({ theme }) => ({
4 | position: "absolute",
5 | top: "calc(100% + 10px)",
6 | left: 0,
7 | padding: `${theme.spacing(1)}, ${theme.spacing(2)}`,
8 | zIndex: 99,
9 | background: "rgba(232,233,235)",
10 | border: "0.5px solid rgba(114, 138, 150, 0.16)",
11 | borderRadius: 16,
12 | width: "100%",
13 | maxHeight: 450,
14 | overflowY: "auto",
15 |
16 | [theme.breakpoints.down("md")]: {
17 | display: "none",
18 | },
19 | }));
20 |
21 | const SearchResultsItem = styled(Box)({
22 | display: "flex",
23 | alignItems: "center",
24 | justifyContent: "space-between",
25 | background: "transparent",
26 | fontSize: 20,
27 | color: "#000",
28 | fontWeight: 500,
29 | height: 30,
30 | padding: "20px 21px",
31 | transitionDuration: ".15s",
32 | "&:hover": {
33 | cursor: "pointer",
34 | background: "rgb(225,227,230)",
35 | },
36 | });
37 |
38 | export { SearchResultsItem, SearchResultsWrapper };
39 |
--------------------------------------------------------------------------------
/src/components/Spacer.tsx:
--------------------------------------------------------------------------------
1 | // TODO delete
2 | function Spacer({ space }: { space: number }) {
3 | return ;
4 | }
5 |
6 | export default Spacer;
7 |
--------------------------------------------------------------------------------
/src/components/TestnetBar.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Typography } from "@mui/material";
2 | import { useNavigate, useSearchParams } from "react-router-dom";
3 | import { FlexBoxRow } from "./Getters.styled";
4 |
5 | export function useSwitchNetwork() {
6 | const navigate = useNavigate();
7 | const [urlParams, setUrlParams] = useSearchParams();
8 |
9 | return () => {
10 | urlParams.has("testnet") ? urlParams.delete("testnet") : urlParams.append("testnet", "");
11 | setUrlParams(urlParams);
12 | navigate(0);
13 | };
14 | }
15 |
16 | export function TestnetBar() {
17 | const switchNetwork = useSwitchNetwork();
18 | return (
19 |
20 |
21 | Testnet
22 | {
24 | switchNetwork();
25 | }}
26 | sx={{ cursor: "pointer" }}>
27 | Switch to mainnet
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/TopBar.styled.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "@mui/material/styles";
2 | import { Box, Link } from "@mui/material";
3 | import { contentMaxWidth } from "../const";
4 | import { CenteringBox } from "./Common.styled";
5 |
6 | const expandedHeaderHeight = 250;
7 | const headerHeight = 188;
8 |
9 | interface TopBarWrapperProps {
10 | showExpanded: boolean;
11 | isMobile: boolean;
12 | }
13 |
14 | const TopBarWrapper = styled(Box)(({ theme }) => (props: TopBarWrapperProps) => ({
15 | display: props.isMobile ? "flex" : "inherit",
16 | alignItems: props.isMobile ? "center" : "inherit",
17 | fontWight: 700,
18 | color: "#fff",
19 | minHeight: props.isMobile ? 80 : headerHeight,
20 | height:
21 | props.showExpanded && !props.isMobile
22 | ? expandedHeaderHeight
23 | : props.isMobile
24 | ? 80
25 | : headerHeight,
26 | background: "#fff",
27 | borderBottomLeftRadius: theme.spacing(6),
28 | borderBottomRightRadius: theme.spacing(6),
29 | border: "0.5px solid rgba(114, 138, 150, 0.24)",
30 | boxShadow: "rgb(114 138 150 / 8%) 0px 2px 16px",
31 | }));
32 |
33 | const ContentColumn = styled(CenteringBox)(() => ({
34 | gap: 10,
35 | }));
36 |
37 | const LinkWrapper = styled(Link)(() => ({
38 | display: "flex",
39 | alignItems: "center",
40 | gap: 10,
41 | color: "#000",
42 | textDecoration: "none",
43 | cursor: "pointer",
44 | }));
45 |
46 | const TopBarContent = styled(CenteringBox)(({ theme }) => ({
47 | margin: "auto",
48 | maxWidth: contentMaxWidth,
49 | height: 100,
50 | width: "100%",
51 | justifyContent: "space-between",
52 | gap: 10,
53 | }));
54 |
55 | const AppLogo = styled("h4")(({ theme }) => ({
56 | color: "#000",
57 | fontSize: 20,
58 | fontWeight: 800,
59 | [theme.breakpoints.down("sm")]: {
60 | fontSize: 16,
61 | },
62 | }));
63 | const GitLogo = styled("h5")(() => ({
64 | color: "#000",
65 | fontWeight: 700,
66 | fontSize: 18,
67 | }));
68 |
69 | const TopBarHeading = styled("h3")(({ theme }) => ({
70 | color: "#000",
71 | fontSize: 26,
72 | marginTop: 0,
73 | textAlign: "center",
74 | fontWeight: 800,
75 | }));
76 |
77 | const SearchWrapper = styled(CenteringBox)({
78 | margin: "auto",
79 | maxWidth: contentMaxWidth,
80 | width: "100%",
81 | });
82 |
83 | export {
84 | SearchWrapper,
85 | LinkWrapper,
86 | AppLogo,
87 | TopBarWrapper,
88 | TopBarContent,
89 | TopBarHeading,
90 | GitLogo,
91 | ContentColumn,
92 | };
93 |
--------------------------------------------------------------------------------
/src/components/TopBar.tsx:
--------------------------------------------------------------------------------
1 | import icon from "../assets/icon.svg";
2 | import React, { useEffect, useState } from "react";
3 | import { useLocation } from "react-router-dom";
4 | import github from "../assets/github-dark.svg";
5 | import { AddressInput } from "../components/AddressInput";
6 | import { CenteringBox } from "./Common.styled";
7 | import { githubLink } from "../const";
8 | import {
9 | AppLogo,
10 | ContentColumn,
11 | GitLogo,
12 | LinkWrapper,
13 | SearchWrapper,
14 | TopBarContent,
15 | TopBarHeading,
16 | TopBarWrapper,
17 | } from "./TopBar.styled";
18 | import { IconButton, styled, useMediaQuery, useTheme } from "@mui/material";
19 | import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
20 | import { MobileMenu } from "./MobileMenu";
21 | import { useNavigatePreserveQuery } from "../lib/useNavigatePreserveQuery";
22 | import { StyledTonConnectButton } from "../styles";
23 |
24 | export function TopBar() {
25 | const { pathname } = useLocation();
26 |
27 | const theme = useTheme();
28 | const navigate = useNavigatePreserveQuery();
29 | const headerSpacings = useMediaQuery(theme.breakpoints.down("lg"));
30 | const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
31 | const [showExpanded, setShowExpanded] = useState(pathname.length === 1);
32 | const [showMenu, setShowMenu] = useState(false);
33 |
34 | useEffect(() => {
35 | setShowExpanded(pathname.length === 1);
36 | }, [pathname]);
37 |
38 | return (
39 |
43 | {isSmallScreen && (
44 | setShowMenu(true)}>
47 |
48 |
49 | )}
50 | {!isSmallScreen && (
51 |
52 | navigate("/")}>
53 |
54 | TON VERIFIER
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | GitHub
63 |
64 |
65 |
66 | )}
67 | {pathname.length < 2 && !isSmallScreen && (
68 | Smart Contract Verifier
69 | )}
70 |
71 |
72 |
73 | setShowMenu(false)} showMenu={showMenu} />
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/VerificationProof.tsx:
--------------------------------------------------------------------------------
1 | import { useLoadContractProof } from "../lib/useLoadContractProof";
2 | import { useLoadVerifierRegistryInfo } from "../lib/useLoadVerifierRegistryInfo";
3 | import { Box, Skeleton, Tab, Tabs } from "@mui/material";
4 | import { PopupTableTitle, PopupWrapper } from "./VerificationProofPopup.styled";
5 | import { styled } from "@mui/system";
6 | import React, { useState } from "react";
7 | import { InBrowserVerificationGuide, ManualVerificationGuide } from "./VerificationGuides";
8 |
9 | export function VerificationProof() {
10 | const { data: contractProofData, isLoading } = useLoadContractProof();
11 | const { isLoading: isLoadingVerifierRegistry } = useLoadVerifierRegistryInfo();
12 |
13 | return (
14 |
15 | {contractProofData && !isLoadingVerifierRegistry && (
16 |
17 | Verify manually
18 |
19 |
20 | )}
21 | {(isLoading || isLoadingVerifierRegistry) && (
22 |
27 | )}
28 |
29 | );
30 | }
31 |
32 | const VerificationPanelTabs = styled(Tabs)({
33 | borderBottom: "none",
34 | "& .MuiTabs-indicator": {
35 | borderBottom: "4px solid #0088CC",
36 | borderRadius: 20,
37 | },
38 | "& .MuiTab-root.Mui-selected": {
39 | color: "#000",
40 | fontWeight: 800,
41 | },
42 | });
43 |
44 | function VerificationPanel() {
45 | // const [value, setValue] = useState(0);
46 |
47 | // const handleChange = (event: React.SyntheticEvent, newValue: number) => {
48 | // setValue(newValue);
49 | // };
50 |
51 | return (
52 |
53 | {/*
54 |
55 |
56 |
57 |
58 |
59 | {value === 0 && }
60 | {value === 1 && } */}
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/VerificationProofPopup.styled.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "@mui/material/styles";
2 | import { CenteringBox, TitleText } from "./Common.styled";
3 | import Table from "@mui/material/Table";
4 | import TableHead from "@mui/material/TableHead";
5 | import TableRow from "@mui/material/TableRow";
6 | import { BorderLessCell, HeaderCell } from "./FileTable.styled";
7 | import { Box, Link, Typography } from "@mui/material";
8 |
9 | const PopupTable = styled(Table)({
10 | overflow: "scroll",
11 | background: "#F7F9FB",
12 | borderRadius: "5px",
13 | width: "100%",
14 | });
15 |
16 | const PopupWrapper = styled(Box)({
17 | background: "#F7F9FB",
18 | borderRadius: "5px",
19 | width: "100%",
20 | });
21 |
22 | const PopupTableHead = styled(TableHead)({
23 | "&.MuiTableHead-root th": {
24 | border: "none",
25 | fontSize: 13,
26 | },
27 | });
28 |
29 | const PopupTableHeadRow = styled(TableRow)({
30 | fontWeight: 700,
31 | });
32 |
33 | const PopupTableHeadCell = styled(HeaderCell)({
34 | paddingLeft: 0,
35 | paddingBottom: "2px",
36 | });
37 |
38 | const PopupTableHeadPaddingCell = styled(BorderLessCell)({
39 | paddingBottom: 10,
40 | });
41 |
42 | const VerifiedTag = styled(CenteringBox)({
43 | width: 59,
44 | height: 21,
45 | background: "#08D088",
46 | borderRadius: 40,
47 | color: "#fff",
48 | justifyContent: "space-around",
49 | fontSize: 12,
50 | });
51 |
52 | const PopupTableBodyCell = styled(BorderLessCell)({
53 | paddingBottom: 16,
54 | });
55 |
56 | const PopupLink = styled(Link)({
57 | textDecoration: "none",
58 | cursor: "pointer",
59 | color: "#0088CC",
60 | });
61 |
62 | const CloseButtonWrapper = styled(Box)({
63 | width: "100%",
64 | display: "flex",
65 | justifyContent: "flex-end",
66 | });
67 |
68 | const PopupTableTypography = styled(Typography)({
69 | color: "#728A96",
70 | fontSize: 14,
71 | });
72 |
73 | const PopupTableTitle = styled(TitleText)({
74 | fontSize: 18,
75 | fontWeight: 800,
76 | color: "#000",
77 | textAlign: "center",
78 | });
79 |
80 | const CommandLabel = styled(Box)({
81 | display: "inline-flex",
82 | alignItems: "center",
83 | height: "20px",
84 | padding: "0 7px",
85 | background: "rgba(146, 146, 146, 0.3)",
86 | borderRadius: "10px",
87 | color: "#212121",
88 | fontWeight: 400,
89 | fontSize: "14px",
90 | fontFamily: "IBM Plex Mono, monospace",
91 | });
92 |
93 | const CommandEllipsisLabel = styled(CommandLabel)({
94 | position: "relative",
95 | top: 5,
96 | display: "inline-block",
97 | whiteSpace: "nowrap",
98 | lineHeight: "20px",
99 | width: "100%",
100 | maxWidth: 600,
101 | overflow: "hidden",
102 | textOverflow: "ellipsis",
103 | });
104 |
105 | export {
106 | PopupTable,
107 | PopupTableHead,
108 | PopupTableHeadRow,
109 | PopupTableHeadCell,
110 | PopupTableHeadPaddingCell,
111 | VerifiedTag,
112 | CommandLabel,
113 | CommandEllipsisLabel,
114 | PopupTableBodyCell,
115 | PopupTableTypography,
116 | PopupTableTitle,
117 | PopupWrapper,
118 | PopupLink,
119 | CloseButtonWrapper,
120 | };
121 |
--------------------------------------------------------------------------------
/src/components/VerificationProofPopup.tsx:
--------------------------------------------------------------------------------
1 | import { AppPopup } from "./AppPopup";
2 | import { CenteringBox, TitleText } from "./Common.styled";
3 | import { Box, ClickAwayListener, IconButton, useMediaQuery, useTheme } from "@mui/material";
4 | import close from "../assets/close.svg";
5 | import verificationPopup from "../assets/verification-popup.svg";
6 | import React from "react";
7 | import { CloseButtonWrapper } from "./VerificationProofPopup.styled";
8 | import { VerificationProofTable } from "./VerificationProofTable";
9 | import { VerificationProof } from "./VerificationProof";
10 |
11 | interface VerificationProofPopupProps {
12 | onClose: () => void;
13 | }
14 |
15 | export function VerificationProofPopup({ onClose }: VerificationProofPopupProps) {
16 | const theme = useTheme();
17 | const headerSpacings = useMediaQuery(theme.breakpoints.down("lg"));
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 
30 |
31 | Verification Proof
32 |
33 |
34 |
35 | {import.meta.env.VITE_SHOW_MANUAL_VERIFICATION && (
36 |
37 |
38 |
39 | )}
40 |
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/VerificationProofTable.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { useLoadContractProof } from "../lib/useLoadContractProof";
3 | import { useLoadVerifierRegistryInfo } from "../lib/useLoadVerifierRegistryInfo";
4 | import useNotification from "../lib/useNotification";
5 | import { Box } from "@mui/material";
6 | import { PopupTable } from "./VerificationProofPopup.styled";
7 | import {
8 | VerificationProofPopupTableDataRow,
9 | VerificationProofPopupTableHead,
10 | VerificationProofPopupTableSkeletonRow,
11 | } from "./VerificationProofPopupTable";
12 | import TableBody from "@mui/material/TableBody";
13 |
14 | export function VerificationProofTable() {
15 | const {
16 | data: contractProofData,
17 | isLoading: isLoadingProof,
18 | error: errorProof,
19 | } = useLoadContractProof();
20 | const {
21 | data: verifierRegistryInfo,
22 | isLoading: isLoadingVerifierRegistry,
23 | error: errorVerifierRegistry,
24 | } = useLoadVerifierRegistryInfo();
25 | const { showNotification } = useNotification();
26 |
27 | // TODO this supports a single verifier Id for now.
28 | // when we wish to support multiple verifiers, load contract proof would have to address that
29 | const verifierConfig = verifierRegistryInfo?.find((v) => v.name === window.verifierId);
30 |
31 | const onCopy = useCallback(async (value: string) => {
32 | navigator.clipboard.writeText(value);
33 | showNotification("Copied to clipboard!", "success");
34 | }, []);
35 |
36 | return (
37 |
45 |
46 |
47 |
48 | {isLoadingProof || isLoadingVerifierRegistry ? (
49 | <>
50 |
51 |
52 |
53 | ) : (
54 | verifierConfig &&
55 | contractProofData &&
56 | Object.entries(verifierConfig.pubKeyEndpoints).map(([pubKey, endpoint]) => {
57 | return (
58 |
67 | );
68 | })
69 | )}
70 |
71 |
72 | {(!!errorProof || !!errorVerifierRegistry) &&
73 | `${errorProof} ${errorVerifierRegistry} (App notification)`}
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/VerifiedSourceCode.tsx:
--------------------------------------------------------------------------------
1 | import { useLoadContractSourceCode } from "../lib/useLoadContractSourceCode";
2 | import React from "react";
3 |
4 | interface VerifiedSourceCodeProps {
5 | button: React.ReactNode;
6 | }
7 |
8 | export function VerifiedSourceCode({ button }: VerifiedSourceCodeProps) {
9 | useLoadContractSourceCode();
10 |
11 | return (
12 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/admin/Admin.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Stack } from "@mui/material";
2 | import { TestnetBar } from "../TestnetBar";
3 | import SourcesRegistry from "./SourcesRegistry";
4 | import { VerifierRegistry } from "./VerifierRegistry";
5 | import { FlexBoxRow } from "../Getters.styled";
6 | import { Footer } from "../Footer";
7 | import { StyledTonConnectButton } from "../../styles";
8 |
9 | export function Admin() {
10 | return (
11 |
12 | {window.isTestnet && }
13 |
14 | Admin
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/admin/ContractInteract.tsx:
--------------------------------------------------------------------------------
1 | import { Button, TextField } from "@mui/material";
2 | import { useState } from "react";
3 | import { Address, beginCell, Builder } from "ton";
4 | import ConnectButton from "../ConnectButton";
5 | import Spacer from "../Spacer";
6 |
7 | function CellBuilder() {
8 | const [state, setState] = useState<{
9 | builder: Builder;
10 | spec: any[];
11 | }>({
12 | spec: [],
13 | builder: beginCell(),
14 | });
15 |
16 | return (
17 |
18 |
Build the cell
19 |
{
25 | if (e.code === "Enter") {
26 | // @ts-ignore
27 | const [num, size] = e.target.value.split(",");
28 | setState((state) => {
29 | return {
30 | spec: [
31 | ...state.spec,
32 | {
33 | type: "uint" + size,
34 | value: num,
35 | },
36 | ],
37 | builder: state.builder.storeUint(num, size),
38 | };
39 | });
40 | // @ts-ignore
41 | e.target.value = "";
42 | }
43 | }}
44 | />
45 | {
51 | if (e.code === "Enter") {
52 | // @ts-ignore
53 | const addressStr = e.target.value;
54 | setState((state) => {
55 | return {
56 | spec: [
57 | ...state.spec,
58 | {
59 | type: "address",
60 | value: addressStr,
61 | },
62 | ],
63 | builder: state.builder.storeAddress(
64 | // @ts-ignore
65 | Address.parse(addressStr),
66 | ),
67 | };
68 | });
69 | // @ts-ignore
70 | e.target.value = "";
71 | }
72 | }}
73 | />
74 | {JSON.stringify(state.spec)}
75 |
76 |
77 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
OPs
96 |
97 |
98 |
99 |