(null);
const onCopyClick = () => {
copyTextToClipboard(code);
- enqueueSnackbar(
-
-
-
-
-
+
+
+
+
+
+
{code}
diff --git a/deploy-web/src/components/shared/ConnectWallet.tsx b/deploy-web/src/components/shared/ConnectWallet.tsx
index 6060bb5c1..7e3949561 100644
--- a/deploy-web/src/components/shared/ConnectWallet.tsx
+++ b/deploy-web/src/components/shared/ConnectWallet.tsx
@@ -9,16 +9,8 @@ type Props = {
export const ConnectWallet: React.FunctionComponent = ({ text }) => {
return (
-
-
- {text}
-
+
+
{text}
);
diff --git a/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx b/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
index 9180faa4c..4504291e0 100644
--- a/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
+++ b/deploy-web/src/components/shared/CustomDropdownLinkItem.tsx
@@ -1,3 +1,4 @@
+"use client";
import React from "react";
import { DropdownMenuIconItem } from "../ui/dropdown-menu";
import { cn } from "@src/utils/styleUtils";
diff --git a/deploy-web/src/components/shared/Fieldset.tsx b/deploy-web/src/components/shared/Fieldset.tsx
index f4902213f..676b3ffcd 100644
--- a/deploy-web/src/components/shared/Fieldset.tsx
+++ b/deploy-web/src/components/shared/Fieldset.tsx
@@ -1,38 +1,23 @@
-import { makeStyles } from "tss-react/mui";
-import { udenomToDenom } from "@src/utils/mathHelpers";
-import { FormattedNumber, FormattedNumberParts } from "react-intl";
-import { Box, Paper, Typography, useTheme } from "@mui/material";
+"use client";
import React from "react";
-import { usePricing } from "@src/context/PricingProvider";
-import { AKTLabel } from "./AKTLabel";
-import { customColors } from "@src/utils/colors";
+import { Card, CardContent } from "../ui/card";
type Props = {
label: string;
+ className?: string;
children: React.ReactNode;
};
-export const Fieldset: React.FunctionComponent
= ({ label, children }) => {
- const theme = useTheme();
-
+export const Fieldset: React.FunctionComponent = ({ label, className = "", children }) => {
return (
-
-
- {label}
-
+
+
+
- {children}
-
+ {children}
+
+
);
};
diff --git a/deploy-web/src/components/shared/LabelValue.tsx b/deploy-web/src/components/shared/LabelValue.tsx
index e7c0cb64f..6f708928a 100644
--- a/deploy-web/src/components/shared/LabelValue.tsx
+++ b/deploy-web/src/components/shared/LabelValue.tsx
@@ -1,55 +1,23 @@
-import { Box } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
+"use client";
-const useStyles = makeStyles()(theme => ({
- infoRow: {
- display: "flex",
- marginBottom: "1rem",
- "&:last-child": {
- marginBottom: 0
- },
- [theme.breakpoints.down("sm")]: {
- flexDirection: "column",
- alignItems: "flex-start"
- }
- },
- label: {
- fontWeight: "bold",
- flexShrink: 0,
- wordBreak: "break-all",
- color: theme.palette.grey[600],
- display: "flex",
- alignItems: "center",
- paddingRight: ".5rem"
- },
- value: {
- wordBreak: "break-all",
- overflowWrap: "anywhere",
- flexGrow: 1,
- [theme.breakpoints.down("sm")]: {
- width: "100%"
- }
- }
-}));
+import { cn } from "@src/utils/styleUtils";
type LabelValueProps = {
- label: any;
- value?: any;
+ label?: string | React.ReactNode;
+ value?: string | React.ReactNode;
labelWidth?: string | number;
-
- // All other props
- [x: string]: any;
+ className?: string;
};
-export const LabelValue: React.FunctionComponent = ({ label, value, labelWidth = "15rem", ...rest }) => {
- const { classes } = useStyles();
-
+export const LabelValue: React.FunctionComponent = ({ label, value, labelWidth = "15rem", className = "" }) => {
return (
-
-
- {label}
-
- {!!value && {value}
}
-
+
+ {label && (
+
+ {label}
+
+ )}
+ {value !== undefined &&
{value}
}
+
-
- {networks.map(network => {
- return (
- handleSelectNetwork(network)} disabled={!network.enabled}>
-
-
-
-
- {network.title}
- {" - "}
-
- {network.version}
-
-
- {network.id !== mainnetId &&
- );
- })}
-
-
- {localSelectedNetworkId !== mainnetId && (
-
-
- Warning
-
-
- Changing networks will restart the app and some features are experimental.
-
- )}
-
- );
-};
diff --git a/deploy-web/src/components/ui/checkbox.tsx b/deploy-web/src/components/ui/checkbox.tsx
index ea03eb612..f98ecab4c 100644
--- a/deploy-web/src/components/ui/checkbox.tsx
+++ b/deploy-web/src/components/ui/checkbox.tsx
@@ -38,11 +38,11 @@ const CheckboxWithLabel = React.forwardRef<
);
return (
-
+
{labelPosition === "left" && _label}
);
});
CheckboxWithLabel.displayName = "CheckboxWithLabel";
diff --git a/deploy-web/src/components/ui/dialog.tsx b/deploy-web/src/components/ui/dialog.tsx
index 460e28018..35c225bf2 100644
--- a/deploy-web/src/components/ui/dialog.tsx
+++ b/deploy-web/src/components/ui/dialog.tsx
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
, React.ComponentPropsWithoutRef>(
({ className, ...props }, ref) => (
,
>
@@ -24,4 +25,28 @@ const Switch = React.forwardRef,
);
Switch.displayName = SwitchPrimitives.Root.displayName;
-export { Switch };
+const SwitchWithLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ label: string;
+ labelPosition?: "left" | "right";
+ }
+>(({ className, label, labelPosition = "right", ...props }, ref) => {
+ const id = nanoid();
+ const _label = (
+
+ {label}
+
+ );
+
+ return (
+
+ {labelPosition === "left" && _label}
+
+ );
+});
+SwitchWithLabel.displayName = "SwitchWithLabel";
+
+export { Switch, SwitchWithLabel };
diff --git a/deploy-web/src/components/ui/toast.tsx b/deploy-web/src/components/ui/toast.tsx
index 491b81853..f6df3bf9f 100644
--- a/deploy-web/src/components/ui/toast.tsx
+++ b/deploy-web/src/components/ui/toast.tsx
@@ -12,7 +12,7 @@ const ToastViewport = React.forwardRef;
- selectedNode: Node | null;
- customNode: Node | null;
+ nodes: Array;
+ selectedNode: BlockchainNode | null;
+ customNode: BlockchainNode | null;
};
type ContextType = {
diff --git a/deploy-web/src/pages/settings/authorizations.tsx b/deploy-web/src/pages/settings/authorizations.tsx
deleted file mode 100644
index 511a37a22..000000000
--- a/deploy-web/src/pages/settings/authorizations.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-import Layout from "@src/components/layout/Layout";
-import { NextSeo } from "next-seo";
-import PageContainer from "@src/components/shared/PageContainer";
-import SettingsLayout, { SettingsTabs } from "@src/components/settings/SettingsLayout";
-import { Fieldset } from "@src/components/shared/Fieldset";
-import { Box, Button, CircularProgress, Table, TableBody, TableCell, TableContainer, TableRow, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
-import { useWallet } from "@src/context/WalletProvider";
-import { CustomTableHeader } from "@src/components/shared/CustomTable";
-import { Address } from "@src/components/shared/Address";
-import { GrantModal } from "@src/components/wallet/GrantModal";
-import { AllowanceType, GrantType } from "@src/types/grant";
-import { TransactionMessageData } from "@src/utils/TransactionMessageData";
-import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
-import { useAllowancesGranted, useAllowancesIssued, useGranteeGrants, useGranterGrants } from "@src/queries/useGrantsQuery";
-import { Popup } from "@src/components/shared/Popup";
-import { GranterRow } from "@src/components/settings/GranterRow";
-import { GranteeRow } from "@src/components/settings/GranteeRow";
-import { AllowanceModal } from "@src/components/wallet/AllowanceModal";
-import { AllowanceIssuedRow } from "@src/components/settings/AllowanceIssuedRow";
-import { makeStyles } from "tss-react/mui";
-import { averageBlockTime } from "@src/utils/priceUtils";
-import { AllowanceGrantedRow } from "@src/components/settings/AllowanceGrantedRow";
-
-type Props = {};
-
-const useStyles = makeStyles()(theme => ({
- subTitle: {
- fontSize: "1rem",
- color: theme.palette.text.secondary,
- marginBottom: "1rem"
- }
-}));
-
-type RefreshingType = "granterGrants" | "granteeGrants" | "allowancesIssued" | "allowancesGranted" | null;
-const defaultRefetchInterval = 30 * 1000;
-const refreshingInterval = 1000;
-
-const SettingsSecurityPage: React.FunctionComponent = ({}) => {
- const { classes } = useStyles();
- const { address, signAndBroadcastTx } = useWallet();
- const [editingGrant, setEditingGrant] = useState(null);
- const [editingAllowance, setEditingAllowance] = useState(null);
- const [showGrantModal, setShowGrantModal] = useState(false);
- const [showAllowanceModal, setShowAllowanceModal] = useState(false);
- const [deletingGrant, setDeletingGrant] = useState(null);
- const [deletingAllowance, setDeletingAllowance] = useState(null);
- const [isRefreshing, setIsRefreshing] = useState(null);
- const { data: granterGrants, isLoading: isLoadingGranterGrants } = useGranterGrants(address, {
- refetchInterval: isRefreshing === "granterGrants" ? refreshingInterval : defaultRefetchInterval
- });
- const { data: granteeGrants, isLoading: isLoadingGranteeGrants } = useGranteeGrants(address, {
- refetchInterval: isRefreshing === "granteeGrants" ? refreshingInterval : defaultRefetchInterval
- });
- const { data: allowancesIssued, isLoading: isLoadingAllowancesIssued } = useAllowancesIssued(address, {
- refetchInterval: isRefreshing === "allowancesIssued" ? refreshingInterval : defaultRefetchInterval
- });
- const { data: allowancesGranted, isLoading: isLoadingAllowancesGranted } = useAllowancesGranted(address, {
- refetchInterval: isRefreshing === "allowancesGranted" ? refreshingInterval : defaultRefetchInterval
- });
-
- useEffect(() => {
- let timeout: NodeJS.Timeout;
- if (isRefreshing) {
- timeout = setTimeout(() => {
- setIsRefreshing(null);
- }, averageBlockTime * 1000);
- }
-
- return () => {
- if (timeout) {
- clearTimeout(timeout);
- }
- };
- }, [isRefreshing]);
-
- async function onDeleteGrantConfirmed() {
- const message = TransactionMessageData.getRevokeMsg(address, deletingGrant.grantee, deletingGrant.authorization["@type"]);
-
- const response = await signAndBroadcastTx([message]);
-
- if (response) {
- setIsRefreshing("granterGrants");
- setDeletingGrant(null);
- }
- }
-
- async function onDeleteAllowanceConfirmed() {
- const message = TransactionMessageData.getRevokeAllowanceMsg(address, deletingAllowance.grantee);
-
- const response = await signAndBroadcastTx([message]);
-
- if (response) {
- setIsRefreshing("allowancesIssued");
- setDeletingAllowance(null);
- }
- }
-
- function onCreateNewGrant() {
- setEditingGrant(null);
- setShowGrantModal(true);
- }
-
- function onEditGrant(grant: GrantType) {
- setEditingGrant(grant);
- setShowGrantModal(true);
- }
-
- function onGrantClose() {
- setIsRefreshing("granterGrants");
- setShowGrantModal(false);
- }
-
- function onCreateNewAllowance() {
- setEditingAllowance(null);
- setShowAllowanceModal(true);
- }
-
- function onAllowanceClose() {
- setIsRefreshing("allowancesIssued");
- setShowAllowanceModal(false);
- }
-
- function onEditAllowance(allowance: AllowanceType) {
- setEditingAllowance(allowance);
- setShowAllowanceModal(true);
- }
-
- return (
-
-
-
-
-
- }
- >
-
-
- These authorizations allow you authorize other addresses to spend on deployments or deployment deposits using your funds. You can revoke these
- authorizations at any time.
-
-
- {isLoadingGranterGrants || !granterGrants ? (
-
-
- ) : (
- <>
- {granterGrants.length > 0 ? (
-
-
-
-
- Grantee
- Spending Limit
- Expiration
-
-
-
-
- {granterGrants.map(grant => (
-
-
-
- ) : (
- No authorizations given.
- )}
-
- )}
-
-
-
- {isLoadingGranteeGrants || !granteeGrants ? (
-
-
- ) : (
- <>
- {granteeGrants.length > 0 ? (
-
-
-
-
- Granter
- Spending Limit
- Expiration
-
-
-
-
- {granteeGrants.map(grant => (
-
-
-
- ) : (
- No authorizations received.
- )}
-
- )}
-
-
-
-
- Tx Fee Authorizations
-
-
-
-
-
-
- These authorizations allow you authorize other addresses to spend on transaction fees using your funds. You can revoke these authorizations at any
- time.
-
-
-
- {isLoadingAllowancesIssued || !allowancesIssued ? (
-
-
- ) : (
- <>
- {allowancesIssued.length > 0 ? (
-
-
-
-
- Type
- Grantee
- Spending Limit
- Expiration
-
-
-
-
- {allowancesIssued.map(allowance => (
-
-
-
- ) : (
- No allowances issued.
- )}
-
- )}
-
-
-
- {isLoadingAllowancesGranted || !allowancesGranted ? (
-
-
- ) : (
- <>
- {allowancesGranted.length > 0 ? (
-
-
-
-
- Type
- Grantee
- Spending Limit
- Expiration
-
-
-
-
- {allowancesGranted.map(allowance => (
-
-
-
- ) : (
- No allowances received.
- )}
-
- )}
-
-
- {!!deletingGrant && (
- setDeletingGrant(null)}
- onCancel={() => setDeletingGrant(null)}
- onValidate={onDeleteGrantConfirmed}
- enableCloseOnBackdropClick
- >
- Deleting grant to{" "}
-
- {" "}
- will revoke their ability to spend your funds on deployments.
-
- )}
- {!!deletingAllowance && (
- setDeletingAllowance(null)}
- onCancel={() => setDeletingAllowance(null)}
- onValidate={onDeleteAllowanceConfirmed}
- enableCloseOnBackdropClick
- >
- Deleting allowance to{" "}
-
- {" "}
- will revoke their ability to fees on your behalf.
-
- )}
- {showGrantModal &&
-
-
- );
-};
-
-export default SettingsSecurityPage;
-
-export async function getServerSideProps({ params }) {
- return {
- props: {}
- };
-}
-
diff --git a/deploy-web/src/pages/settings/index.tsx b/deploy-web/src/pages/settings/index.tsx
deleted file mode 100644
index d66ac75bf..000000000
--- a/deploy-web/src/pages/settings/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { makeStyles } from "tss-react/mui";
-import Layout from "@src/components/layout/Layout";
-import { NextSeo } from "next-seo";
-import { SettingsForm } from "@src/components/settings/SettingsForm";
-import { Box, FormControlLabel, IconButton } from "@mui/material";
-import { ColorModeSelect } from "@src/components/layout/ColorModeSelect";
-import PageContainer from "@src/components/shared/PageContainer";
-import SettingsLayout, { SettingsTabs } from "@src/components/settings/SettingsLayout";
-import { Fieldset } from "@src/components/shared/Fieldset";
-import { useState } from "react";
-import { SelectNetworkModal } from "@src/components/shared/SelectNetworkModal";
-import EditIcon from "@mui/icons-material/Edit";
-import { CertificateList } from "@src/components/certificates/CertificateList";
-import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
-
-type Props = {};
-
-const useStyles = makeStyles()(theme => ({}));
-
-const SettingsPage: React.FunctionComponent = ({}) => {
- const [isSelectingNetwork, setIsSelectingNetwork] = useState(false);
- const { classes } = useStyles();
- const selectedNetwork = useSelectedNetwork();
-
- const onSelectNetworkModalClose = () => {
- setIsSelectingNetwork(false);
- };
-
- return (
-
-
-
-
-
- setIsSelectingNetwork(true)} sx={{ marginLeft: ".5rem" }} disableRipple>
-
- Network
-
- {selectedNetwork?.title}
-
-
- }
- labelPlacement="start"
- sx={{ marginLeft: 0, marginBottom: "1rem" }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default SettingsPage;
-
-export async function getServerSideProps({ params }) {
- return {
- props: {}
- };
-}