+ >();
+
+const columns = [
+ columnsHelper.accessor("accountAddress", {
+ header: () => ,
+ cell: (info) => (
+ [];
+};
+
+export function KeysTable(props: KeysTableProps): ReactElement {
+ return (
+ >
+ columns={columns}
+ data={props.keys}
+ />
+ );
+}
diff --git a/frontend/src/pages/accounts/details/storage/AccountStorage.module.scss b/frontend/src/pages/accounts/details/storage/AccountStorage.module.scss
new file mode 100644
index 00000000..b2876262
--- /dev/null
+++ b/frontend/src/pages/accounts/details/storage/AccountStorage.module.scss
@@ -0,0 +1,49 @@
+.grid {
+ width: 100%;
+ max-width: 100%;
+ display: grid;
+ column-gap: 15px;
+ row-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ margin-bottom: 40px;
+}
+
+.gridExtendable {
+ width: 100%;
+ max-width: 100%;
+ display: grid;
+ column-gap: 15px;
+ row-gap: 20px;
+ grid-template-columns: repeat(4, 1fr);
+
+ .gridItemExtended {
+ grid-column: 1 / span 4;
+ height: 600px;
+ }
+}
+
+@media all and (max-width: 1350px) {
+ .gridExtendable {
+ grid-template-columns: repeat(3, 1fr);
+
+ .gridItemExtended {
+ grid-column: 1 / span 3;
+ height: 600px;
+ }
+ }
+}
+
+@media all and (max-width: 900px) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .gridExtendable {
+ grid-template-columns: repeat(2, 1fr);
+
+ .gridItemExtended {
+ grid-column: 1 / span 2;
+ height: 600px;
+ }
+ }
+}
diff --git a/frontend/src/pages/accounts/details/storage/AccountStorage.tsx b/frontend/src/pages/accounts/details/storage/AccountStorage.tsx
new file mode 100644
index 00000000..1282f5f4
--- /dev/null
+++ b/frontend/src/pages/accounts/details/storage/AccountStorage.tsx
@@ -0,0 +1,105 @@
+import { Account, AccountStorageDomain } from "@flowser/shared";
+import { useAnalytics } from "../../../../hooks/use-analytics";
+import { useUrlQuery } from "../../../../hooks/use-url-query";
+import { useGetPollingStorageByAccount } from "../../../../hooks/use-api";
+import React, { ReactElement, useEffect, useState } from "react";
+import { AnalyticEvent } from "../../../../services/analytics.service";
+import { PublicPrivateStorageCard } from "./cards/PublicPrivateStorageCard";
+import { enableDetailsIntroAnimation } from "../../../../config/common";
+import { InternalStorageCard } from "./cards/InternalStorageCard";
+import classNames from "classnames";
+import classes from "./AccountStorage.module.scss";
+
+type AccountStorageProps = {
+ account: Account;
+};
+
+export function AccountStorage(props: AccountStorageProps): ReactElement {
+ const { account } = props;
+ const { track } = useAnalytics();
+ const urlQueryParams = useUrlQuery();
+ const focusedStorageId = urlQueryParams.get("focusedStorageId");
+ const { data: storageItems } = useGetPollingStorageByAccount(account.address);
+ const [expandedCardIds, setExpandedCardIds] = useState(
+ new Set(focusedStorageId ? [focusedStorageId] : [])
+ );
+
+ useEffect(() => {
+ if (focusedStorageId) {
+ expandCardById(focusedStorageId);
+ // We need to wait for the virtual nodes to be added to the browser DOM.
+ // This is achieved with setTimeout call - wait for the next window paint.
+ // There might be a better React way to do this.
+ setTimeout(() => {
+ const targetDomNode = document.getElementById(focusedStorageId);
+ window.scrollTo(0, targetDomNode?.offsetTop ?? 0);
+ });
+ }
+ }, [focusedStorageId, storageItems]);
+
+ const expandCardById = (id: string) => {
+ setExpandedCardIds((prev) => new Set(prev.add(id)));
+ };
+
+ const minimizeCardById = (id: string) => {
+ expandedCardIds.delete(id);
+ setExpandedCardIds(new Set(expandedCardIds));
+ };
+
+ const toggleCardExpand = (id: string) => {
+ if (expandedCardIds.has(id)) {
+ track(AnalyticEvent.CLICK_MINIMIZE_STORAGE_CARD, {
+ storageId: id,
+ });
+ minimizeCardById(id);
+ } else {
+ track(AnalyticEvent.CLICK_EXPAND_STORAGE_CARD, {
+ storageId: id,
+ });
+ expandCardById(id);
+ }
+ };
+
+ const privateStorageItems = storageItems.filter(
+ (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_PRIVATE
+ );
+ const publicStorageItems = storageItems.filter(
+ (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_PUBLIC
+ );
+ const internalStorageItems = storageItems.filter(
+ (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_STORAGE
+ );
+
+ const privateAndPublicStorageItems = [
+ ...publicStorageItems,
+ ...privateStorageItems,
+ ];
+ return (
+ <>
+ ;
diff --git a/frontend/src/pages/accounts/details/PublicPrivateStorageCard.module.scss b/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss
similarity index 97%
rename from frontend/src/pages/accounts/details/PublicPrivateStorageCard.module.scss
rename to frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss
index 4e6bd74e..70a06328 100644
--- a/frontend/src/pages/accounts/details/PublicPrivateStorageCard.module.scss
+++ b/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss
@@ -33,7 +33,7 @@
.identifier {
font-size: $font-size-large;
- color: $light-grey;
+ color: $gray-10;
margin-bottom: 6px;
}
diff --git a/frontend/src/pages/accounts/details/PublicPrivateStorageCard.tsx b/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.tsx
similarity index 93%
rename from frontend/src/pages/accounts/details/PublicPrivateStorageCard.tsx
rename to frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.tsx
index c607f067..ea6de96a 100644
--- a/frontend/src/pages/accounts/details/PublicPrivateStorageCard.tsx
+++ b/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.tsx
@@ -1,12 +1,11 @@
import React, { ReactElement } from "react";
import classes from "./PublicPrivateStorageCard.module.scss";
-import { StorageDomainBadge } from "./StorageDomainBadge";
+import { StorageDomainBadge } from "../StorageDomainBadge";
import { NavLink } from "react-router-dom";
-import { ReactComponent as LinkIcon } from "../../../assets/icons/link.svg";
+import { ReactComponent as LinkIcon } from "../../../../../assets/icons/link.svg";
import { AccountStorageItem } from "@flowser/shared/dist/src/generated/entities/accounts";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-// @ts-ignore .png import error
-import gradient from "../../../assets/images/gradient.png";
+import gradient from "../../../../../assets/images/gradient.png";
import classNames from "classnames";
type StorageCardProps = {
diff --git a/frontend/src/pages/blocks/details/Details.tsx b/frontend/src/pages/blocks/details/Details.tsx
index 30b7f8d0..c9cf0ad4 100644
--- a/frontend/src/pages/blocks/details/Details.tsx
+++ b/frontend/src/pages/blocks/details/Details.tsx
@@ -4,10 +4,6 @@ import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation";
import Label from "../../../components/label/Label";
import Value from "../../../components/value/Value";
import classes from "./Details.module.scss";
-import {
- DetailsTabItem,
- DetailsTabs,
-} from "../../../components/details-tabs/DetailsTabs";
import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
import { useGetBlock, useGetTransactionsByBlock } from "../../../hooks/use-api";
import { FlowUtils } from "../../../utils/flow-utils";
@@ -26,6 +22,7 @@ import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
import { enableDetailsIntroAnimation } from "../../../config/common";
import { SizedBox } from "../../../components/sized-box/SizedBox";
import { AccountLink } from "../../../components/account/link/AccountLink";
+import { StyledTabs } from "../../../components/tabs/StyledTabs";
type RouteParams = {
blockId: string;
@@ -109,6 +106,10 @@ const Details: FunctionComponent = () => {
const detailsColumns: DetailsCardColumn[] = [
[
+ {
+ label: "Height",
+ value: String(block.height),
+ },
{
label: "Block ID",
value: block.id,
@@ -123,6 +124,10 @@ const Details: FunctionComponent = () => {
),
},
+ {
+ label: "Collections",
+ value: String(block.collectionGuarantees?.length ?? 0),
+ },
{
label: "Created date",
value: TextUtils.longDate(block.createdAt),
@@ -134,22 +139,21 @@ const Details: FunctionComponent = () => {
-
- {transactions && (
- >
- data={transactions}
- columns={txTableColumns}
- enableIntroAnimations={enableDetailsIntroAnimation}
- />
- )}
-
-
+ >
+ data={transactions}
+ columns={txTableColumns}
+ enableIntroAnimations={enableDetailsIntroAnimation}
+ />
+ ),
+ },
+ ]}
+ />
);
};
diff --git a/frontend/src/pages/blocks/main/Main.module.scss b/frontend/src/pages/blocks/main/Main.module.scss
index 6a7ac274..eff783ed 100644
--- a/frontend/src/pages/blocks/main/Main.module.scss
+++ b/frontend/src/pages/blocks/main/Main.module.scss
@@ -4,8 +4,7 @@
.card {
display: flex;
justify-content: space-between;
-
-
+
& > div {
display: flex;
@@ -32,7 +31,7 @@
flex: 0.8;
}
- .blockID{
+ .blockID {
flex: 1.3;
}
diff --git a/frontend/src/pages/blocks/main/Main.tsx b/frontend/src/pages/blocks/main/Main.tsx
index bea9f57f..7537e38a 100644
--- a/frontend/src/pages/blocks/main/Main.tsx
+++ b/frontend/src/pages/blocks/main/Main.tsx
@@ -17,10 +17,6 @@ import { ReactComponent as SnapshotIcon } from "../../../assets/icons/snapshot.s
import ReactTimeago from "react-timeago";
import { useProjectActions } from "../../../contexts/project.context";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-import Card from "components/card/Card";
-import tableClasses from "../../../components/table/Table.module.scss";
-import { flexRender } from "@tanstack/react-table";
-import classNames from "classnames";
const columnHelper = createColumnHelper>();
@@ -127,45 +123,8 @@ const Main: FunctionComponent = () => {
error={error}
data={blocks}
columns={columns}
- renderCustomHeader={(headerGroup) => (
-
- {headerGroup.headers.map((header) => (
-
- )}
- renderCustomRow={(row) => (
- <>
-
- {row.getVisibleCells().map((cell) => (
-
-
- )}
+ headerRowClass={classes.tableRow}
+ bodyRowClass={classes.tableRow}
/>
);
};
diff --git a/frontend/src/pages/contracts/details/Details.tsx b/frontend/src/pages/contracts/details/Details.tsx
index 28c4aaa2..842d7765 100644
--- a/frontend/src/pages/contracts/details/Details.tsx
+++ b/frontend/src/pages/contracts/details/Details.tsx
@@ -1,6 +1,5 @@
import React, { FunctionComponent, useEffect } from "react";
import { NavLink, useParams } from "react-router-dom";
-import ContentDetailsScript from "../../../components/content-details-script/ContentDetailsScript";
import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation";
import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
import { useGetContract } from "../../../hooks/use-api";
@@ -11,6 +10,7 @@ import {
} from "components/details-card/DetailsCard";
import { TextUtils } from "../../../utils/text-utils";
import { SizedBox } from "../../../components/sized-box/SizedBox";
+import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor";
type RouteParams = {
contractId: string;
@@ -67,7 +67,7 @@ const Details: FunctionComponent = () => {
>();
+
+const columns = [
+ columnHelper.accessor("name", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.row.original.name}
+
+
+ ),
+ }),
+ columnHelper.accessor("accountAddress", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+ columnHelper.accessor("updatedAt", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+ columnHelper.accessor("createdAt", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+];
+
+type ContractsTableProps = {
+ contracts: DecoratedPollingEntity[];
+};
+
+export function ContractsTable(props: ContractsTableProps): ReactElement {
+ return (
+ >
+ columns={columns}
+ data={props.contracts}
+ />
+ );
+}
diff --git a/frontend/src/pages/contracts/main/Main.tsx b/frontend/src/pages/contracts/main/Main.tsx
index c2d7587a..e8c10c2d 100644
--- a/frontend/src/pages/contracts/main/Main.tsx
+++ b/frontend/src/pages/contracts/main/Main.tsx
@@ -1,73 +1,17 @@
import React, { FunctionComponent, useEffect } from "react";
-import Label from "../../../components/label/Label";
-import Value from "../../../components/value/Value";
import { useNavigation } from "../../../hooks/use-navigation";
-import { NavLink } from "react-router-dom";
import { useGetPollingContracts } from "../../../hooks/use-api";
-import { createColumnHelper } from "@tanstack/table-core";
-import Table from "../../../components/table/Table";
-import { AccountContract } from "@flowser/shared";
-import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-import ReactTimeago from "react-timeago";
-import { AccountLink } from "../../../components/account/link/AccountLink";
-
-// CONTRACTS TABLE
-const columnHelper =
- createColumnHelper>();
-
-const columns = [
- columnHelper.accessor("name", {
- header: () => ,
- cell: (info) => (
-
-
- {info.row.original.name}
-
-
- ),
- }),
- columnHelper.accessor("accountAddress", {
- header: () => ,
- cell: (info) => (
-
-
- ),
- }),
- columnHelper.accessor("updatedAt", {
- header: () => ,
- cell: (info) => (
-
-
- ),
- }),
- columnHelper.accessor("createdAt", {
- header: () => ,
- cell: (info) => (
-
-
- ),
- }),
-];
+import { ContractsTable } from "./ContractsTable";
const Main: FunctionComponent = () => {
const { showNavigationDrawer } = useNavigation();
- const { data, firstFetch, error } = useGetPollingContracts();
+ const { data } = useGetPollingContracts();
useEffect(() => {
showNavigationDrawer(false);
}, []);
- return (
- >
- isInitialLoading={firstFetch}
- error={error}
- columns={columns}
- data={data}
- />
- );
+ return ();
-const subTableColumns = [
- subTableColumnHelper.accessor("name", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- subTableColumnHelper.accessor("type", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- subTableColumnHelper.accessor("value", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
-];
+import { EventsTable } from "./EventsTable";
const Events: FunctionComponent = () => {
- const [openedLog, setOpenedLog] = useState("");
const { showNavigationDrawer } = useNavigation();
const { data, firstFetch, error } = useGetPollingEvents();
- const columnHelper = createColumnHelper>();
-
- const columns = useMemo(
- () => [
- columnHelper.accessor("blockId", {
- header: () => ,
- cell: (info) => (
-
-
-
- {info.getValue()}
-
-
-
- ),
- }),
- columnHelper.accessor("transactionId", {
- header: () => ,
- cell: (info) => (
-
-
-
- {info.getValue()}
-
-
-
- ),
- }),
- columnHelper.accessor("type", {
- header: () => ,
- meta: {
- className: classes.typeColumn,
- },
- cell: (info) => (
-
- {info.getValue()}
-
- ),
- }),
- columnHelper.accessor("createdAt", {
- header: () => ,
- cell: (info) => (
-
-
- ),
- }),
- columnHelper.display({
- id: "caret",
- meta: {
- className: classes.caretColumn,
- },
- cell: ({ row }) => (
- openLog(status, row.id)}
- />
- ),
- }),
- ],
- [openedLog]
- );
useEffect(() => {
showNavigationDrawer(false);
}, []);
- const openLog = (status: boolean, id: string) => {
- setOpenedLog(!status ? id : "");
- };
-
- return (
- >
- isInitialLoading={firstFetch}
- data={data}
- error={error}
- columns={columns}
- renderCustomHeader={(headerGroup) => (
-
- {headerGroup.headers.map((header) => (
-
- )}
- renderCustomRow={(row) => (
-
-
- {row.getVisibleCells().map((cell) => (
-
- {openedLog === row.id && row.original && (
-
- )}
- >
- );
+ return ();
+const subTableColumns = [
+ subTableColumnHelper.accessor("name", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.getValue()}
+
+
+ ),
+ }),
+ subTableColumnHelper.accessor("type", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.getValue()}
+
+
+ ),
+ }),
+ subTableColumnHelper.accessor("value", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.getValue()}
+
+
+ ),
+ }),
+];
+
+type EventsTableProps = {
+ events: DecoratedPollingEntity[];
+};
+
+export function EventsTable(props: EventsTableProps): ReactElement {
+ const [openedLog, setOpenedLog] = useState("");
+ const columnHelper = createColumnHelper>();
+
+ const columns = useMemo(
+ () => [
+ columnHelper.accessor("blockId", {
+ header: () => ,
+ cell: (info) => (
+
+
+
+ {info.getValue()}
+
+
+
+ ),
+ }),
+ columnHelper.accessor("transactionId", {
+ header: () => ,
+ cell: (info) => (
+
+
+
+ {info.getValue()}
+
+
+
+ ),
+ }),
+ columnHelper.accessor("type", {
+ header: () => ,
+ meta: {
+ className: classes.typeColumn,
+ },
+ cell: (info) => (
+
+ {info.getValue()}
+
+ ),
+ }),
+ columnHelper.accessor("createdAt", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+ columnHelper.display({
+ id: "caret",
+ meta: {
+ className: classes.caretColumn,
+ },
+ cell: ({ row }) => (
+ openLog(status, row.id)}
+ />
+ ),
+ }),
+ ],
+ [openedLog]
+ );
+
+ const openLog = (status: boolean, id: string) => {
+ setOpenedLog(!status ? id : "");
+ };
+
+ return (
+ >
+ data={props.events}
+ columns={columns}
+ renderCustomHeader={(headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+ )}
+ renderCustomRow={(row) => (
+
+
+ {row.getVisibleCells().map((cell) => (
+
+ {openedLog === row.id && row.original && (
+
+ )}
+ />
+ );
+}
diff --git a/frontend/src/pages/interactions/InteractionsPage.tsx b/frontend/src/pages/interactions/InteractionsPage.tsx
index 151b9c29..1cb93bd9 100644
--- a/frontend/src/pages/interactions/InteractionsPage.tsx
+++ b/frontend/src/pages/interactions/InteractionsPage.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement, useState } from "react";
import classes from "./InteractionsPage.module.scss";
-import { TabList, TabItem } from "../../components/tab-list/TabList";
+import { Tabs, TabItem } from "../../components/tabs/Tabs";
import { useInteractionRegistry } from "./contexts/interaction-registry.context";
import { InteractionOutcomeManagerProvider } from "./contexts/outcome.context";
import { InteractionHistory } from "./components/history/InteractionHistory";
@@ -51,14 +51,14 @@ export function InteractionsPage(): ReactElement {
return (
= (props) => {
const { showDialog } = useConfirmDialog();
const history = useHistory();
@@ -105,28 +100,12 @@ const Main: FunctionComponent = (props) => {
})}
>
- 
{tab.label}
))}
{isShowBackButtonVisible && (
,
@@ -28,16 +29,26 @@ const Button: FunctionComponent = ({
{...restProps}
onClick={onClick}
disabled={disabled}
- className={`${classes.button} ${classes[variant]} ${
- disabled ? classes.disabled : ""
- } ${restProps.className} ${outlined ? classes.outlined : ""}`}
+ className={classNames(
+ classes.button,
+ classes[variant],
+ restProps.className,
+ {
+ [classes.disabled]: disabled,
+ [classes.outlined]: outlined,
+ }
+ )}
>
{loading && (
-
-
-
- >
- enableIntroAnimations={enableDetailsIntroAnimation}
- columns={transactionTableColumns}
- data={transactions}
- />
-
-
- >
- enableIntroAnimations={enableDetailsIntroAnimation}
- columns={columnsContract}
- data={contracts}
- />
-
-
- >
- enableIntroAnimations={enableDetailsIntroAnimation}
- columns={columnsKeys}
- data={keys}
- />
-
- {!!account.code && (
-
-
- )}
-
+
);
};
diff --git a/frontend/src/pages/accounts/details/KeysTable.tsx b/frontend/src/pages/accounts/details/KeysTable.tsx
new file mode 100644
index 00000000..9d85d0af
--- /dev/null
+++ b/frontend/src/pages/accounts/details/KeysTable.tsx
@@ -0,0 +1,56 @@
+import { createColumnHelper } from "@tanstack/table-core";
+import { DecoratedPollingEntity } from "../../../contexts/timeout-polling.context";
+import { AccountKey } from "@flowser/shared";
+import Label from "../../../components/label/Label";
+import classes from "./Details.module.scss";
+import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
+import CopyButton from "../../../components/buttons/copy-button/CopyButton";
+import classNames from "classnames";
+import Badge from "../../../components/badge/Badge";
+import { FlowUtils } from "../../../utils/flow-utils";
+import React, { ReactElement } from "react";
+import Table from "../../../components/table/Table";
+
+const columnsHelper = createColumnHelper
+ & {
className?: string;
- variant?: "table-line" | "black" | "header-row" | "dark-blue";
active?: boolean;
- loading?: boolean;
showIntroAnimation?: boolean;
- loadingText?: string;
};
const Card: FunctionComponent = ({
children,
className,
- variant = "dark-blue",
active = false,
- loading = false,
- loadingText = "Loading ...",
showIntroAnimation,
...restProps
}) => {
return (
= ({
- children,
- variant,
- header,
- subheader,
- showIntroAnimation,
- ...restProps
-}) => {
- const [state, setState] = useState(false);
-
- const onToggle = useCallback(() => {
- setState((state) => !state);
- }, []);
-
- return (
-
-
- );
-};
-
-export default CollapsibleCard;
diff --git a/frontend/src/components/colored-circle/ColloredCircle.module.scss b/frontend/src/components/colored-circle/ColloredCircle.module.scss
deleted file mode 100644
index be524364..00000000
--- a/frontend/src/components/colored-circle/ColloredCircle.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-div .coloredCircle {
- display: inline-block;
- margin-left: 5px;
- margin-right: 5px;
- margin-bottom: -2px;
- border-radius: 50%;
- border-style: none;
- height: 20px;
- width: 20px;
-}
\ No newline at end of file
diff --git a/frontend/src/components/colored-circle/ColoredCircle.tsx b/frontend/src/components/colored-circle/ColoredCircle.tsx
deleted file mode 100644
index 42f9829a..00000000
--- a/frontend/src/components/colored-circle/ColoredCircle.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Fragment, FunctionComponent } from "react";
-import classes from "./ColloredCircle.module.scss";
-
-type ColoredCircleProps = {
- color: string;
-};
-
-const ColoredCircle: FunctionComponent = ({ color }) => {
- const styles = { backgroundColor: color };
-
- return color ? (
-
-
-
- ) : null;
-};
-
-export default ColoredCircle;
diff --git a/frontend/src/components/details-card/DetailsCard.module.scss b/frontend/src/components/details-card/DetailsCard.module.scss
index 745e2728..71810430 100644
--- a/frontend/src/components/details-card/DetailsCard.module.scss
+++ b/frontend/src/components/details-card/DetailsCard.module.scss
@@ -4,6 +4,7 @@
.root {
overflow: scroll;
+ background: $gray-100;
@include hiddenScrollbars();
.content {
@@ -17,7 +18,7 @@
.column {
display: flex;
flex-direction: column;
- row-gap: $spacing-l;
+ row-gap: $spacing-s;
& > div {
display: flex;
diff --git a/frontend/src/components/details-tabs/DetailsTabs.module.scss b/frontend/src/components/details-tabs/DetailsTabs.module.scss
deleted file mode 100644
index 29629369..00000000
--- a/frontend/src/components/details-tabs/DetailsTabs.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import 'styles/spacings';
-@import 'styles/colors';
-
-.cardsContainer {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-bottom: $spacing-l * 2;
-
- .smallCard {
- display: flex;
- position: relative;
- justify-content: center;
- width: 100%;
- padding: $spacing-l;
- align-items: center;
- cursor: pointer;
-
- &:hover {
- opacity: 0.7;
- }
-
- &__disabled {
- cursor: default !important;
-
- &:hover {
- opacity: 1;
- }
- }
-
- * + * {
- margin-top: $spacing-l;
- }
-
- .labelValue {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
-
- .clickable {
- color: $blue !important;
- }
- }
-
- .caret {
- justify-self: end;
- position: absolute;
- right: $spacing-l;
- }
- }
-
- .smallCard + .smallCard {
- margin-left: $spacing-l;
- }
-}
-
-.contentDetailsContainer {
-}
diff --git a/frontend/src/components/details-tabs/DetailsTabs.tsx b/frontend/src/components/details-tabs/DetailsTabs.tsx
deleted file mode 100644
index 764b2aa7..00000000
--- a/frontend/src/components/details-tabs/DetailsTabs.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {
- FunctionComponent,
- MouseEventHandler,
- ReactElement,
- useEffect,
- useState,
-} from "react";
-import classes from "./DetailsTabs.module.scss";
-import Card from "../card/Card";
-import Label from "../label/Label";
-import Value from "../value/Value";
-import CaretIcon from "../caret-icon/CaretIcon";
-
-type TabItemProps = {
- label: string;
- value: string | number;
- onClick?: MouseEventHandler;
-};
-
-type ContainerProps = {
- children: ReactElement[] | any;
-};
-
-// TODO: Replace / consolidate with TabList?
-export const DetailsTabs: FunctionComponent = ({
- children,
-}) => {
- const noNilChildren = children.filter((c: any) => !!c);
- const selectedIndex = noNilChildren.findIndex((c: any) => c.props?.children);
- const [selected, setSelected] = useState(selectedIndex);
- const selectedChildren = noNilChildren[selected].props.children;
- const [childContent, setChildContent] = useState(selectedChildren);
-
- useEffect(() => {
- setChildContent(noNilChildren[selected].props.children);
- }, [selected, children]);
-
- return (
- <>
- = ({
- children,
-}) => <>{children};
diff --git a/frontend/src/components/dialogs/action/ActionDialog.module.scss b/frontend/src/components/dialogs/action/ActionDialog.module.scss
index 0b9fc888..3c0cbc83 100644
--- a/frontend/src/components/dialogs/action/ActionDialog.module.scss
+++ b/frontend/src/components/dialogs/action/ActionDialog.module.scss
@@ -7,7 +7,7 @@
display: flex;
flex-direction: column;
align-items: center;
- color: $light-grey;
+ color: $gray-10;
padding: $spacing-l * 3 $spacing-l * 6;
@include fadeInAnimation(.5s);
diff --git a/frontend/src/components/dialogs/base/BaseDialog.module.scss b/frontend/src/components/dialogs/base/BaseDialog.module.scss
index 5ecdc5f0..1363079a 100644
--- a/frontend/src/components/dialogs/base/BaseDialog.module.scss
+++ b/frontend/src/components/dialogs/base/BaseDialog.module.scss
@@ -1,4 +1,5 @@
@import 'styles/colors';
+@import 'styles/rules';
.root {
z-index: 1001;
@@ -9,20 +10,22 @@
left: 0;
right: 0;
overflow: hidden;
- background-color: rgba(20, 28, 45, .9);
justify-content: center;
align-items: center;
-
+ background: transparentize($gray-110, 0.5);
+ backdrop-filter: blur(2px);
.dialog {
width: 600px;
max-width: 90vw;
min-height: 100px;
+ background: $gray-110;
+ border-radius: $border-radius-md;
+ border: 1px solid $gray-50;
.card {
max-height: 90vh;
overflow-y: scroll;
}
-
}
}
diff --git a/frontend/src/components/dialogs/consent/ConsentDialog.module.scss b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss
index c2baba00..49d1832a 100644
--- a/frontend/src/components/dialogs/consent/ConsentDialog.module.scss
+++ b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss
@@ -6,14 +6,12 @@
}
.root {
- color: $grey;
padding: $spacing-xl;
.header {
display: flex;
align-items: center;
.logo {
border-radius: 50%;
- background: $background;
object-fit: scale-down;
width: 50px;
height: 50px;
@@ -32,7 +30,7 @@
}
}
.rightSide {
- color: $dark-grey;
+ color: $gray-20;
flex: 1;
text-align: end;
li {
@@ -50,7 +48,6 @@
.toggleAnalytics {
display: flex;
- color: $grey;
.toggleButton {
margin-right: $spacing-base;
}
diff --git a/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
index 4b10e1ce..e00abc54 100644
--- a/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
+++ b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
@@ -3,7 +3,7 @@ import Button from "../../buttons/button/Button";
import classes from "./SnapshotDialog.module.scss";
import toast from "react-hot-toast";
import { ServiceRegistry } from "../../../services/service-registry";
-import Input from "../../input/Input";
+import Input from "../../inputs/input/Input";
import { ActionDialog } from "../action/ActionDialog";
import { useCurrentProjectId } from "../../../hooks/use-api";
import { useErrorHandler } from "../../../hooks/use-error-handler";
diff --git a/frontend/src/components/errors/ErrorMessage.module.scss b/frontend/src/components/errors/ErrorMessage.module.scss
index 84bf88fa..4587b542 100644
--- a/frontend/src/components/errors/ErrorMessage.module.scss
+++ b/frontend/src/components/errors/ErrorMessage.module.scss
@@ -5,10 +5,10 @@
.root {
@include fadeInAnimation(2s);
- height: 50vh;
display: flex;
align-items: center;
justify-content: center;
+ padding: $spacing-l;
.innerWrapper {
display: flex;
@@ -16,7 +16,7 @@
align-items: center;
.title {
font-size: $font-size-large;
- color: $light-grey;
+ color: $gray-10;
}
.description {
diff --git a/frontend/src/components/event-details-table/EventDetailsTable.module.scss b/frontend/src/components/event-details-table/EventDetailsTable.module.scss
deleted file mode 100644
index bbb36e13..00000000
--- a/frontend/src/components/event-details-table/EventDetailsTable.module.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@import 'styles/colors';
-@import 'styles/spacings';
-@import 'styles/animations';
-
-.root {
- display: flex;
- flex-direction: column;
- min-width: 50%;
- max-width: 50%;
-
- @include fadeInAnimation(.1s);
-
- .header {
- background-color: $color-table-black;
- color: $color-grey;
- display: flex;
- justify-content: space-around;
-
- > div {
- flex: 1;
- }
-
- > div:first-child {
- color: $light-grey;
- font-weight: bold;
- padding-left: $spacing-l * 3;
- }
- }
-
- .row {
- background-color: $color-table-light;
- margin-top: $spacing-s;
- color: $light-grey;
- display: flex;
- justify-content: space-around;
-
- > div {
- flex: 1;
- }
-
- > div:first-child {
- padding-left: $spacing-l * 3;
- }
-
- .ellipsis {
- max-width: 10vw;
- min-width: 10vw;
- display: inline-block;
- overflow: hidden;
- }
- }
-}
diff --git a/frontend/src/components/event-details-table/EventDetailsTable.tsx b/frontend/src/components/event-details-table/EventDetailsTable.tsx
deleted file mode 100644
index 9e2c1d25..00000000
--- a/frontend/src/components/event-details-table/EventDetailsTable.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { FunctionComponent } from "react";
-import classes from "./EventDetailsTable.module.scss";
-import MiddleEllipsis from "../ellipsis/MiddleEllipsis";
-import CopyButton from "../buttons/copy-button/CopyButton";
-import { EventUtils } from "../../utils/event-utils";
-
-export type EventData = Record;
-
-export type EventDetailsTableProps = {
- data: EventData;
- className?: string;
-};
-
-const EventDetailsTable: FunctionComponent = ({
- data,
- ...restProps
-}) => {
- const eventData = EventUtils.computeEventData(data);
- return (
- = (props) => {
);
};
-export const RouteWithLayout: FC = (props) => (
-
+export const RouteWithProjectLayout: FC = (props) => (
+
+
);
-const Layout: FunctionComponent = ({ children }) => {
+const ProjectLayout: FunctionComponent = ({ children }) => {
const location = useLocation();
const showMargin = !location.pathname.startsWith(routes.interactions);
@@ -39,7 +39,7 @@ const Layout: FunctionComponent = ({ children }) => {
= {
renderCustomRow?: (row: Row>) => ReactElement;
headerRowClass?: string;
bodyRowClass?: string | ((row: Row>) => string);
- footerRowClass?: string;
isInitialLoading?: boolean;
error?: Error | string | null | undefined;
};
@@ -54,7 +53,6 @@ function Table({
renderCustomHeader,
headerRowClass,
bodyRowClass,
- footerRowClass,
className,
error,
enableIntroAnimations = true,
@@ -95,7 +93,6 @@ function Table({
headerRowClass
)}
key={headerGroup.id}
- variant="header-row"
>
{headerGroup.headers.map((header) => (
,
- HTMLTextAreaElement
-> & {
- value?: string;
- disabled?: boolean;
- rows?: number;
-};
-
-const TextArea: ForwardRefRenderFunction = (
- { rows = 6, value = "", disabled = false, ...restProps }: TextAreaProps,
- ref
-) => {
- return (
- >();
-
-const columnsContract = [
- columnHelperContracts.accessor("name", {
- header: () => ,
- cell: (info) => (
-
-
- {info.row.original.name}
-
-
- ),
- }),
- columnHelperContracts.accessor("accountAddress", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
-];
-
-// KEYS TABLE
-const columnHelperKeys =
- createColumnHelper>();
-
-const columnsKeys = [
- columnHelperKeys.accessor("accountAddress", {
- header: () => ,
- cell: (info) => (
- ();
- const urlQueryParams = useUrlQuery();
- const focusedStorageId = urlQueryParams.get("focusedStorageId");
const { setBreadcrumbs } = useNavigation();
const { showNavigationDrawer } = useNavigation();
const { data, isLoading } = useGetAccount(accountId);
const { data: transactions } = useGetPollingTransactionsByAccount(accountId);
const { data: contracts } = useGetPollingContractsByAccount(accountId);
- const { data: storageItems } = useGetPollingStorageByAccount(accountId);
const { data: keys } = useGetPollingKeysByAccount(accountId);
const { account } = data ?? {};
- const [expandedCardIds, setExpandedCardIds] = useState(
- new Set(focusedStorageId ? [focusedStorageId] : [])
- );
-
- useEffect(() => {
- if (focusedStorageId) {
- expandCardById(focusedStorageId);
- // We need to wait for the virtual nodes to be added to the browser DOM.
- // This is achieved with setTimeout call - wait for the next window paint.
- // There might be a better React way to do this.
- setTimeout(() => {
- const targetDomNode = document.getElementById(focusedStorageId);
- window.scrollTo(0, targetDomNode?.offsetTop ?? 0);
- });
- }
- }, [focusedStorageId, storageItems]);
-
- const expandCardById = (id: string) => {
- setExpandedCardIds((prev) => new Set(prev.add(id)));
- };
-
- const minimizeCardById = (id: string) => {
- expandedCardIds.delete(id);
- setExpandedCardIds(new Set(expandedCardIds));
- };
-
- const toggleCardExpand = (id: string) => {
- if (expandedCardIds.has(id)) {
- track(AnalyticEvent.CLICK_MINIMIZE_STORAGE_CARD, {
- storageId: id,
- });
- minimizeCardById(id);
- } else {
- track(AnalyticEvent.CLICK_EXPAND_STORAGE_CARD, {
- storageId: id,
- });
- expandCardById(id);
- }
- };
-
- const privateStorageItems = storageItems.filter(
- (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_PRIVATE
- );
- const publicStorageItems = storageItems.filter(
- (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_PUBLIC
- );
- const internalStorageItems = storageItems.filter(
- (item) => item.pathDomain === AccountStorageDomain.STORAGE_DOMAIN_STORAGE
- );
-
- const privateAndPublicStorageItems = [
- ...publicStorageItems,
- ...privateStorageItems,
- ];
const breadcrumbs: Breadcrumb[] = [
{ to: "/accounts", label: "Accounts" },
@@ -227,60 +86,35 @@ const Details: FunctionComponent = () => {
{restProps.children}
diff --git a/frontend/src/components/buttons/radio-button/RadioButton.module.scss b/frontend/src/components/buttons/radio-button/RadioButton.module.scss
index 9545dbd7..5cf3c258 100644
--- a/frontend/src/components/buttons/radio-button/RadioButton.module.scss
+++ b/frontend/src/components/buttons/radio-button/RadioButton.module.scss
@@ -21,7 +21,7 @@
& > span {
display: block;
visibility: visible;
- background-color: $light-grey;
+ background-color: $gray-10;
border-radius: 50%;
width: 10px;
height: 10px;
diff --git a/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss b/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss
index 82911306..a6816b0a 100644
--- a/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss
+++ b/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss
@@ -29,11 +29,11 @@
&.inactive {
transform: translateX(0);
transition: all 100ms;
- background-color: #5B5E62;
+ background-color: $gray-30;
}
&.disabled {
- background-color: $dark-grey;
+ background-color: $gray-50;
}
}
}
diff --git a/frontend/src/components/cadence-editor/cadence-editor.css b/frontend/src/components/cadence-editor/cadence-editor.css
index 4efb67b6..787fd56e 100644
--- a/frontend/src/components/cadence-editor/cadence-editor.css
+++ b/frontend/src/components/cadence-editor/cadence-editor.css
@@ -1,6 +1,7 @@
/* Main editor container */
.cadence-editor {
width: 100%;
+ background: #272B32;
}
.cadence-editor .cm-editor {
diff --git a/frontend/src/components/card/Card.module.scss b/frontend/src/components/card/Card.module.scss
index 36fcbfb8..b2e80712 100644
--- a/frontend/src/components/card/Card.module.scss
+++ b/frontend/src/components/card/Card.module.scss
@@ -13,34 +13,4 @@
@include addNewContentAnimation(.4s);
}
- .loading {
- position: absolute;
- display: flex;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: $table-line-background;
- align-items: center;
- justify-content: center;
- color: $light-grey;
- opacity: 0.8;
- }
-
- &.header-row {
- background-color: $dark-violet;
- color: $grey;
- }
-
- &.table-line {
- background-color: $table-line-background;
- }
-
- &.dark-blue {
- //background-color: $dark-blue;
- }
-
- &.active {
- border: 1px solid $yellow;
- }
}
diff --git a/frontend/src/components/card/Card.tsx b/frontend/src/components/card/Card.tsx
index bee66ad3..f5f68d24 100644
--- a/frontend/src/components/card/Card.tsx
+++ b/frontend/src/components/card/Card.tsx
@@ -1,34 +1,28 @@
import React, { FunctionComponent, HTMLAttributes } from "react";
import classes from "./Card.module.scss";
+import classNames from "classnames";
type CardProps = HTMLAttributes
- {loading && {loadingText}}
{children}
);
diff --git a/frontend/src/components/collapsible-card/Collapsible.module.scss b/frontend/src/components/collapsible-card/Collapsible.module.scss
deleted file mode 100644
index 67208679..00000000
--- a/frontend/src/components/collapsible-card/Collapsible.module.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import 'styles/spacings';
-@import 'styles/animations';
-@import 'styles/colors';
-@import 'styles/typography';
-
-.root {
- display: flex;
- flex-direction: column;
-
- &.showIntroAnimation {
- @include addNewContentAnimation(.4s);
- }
-
- .header {
- display: flex;
- align-items: center;
- color: $color-grey;
-
- &.expanded {
- border-bottom: 1px solid $light-grey;
- padding-bottom: $spacing-l * 2;
- }
-
- .title {
- display: flex;
- flex-direction: column;
- margin-right: $spacing-l * 2;
-
- & > span:first-child {
- font-size: $font-size-small;
- text-transform: capitalize;
- flex: 1;
- }
-
- & > span:last-child {
- color: $blue;
- font-size: $font-size-normal;
- cursor: pointer;
- }
- }
-
- .icon {
- margin-left: auto;
- }
- }
-
- .content {
- max-height: 0;
- transition-property: max-height;
- transition: 100ms ease-in;
- opacity: 0;
- overflow: hidden;
-
- &.expanded {
- opacity: 1;
- margin-top: $spacing-l * 2;
- max-height: initial;
- }
- }
-}
diff --git a/frontend/src/components/collapsible-card/CollapsibleCard.tsx b/frontend/src/components/collapsible-card/CollapsibleCard.tsx
deleted file mode 100644
index e1de070f..00000000
--- a/frontend/src/components/collapsible-card/CollapsibleCard.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { FunctionComponent, useCallback, useState } from "react";
-import Card from "../card/Card";
-import classes from "./Collapsible.module.scss";
-import CaretIcon from "../caret-icon/CaretIcon";
-
-type CollapsibleCardProps = {
- header: string;
- subheader?: string;
- variant?: "table-line" | "black" | "header-row" | "dark-blue";
- showIntroAnimation?: boolean;
- className?: string;
-};
-
-const CollapsibleCard: FunctionComponent
-
-
- {header}
- {subheader && {subheader}}
-
-
- {children}
-
-
- {noNilChildren.map((child: any, index: number) => {
- const isDisabled = !child.props.children;
- return (
- {
- if (!isDisabled) setSelected(index);
- if (child.props.onClick) child.props.onClick(e);
- }}
- >
-
- );
- })}
-
-
-
-
- {child.props.value}
-
-
- {!isDisabled && (
-
-
- )}
- {childContent}
-
- );
-};
-
-export const DetailsTabItem: FunctionComponent
-
- );
-};
-
-export default EventDetailsTable;
diff --git a/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss b/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss
index bff0abf4..67cb8ff2 100644
--- a/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss
+++ b/frontend/src/components/fullscreen-loading/FullScreenLoading.module.scss
@@ -18,6 +18,6 @@
.text {
margin-top: $spacing-l;
font-size: $font-size-xlarge;
- color: $light-grey
+ color: $gray-10
}
}
diff --git a/frontend/src/components/icons/Icons.tsx b/frontend/src/components/icons/Icons.tsx
index b3b75c0b..6a883a2b 100644
--- a/frontend/src/components/icons/Icons.tsx
+++ b/frontend/src/components/icons/Icons.tsx
@@ -18,6 +18,7 @@ import { ReactComponent as Script } from "../../assets/icons/script.svg";
import { ReactComponent as QuestionMark } from "../../assets/icons/question-mark.svg";
import { ReactComponent as Switch } from "../../assets/icons/switch.svg";
import { ReactComponent as Restart } from "../../assets/icons/restart.svg";
+import { ReactComponent as Open } from "assets/icons/open.svg";
export const FlowserIcon = {
Account,
@@ -40,4 +41,5 @@ export const FlowserIcon = {
Search,
Cancel,
Link,
+ Open,
};
diff --git a/frontend/src/components/input/Input.module.scss b/frontend/src/components/inputs/input/Input.module.scss
similarity index 100%
rename from frontend/src/components/input/Input.module.scss
rename to frontend/src/components/inputs/input/Input.module.scss
diff --git a/frontend/src/components/input/Input.tsx b/frontend/src/components/inputs/input/Input.tsx
similarity index 100%
rename from frontend/src/components/input/Input.tsx
rename to frontend/src/components/inputs/input/Input.tsx
diff --git a/frontend/src/components/search-input/SearchInput.module.scss b/frontend/src/components/inputs/search-input/SearchInput.module.scss
similarity index 100%
rename from frontend/src/components/search-input/SearchInput.module.scss
rename to frontend/src/components/inputs/search-input/SearchInput.module.scss
diff --git a/frontend/src/components/search-input/SearchInput.tsx b/frontend/src/components/inputs/search-input/SearchInput.tsx
similarity index 95%
rename from frontend/src/components/search-input/SearchInput.tsx
rename to frontend/src/components/inputs/search-input/SearchInput.tsx
index ccdfc756..ac49048f 100644
--- a/frontend/src/components/search-input/SearchInput.tsx
+++ b/frontend/src/components/inputs/search-input/SearchInput.tsx
@@ -1,7 +1,7 @@
import classNames from "classnames";
import React, { ReactElement, useRef } from "react";
import classes from "./SearchInput.module.scss";
-import { FlowserIcon } from "../icons/Icons";
+import { FlowserIcon } from "../../icons/Icons";
type SearchInputProps = {
className?: string;
diff --git a/frontend/src/components/select-input/SelectInput.module.scss b/frontend/src/components/inputs/select-input/SelectInput.module.scss
similarity index 100%
rename from frontend/src/components/select-input/SelectInput.module.scss
rename to frontend/src/components/inputs/select-input/SelectInput.module.scss
diff --git a/frontend/src/components/select-input/SelectInput.tsx b/frontend/src/components/inputs/select-input/SelectInput.tsx
similarity index 100%
rename from frontend/src/components/select-input/SelectInput.tsx
rename to frontend/src/components/inputs/select-input/SelectInput.tsx
diff --git a/frontend/src/components/json-view/JsonView.module.scss b/frontend/src/components/json-view/JsonView.module.scss
index d40c7136..ff4cf57e 100644
--- a/frontend/src/components/json-view/JsonView.module.scss
+++ b/frontend/src/components/json-view/JsonView.module.scss
@@ -1,4 +1,5 @@
@import "styles/colors";
+@import "styles/scrollbars";
.root {
display: inline-block;
@@ -7,11 +8,5 @@
height: 100%;
width: 100%;
- &::-webkit-scrollbar-track {
- background-color: $code-background;
- }
-
- &::-webkit-scrollbar-corner {
- background-color: $code-background;
- }
+ @include hiddenScrollbars()
}
diff --git a/frontend/src/components/label/Label.module.scss b/frontend/src/components/label/Label.module.scss
index 5fb1a0dc..fb7fc179 100644
--- a/frontend/src/components/label/Label.module.scss
+++ b/frontend/src/components/label/Label.module.scss
@@ -18,6 +18,6 @@
&.xlarge {
font-size: $font-size-xlarge;
- color: $light-grey;
+ color: $gray-10;
}
}
diff --git a/frontend/src/components/layout/Layout.module.scss b/frontend/src/components/layout/Layout.module.scss
index 9eb91b38..583b1cf0 100644
--- a/frontend/src/components/layout/Layout.module.scss
+++ b/frontend/src/components/layout/Layout.module.scss
@@ -1,7 +1,6 @@
@import "styles/spacings";
@import "styles/colors";
-$grid-gap: 30px;
$side-nav-width: 80px;
.root {
@@ -18,9 +17,18 @@ $side-nav-width: 80px;
flex-direction: column;
min-height: 100vh;
width: calc(100vw - $side-nav-width);
+ max-height: 100vh;
+ overflow-y: scroll;
+
+ .breadcrumbs {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ background: $gray-110;
+ }
.body {
- color: $light-grey;
+ color: $gray-10;
align-items: stretch;
display: flex;
flex-direction: column;
@@ -28,7 +36,12 @@ $side-nav-width: 80px;
}
.bodyWithMargin {
- margin: $grid-gap $spacing-l 0;
+ margin: $spacing-l;
+ }
+
+ .logs {
+ position: sticky;
+ bottom: 0;
}
}
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
index 3e290cc8..5c748742 100644
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -1,6 +1,6 @@
import React, { FC, FunctionComponent } from "react";
import classes from "./Layout.module.scss";
-import Logs from "../../pages/logs/Logs";
+import { Logs } from "../../pages/logs/Logs";
import { Route, RouteProps, useHistory, useLocation } from "react-router-dom";
import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg";
import classNames from "classnames";
@@ -25,13 +25,13 @@ export const RouteWithBackButton: FC
-
- {eventData.map((item, index) => (
- VALUES
- NAME
- TYPE
- VALUE
-
-
-
- ))}
-
-
- {item.name}
-
-
-
-
- {item.type}
-
-
-
-
- {item.value}
-
-
-
-
{
>
{children}
- {children}
;
-};
-
-export default ListContainer;
diff --git a/frontend/src/components/side-navigation/SideNavigation.module.scss b/frontend/src/components/side-navigation/SideNavigation.module.scss
index f15c123c..af5b484a 100644
--- a/frontend/src/components/side-navigation/SideNavigation.module.scss
+++ b/frontend/src/components/side-navigation/SideNavigation.module.scss
@@ -5,12 +5,13 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- background: $new-color-1;
+ background: $gray-110;
padding: $spacing-base 0;
align-items: center;
+ border-right: 1px solid $gray-80;
.inactiveLink {
- background: $new-color-2;
+ background: $gray-100;
opacity: 0.5;
width: 50px;
height: 50px;
diff --git a/frontend/src/components/table/Table.module.scss b/frontend/src/components/table/Table.module.scss
index fcdb9e8f..fe29c5ad 100644
--- a/frontend/src/components/table/Table.module.scss
+++ b/frontend/src/components/table/Table.module.scss
@@ -6,6 +6,7 @@
margin-bottom: $spacing-base;
padding-bottom: $spacing-base;
padding-top: $spacing-base;
+ background: transparentize($violet-100, 0.5) !important;
}
.tableRow {
@@ -14,6 +15,7 @@
margin-bottom: $spacing-s;
padding-bottom: $spacing-base * 0.8;
padding-top: $spacing-base * 0.8;
+ background: transparentize($gray-80, 0.2);
& > div {
display: flex;
diff --git a/frontend/src/components/table/Table.tsx b/frontend/src/components/table/Table.tsx
index 709aae05..3a8cc844 100644
--- a/frontend/src/components/table/Table.tsx
+++ b/frontend/src/components/table/Table.tsx
@@ -22,7 +22,6 @@ type CustomTableProps({
showIntroAnimation={
showIntroAnimation(row.original) && enableIntroAnimations
}
- variant="table-line"
>
{row.getVisibleCells().map((cell) => (
);
}
diff --git a/frontend/src/components/text-area/TextArea.module.scss b/frontend/src/components/text-area/TextArea.module.scss
deleted file mode 100644
index e8f6ee78..00000000
--- a/frontend/src/components/text-area/TextArea.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import 'styles/rules';
-@import 'styles/colors';
-@import 'styles/typography';
-@import 'styles/spacings';
-
-.root {
- border: 1px solid $color-input-border;
- border-radius: $border-radius-input;
- display: flex;
- width: 100%;
- overflow: hidden;
-
- &:focus-within {
- border-color: $yellow;
- }
-
- & > textarea {
- flex: 1;
- border: none;
- background: none;
- padding: 10px $spacing-base * 2;
- outline: none;
- color: $color-grey;
- font-size: $font-size-small;
- }
-}
diff --git a/frontend/src/components/text-area/TextArea.tsx b/frontend/src/components/text-area/TextArea.tsx
deleted file mode 100644
index 8b4566c3..00000000
--- a/frontend/src/components/text-area/TextArea.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { ForwardRefRenderFunction } from "react";
-import classes from "./TextArea.module.scss";
-
-export type TextAreaProps = React.DetailedHTMLProps<
- React.TextareaHTMLAttributes({
)
)}
- {table.getFooterGroups().map((footerGroup) => (
-
);
}
diff --git a/frontend/src/components/tabs/StyledTabs.module.scss b/frontend/src/components/tabs/StyledTabs.module.scss
new file mode 100644
index 00000000..23921256
--- /dev/null
+++ b/frontend/src/components/tabs/StyledTabs.module.scss
@@ -0,0 +1,31 @@
+@import "styles/spacings";
+@import "styles/colors";
+
+.tab {
+ max-width: 120px;
+ padding: $spacing-s !important;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.activeTab {
+ background: $gray-100 !important;
+ border-bottom: 2px solid $violet-100 !important;
+}
+
+.tabLabel {
+ text-align: center;
+}
+
+.tabWrapper {
+}
+
+.tabWrapper, .inactiveTab {
+ background: $gray-110;
+}
+
+.content {
+ padding: $spacing-l;
+ background: $gray-100;
+}
diff --git a/frontend/src/components/tabs/StyledTabs.tsx b/frontend/src/components/tabs/StyledTabs.tsx
new file mode 100644
index 00000000..63c78f75
--- /dev/null
+++ b/frontend/src/components/tabs/StyledTabs.tsx
@@ -0,0 +1,19 @@
+import classes from "./StyledTabs.module.scss";
+import { Tabs, TabsProps } from "./Tabs";
+import React, { ReactElement } from "react";
+
+type StyledTabsProps = TabsProps;
+
+export function StyledTabs(props: StyledTabsProps): ReactElement {
+ return (
+
- {footerGroup.headers.map((header) => (
-
- ))}
- {flexRender(header.column.columnDef.footer, header.getContext())}
-
- ))}
-
@@ -74,7 +87,9 @@ export function TabList(props: TabListProps): ReactElement {
)}
- {currentTab?.content}
+
+ {currentTab?.content}
+
-
-
- );
-};
-
-export default React.forwardRef(TextArea);
diff --git a/frontend/src/pages/accounts/details/Details.module.scss b/frontend/src/pages/accounts/details/Details.module.scss
index 9072ef63..ef9623d9 100644
--- a/frontend/src/pages/accounts/details/Details.module.scss
+++ b/frontend/src/pages/accounts/details/Details.module.scss
@@ -94,52 +94,4 @@
}
}
-.grid {
- width: 100%;
- max-width: 100%;
- display: grid;
- column-gap: 15px;
- row-gap: 20px;
- grid-template-columns: repeat(3, 1fr);
- margin-bottom: 40px;
-}
-
-.gridExtendable {
- width: 100%;
- max-width: 100%;
- display: grid;
- column-gap: 15px;
- row-gap: 20px;
- grid-template-columns: repeat(4, 1fr);
-
- .gridItemExtended {
- grid-column: 1 / span 4;
- height: 600px;
- }
-}
-
-@media all and (max-width: 1350px) {
- .gridExtendable {
- grid-template-columns: repeat(3, 1fr);
-
- .gridItemExtended {
- grid-column: 1 / span 3;
- height: 600px;
- }
- }
-}
-
-@media all and (max-width: 900px) {
- .grid {
- grid-template-columns: repeat(2, 1fr);
- }
- .gridExtendable {
- grid-template-columns: repeat(2, 1fr);
-
- .gridItemExtended {
- grid-column: 1 / span 2;
- height: 600px;
- }
- }
-}
diff --git a/frontend/src/pages/accounts/details/Details.tsx b/frontend/src/pages/accounts/details/Details.tsx
index cb73c551..0fe03b8a 100644
--- a/frontend/src/pages/accounts/details/Details.tsx
+++ b/frontend/src/pages/accounts/details/Details.tsx
@@ -1,183 +1,42 @@
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent, useEffect } from "react";
import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation";
import classes from "./Details.module.scss";
-import Value from "../../../components/value/Value";
-import Label from "../../../components/label/Label";
-import ContentDetailsScript from "../../../components/content-details-script/ContentDetailsScript";
-import CopyButton from "../../../components/buttons/copy-button/CopyButton";
-import {
- DetailsTabItem,
- DetailsTabs,
-} from "../../../components/details-tabs/DetailsTabs";
-import { NavLink, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
import {
useGetAccount,
useGetPollingContractsByAccount,
useGetPollingKeysByAccount,
- useGetPollingStorageByAccount,
useGetPollingTransactionsByAccount,
} from "../../../hooks/use-api";
-import { createColumnHelper } from "@tanstack/table-core";
-import {
- AccountContract,
- AccountKey,
- AccountStorageDomain,
- Transaction,
-} from "@flowser/shared";
-import { FlowUtils } from "../../../utils/flow-utils";
-import Table from "../../../components/table/Table";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
-import Badge from "../../../components/badge/Badge";
-import { PublicPrivateStorageCard } from "./PublicPrivateStorageCard";
-import { InternalStorageCard } from "./InternalStorageCard";
-import classNames from "classnames";
-import { useUrlQuery } from "../../../hooks/use-url-query";
import {
DetailsCard,
DetailsCardColumn,
} from "components/details-card/DetailsCard";
-import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-import { useAnalytics } from "../../../hooks/use-analytics";
-import { AnalyticEvent } from "../../../services/analytics.service";
import { TextUtils } from "../../../utils/text-utils";
-import { transactionTableColumns } from "../../transactions/main/Main";
-import { enableDetailsIntroAnimation } from "../../../config/common";
import { SizedBox } from "../../../components/sized-box/SizedBox";
import { AccountAvatar } from "../../../components/account/avatar/AccountAvatar";
import { AccountName } from "../../../components/account/name/AccountName";
+import { StyledTabs } from "../../../components/tabs/StyledTabs";
+import { AccountStorage } from "./storage/AccountStorage";
+import { TransactionsTable } from "../../transactions/main/TransactionsTable";
+import { ContractsTable } from "../../contracts/main/ContractsTable";
+import { KeysTable } from "./KeysTable";
+import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor";
export type AccountDetailsRouteParams = {
accountId: string;
};
-// CONTRACTS TABLE
-const columnHelperContracts =
- createColumnHelper
-
- ),
- }),
-];
-
const Details: FunctionComponent = () => {
- const { track } = useAnalytics();
const { accountId } = useParams
-
- {info.row.original.publicKey}
-
-
-
- WEIGHT: {info.row.original.weight}
- SEQ. NUMBER: {info.row.original.sequenceNumber}
- INDEX: {info.row.original.index}
-
- SIGN CURVE:{" "}
- {FlowUtils.getSignatureAlgoName(info.row.original.signAlgo)}
-
-
- HASH ALGO.: {FlowUtils.getHashAlgoName(info.row.original.hashAlgo)}
-
- REVOKED: {info.row.original.revoked ? "YES" : "NO"}
-
-
- {privateAndPublicStorageItems.map((item) => (
-
-
- {internalStorageItems.map((item) => (
- toggleCardExpand(item.id)}
- isExpanded={expandedCardIds.has(item.id)}
- className={classNames({
- [classes.gridItemExtended]: expandedCardIds.has(item.id),
- })}
- />
- ))}
-
-
+
+ ),
+ }),
+];
+
+type KeysTableProps = {
+ keys: DecoratedPollingEntity
+
+ {info.row.original.publicKey}
+
+
+
+ WEIGHT: {info.row.original.weight}
+ SEQ. NUMBER: {info.row.original.sequenceNumber}
+ INDEX: {info.row.original.index}
+
+ SIGN CURVE:{" "}
+ {FlowUtils.getSignatureAlgoName(info.row.original.signAlgo)}
+
+
+ HASH ALGO.: {FlowUtils.getHashAlgoName(info.row.original.hashAlgo)}
+
+ REVOKED: {info.row.original.revoked ? "YES" : "NO"}
+
+
+ {privateAndPublicStorageItems.map((item) => (
+
+
+ {internalStorageItems.map((item) => (
+ toggleCardExpand(item.id)}
+ isExpanded={expandedCardIds.has(item.id)}
+ className={classNames({
+ [classes.gridItemExtended]: expandedCardIds.has(item.id),
+ })}
+ />
+ ))}
+
+
+ );
+}
diff --git a/frontend/src/pages/accounts/details/StorageBadge.module.scss b/frontend/src/pages/accounts/details/storage/StorageBadge.module.scss
similarity index 100%
rename from frontend/src/pages/accounts/details/StorageBadge.module.scss
rename to frontend/src/pages/accounts/details/storage/StorageBadge.module.scss
diff --git a/frontend/src/pages/accounts/details/StorageDomainBadge.tsx b/frontend/src/pages/accounts/details/storage/StorageDomainBadge.tsx
similarity index 89%
rename from frontend/src/pages/accounts/details/StorageDomainBadge.tsx
rename to frontend/src/pages/accounts/details/storage/StorageDomainBadge.tsx
index a1e17c98..0b066be4 100644
--- a/frontend/src/pages/accounts/details/StorageDomainBadge.tsx
+++ b/frontend/src/pages/accounts/details/storage/StorageDomainBadge.tsx
@@ -1,7 +1,7 @@
import React, { ReactElement } from "react";
import classes from "./StorageBadge.module.scss";
import { AccountStorageDomain } from "@flowser/shared";
-import { FlowUtils } from "../../../utils/flow-utils";
+import { FlowUtils } from "../../../../utils/flow-utils";
export type StorageBadgeProps = {
pathDomain: AccountStorageDomain;
diff --git a/frontend/src/pages/accounts/details/BaseStorageCard.module.scss b/frontend/src/pages/accounts/details/storage/cards/BaseStorageCard.module.scss
similarity index 89%
rename from frontend/src/pages/accounts/details/BaseStorageCard.module.scss
rename to frontend/src/pages/accounts/details/storage/cards/BaseStorageCard.module.scss
index 6f31f6dd..cc379cdb 100644
--- a/frontend/src/pages/accounts/details/BaseStorageCard.module.scss
+++ b/frontend/src/pages/accounts/details/storage/cards/BaseStorageCard.module.scss
@@ -8,7 +8,7 @@
flex-direction: column;
width: 100%;
border-radius: 10px;
- background-color: $code-background;
+ background-color: transparentize($gray-110, 0.5);
&.introAnimation {
@include addNewContentAnimation(.4s);
@@ -18,7 +18,6 @@
display: flex;
justify-content: space-between;
align-items: center;
- background: rgb(127, 137, 174);
background: $gradient-1;
border-radius: 10px 10px 0 0;
transition: 0.2s ease-in-out;
@@ -32,7 +31,7 @@
margin-left: $spacing-l;
font-size: $font-size-xsmall;
font-weight: 600;
- color: $background;
+ color: $gray-80;
text-transform: uppercase;
}
@@ -46,12 +45,12 @@
border-style: none;
height: 20px;
width: 20px;
- background-color: $background;
+ background-color: $gray-80;
transition: 0.3s;
.icon {
font-size: $font-size-large;
- color: #8693b0;
+ color: $purple;
}
}
}
@@ -79,7 +78,7 @@
margin-bottom: 8px;
width: fit-content;
border: 0.5px solid $purple;
- color: $color-light-gray;
+ color: $gray-10;
border-radius: 10px;
padding: 2px 10px 2px 10px;
font-size: 13px;
diff --git a/frontend/src/pages/accounts/details/InternalStorageCard.tsx b/frontend/src/pages/accounts/details/storage/cards/InternalStorageCard.tsx
similarity index 95%
rename from frontend/src/pages/accounts/details/InternalStorageCard.tsx
rename to frontend/src/pages/accounts/details/storage/cards/InternalStorageCard.tsx
index 35bc8d43..0afa5bec 100644
--- a/frontend/src/pages/accounts/details/InternalStorageCard.tsx
+++ b/frontend/src/pages/accounts/details/storage/cards/InternalStorageCard.tsx
@@ -3,9 +3,9 @@ import classes from "./BaseStorageCard.module.scss";
import { AccountStorageItem } from "@flowser/shared/dist/src/generated/entities/accounts";
import { FlowUtils } from "utils/flow-utils";
import classNames from "classnames";
-import { SimpleButton } from "../../../components/buttons/simple-button/SimpleButton";
+import { SimpleButton } from "../../../../../components/buttons/simple-button/SimpleButton";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-import { JsonView } from "../../../components/json-view/JsonView";
+import { JsonView } from "../../../../../components/json-view/JsonView";
type ExtendableStorageCardProps = {
storageItem: DecoratedPollingEntity
- {flexRender(header.column.columnDef.header, header.getContext())}
-
- ))}
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
- ))}
-
- {flexRender(header.column.columnDef.header, header.getContext())}
-
- ))}
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
- ))}
-
-
- data={EventUtils.computeEventData(row.original.data)}
- columns={subTableColumns}
- bodyRowClass={classes.subTableRow}
- headerRowClass={classes.subTableRow}
- />
-
- )}
-
+ {flexRender(header.column.columnDef.header, header.getContext())}
+
+ ))}
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+
+ data={EventUtils.computeEventData(row.original.data)}
+ columns={subTableColumns}
+ bodyRowClass={classes.subTableRow}
+ headerRowClass={classes.subTableRow}
+ />
+
+ )}
+
- setCurrentSideMenuTabId(tab.id)}
tabs={sideMenuTabs}
/>
setCurrentTabId(tab.id)}
tabs={tabs}
/>
@@ -199,13 +196,9 @@ function ScriptOutcome(props: { outcome: FlowScriptOutcome }) {
}
return (
- setCurrentTabId(tab.id)}
tabs={tabs}
/>
diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx b/frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx
index fa328b04..0b36ac27 100644
--- a/frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx
+++ b/frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx
@@ -1,7 +1,7 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
import { FclValues } from "@flowser/shared";
-import SelectInput from "../../../../../../components/select-input/SelectInput";
+import SelectInput from "../../../../../../components/inputs/select-input/SelectInput";
export function BoolBuilder(props: CadenceValueBuilder): ReactElement {
const { value, setValue } = props;
diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx b/frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
index d48609c8..06f2b171 100644
--- a/frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
+++ b/frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/input/Input";
+import Input from "../../../../../../components/inputs/input/Input";
import { FclValues } from "@flowser/shared";
export function FixedPointNumberBuilder(
diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx b/frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
index 34536210..9576ddec 100644
--- a/frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
+++ b/frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/input/Input";
+import Input from "../../../../../../components/inputs/input/Input";
import { FclValues } from "@flowser/shared";
export function IntegerNumberBuilder(props: CadenceValueBuilder): ReactElement {
diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx b/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx
index 4d717c2a..fef340e3 100644
--- a/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx
+++ b/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx
@@ -4,8 +4,8 @@ import { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
import SelectInput, {
SelectInputOption,
-} from "../../../../../../components/select-input/SelectInput";
-import Input from "../../../../../../components/input/Input";
+} from "../../../../../../components/inputs/select-input/SelectInput";
+import Input from "../../../../../../components/inputs/input/Input";
export function PathBuilder(props: CadenceValueBuilder): ReactElement {
const { type, value, setValue } = props;
diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx b/frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx
index 90596ece..acdcb59e 100644
--- a/frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx
+++ b/frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/input/Input";
+import Input from "../../../../../../components/inputs/input/Input";
export function TextualBuilder(props: CadenceValueBuilder): ReactElement {
const { value, setValue } = props;
diff --git a/frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss b/frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss
index 0075ddbc..ffdce883 100644
--- a/frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss
+++ b/frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss
@@ -8,7 +8,6 @@
padding: $spacing-l;
display: flex;
flex-direction: column;
- height: 100%;
justify-content: space-between;
.storedTemplates {
diff --git a/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx b/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx
index 13b4760f..15e233e2 100644
--- a/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx
+++ b/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx
@@ -3,8 +3,8 @@ import { useInteractionRegistry } from "../../contexts/interaction-registry.cont
import classes from "./InteractionTemplates.module.scss";
import { FlowserIcon } from "../../../../components/icons/Icons";
import { PrimaryButton } from "../../../../components/buttons/primary-button/PrimaryButton";
-import Input from "../../../../components/input/Input";
-import { SearchInput } from "../../../../components/search-input/SearchInput";
+import Input from "../../../../components/inputs/input/Input";
+import { SearchInput } from "../../../../components/inputs/search-input/SearchInput";
import { useConfirmDialog } from "../../../../contexts/confirm-dialog.context";
import classNames from "classnames";
import { InteractionLabel } from "../interaction-label/InteractionLabel";
diff --git a/frontend/src/pages/logs/Logs.module.scss b/frontend/src/pages/logs/Logs.module.scss
index ae445f14..324ac0a0 100644
--- a/frontend/src/pages/logs/Logs.module.scss
+++ b/frontend/src/pages/logs/Logs.module.scss
@@ -13,9 +13,10 @@
.root {
padding: 0 $spacing-l * 2;
- background: $new-color-1;
+ background: $gray-110;
display: flex;
flex-direction: column;
+ border-top: 1px solid $gray-80;
@include hiddenScrollbars();
@@ -65,7 +66,7 @@
font-size: $font-size-small;
font-weight: 100;
- color: $light-grey;
+ color: $gray-10;
opacity: 0.4;
cursor: default;
@@ -111,7 +112,7 @@
flex-direction: column;
height: 100%;
overflow-y: scroll;
- color: $light-grey;
+ color: $gray-10;
& > span {
display: flex;
diff --git a/frontend/src/pages/logs/Logs.tsx b/frontend/src/pages/logs/Logs.tsx
index 4c6d26a9..65b65700 100644
--- a/frontend/src/pages/logs/Logs.tsx
+++ b/frontend/src/pages/logs/Logs.tsx
@@ -1,5 +1,5 @@
import React, {
- FunctionComponent,
+ ReactElement,
useCallback,
useEffect,
useMemo,
@@ -22,9 +22,13 @@ import { SimpleButton } from "../../components/buttons/simple-button/SimpleButto
import { TextUtils } from "../../utils/text-utils";
import { Callout } from "../../components/callout/Callout";
import { CommonUtils } from "../../utils/common-utils";
-import { SearchInput } from "../../components/search-input/SearchInput";
+import { SearchInput } from "../../components/inputs/search-input/SearchInput";
-const Logs: FunctionComponent = () => {
+type LogsProps = {
+ className?: string;
+};
+
+export function Logs(props: LogsProps): ReactElement {
const [trackMousePosition, setTrackMousePosition] = useState(false);
const { logDrawerSize, setSize } = useLogDrawer();
const tinyLogRef = useRef(null);
@@ -119,7 +123,11 @@ const Logs: FunctionComponent = () => {
return (
{
)}
);
-};
+}
function LogLine({ log }: { log: ManagedProcessOutput }) {
return (
@@ -287,5 +295,3 @@ const VerticalDragLine = ({
/>
);
};
-
-export default Logs;
diff --git a/frontend/src/pages/start/configuration/Configuration.module.scss b/frontend/src/pages/start/configuration/Configuration.module.scss
index cd24f694..6c80efd6 100644
--- a/frontend/src/pages/start/configuration/Configuration.module.scss
+++ b/frontend/src/pages/start/configuration/Configuration.module.scss
@@ -19,7 +19,7 @@
margin-top: $spacing-xl;
.card {
- padding: $spacing-l * 2;
+ padding: $spacing-l * 2 0;
margin-bottom: $spacing-base;
}
@@ -35,7 +35,7 @@
}
.title {
- color: $light-grey;
+ color: $gray-10;
}
}
diff --git a/frontend/src/pages/start/configuration/Configuration.tsx b/frontend/src/pages/start/configuration/Configuration.tsx
index 5dfd6ac4..ace88691 100644
--- a/frontend/src/pages/start/configuration/Configuration.tsx
+++ b/frontend/src/pages/start/configuration/Configuration.tsx
@@ -159,7 +159,7 @@ export const Configuration: FunctionComponent = () => {
-
+
= ({
{title.toLowerCase()} settings
{showAdvanced ? (
-
)}
diff --git a/frontend/src/pages/start/configuration/FormFields.module.scss b/frontend/src/pages/start/configuration/FormFields.module.scss
index 439beb0f..3f13c96f 100644
--- a/frontend/src/pages/start/configuration/FormFields.module.scss
+++ b/frontend/src/pages/start/configuration/FormFields.module.scss
@@ -12,7 +12,7 @@
}
.label {
flex: 1.2;
- color: $light-grey;
+ color: $gray-10;
}
.input {
flex: 1;
@@ -20,7 +20,7 @@
}
.description {
flex: 2;
- color: $light-grey;
+ color: $gray-10;
font-size: $font-size-small;
}
.errorMessage {
@@ -37,7 +37,7 @@
margin: 0 $spacing-base;
}
span {
- color: $light-grey;
+ color: $gray-10;
}
}
}
@@ -47,7 +47,7 @@
display: flex;
margin-bottom: $spacing-base;
.title, .description {
- color: $light-grey;
+ color: $gray-10;
}
}
.body {
@@ -56,7 +56,7 @@
justify-content: space-between;
margin-bottom: $spacing-s;
span {
- color: $light-grey;
+ color: $gray-10;
font-size: $font-size-small;
}
}
diff --git a/frontend/src/pages/start/configuration/FormFields.tsx b/frontend/src/pages/start/configuration/FormFields.tsx
index ca86094b..a5349f83 100644
--- a/frontend/src/pages/start/configuration/FormFields.tsx
+++ b/frontend/src/pages/start/configuration/FormFields.tsx
@@ -1,7 +1,7 @@
import { CommonUtils } from "../../../utils/common-utils";
import RadioButton from "../../../components/buttons/radio-button/RadioButton";
import React, { ReactElement } from "react";
-import Input, { InputProps } from "../../../components/input/Input";
+import Input, { InputProps } from "../../../components/inputs/input/Input";
import { Project } from "@flowser/shared";
import classNames from "classnames";
import classes from "./FormFields.module.scss";
diff --git a/frontend/src/pages/start/main/Main.module.scss b/frontend/src/pages/start/main/Main.module.scss
index 82ee925c..6f636f4f 100644
--- a/frontend/src/pages/start/main/Main.module.scss
+++ b/frontend/src/pages/start/main/Main.module.scss
@@ -7,14 +7,14 @@
.container {
display: flex;
flex-direction: row;
- color: $light-grey;
+ color: $gray-10;
.sidebar {
width: 30%;
height: 100vh;
max-width: 450px;
min-width: 300px;
- background-color: $background-highlight-2;
+ background-color: transparentize($gray-100, 0.5);
display: flex;
flex-direction: column;
@@ -50,7 +50,8 @@
.tabLink {
display: block;
text-decoration: none;
- color: $light-grey;
+ color: $gray-10;
+ font-size: $font-size-large;
width: 100%;
padding: 12px 53px;
box-sizing: border-box;
@@ -69,10 +70,7 @@
&.activeTab {
a {
- .yellowLine {
- display: block;
- }
- background-color: $background-highlight-1;
+ background-color: transparentize($gray-50, 0.5);
}
}
}
@@ -107,16 +105,9 @@
box-sizing: border-box;
}
- .openProjectButton {
- background-color: $background-highlight-1;
- color: $grey;
- border: none;
- width: 100%;
- }
-
.newProjectButton {
background-color: $yellow;
- color: #2a3348;
+ color: $gray-110;
border: none;
width: 100%;
}
@@ -147,7 +138,7 @@
.projectName {
font-size: 17px;
line-height: 26px;
- color: #cdd9fa;
+ color: $gray-10;
&:hover {
cursor: pointer;
@@ -182,7 +173,7 @@
}
&:hover {
- background: $background-highlight-1;
+ background: transparentize($gray-50, 0.5);
.projectTrashcan {
display: flex;
@@ -203,7 +194,6 @@
line-height: 26px;
font-weight: 300;
font-size: 16px;
- font-family: Inter;
}
}
}
diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/main/Main.tsx
index 9e3cfb2b..10e04ed4 100644
--- a/frontend/src/pages/start/main/Main.tsx
+++ b/frontend/src/pages/start/main/Main.tsx
@@ -8,12 +8,9 @@ import React, {
import { Link, RouteChildrenProps, useHistory } from "react-router-dom";
import { routes } from "../../../constants/routes";
import IconButton from "../../../components/buttons/icon-button/IconButton";
-// @ts-ignore .png import error
import longLogo from "../../../assets/images/long_logo.png";
import trash from "../../../assets/icons/trash.svg";
import newProject from "../../../assets/icons/new_project.svg";
-import openProject from "../../../assets/icons/open_project.svg";
-import yellowLine from "../../../assets/icons/yellow_line.svg";
import classes from "./Main.module.scss";
import {
useGetAllProjects,
@@ -53,8 +50,6 @@ const tabs: ProjectTab[] = [
},
];
-const enableOpenProjectAction = false;
-
const Main: FunctionComponent
- {enableOpenProjectAction && (
- showOpenProjectDialog()}
- icon={
}
- iconPosition="before"
- className={classes.openProjectButton}
- >
- OPEN
-
- )}
();
-const columnsEvents = [
- columnHelperEvents.display({
- id: "tableTitle",
- header: () => ,
- }),
- columnHelperEvents.accessor("name", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnHelperEvents.accessor("type", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnHelperEvents.accessor("value", {
- header: () => ,
- cell: (info) => (
- ();
-
-const columnsEnvelope = [
- columnsHelperEnvelope.accessor("address", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnsHelperEnvelope.accessor("signature", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnsHelperEnvelope.accessor("keyId", {
- header: () => ,
- cell: (info) => {info.getValue()} ,
- }),
-];
-
-// PAYLOAD SIGNATURES TABLE
-const columnsHelperPayload = createColumnHelper();
-
-const columnsPayload = [
- columnsHelperPayload.accessor("address", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnsHelperPayload.accessor("signature", {
- header: () => ,
- cell: (info) => (
-
-
- {info.getValue()}
-
-
- ),
- }),
- columnsHelperPayload.accessor("keyId", {
- header: () => ,
- cell: (info) => {info.getValue()} ,
- }),
-];
-
const Details: FunctionComponent = () => {
- const [openedLog, setOpenedLog] = useState("");
const { transactionId } = useParams();
const { setBreadcrumbs, showSearchBar } = useNavigation();
const { showNavigationDrawer } = useNavigation();
const { data, isLoading } = useGetTransaction(transactionId);
const { data: events } = useGetPollingEventsByTransaction(transactionId);
const { transaction } = data ?? {};
- const openLog = (status: boolean, id: string) => {
- setOpenedLog(!status ? id : "");
- };
- const columnHelper = createColumnHelper>();
-
- // EVENTS TABLE
- const columnsEventsParent = useMemo(
- () => [
- columnHelper.accessor("blockId", {
- header: () => ,
- cell: (info) => (
-
-
-
- {info.getValue()}
-
-
-
- ),
- }),
- columnHelper.accessor("createdAt", {
- header: () => ,
- cell: (info) => {TextUtils.shortDate(info.getValue())} ,
- }),
- columnHelper.accessor("type", {
- header: () => ,
- cell: (info) => (
-
-
- ),
- }),
- columnHelper.accessor("transactionId", {
- header: () => ,
- cell: (info) => (
-
-
-
- {info.getValue()}
-
-
-
- ),
- }),
- columnHelper.accessor("transactionIndex", {
- header: () => ,
- cell: (info) => {info.getValue()} ,
- }),
- columnHelper.accessor("eventIndex", {
- header: () => ,
- cell: ({ row, getValue }) => (
-
- {transaction?.status?.errorMessage && (
-
-
- )}
-
-
-
-
- data={transaction.envelopeSignatures}
- columns={columnsEnvelope}
- />
-
-
- {transaction.payloadSignatures.map((item) => (
-
-
- ))}
-
- data={transaction.payloadSignatures}
- columns={columnsPayload}
- />
-
-
- >
- data={events}
- columns={columnsEventsParent}
- enableIntroAnimations={enableDetailsIntroAnimation}
- renderCustomHeader={(headerGroup) => (
-
- {headerGroup.headers.map((header) => (
-
- )}
- renderCustomRow={(row) => (
- <>
-
- {row.getVisibleCells().map((cell) => (
-
- {openedLog === row.id && row.original && (
-
-
+ ();
+
+const columns = [
+ columnsHelper.accessor("address", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.getValue()}
+
+
+ ),
+ }),
+ columnsHelper.accessor("signature", {
+ header: () => ,
+ cell: (info) => (
+
+
+ {info.getValue()}
+
+
+ ),
+ }),
+ columnsHelper.accessor("keyId", {
+ header: () => ,
+ cell: (info) => {info.getValue()} ,
+ }),
+];
+
+type SignaturesTableProps = {
+ signatures: SignableObject[];
+};
+
+export function SignaturesTable(props: SignaturesTableProps): ReactElement {
+ return data={props.signatures} columns={columns} />;
+}
diff --git a/frontend/src/pages/transactions/details/components/overview/TransactionOverview.tsx b/frontend/src/pages/transactions/details/TransactionOverview.tsx
similarity index 81%
rename from frontend/src/pages/transactions/details/components/overview/TransactionOverview.tsx
rename to frontend/src/pages/transactions/details/TransactionOverview.tsx
index ecca47c6..fce5a2c7 100644
--- a/frontend/src/pages/transactions/details/components/overview/TransactionOverview.tsx
+++ b/frontend/src/pages/transactions/details/TransactionOverview.tsx
@@ -2,15 +2,15 @@ import React, { ReactElement } from "react";
import {
DetailsCard,
DetailsCardColumn,
-} from "../../../../../components/details-card/DetailsCard";
-import MiddleEllipsis from "../../../../../components/ellipsis/MiddleEllipsis";
-import classes from "../../Details.module.scss";
-import { ExecutionStatusBadge } from "../../../../../components/status/ExecutionStatusBadge";
-import { GrcpStatusBadge } from "../../../../../components/status/GrcpStatusBadge";
-import { TextUtils } from "../../../../../utils/text-utils";
+} from "../../../components/details-card/DetailsCard";
+import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
+import classes from "./Details.module.scss";
+import { ExecutionStatusBadge } from "../../../components/status/ExecutionStatusBadge";
+import { GrcpStatusBadge } from "../../../components/status/GrcpStatusBadge";
+import { TextUtils } from "../../../utils/text-utils";
import { Transaction } from "@flowser/shared";
import { NavLink } from "react-router-dom";
-import { AccountLink } from "../../../../../components/account/link/AccountLink";
+import { AccountLink } from "../../../components/account/link/AccountLink";
type TransactionOverviewProps = {
transaction: Transaction;
diff --git a/frontend/src/components/content-details-script/ContentDetailsScript.module.scss b/frontend/src/pages/transactions/details/source/TransactionSource.module.scss
similarity index 93%
rename from frontend/src/components/content-details-script/ContentDetailsScript.module.scss
rename to frontend/src/pages/transactions/details/source/TransactionSource.module.scss
index f032a67d..875744e8 100644
--- a/frontend/src/components/content-details-script/ContentDetailsScript.module.scss
+++ b/frontend/src/pages/transactions/details/source/TransactionSource.module.scss
@@ -20,7 +20,7 @@
font-size: $font-size-small;
margin-bottom: $spacing-base;
- margin-left: $spacing-base * 3;
+ margin-left: $spacing-base;
& > span:not(:first-child) {
margin-left: $spacing-l;
@@ -37,7 +37,8 @@
& > span:first-child {
border-radius: 50%;
background-color: $yellow;
- color: $color-table-black;
+ color: $gray-80;
+ font-weight: bold;
opacity: .8;
width: 18px;
height: 18px;
diff --git a/frontend/src/components/content-details-script/ContentDetailsScript.tsx b/frontend/src/pages/transactions/details/source/TransactionSource.tsx
similarity index 65%
rename from frontend/src/components/content-details-script/ContentDetailsScript.tsx
rename to frontend/src/pages/transactions/details/source/TransactionSource.tsx
index c4d237d8..6cd5d7f9 100644
--- a/frontend/src/components/content-details-script/ContentDetailsScript.tsx
+++ b/frontend/src/pages/transactions/details/source/TransactionSource.tsx
@@ -1,24 +1,24 @@
import React, { FunctionComponent } from "react";
-import Card from "../card/Card";
-import classes from "./ContentDetailsScript.module.scss";
-import Label from "../label/Label";
-import MiddleEllipsis from "../ellipsis/MiddleEllipsis";
-import Value from "../value/Value";
+import Card from "../../../../components/card/Card";
+import classes from "./TransactionSource.module.scss";
+import Label from "../../../../components/label/Label";
+import MiddleEllipsis from "../../../../components/ellipsis/MiddleEllipsis";
+import Value from "../../../../components/value/Value";
import { TransactionArgument } from "@flowser/shared";
-import { CadenceEditor } from "../cadence-editor/CadenceEditor";
+import { CadenceEditor } from "../../../../components/cadence-editor/CadenceEditor";
import CopyButton from "components/buttons/copy-button/CopyButton";
-export type ContentDetailsScriptProps = {
- script: string;
- arguments?: TransactionArgument[];
+type TransactionSourceProps = {
+ code: string;
+ arguments: TransactionArgument[];
};
-const ContentDetailsScript: FunctionComponent = ({
- script,
+export const TransactionSource: FunctionComponent = ({
+ code,
arguments: args,
}) => {
return (
-
+
{args && args.length > 0 && (
<>
-
- {info.getValue()}
-
-
- ),
- }),
-];
-
-// ENVELOPE SIGNATURES TABLE
-const columnsHelperEnvelope = createColumnHelper{info.getValue()}
-
- {getValue()}
- openLog(status, row.id)}
- />
-
- ),
- }),
- ],
- [openedLog]
- );
const breadcrumbs: Breadcrumb[] = [
{ to: "/transactions", label: "Transactions" },
@@ -227,119 +43,55 @@ const Details: FunctionComponent = () => {
return
-
-
-
- {item.address}
-
-
-
-
-
-
-
- {item.signature}
-
-
-
-
-
- {item.keyId}
-
-
-
- {flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
-
- ))}
-
- {flexRender(
- cell.column.columnDef.cell,
- cell.getContext()
- )}
-
- ))}
-
-
- data={EventUtils.computeEventData(row.original.data)}
- columns={columnsEvents}
- />
-
- )}
-
- )}
- />
-
@@ -47,9 +47,7 @@ const ContentDetailsScript: FunctionComponent = ({
)}
- >();
+
+const columns = [
+ columnHelper.accessor("id", {
+ header: () => ,
+ cell: (info) => (
+
+
+
+ {info.getValue()}
+
+
+
+ ),
+ }),
+ columnHelper.accessor("blockId", {
+ header: () => ,
+ cell: (info) => (
+
+
+
+ {info.getValue()}
+
+
+
+ ),
+ }),
+ columnHelper.accessor("payer", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+ columnHelper.accessor("status.executionStatus", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+];
+
+type TransactionsTableProps = {
+ transactions: DecoratedPollingEntity[];
+};
+
+export function TransactionsTable(props: TransactionsTableProps): ReactElement {
+ return (
+ >
+ data={props.transactions}
+ columns={columns}
+ />
+ );
+}
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 5a686217..afc41092 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -19,3 +19,4 @@ declare module "*.module.scss" {
}
declare module "*.jpg";
+declare module "*.png";
diff --git a/frontend/src/styles/colors.scss b/frontend/src/styles/colors.scss
index 979407d0..31e5f978 100644
--- a/frontend/src/styles/colors.scss
+++ b/frontend/src/styles/colors.scss
@@ -1,52 +1,21 @@
-$color-additional-info-grey: #272f3e;
-$color-table-black: #272e3e;
$color-not-active-button-grey: #606060;
$color-not-active-button-text-grey: #8d8d8d;
-$color-main-text: #191919;
$color-grey: #ABB4B8;
$color-light-gray: #F7FAFC;
-$color-table-light: #424D61;
$color-red: #D02525;
$color-red-light: #CE5E5E;
-$color-input-border: #707070;
-
-$color-logs-border: #3188ca;
-
-/* TODO(milestone-x): Remove at some point */
-$dark-grey: #a2a2a2;
-$black: #353535;
-$color-mid-grey: #444b58;
// new colors
$purple: #cfc5f8;
$yellow: #ffdd62;
$blue: #9bdefa;
$dark-violet: #3b3e5b;
-$background: #202a40;
-$background-highlight-1: #333c51;
-$background-highlight-2: #232d43;
-$light-grey: #E5E5E5;
-$light-green: #A2CD8C;
$strong-green: #00E786;
$gradient-1: linear-gradient(90deg, rgba(127, 137, 174, 1) 0%, rgba(138, 146, 175, 1) 4%, rgba(140, 147, 174, 1) 11%, rgba(147, 146, 176, 1) 15%, rgba(141, 143, 176, 1) 21%, rgba(131, 147, 175, 1) 57%, rgba(132, 149, 175, 1) 72%, rgba(124, 150, 175, 1) 89%, rgba(136, 160, 169, 1) 100%);
// Se uporabi za besedilo, ki je na dark violet podlagi (navigacijska vrstica, 1st row in table)
$grey: #c7cad0;
-$hover-background: #41465b;
-$code-background: #273045;
-$table-line-background: #363f53;
-
-// Se uporabi na details tabu
-$dark-blue: #273148;
-
-// se uporabi na popupih in ba details page za selected box
-$pop-up: #2c354a;
-
-// se uporabi za navigation drawer background (breadcrumbs)
-$medium-violet: #282e46;
-
-
// --------- NEW COLORS -----------
$gray-10: #E5E5E5;
@@ -54,11 +23,8 @@ $gray-20: #ffffffba;
$gray-30: #707070;
$gray-50: #565A5F;
$gray-80: #31363C;
-// TODO(ui-revamp): Replace this with gray-100
-$new-color-2: #272B32;
$gray-100: #272B32;
$gray-110: #1C2128;
-// TODO(ui-revamp): Replace this with gray-110
-$new-color-1: #1C2128;
$violet-100: #3B3E5B;
+$white: #FFF;
diff --git a/frontend/src/styles/rules.scss b/frontend/src/styles/rules.scss
index 9fdcf354..99e63bd0 100644
--- a/frontend/src/styles/rules.scss
+++ b/frontend/src/styles/rules.scss
@@ -2,4 +2,6 @@ $border-radius-button: 6px;
$border-radius-card: 8px;
$border-radius-input: 8px;
+$border-radius-md: 18px;
+
diff --git a/frontend/src/styles/scrollbars.scss b/frontend/src/styles/scrollbars.scss
index 9561fa44..19ee8178 100644
--- a/frontend/src/styles/scrollbars.scss
+++ b/frontend/src/styles/scrollbars.scss
@@ -6,7 +6,7 @@
}
&::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
- box-shadow: inset 0 0 6px $color-mid-grey;
+ box-shadow: inset 0 0 6px $gray-80;
border-radius: 5pt;
}
}
+
+ ),
+ }),
+ columnHelper.accessor("status.grcpStatus", {
+ header: () => ,
+ cell: (info) => (
+
+
+ ),
+ }),
+ columnHelper.accessor("createdAt", {
+ header: () => ,
+ cell: (info) => (
+