+
+
{info.row.original.publicKey}
-
+
WEIGHT: {info.row.original.weight}
SEQ. NUMBER: {info.row.original.sequenceNumber}
INDEX: {info.row.original.index}
diff --git a/frontend/src/modules/accounts/AccountLink/AccountLink.tsx b/frontend/src/modules/accounts/AccountLink/AccountLink.tsx
index 553bbe7f..858942fc 100644
--- a/frontend/src/modules/accounts/AccountLink/AccountLink.tsx
+++ b/frontend/src/modules/accounts/AccountLink/AccountLink.tsx
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
import { AccountAvatar } from "../AccountAvatar/AccountAvatar";
import { AccountName } from "../AccountName/AccountName";
import classes from "./AccountLink.module.scss";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
type AccountLinkProps = {
address: string;
diff --git a/frontend/src/modules/accounts/AccountsTable/AccountsTable.module.scss b/frontend/src/modules/accounts/AccountsTable/AccountsTable.module.scss
new file mode 100644
index 00000000..bdc0c6db
--- /dev/null
+++ b/frontend/src/modules/accounts/AccountsTable/AccountsTable.module.scss
@@ -0,0 +1,11 @@
+@import "styles/spacings";
+@import "styles/colors";
+
+.tagsColumn {
+ display: flex;
+ column-gap: $spacing-base;
+ .tag {
+ border-color: $green-10;
+ color: $green-10;
+ }
+}
diff --git a/frontend/src/modules/accounts/AccountsTable/AccountsTable.tsx b/frontend/src/modules/accounts/AccountsTable/AccountsTable.tsx
index ab1afd5f..274c804e 100644
--- a/frontend/src/modules/accounts/AccountsTable/AccountsTable.tsx
+++ b/frontend/src/modules/accounts/AccountsTable/AccountsTable.tsx
@@ -8,6 +8,9 @@ import { TextUtils } from "../../../utils/text-utils";
import ReactTimeago from "react-timeago";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
import { AccountLink } from "../AccountLink/AccountLink";
+import { Badge } from "../../../components/badge/Badge";
+import classes from "./AccountsTable.module.scss";
+import { Tooltip } from "../../../components/tooltips/Tooltip";
const columnHelper = createColumnHelper
>();
@@ -20,6 +23,21 @@ const columns = [
),
}),
+ columnHelper.accessor("tags", {
+ cell: (info) => (
+
+ {info.getValue().map((tag) => (
+
+ {tag.name}
+
+ ))}
+
+ ),
+ }),
columnHelper.accessor("balance", {
header: () => ,
cell: (info) => (
diff --git a/frontend/src/modules/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.tsx b/frontend/src/modules/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.tsx
index 7f96a082..98acf9f5 100644
--- a/frontend/src/modules/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.tsx
+++ b/frontend/src/modules/accounts/PublicPrivateStorageCard/PublicPrivateStorageCard.tsx
@@ -6,7 +6,7 @@ import { AccountStorageItem } from "@flowser/shared/dist/src/generated/entities/
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
import gradient from "../../../assets/images/gradient.png";
import classNames from "classnames";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
type StorageCardProps = {
currentAccountAddress: string;
diff --git a/frontend/src/modules/accounts/StorageDomainBadge/StorageDomainBadge.module.scss b/frontend/src/modules/accounts/StorageDomainBadge/StorageDomainBadge.module.scss
index f940d626..353e871b 100644
--- a/frontend/src/modules/accounts/StorageDomainBadge/StorageDomainBadge.module.scss
+++ b/frontend/src/modules/accounts/StorageDomainBadge/StorageDomainBadge.module.scss
@@ -14,7 +14,7 @@
padding-right: 10px;
font-weight: 600;
background: $gradient-1;
- color: $dark-violet;
+ color: $violet-100;
font-size: $font-size-normal;
text-transform: uppercase;
}
diff --git a/frontend/src/modules/blocks/BlockDetails/BlockDetails.module.scss b/frontend/src/modules/blocks/BlockDetails/BlockDetails.module.scss
index 00724715..1ce8cf85 100644
--- a/frontend/src/modules/blocks/BlockDetails/BlockDetails.module.scss
+++ b/frontend/src/modules/blocks/BlockDetails/BlockDetails.module.scss
@@ -3,19 +3,4 @@
.root {
display: flex;
flex-direction: column;
- align-self: center;
- max-width: 1690px;
- width: 100%;
-
- .transactionListItem {
- display: flex;
- flex-direction: column;
- margin-bottom: $spacing-base;
- }
-}
-
-.hash {
- max-width: 15vw;
- min-width: 10vw;
- display: inline-block;
}
diff --git a/frontend/src/modules/blocks/BlockDetails/BlockDetails.tsx b/frontend/src/modules/blocks/BlockDetails/BlockDetails.tsx
index b33fbcc6..a7cd38d4 100644
--- a/frontend/src/modules/blocks/BlockDetails/BlockDetails.tsx
+++ b/frontend/src/modules/blocks/BlockDetails/BlockDetails.tsx
@@ -11,7 +11,7 @@ import { TextUtils } from "../../../utils/text-utils";
import { SizedBox } from "../../../components/sized-box/SizedBox";
import { StyledTabs } from "../../../components/tabs/StyledTabs";
import { TransactionsTable } from "../../transactions/TransactionsTable/TransactionsTable";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
type BlockDetailsProps = {
blockId: string;
diff --git a/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx b/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx
index 64ad8306..eefaa331 100644
--- a/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx
+++ b/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx
@@ -1,15 +1,14 @@
import React, { FunctionComponent, useMemo } from "react";
-import { NavLink } from "react-router-dom";
import Label from "../../../components/label/Label";
import Value from "../../../components/value/Value";
import classes from "./BlocksTable.module.scss";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
+import { MiddleEllipsis } from "../../../components/ellipsis/MiddleEllipsis";
import { createColumnHelper } from "@tanstack/table-core";
import Table from "../../../components/table/Table";
import { Block } from "@flowser/shared";
import ReactTimeago from "react-timeago";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
const columnHelper = createColumnHelper>();
diff --git a/frontend/src/modules/contracts/ContractDetails/Details.module.scss b/frontend/src/modules/contracts/ContractDetails/ContractDetails.module.scss
similarity index 58%
rename from frontend/src/modules/contracts/ContractDetails/Details.module.scss
rename to frontend/src/modules/contracts/ContractDetails/ContractDetails.module.scss
index 8d4bdc18..1ce8cf85 100644
--- a/frontend/src/modules/contracts/ContractDetails/Details.module.scss
+++ b/frontend/src/modules/contracts/ContractDetails/ContractDetails.module.scss
@@ -3,7 +3,4 @@
.root {
display: flex;
flex-direction: column;
- align-self: center;
- max-width: 1690px;
- width: 100%;
}
diff --git a/frontend/src/modules/contracts/ContractDetails/ContractDetails.tsx b/frontend/src/modules/contracts/ContractDetails/ContractDetails.tsx
index f7a13b14..29145d9c 100644
--- a/frontend/src/modules/contracts/ContractDetails/ContractDetails.tsx
+++ b/frontend/src/modules/contracts/ContractDetails/ContractDetails.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
import { NavLink, useParams } from "react-router-dom";
import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
import { useGetContract } from "../../../hooks/use-api";
-import classes from "./Details.module.scss";
+import classes from "./ContractDetails.module.scss";
import {
DetailsCard,
DetailsCardColumn,
diff --git a/frontend/src/modules/contracts/ContractsTable.tsx b/frontend/src/modules/contracts/ContractsTable.tsx
index 8c40a100..42fca765 100644
--- a/frontend/src/modules/contracts/ContractsTable.tsx
+++ b/frontend/src/modules/contracts/ContractsTable.tsx
@@ -7,7 +7,7 @@ import { AccountLink } from "../accounts/AccountLink/AccountLink";
import ReactTimeago from "react-timeago";
import React, { ReactElement } from "react";
import Table from "../../components/table/Table";
-import { ProjectLink } from "../../components/link/ProjectLink";
+import { ProjectLink } from "../../components/links/ProjectLink";
const columnHelper =
createColumnHelper>();
diff --git a/frontend/src/modules/events/EventsTable/EventsTable.module.scss b/frontend/src/modules/events/EventsTable/EventsTable.module.scss
index a311f716..892b2e44 100644
--- a/frontend/src/modules/events/EventsTable/EventsTable.module.scss
+++ b/frontend/src/modules/events/EventsTable/EventsTable.module.scss
@@ -1,47 +1,16 @@
@import 'styles/spacings';
@import 'styles/animations';
-.detailsTable {
- margin-bottom: $spacing-base;
- position: relative;
- margin-left: auto;
- display: flex;
-}
-
-.tableRow {
- .typeColumn {
- margin-right: $spacing-s;
- overflow: hidden;
- flex: 3;
- }
-
- .caretColumn {
- flex: 0.2;
- }
-}
-
.hashEvents {
max-width: 13vw;
display: flex;
overflow: hidden;
}
-.caretIcon {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
+.eventTypeColumn {
+ flex: 2 !important;
}
-.subTableValue {
- max-width: 13vw;
- display: inline-block;
- overflow: hidden;
- margin-right: $spacing-base;
-}
-
-.subTableRow {
- height: 10px;
-
+.dataColumn {
+ flex: 2 !important;
}
-
diff --git a/frontend/src/modules/events/EventsTable/EventsTable.tsx b/frontend/src/modules/events/EventsTable/EventsTable.tsx
index c30f3ec1..e6a1a616 100644
--- a/frontend/src/modules/events/EventsTable/EventsTable.tsx
+++ b/frontend/src/modules/events/EventsTable/EventsTable.tsx
@@ -1,54 +1,75 @@
-import React, { useState, useMemo, ReactElement } from "react";
+import React, { ReactElement } from "react";
import classes from "./EventsTable.module.scss";
-import tableClasses from "../../../components/table/Table.module.scss";
-import Card from "../../../components/card/Card";
import Label from "../../../components/label/Label";
import Value from "../../../components/value/Value";
-import { NavLink } from "react-router-dom";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
-import CaretIcon from "../../../components/caret-icon/CaretIcon";
+import { MiddleEllipsis } from "../../../components/ellipsis/MiddleEllipsis";
import { createColumnHelper } from "@tanstack/table-core";
import { Event } from "@flowser/shared";
-import { ComputedEventData, EventUtils } from "../../../utils/event-utils";
-import CopyButton from "../../../components/buttons/copy-button/CopyButton";
import Table from "../../../components/table/Table";
-import { flexRender } from "@tanstack/react-table";
import ReactTimeago from "react-timeago";
-import classNames from "classnames";
import { DecoratedPollingEntity } from "contexts/timeout-polling.context";
import { Ellipsis } from "../../../components/ellipsis/Ellipsis";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
+import { JsonView } from "../../../components/json-view/JsonView";
-const subTableColumnHelper = createColumnHelper();
-const subTableColumns = [
- subTableColumnHelper.accessor("name", {
- header: () => ,
+const columnHelper = createColumnHelper>();
+
+const columns = [
+ columnHelper.accessor("blockId", {
+ header: () => ,
+ cell: (info) => (
+
+
+
+ {info.getValue()}
+
+
+
+ ),
+ }),
+ columnHelper.accessor("transactionId", {
+ header: () => ,
cell: (info) => (
-
- {info.getValue()}
-
+
+
+ {info.getValue()}
+
+
),
}),
- subTableColumnHelper.accessor("type", {
- header: () => ,
+ columnHelper.accessor("type", {
+ header: () => ,
+ meta: {
+ className: classes.eventTypeColumn,
+ },
cell: (info) => (
-
- {info.getValue()}
-
+ {info.getValue()}
),
}),
- subTableColumnHelper.accessor("value", {
- header: () => ,
+ columnHelper.accessor("createdAt", {
+ header: () => ,
cell: (info) => (
-
- {info.getValue()}
-
-
+
+
+ ),
+ }),
+ columnHelper.accessor("data", {
+ meta: {
+ className: classes.dataColumn,
+ },
+ header: () => ,
+ cell: (info) => (
+
+ }
+ />
),
}),
@@ -59,126 +80,10 @@ type EventsTableProps = {
};
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) => (
-
- {flexRender(header.column.columnDef.header, header.getContext())}
-
- ))}
-
- )}
- renderCustomRow={(row) => (
-
-
- {row.getVisibleCells().map((cell) => (
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
- ))}
-
- {openedLog === row.id && row.original && (
-
-
- data={EventUtils.computeEventData(row.original.data)}
- columns={subTableColumns}
- bodyRowClass={classes.subTableRow}
- headerRowClass={classes.subTableRow}
- />
-
{blocks.map((block) => (
- checkoutBlock(block.id)}
- />
+
))}
);
@@ -39,14 +37,13 @@ export function InteractionHistory(): ReactElement {
type BlockItemProps = {
block: Block;
- onCheckout: () => void;
};
function BlockItem(props: BlockItemProps) {
const { block } = props;
- const blockIconSize = 20;
- const checkoutIconSize = blockIconSize * 0.8;
+ const menuIconSize = 15;
+ const { checkoutBlock } = useProjectActions();
const { create, setFocused } = useInteractionRegistry();
const { data } = useGetTransactionsByBlock(block.id, {
// Assume that every transaction is packaged into a separate block.
@@ -87,9 +84,50 @@ function BlockItem(props: BlockItemProps) {
setFocused(block.id);
}
+ return (
+
+
+
+ }
+ >
+
+
+
+ );
+}
+
+type BlockItemContentProps = {
+ block: Block;
+ transaction: Transaction | undefined;
+};
+
+function BlockItemContent(props: BlockItemContentProps) {
+ const { block, transaction } = props;
+ const blockIconSize = 20;
+
+ const transactionName = useTransactionName({
+ transaction,
+ });
+
return (
-
+
#{String(block.height).padStart(3, "0")}
- {firstTransaction && (
- <>
-
-
-
-
- {transactionName ?? "Unknown"}
-
-
+
+ {transaction && (
+
+ {transactionName ?? "Unknown"}
+
)}
-
+ {transaction?.status && (
+
+ )}
);
diff --git a/frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.module.scss b/frontend/src/modules/interactions/components/InteractionIcon/InteractionIcon.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.module.scss
rename to frontend/src/modules/interactions/components/InteractionIcon/InteractionIcon.module.scss
diff --git a/frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.tsx b/frontend/src/modules/interactions/components/InteractionIcon/InteractionIcon.tsx
similarity index 100%
rename from frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.tsx
rename to frontend/src/modules/interactions/components/InteractionIcon/InteractionIcon.tsx
diff --git a/frontend/src/modules/interactions/components/interaction-label/InteractionLabel.module.scss b/frontend/src/modules/interactions/components/InteractionLabel/InteractionLabel.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/interaction-label/InteractionLabel.module.scss
rename to frontend/src/modules/interactions/components/InteractionLabel/InteractionLabel.module.scss
diff --git a/frontend/src/modules/interactions/components/interaction-label/InteractionLabel.tsx b/frontend/src/modules/interactions/components/InteractionLabel/InteractionLabel.tsx
similarity index 94%
rename from frontend/src/modules/interactions/components/interaction-label/InteractionLabel.tsx
rename to frontend/src/modules/interactions/components/InteractionLabel/InteractionLabel.tsx
index 40067766..47e355e6 100644
--- a/frontend/src/modules/interactions/components/interaction-label/InteractionLabel.tsx
+++ b/frontend/src/modules/interactions/components/InteractionLabel/InteractionLabel.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from "react";
-import { InteractionIcon } from "../interaction-icon/InteractionIcon";
+import { InteractionIcon } from "../InteractionIcon/InteractionIcon";
import { SizedBox } from "../../../../components/sized-box/SizedBox";
import { CoreInteractionDefinition } from "../../contexts/interaction-registry.context";
import { useGetParsedInteraction } from "../../../../hooks/use-api";
diff --git a/frontend/src/modules/interactions/components/outcome/InteractionOutcome.module.scss b/frontend/src/modules/interactions/components/InteractionOutcome/InteractionOutcome.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/outcome/InteractionOutcome.module.scss
rename to frontend/src/modules/interactions/components/InteractionOutcome/InteractionOutcome.module.scss
diff --git a/frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx b/frontend/src/modules/interactions/components/InteractionOutcome/InteractionOutcome.tsx
similarity index 78%
rename from frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx
rename to frontend/src/modules/interactions/components/InteractionOutcome/InteractionOutcome.tsx
index f6ea05a9..3b771b0c 100644
--- a/frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx
+++ b/frontend/src/modules/interactions/components/InteractionOutcome/InteractionOutcome.tsx
@@ -1,10 +1,6 @@
import React, { ReactElement, useEffect, useState } from "react";
import { useInteractionOutcomeManager } from "../../contexts/outcome.context";
-import { TransactionOverview } from "../../../transactions/details/TransactionOverview";
-import {
- ScriptError,
- TransactionError,
-} from "../../../../components/status/ErrorMessage";
+import { ScriptError } from "../../../../components/status/ErrorMessage";
import { JsonView } from "../../../../components/json-view/JsonView";
import { useGetTransaction } from "../../../../hooks/use-api";
import classes from "./InteractionOutcome.module.scss";
@@ -16,10 +12,11 @@ import { TabItem } from "../../../../components/tabs/Tabs";
import { Callout } from "../../../../components/callout/Callout";
import { useInteractionDefinitionManager } from "../../contexts/definition.context";
import { InteractionKind } from "@flowser/shared";
-import { ExternalLink } from "../../../../components/link/ExternalLink";
+import { ExternalLink } from "../../../../components/links/ExternalLink";
import { LineSeparator } from "../../../../components/line-separator/LineSeparator";
import { SpinnerWithLabel } from "../../../../components/spinner/SpinnerWithLabel";
import { StyledTabs } from "../../../../components/tabs/StyledTabs";
+import { TransactionDetailsTabs } from "../../../transactions/TransactionDetailsTabs/TransactionDetailsTabs";
export function InteractionOutcome(): ReactElement {
const { outcome } = useInteractionOutcomeManager();
@@ -103,54 +100,21 @@ function EmptyState() {
function TransactionOutcome(props: { outcome: FlowTransactionOutcome }) {
const { outcome } = props;
const { data } = useGetTransaction(outcome.transactionId);
- const error = outcome.error ?? data?.transaction?.status?.errorMessage;
- const overviewTabId = "overview";
- const errorTabId = "error";
- const [currentTabId, setCurrentTabId] = useState(
- error ? errorTabId : overviewTabId
- );
- useEffect(() => {
- if (error && currentTabId !== errorTabId) {
- setCurrentTabId(errorTabId);
- }
- }, [error]);
+ if (outcome.error) {
+ return
;
+ }
if (!data?.transaction) {
return
;
}
- const tabs: TabItem[] = [];
-
- tabs.push({
- id: overviewTabId,
- label: "Overview",
- content: (
-
- ),
- });
-
- if (error) {
- tabs.push({
- id: errorTabId,
- label: "Error",
- content: data.transaction.status?.errorMessage ? (
-
- ) : (
-
{outcome.error}
- ),
- });
- }
-
return (
-
setCurrentTabId(tab.id)}
- tabs={tabs}
+ includeOverviewTab={true}
+ includeScriptTab={false}
+ transaction={data.transaction}
/>
);
}
diff --git a/frontend/src/modules/interactions/components/templates/InteractionTemplates.module.scss b/frontend/src/modules/interactions/components/InteractionTemplates/InteractionTemplates.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/templates/InteractionTemplates.module.scss
rename to frontend/src/modules/interactions/components/InteractionTemplates/InteractionTemplates.module.scss
diff --git a/frontend/src/modules/interactions/components/templates/InteractionTemplates.tsx b/frontend/src/modules/interactions/components/InteractionTemplates/InteractionTemplates.tsx
similarity index 97%
rename from frontend/src/modules/interactions/components/templates/InteractionTemplates.tsx
rename to frontend/src/modules/interactions/components/InteractionTemplates/InteractionTemplates.tsx
index e9998fd5..0f58b484 100644
--- a/frontend/src/modules/interactions/components/templates/InteractionTemplates.tsx
+++ b/frontend/src/modules/interactions/components/InteractionTemplates/InteractionTemplates.tsx
@@ -7,7 +7,7 @@ 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";
+import { InteractionLabel } from "../InteractionLabel/InteractionLabel";
export function InteractionTemplates(): ReactElement {
return (
diff --git a/frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss b/frontend/src/modules/interactions/components/ParamBuilder/ParamBuilder.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss
rename to frontend/src/modules/interactions/components/ParamBuilder/ParamBuilder.module.scss
diff --git a/frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx b/frontend/src/modules/interactions/components/ParamBuilder/ParamBuilder.tsx
similarity index 94%
rename from frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx
rename to frontend/src/modules/interactions/components/ParamBuilder/ParamBuilder.tsx
index daa84892..a3ca633a 100644
--- a/frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ParamBuilder/ParamBuilder.tsx
@@ -2,7 +2,7 @@ import React from "react";
import { Parameter } from "@flowser/shared";
import { ReactElement } from "react";
import { ValueBuilder } from "../ValueBuilder/ValueBuilder";
-import { InteractionParameterBuilder } from "../../../contexts/definition.context";
+import { InteractionParameterBuilder } from "../../contexts/definition.context";
import classes from "./ParamBuilder.module.scss";
import { CadenceValueBuilder } from "../ValueBuilder/interface";
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss b/frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.module.scss
similarity index 88%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss
rename to frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.module.scss
index ec63fb54..30a5ab9d 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss
+++ b/frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.module.scss
@@ -20,12 +20,17 @@ $avatar-size: 30px;
padding: $spacing-base;
.selectAccountButton {
+ background: none;
+ outline: none;
+ border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- cursor: pointer;
color: white;
+ &:not(:disabled) {
+ cursor: pointer;
+ }
.accountName {
color: $gray-10;
margin-top: $spacing-s;
@@ -34,14 +39,16 @@ $avatar-size: 30px;
border-color: $blue !important;
}
.avatarWrapper {
+ &__enabled {
+ &:hover {
+ border-color: $blue;
+ }
+ }
height: $avatar-size;
width: $avatar-size;
padding: $spacing-s;
border-radius: 50%;
border: 2px solid transparent;
- &:hover {
- border-color: $blue;
- }
.avatar {
width: 100%;
height: 100%;
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.tsx
similarity index 77%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.tsx
index dd111d93..447bdb54 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/AddressBuilder/AddressBuilder.tsx
@@ -1,17 +1,17 @@
import React, { ReactElement, useEffect, useMemo, useState } from "react";
import classes from "./AddressBuilder.module.scss";
import { CadenceValueBuilder } from "../interface";
-import { useGetPollingAccounts } from "../../../../../../hooks/use-api";
-import { AccountAvatar } from "../../../../../accounts/AccountAvatar/AccountAvatar";
-import { AccountName } from "../../../../../accounts/AccountName/AccountName";
-import { FlowserIcon } from "../../../../../../components/icons/Icons";
+import { useGetPollingAccounts } from "../../../../../hooks/use-api";
+import { AccountAvatar } from "../../../../accounts/AccountAvatar/AccountAvatar";
+import { AccountName } from "../../../../accounts/AccountName/AccountName";
+import { FlowserIcon } from "../../../../../components/icons/Icons";
import classNames from "classnames";
-import { ServiceRegistry } from "../../../../../../services/service-registry";
+import { ServiceRegistry } from "../../../../../services/service-registry";
import { Account, FclValues } from "@flowser/shared";
-import { Spinner } from "../../../../../../components/spinner/Spinner";
+import { Spinner } from "../../../../../components/spinner/Spinner";
export function AddressBuilder(props: CadenceValueBuilder): ReactElement {
- const { value, setValue, addressBuilderOptions } = props;
+ const { disabled, value, setValue, addressBuilderOptions } = props;
const { data, refresh } = useGetPollingAccounts();
const managedAccounts = useMemo(
() =>
@@ -47,12 +47,15 @@ export function AddressBuilder(props: CadenceValueBuilder): ReactElement {
{managedAccounts.map((account) => (
setValue(account.address)}
/>
))}
-
+ {!disabled && (
+
+ )}
);
@@ -62,15 +65,21 @@ type AccountButtonProps = {
isSelected: boolean;
onSelect: () => void;
account: Account;
+ disabled?: boolean;
};
function AccountButton(props: AccountButtonProps) {
- const { isSelected, account, onSelect } = props;
+ const { disabled, isSelected, account, onSelect } = props;
return (
-
onSelect()}>
+
);
}
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss b/frontend/src/modules/interactions/components/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss
similarity index 100%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss
rename to frontend/src/modules/interactions/components/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx
similarity index 88%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx
index a7d64130..782fcbf7 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx
@@ -3,11 +3,11 @@ import { CadenceValueBuilder } from "../interface";
import { ValueBuilder } from "../ValueBuilder";
import classes from "./ArrayBuilder.module.scss";
import { FclArrayValue, FclValue, FclValues } from "@flowser/shared";
-import { SimpleButton } from "../../../../../../components/buttons/simple-button/SimpleButton";
-import { SizedBox } from "../../../../../../components/sized-box/SizedBox";
+import { SimpleButton } from "../../../../../components/buttons/simple-button/SimpleButton";
+import { SizedBox } from "../../../../../components/sized-box/SizedBox";
export function ArrayBuilder(props: CadenceValueBuilder): ReactElement {
- const { type, value, setValue } = props;
+ const { disabled, type, value, setValue } = props;
const { array } = type;
if (array === undefined) {
@@ -61,6 +61,7 @@ export function ArrayBuilder(props: CadenceValueBuilder): ReactElement {
{index}:
setElement(index, value)}
@@ -68,7 +69,7 @@ export function ArrayBuilder(props: CadenceValueBuilder): ReactElement {
);
})}
- {!isConstantArray && (
+ {!isConstantArray && !disabled && (
increaseSize()}>Add
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/BoolBuilder/BoolBuilder.tsx
similarity index 88%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/BoolBuilder/BoolBuilder.tsx
index 0b36ac27..8e9bd035 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/BoolBuilder/BoolBuilder.tsx
@@ -1,10 +1,10 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
import { FclValues } from "@flowser/shared";
-import SelectInput from "../../../../../../components/inputs/select-input/SelectInput";
+import SelectInput from "../../../../../components/inputs/select-input/SelectInput";
export function BoolBuilder(props: CadenceValueBuilder): ReactElement {
- const { value, setValue } = props;
+ const { disabled, value, setValue } = props;
const isInitialised = FclValues.isFclBoolValue(value);
@@ -22,6 +22,7 @@ export function BoolBuilder(props: CadenceValueBuilder): ReactElement {
return (
Key:{" "}
updateEntryKey(entry.key, newKey)}
/>
@@ -142,6 +143,7 @@ export function DictionaryBuilder(props: CadenceValueBuilder): ReactElement {
Value:
updateEntryValue(entry.key, newValue)}
/>
@@ -149,11 +151,13 @@ export function DictionaryBuilder(props: CadenceValueBuilder): ReactElement {
);
})}
-
- addEntry()}>Add
-
- removeLastEntry()}>Remove
-
+ {!disabled && (
+
+ addEntry()}>Add
+
+ removeLastEntry()}>Remove
+
+ )}
);
}
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
similarity index 84%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
index 06f2b171..a78d5d3f 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx
@@ -1,12 +1,12 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/inputs/input/Input";
+import Input from "../../../../../components/inputs/input/Input";
import { FclValues } from "@flowser/shared";
export function FixedPointNumberBuilder(
props: CadenceValueBuilder
): ReactElement {
- const { value, setValue } = props;
+ const { disabled, value, setValue } = props;
const isInitialised = FclValues.isFclFixedPointNumberValue(value);
@@ -25,6 +25,7 @@ export function FixedPointNumberBuilder(
return (
setValue(e.target.value)}
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
similarity index 84%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
index 9576ddec..e7f7c7dc 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx
@@ -1,10 +1,10 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/inputs/input/Input";
+import Input from "../../../../../components/inputs/input/Input";
import { FclValues } from "@flowser/shared";
export function IntegerNumberBuilder(props: CadenceValueBuilder): ReactElement {
- const { value, setValue } = props;
+ const { disabled, value, setValue } = props;
const isInitialised = FclValues.isFclIntegerNumberValue(value);
@@ -23,6 +23,7 @@ export function IntegerNumberBuilder(props: CadenceValueBuilder): ReactElement {
return (
setValue(e.target.value)}
/>
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/PathBuilder/PathBuilder.tsx
similarity index 91%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/PathBuilder/PathBuilder.tsx
index fef340e3..2500bee0 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/PathBuilder/PathBuilder.tsx
@@ -4,11 +4,11 @@ import { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
import SelectInput, {
SelectInputOption,
-} from "../../../../../../components/inputs/select-input/SelectInput";
-import Input from "../../../../../../components/inputs/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;
+ const { disabled, type, value, setValue } = props;
const isInitialized = FclValues.isFclPathValue(value);
const specifiedDomain = getPredefinedDomain(type);
@@ -57,13 +57,14 @@ export function PathBuilder(props: CadenceValueBuilder): ReactElement {
Domain:{" "}
setDomain(e.target.value as FclPathDomain)}
/>
Identifier:{" "}
setIdentifier(e.target.value)}
/>
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/TextualBuilder/TextualBuilder.tsx
similarity index 82%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/TextualBuilder/TextualBuilder.tsx
index acdcb59e..e785ec14 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/TextualBuilder/TextualBuilder.tsx
@@ -1,9 +1,9 @@
import React, { ReactElement, useEffect } from "react";
import { CadenceValueBuilder } from "../interface";
-import Input from "../../../../../../components/inputs/input/Input";
+import Input from "../../../../../components/inputs/input/Input";
export function TextualBuilder(props: CadenceValueBuilder): ReactElement {
- const { value, setValue } = props;
+ const { disabled, value, setValue } = props;
const isInitialised = typeof value === "string";
@@ -22,6 +22,7 @@ export function TextualBuilder(props: CadenceValueBuilder): ReactElement {
return (
setValue(e.target.value)}
/>
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx b/frontend/src/modules/interactions/components/ValueBuilder/ValueBuilder.tsx
similarity index 88%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx
rename to frontend/src/modules/interactions/components/ValueBuilder/ValueBuilder.tsx
index 54842ddb..3a17dde7 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx
+++ b/frontend/src/modules/interactions/components/ValueBuilder/ValueBuilder.tsx
@@ -9,10 +9,10 @@ import { AddressBuilder } from "./AddressBuilder/AddressBuilder";
import { DictionaryBuilder } from "./DictionaryBuilder/DictionaryBuilder";
import { PathBuilder } from "./PathBuilder/PathBuilder";
import { BoolBuilder } from "./BoolBuilder/BoolBuilder";
-import { Callout } from "../../../../../components/callout/Callout";
-import { ExternalLink } from "../../../../../components/link/ExternalLink";
-import { FlowserIcon } from "../../../../../components/icons/Icons";
-import { SizedBox } from "../../../../../components/sized-box/SizedBox";
+import { Callout } from "../../../../components/callout/Callout";
+import { ExternalLink } from "../../../../components/links/ExternalLink";
+import { FlowserIcon } from "../../../../components/icons/Icons";
+import { SizedBox } from "../../../../components/sized-box/SizedBox";
import { IntegerNumberBuilder } from "./IntegerNumberBuilder/IntegerNumberBuilder";
export function ValueBuilder(props: CadenceValueBuilder): ReactElement {
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/interface.ts b/frontend/src/modules/interactions/components/ValueBuilder/interface.ts
similarity index 91%
rename from frontend/src/modules/interactions/components/parameters/ValueBuilder/interface.ts
rename to frontend/src/modules/interactions/components/ValueBuilder/interface.ts
index 643fa957..3e204fc4 100644
--- a/frontend/src/modules/interactions/components/parameters/ValueBuilder/interface.ts
+++ b/frontend/src/modules/interactions/components/ValueBuilder/interface.ts
@@ -1,6 +1,7 @@
import { CadenceType, FclValue } from "@flowser/shared";
export type CadenceValueBuilder = {
+ disabled?: boolean;
type: CadenceType;
value: FclValue;
setValue: (value: FclValue) => void;
diff --git a/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/modules/interactions/hooks/use-transaction-name.ts b/frontend/src/modules/interactions/hooks/use-transaction-name.ts
index cfa14bfe..b437dbb3 100644
--- a/frontend/src/modules/interactions/hooks/use-transaction-name.ts
+++ b/frontend/src/modules/interactions/hooks/use-transaction-name.ts
@@ -59,7 +59,7 @@ export function useTransactionName(
props: UseInteractionNameProps
): string | undefined {
const { transaction } = props;
- const { templates } = useInteractionRegistry();
+ const { templates, definitions } = useInteractionRegistry();
return useMemo(() => {
if (!transaction?.script) {
@@ -67,7 +67,7 @@ export function useTransactionName(
}
const sanitizedTargetCode = sanitizeCadenceSource(transaction.script);
- const matchingTemplateName = templates.find(
+ const matchingTemplateName = [...templates, ...definitions].find(
(template) =>
template.code &&
sanitizeCadenceSource(template.code) === sanitizedTargetCode
diff --git a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss
index 6f636f4f..a49a33c3 100644
--- a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss
+++ b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss
@@ -48,12 +48,19 @@
.tabWrapper {
.tabLink {
- display: block;
+ .indicator {
+ height: 40px;
+ width: 8px;
+ border-radius: 10px;
+ margin-right: $spacing-l;
+ }
+ display: flex;
+ align-items: center;
text-decoration: none;
color: $gray-10;
font-size: $font-size-large;
width: 100%;
- padding: 12px 53px;
+ padding: $spacing-s $spacing-l;
box-sizing: border-box;
position: relative;
@@ -69,8 +76,11 @@
}
&.activeTab {
+ .indicator {
+ background: $violet-50;
+ }
a {
- background-color: transparentize($gray-50, 0.5);
+ background-color: transparentize($gray-50, 0.8);
}
}
}
@@ -106,8 +116,11 @@
}
.newProjectButton {
- background-color: $yellow;
- color: $gray-110;
+ background-color: $violet-100;
+ color: $white;
+ svg path {
+ fill: white;
+ }
border: none;
width: 100%;
}
diff --git a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx
index dfa9b049..ab9d57ad 100644
--- a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx
+++ b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx
@@ -3,7 +3,6 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
import IconButton from "../../../components/buttons/icon-button/IconButton";
import longLogo from "../../../assets/images/long_logo.png";
import trash from "../../../assets/icons/trash.svg";
-import newProject from "../../../assets/icons/new_project.svg";
import classes from "./ProjectListPage.module.scss";
import { useGetAllProjects } from "../../../hooks/use-api";
import { Project } from "@flowser/shared";
@@ -17,6 +16,7 @@ import { useAnalytics } from "../../../hooks/use-analytics";
import { AnalyticEvent } from "../../../services/analytics.service";
import { ConsentDialog } from "../../../components/dialogs/consent/ConsentDialog";
import { useAnalyticsConsent } from "../../../hooks/use-analytics-consent";
+import { FlowserIcon } from "../../../components/icons/Icons";
type ProjectTab = {
id: string;
@@ -65,7 +65,8 @@ export const ProjectListPage: FunctionComponent = () => {
[classes.activeTab]: tab.id === activeTab.id,
})}
>
-
+
+
{tab.label}
@@ -75,7 +76,7 @@ export const ProjectListPage: FunctionComponent = () => {
navigate("/projects/create")}
- icon={
}
+ icon={}
iconPosition="before"
className={classes.newProjectButton}
>
@@ -101,7 +102,7 @@ function ProjectsListContent() {
try {
await projectService.useProject(project.id);
track(AnalyticEvent.PROJECT_STARTED);
- navigate(`/projects/${project.id}/accounts`);
+ navigate(`/projects/${project.id}`);
} catch (e: unknown) {
handleError(e);
navigate(`/projects/${project.id}/settings`, {
diff --git a/frontend/src/modules/projects/ProjectSettings/ProjectSettings.tsx b/frontend/src/modules/projects/ProjectSettings/ProjectSettings.tsx
index af0b021b..e6c1c852 100644
--- a/frontend/src/modules/projects/ProjectSettings/ProjectSettings.tsx
+++ b/frontend/src/modules/projects/ProjectSettings/ProjectSettings.tsx
@@ -95,7 +95,7 @@ export const ProjectSettings: FunctionComponent = (
}
try {
await projectService.useProject(project.id);
- navigate(`/projects/${project.id}/accounts`, {
+ navigate(`/projects/${project.id}`, {
replace: true,
});
} catch (e) {
diff --git a/frontend/src/modules/transactions/SignaturesTable/SignaturesTable.module.scss b/frontend/src/modules/transactions/SignaturesTable/SignaturesTable.module.scss
new file mode 100644
index 00000000..44c54c27
--- /dev/null
+++ b/frontend/src/modules/transactions/SignaturesTable/SignaturesTable.module.scss
@@ -0,0 +1,6 @@
+.hash {
+ max-width: 20vw;
+ min-width: 10vw;
+ display: inline-block;
+ overflow: hidden;
+}
diff --git a/frontend/src/modules/transactions/details/SignaturesTable.tsx b/frontend/src/modules/transactions/SignaturesTable/SignaturesTable.tsx
similarity index 86%
rename from frontend/src/modules/transactions/details/SignaturesTable.tsx
rename to frontend/src/modules/transactions/SignaturesTable/SignaturesTable.tsx
index 2f7604fd..a4a689b8 100644
--- a/frontend/src/modules/transactions/details/SignaturesTable.tsx
+++ b/frontend/src/modules/transactions/SignaturesTable/SignaturesTable.tsx
@@ -2,11 +2,11 @@ import { createColumnHelper } from "@tanstack/table-core";
import { SignableObject } from "@flowser/shared";
import Label from "../../../components/label/Label";
import Value from "../../../components/value/Value";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
-import classes from "./Details.module.scss";
+import { MiddleEllipsis } from "../../../components/ellipsis/MiddleEllipsis";
+import classes from "./SignaturesTable.module.scss";
import React, { ReactElement } from "react";
import Table from "../../../components/table/Table";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
const columnsHelper = createColumnHelper();
diff --git a/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.module.scss b/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.module.scss
new file mode 100644
index 00000000..6e06bf52
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.module.scss
@@ -0,0 +1,7 @@
+@import "styles/spacings";
+@import "styles/animations";
+
+.root {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.tsx b/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.tsx
new file mode 100644
index 00000000..7205a46c
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionDetails/TransactionDetails.tsx
@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from "react";
+import classes from "./TransactionDetails.module.scss";
+import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
+import { useGetTransaction } from "../../../hooks/use-api";
+import { TransactionOverview } from "../TransactionOverview/TransactionOverview";
+import { SizedBox } from "../../../components/sized-box/SizedBox";
+import { TransactionDetailsTabs } from "../TransactionDetailsTabs/TransactionDetailsTabs";
+
+type TransactionDetailsProps = {
+ transactionId: string;
+};
+
+export const TransactionDetails: FunctionComponent = (
+ props
+) => {
+ const { transactionId } = props;
+ const { data, isLoading } = useGetTransaction(transactionId);
+ const { transaction } = data ?? {};
+
+ if (isLoading || !transaction) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/modules/transactions/TransactionDetailsTabs/TransactionDetailsTabs.tsx b/frontend/src/modules/transactions/TransactionDetailsTabs/TransactionDetailsTabs.tsx
new file mode 100644
index 00000000..d21832ac
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionDetailsTabs/TransactionDetailsTabs.tsx
@@ -0,0 +1,85 @@
+import { TabItem } from "../../../components/tabs/Tabs";
+import { TransactionError } from "../../../components/status/ErrorMessage";
+import { TransactionSource } from "../TransactionSource/TransactionSource";
+import { EventsTable } from "../../events/EventsTable/EventsTable";
+import { SignaturesTable } from "../SignaturesTable/SignaturesTable";
+import React, { ReactElement } from "react";
+import {
+ StyledTabs,
+ StyledTabsProps,
+} from "../../../components/tabs/StyledTabs";
+import { Transaction } from "@flowser/shared";
+import { useGetPollingEventsByTransaction } from "../../../hooks/use-api";
+import { TransactionOverview } from "../TransactionOverview/TransactionOverview";
+
+type TransactionDetailsTabsProps = Omit & {
+ transaction: Transaction;
+ includeOverviewTab: boolean;
+ includeScriptTab: boolean;
+};
+
+export function TransactionDetailsTabs(
+ props: TransactionDetailsTabsProps
+): ReactElement {
+ const { transaction, includeOverviewTab, includeScriptTab, ...tabProps } =
+ props;
+
+ const { data: events } = useGetPollingEventsByTransaction(transaction.id);
+
+ const tabs: TabItem[] = [];
+
+ if (transaction.status?.errorMessage) {
+ tabs.push({
+ id: "error",
+ label: "Error",
+ content: (
+
+ ),
+ });
+ }
+
+ if (includeOverviewTab) {
+ tabs.push({
+ id: "overview",
+ label: "Overview",
+ content: ,
+ });
+ }
+
+ if (includeScriptTab) {
+ tabs.push({
+ id: "script",
+ label: "Script",
+ content: (
+
+ ),
+ });
+ }
+
+ tabs.push(
+ ...[
+ {
+ id: "events",
+ label: "Events",
+ content: ,
+ },
+ {
+ id: "envelope-signatures",
+ label: "Envelope Signatures",
+ content: (
+
+ ),
+ },
+ {
+ id: "payload-signatures",
+ label: "Payload Signatures",
+ content: ,
+ },
+ ]
+ );
+
+ return ;
+}
diff --git a/frontend/src/modules/transactions/TransactionOverview/TransactionOverview.module.scss b/frontend/src/modules/transactions/TransactionOverview/TransactionOverview.module.scss
new file mode 100644
index 00000000..01a8b6d6
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionOverview/TransactionOverview.module.scss
@@ -0,0 +1,5 @@
+.ellipsis {
+ max-width: 13vw;
+ display: inline-block;
+ overflow: hidden;
+}
diff --git a/frontend/src/modules/transactions/details/TransactionOverview.tsx b/frontend/src/modules/transactions/TransactionOverview/TransactionOverview.tsx
similarity index 88%
rename from frontend/src/modules/transactions/details/TransactionOverview.tsx
rename to frontend/src/modules/transactions/TransactionOverview/TransactionOverview.tsx
index 229ae86b..2aa0d0af 100644
--- a/frontend/src/modules/transactions/details/TransactionOverview.tsx
+++ b/frontend/src/modules/transactions/TransactionOverview/TransactionOverview.tsx
@@ -3,14 +3,14 @@ import {
DetailsCard,
DetailsCardColumn,
} from "../../../components/details-card/DetailsCard";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
-import classes from "./Details.module.scss";
+import { MiddleEllipsis } from "../../../components/ellipsis/MiddleEllipsis";
+import classes from "./TransactionOverview.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 { AccountLink } from "../../accounts/AccountLink/AccountLink";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
type TransactionOverviewProps = {
transaction: Transaction;
@@ -28,7 +28,7 @@ export function TransactionOverview(
label: "Transaction",
value: (
-
+
{transaction.id}
@@ -50,7 +50,7 @@ export function TransactionOverview(
label: "Block ID",
value: (
-
+
{transaction.blockId}
diff --git a/frontend/src/modules/transactions/TransactionSource/TransactionSource.module.scss b/frontend/src/modules/transactions/TransactionSource/TransactionSource.module.scss
new file mode 100644
index 00000000..550929f2
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionSource/TransactionSource.module.scss
@@ -0,0 +1,23 @@
+@import "styles/typography";
+@import "styles/spacings";
+@import "styles/colors";
+
+.root {
+ display: flex;
+ column-gap: $spacing-xl;
+
+ .left {
+ flex: 1;
+ max-width: 400px;
+
+ .argumentsWrapper {
+ display: flex;
+ flex-direction: column;
+ row-gap: $spacing-base * 2;
+ }
+ }
+
+ .right {
+ flex: 3;
+ }
+}
diff --git a/frontend/src/modules/transactions/TransactionSource/TransactionSource.tsx b/frontend/src/modules/transactions/TransactionSource/TransactionSource.tsx
new file mode 100644
index 00000000..c5786d02
--- /dev/null
+++ b/frontend/src/modules/transactions/TransactionSource/TransactionSource.tsx
@@ -0,0 +1,40 @@
+import React, { FC } from "react";
+import Card from "../../../components/card/Card";
+import classes from "./TransactionSource.module.scss";
+import { TransactionArgument } from "@flowser/shared";
+import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor";
+import { ParamBuilder } from "../../interactions/components/ParamBuilder/ParamBuilder";
+import { SizedBox } from "../../../components/sized-box/SizedBox";
+
+type TransactionSourceProps = {
+ code: string;
+ arguments: TransactionArgument[];
+};
+
+export const TransactionSource: FC = ({
+ code,
+ arguments: args,
+}) => {
+ return (
+
+
+
Arguments
+
+
+ {args.map((arg) => (
+
+ ))}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx b/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx
index 5429a066..2450c062 100644
--- a/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx
+++ b/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx
@@ -3,7 +3,7 @@ import { DecoratedPollingEntity } from "../../../contexts/timeout-polling.contex
import { Transaction } from "@flowser/shared";
import Label from "../../../components/label/Label";
import Value from "../../../components/value/Value";
-import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis";
+import { MiddleEllipsis } from "../../../components/ellipsis/MiddleEllipsis";
import classes from "./TransactionsTable.module.scss";
import { AccountLink } from "../../accounts/AccountLink/AccountLink";
import { GrcpStatus } from "../../../components/status/GrcpStatus";
@@ -12,7 +12,7 @@ import React, { ReactElement } from "react";
import Table from "../../../components/table/Table";
import { useTransactionName } from "../../interactions/hooks/use-transaction-name";
import { Ellipsis } from "../../../components/ellipsis/Ellipsis";
-import { ProjectLink } from "../../../components/link/ProjectLink";
+import { ProjectLink } from "../../../components/links/ProjectLink";
const columnHelper = createColumnHelper>();
diff --git a/frontend/src/modules/transactions/details/Details.module.scss b/frontend/src/modules/transactions/details/Details.module.scss
deleted file mode 100644
index 115bc4fa..00000000
--- a/frontend/src/modules/transactions/details/Details.module.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-@import "styles/spacings";
-@import "styles/animations";
-
-.root {
- display: flex;
- flex-direction: column;
- align-self: center;
- max-width: 1690px;
- width: 100%;
-
- .listCard {
- display: flex;
- justify-content: space-between;
-
- & > div {
- display: flex;
- flex-direction: column;
- }
- }
- .hash {
- max-width: 20vw;
- min-width: 10vw;
- display: inline-block;
- overflow: hidden;
- }
-
- .detailsTable {
- margin-bottom: $spacing-base;
- position: relative;
- margin-left: auto;
- display: flex;
- }
-
- .card {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: $spacing-base $spacing-l;
- margin-bottom: $spacing-base;
-
- & > div {
- display: flex;
- flex-direction: column;
- padding-right: $spacing-base * 2;
- flex: 10;
- }
-
- & > div:nth-child(2) {
- flex: 16;
- overflow-wrap: anywhere;
- }
-
- & > div:nth-child(3),
- & > div:nth-child(4) {
- flex: 4;
- }
-
- & > div:last-child {
- flex: 1;
- align-items: flex-end;
- padding-right: 0;
- }
-
- .hash {
- max-width: 20vw;
- min-width: 20vw;
- display: inline-block;
- overflow: hidden;
- }
- }
-}
-
-.elipsis {
- max-width: 13vw;
- display: inline-block;
- overflow: hidden;
-}
-
-.tableRow {
- display: flex;
- justify-content: space-between;
- margin-bottom: $spacing-base;
- align-items: center;
-
- & > div {
- width: 100%;
- display: flex;
- justify-content: flex-start;
- margin: 0 $spacing-base 0 $spacing-base;
- }
- & > div:nth-child(1) {
- flex: 7;
- }
-
- & > div:nth-child(2) {
- flex: 7;
- overflow-wrap: anywhere;
- }
-
- & > div:nth-child(3) {
- overflow: hidden;
- flex: 10;
- }
- & > div:nth-child(4) {
- flex: 7;
- }
- & > div:nth-child(5),
- & > div:nth-child(6) {
- flex: 3;
- }
-}
-
-.hashEvents {
- max-width: 13vw;
- display: inline-block;
- overflow: hidden;
-}
-
-.subTableValue {
- max-width: 13vw;
- display: inline-block;
- overflow: hidden;
- margin-right: $spacing-base;
-}
-
-.caretIcon {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
diff --git a/frontend/src/modules/transactions/details/TransactionDetails.tsx b/frontend/src/modules/transactions/details/TransactionDetails.tsx
deleted file mode 100644
index 39fd9527..00000000
--- a/frontend/src/modules/transactions/details/TransactionDetails.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { FunctionComponent } from "react";
-import { useParams } from "react-router-dom";
-import classes from "./Details.module.scss";
-import { TransactionSource } from "./source/TransactionSource";
-import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading";
-import {
- useGetPollingEventsByTransaction,
- useGetTransaction,
-} from "../../../hooks/use-api";
-import { TransactionError } from "../../../components/status/ErrorMessage";
-import { TransactionOverview } from "./TransactionOverview";
-import { SizedBox } from "../../../components/sized-box/SizedBox";
-import { StyledTabs } from "../../../components/tabs/StyledTabs";
-import { TabItem } from "../../../components/tabs/Tabs";
-import { EventsTable } from "../../events/EventsTable/EventsTable";
-import { SignaturesTable } from "./SignaturesTable";
-
-type TransactionDetailsProps = {
- transactionId: string;
-};
-
-export const TransactionDetails: FunctionComponent = (
- props
-) => {
- const { transactionId } = props;
- const { data, isLoading } = useGetTransaction(transactionId);
- const { data: events } = useGetPollingEventsByTransaction(transactionId);
- const { transaction } = data ?? {};
-
- if (isLoading || !transaction) {
- return ;
- }
-
- const tabs: TabItem[] = [];
-
- if (transaction.status?.errorMessage) {
- tabs.push({
- id: "error",
- label: "Error",
- content: (
-
- ),
- });
- }
-
- tabs.push(
- ...[
- {
- id: "script",
- label: "Script",
- content: (
-
- ),
- },
- {
- id: "events",
- label: "Events",
- content: ,
- },
- {
- id: "envelope-signatures",
- label: "Envelope Signatures",
- content: (
-
- ),
- },
- {
- id: "payload-signatures",
- label: "Payload Signatures",
- content: ,
- },
- ]
- );
-
- return (
-
-
-
-
-
- );
-};
diff --git a/frontend/src/modules/transactions/details/source/TransactionSource.module.scss b/frontend/src/modules/transactions/details/source/TransactionSource.module.scss
deleted file mode 100644
index 875744e8..00000000
--- a/frontend/src/modules/transactions/details/source/TransactionSource.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "styles/typography";
-@import "styles/spacings";
-@import "styles/colors";
-
-.root {
- font-family: $font-family-courier-new;
- font-weight: lighter;
- padding: $spacing-base * 3;
-
- .argsTitle {
- margin-bottom: $spacing-base * 2;
- display: block;
- }
-
- .argListItem {
- display: flex;
- align-items: baseline;
- font-family: $font-family-inter;
- font-weight: 100;
- font-size: $font-size-small;
-
- margin-bottom: $spacing-base;
- margin-left: $spacing-base;
-
- & > span:not(:first-child) {
- margin-left: $spacing-l;
- display: inline-flex;
- }
-
- .argValue {
- max-width: 20vw;
- min-width: 10px;
- display: inline-block;
- overflow: hidden;
- }
-
- & > span:first-child {
- border-radius: 50%;
- background-color: $yellow;
- color: $gray-80;
- font-weight: bold;
- opacity: .8;
- width: 18px;
- height: 18px;
- min-width: 18px;
- min-height: 18px;
- line-height: 14px;
- text-align: center;
- align-items: baseline;
- justify-content: center;
- }
-
- & > span.value {
- margin-left: $spacing-base * 0.5;
- }
- }
-
- .codeTitle {
- margin-top: $spacing-l * 2;
- display: block;
- }
-}
diff --git a/frontend/src/modules/transactions/details/source/TransactionSource.tsx b/frontend/src/modules/transactions/details/source/TransactionSource.tsx
deleted file mode 100644
index 6cd5d7f9..00000000
--- a/frontend/src/modules/transactions/details/source/TransactionSource.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { FunctionComponent } from "react";
-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 "../../../../components/cadence-editor/CadenceEditor";
-import CopyButton from "components/buttons/copy-button/CopyButton";
-
-type TransactionSourceProps = {
- code: string;
- arguments: TransactionArgument[];
-};
-
-export const TransactionSource: FunctionComponent = ({
- code,
- arguments: args,
-}) => {
- return (
-
- {args && args.length > 0 && (
- <>
-
-
-
- {args.map((arg, index) => (
-
- {">"}
-
- {`{${index}}`}
-
-
- {arg.type?.rawType}
-
-
-
-
- {arg.valueAsJson}
-
-
-
-
-
- ))}
-