From a3d1a3cf05219935d8f266a1bc1098ffc7baac96 Mon Sep 17 00:00:00 2001 From: Iveta Date: Mon, 18 Nov 2024 08:40:40 -0500 Subject: [PATCH] Refactor page headings (#1165) --- src/app/(sidebar)/account/create/page.tsx | 24 +- src/app/(sidebar)/account/fund/page.tsx | 21 +- .../(sidebar)/account/muxed-create/page.tsx | 43 +- .../(sidebar)/account/muxed-parse/page.tsx | 19 +- src/app/(sidebar)/account/saved/page.tsx | 14 +- .../(sidebar)/endpoints/[[...pages]]/page.tsx | 32 +- .../components/EndpointsLandingPage.tsx | 65 ++- .../components/SavedEndpointsPage.tsx | 384 +++++++++--------- .../transaction/build/components/Params.tsx | 277 +++++++------ src/app/(sidebar)/transaction/build/page.tsx | 8 +- .../(sidebar)/transaction/fee-bump/page.tsx | 41 +- src/app/(sidebar)/transaction/saved/page.tsx | 33 +- .../transaction/sign/components/Import.tsx | 12 +- .../transaction/sign/components/Overview.tsx | 107 +++-- .../(sidebar)/transaction/simulate/page.tsx | 131 +++--- src/app/(sidebar)/transaction/submit/page.tsx | 12 +- src/app/(sidebar)/xdr/to/page.tsx | 20 +- src/app/(sidebar)/xdr/view/page.tsx | 12 +- src/app/page.tsx | 61 ++- src/components/TabView/index.tsx | 8 +- src/components/layout/PageCard.tsx | 31 ++ src/components/layout/PageHeader.tsx | 36 ++ 22 files changed, 675 insertions(+), 716 deletions(-) create mode 100644 src/components/layout/PageCard.tsx create mode 100644 src/components/layout/PageHeader.tsx diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 6436d7ff..2e957af8 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useEffect, useState } from "react"; -import { Card, Text, Button, Icon } from "@stellar/design-system"; +import { Text, Button, Icon } from "@stellar/design-system"; import { Keypair } from "@stellar/stellar-sdk"; import { useStore } from "@/store/useStore"; @@ -20,6 +20,7 @@ import { Box } from "@/components/layout/Box"; import { SaveKeypairModal } from "@/components/SaveKeypairModal"; import "../styles.scss"; +import { PageCard } from "@/components/layout/PageCard"; export default function CreateAccount() { const { account, network } = useStore(); @@ -79,19 +80,14 @@ export default function CreateAccount() { return (
- +
-
- - Keypair Generator - - - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
+ + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + + )}
- + - +
-
- - Friendbot: fund a {network.id} network account - - - - The friendbot is a horizon API endpoint that will fund an account - with 10,000 lumens on the {network.id} network. - -
+ + The friendbot is a horizon API endpoint that will fund an account + with 10,000 lumens on the {network.id} network. +
- + - +
-
- - - Create Multiplexed Account - - - - - A muxed (or multiplexed) account (defined in{" "} - - CAP-27 - {" "} - and briefly{" "} - - SEP-23 - - ) is one that resolves a single Stellar G...account to many - different underlying IDs. - -
+ + A muxed (or multiplexed) account (defined in{" "} + + CAP-27 + {" "} + and briefly{" "} + + SEP-23 + + ) is one that resolves a single Stellar G...account to many + different underlying IDs. +
- + - +
-
- - - Get Muxed Account from M address - - -
-
- + - -
- - Saved Keypairs - -
- + <> {IS_TESTING_NETWORK ? ( @@ -178,8 +172,8 @@ export default function SavedKeypairs() { ) : null} - {renderContent()} - + {renderContent()} + <>{renderOtherNetworkMessage()} diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx index 63e2b31a..b45e7a46 100644 --- a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx +++ b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx @@ -22,6 +22,7 @@ import { Box } from "@/components/layout/Box"; import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea"; import { ShareUrlButton } from "@/components/ShareUrlButton"; import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton"; +import { PageCard } from "@/components/layout/PageCard"; import { useStore } from "@/store/useStore"; import { isEmptyObject } from "@/helpers/isEmptyObject"; @@ -951,23 +952,18 @@ export default function Endpoints() { return ( <> -
- {page ? ( - - {page.label} - - ) : null} - - } - data-testid="endpoints-docsLink" - > - View Docs - -
- - + } + data-testid="endpoints-docsLink" + > + View Docs + + } + >
{renderEndpointUrl()} @@ -983,7 +979,7 @@ export default function Endpoints() { {renderFields()}
- + {endpointData || endpointError ? (
diff --git a/src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx b/src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx index 4371f347..8b16724d 100644 --- a/src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx +++ b/src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx @@ -1,7 +1,8 @@ -import { Icon, Card, Text, Link } from "@stellar/design-system"; +import { Icon, Text, Link } from "@stellar/design-system"; import { NextLink } from "@/components/NextLink"; -import { Routes } from "@/constants/routes"; import { InfoCards } from "@/components/InfoCards"; +import { PageCard } from "@/components/layout/PageCard"; +import { Routes } from "@/constants/routes"; import { openUrl } from "@/helpers/openUrl"; export const EndpointsLandingPage = () => { @@ -30,40 +31,34 @@ export const EndpointsLandingPage = () => { return ( <> - -
- - API Explorer - - - - The Stellar Lab is a set of tools that enables people to try out and - learn about the Stellar network. The Lab can{" "} - - build transactions - - ,{" "} - - sign them - - , and{" "} - - submit them to the network - - . In this section of the Lab, you can explore the various endpoints - from the RPC and Horizon, make requests to these endpoints, and save - them for future use. - + + + The Stellar Lab is a set of tools that enables people to try out and + learn about the Stellar network. The Lab can{" "} + + build transactions + + ,{" "} + + sign them + + , and{" "} + + submit them to the network + + . In this section of the Lab, you can explore the various endpoints + from the RPC and Horizon, make requests to these endpoints, and save + them for future use. + - - For Stellar docs, take a look at the{" "} - - Stellar developers site - - . - -
- + + For Stellar docs, take a look at the{" "} + + Stellar developers site + + . + + ); diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx index aed52213..43d71aea 100644 --- a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx +++ b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx @@ -4,7 +4,6 @@ import { Alert, Badge, Button, - Card, Icon, Input, Modal, @@ -20,6 +19,7 @@ import { ShareUrlButton } from "@/components/ShareUrlButton"; import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea"; import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete"; import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton"; +import { PageCard } from "@/components/layout/PageCard"; import { Routes } from "@/constants/routes"; import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon"; @@ -129,235 +129,231 @@ export const SavedEndpointsPage = () => { const HorizonEndpoints = () => { if (savedEndpointsHorizon.length === 0) { - return There are no saved Horizon Endpoints; + return "There are no saved Horizon Endpoints"; } return ( - - - {savedEndpointsHorizon.map((e, idx) => ( - -
- - {e.method} - - } - /> -
- - - - - - <> - {e.shareableUrl ? ( - - ) : null} - - + {e.method} + + } + /> +
- - {`Last saved ${formatTimestamp(e.timestamp)}`} + + + - - + + {`Last saved ${formatTimestamp(e.timestamp)}`} + + - ))} - - + + ))} + ); }; const RpcEndpoints = () => { if (savedRpcMethods.length === 0) { - return There are no saved RPC Methods; + return "There are no saved RPC Methods"; } return ( - - - {savedRpcMethods.map((e, idx) => ( + + {savedRpcMethods.map((e, idx) => ( + + + + {e.rpcMethod} + + +
+ + {e.method} + + } + /> +
- - - {e.rpcMethod} - - -
- - {e.method} - - } - /> -
- - + + + + <> <> - - - <> - {e.shareableUrl ? ( - - ) : null} - + {e.shareableUrl ? ( + + ) : null} - + + - - { - const updatedList = arrayItem.delete( - savedRpcMethods, - idx, - ); - - localStorageSavedRpcMethods.set(updatedList); - setSavedRpcMethods(updatedList); - }} - /> - + + { + const updatedList = arrayItem.delete(savedRpcMethods, idx); + + localStorageSavedRpcMethods.set(updatedList); + setSavedRpcMethods(updatedList); + }} + /> - {expandedPayloadIndex[idx] ? ( - <> -
- -
- - - - - ) : ( - <> - )} - ))} - - + {expandedPayloadIndex[idx] ? ( + <> +
+ +
+ + + + + ) : ( + <> + )} + + ))} + ); }; return ( - : null, - }} - tab2={{ - id: "horizon", - label: "Horizon Endpoints", - content: saved.activeTab === "horizon" ? : null, - }} - activeTabId={saved.activeTab} - onTabChange={(id) => { - updateSavedActiveTab(id); - }} - /> + + : null, + }} + tab2={{ + id: "horizon", + label: "Horizon Endpoints", + content: + saved.activeTab === "horizon" ? : null, + }} + activeTabId={saved.activeTab} + onTabChange={(id) => { + updateSavedActiveTab(id); + }} + /> + { }; return ( - - - - { - const id = "source_account"; - handleParamChange(id, e.target.value); - handleParamsError(id, validateParam(id, e.target.value)); - }} - rightElement={ - walletKitPubKey ? ( - { - const id = "source_account"; - - if (walletKitPubKey) { - handleParamChange(id, walletKitPubKey); - handleParamsError(id, validateParam(id, walletKitPubKey)); - } - }} - placement="right" - > - Get connected wallet address - - ) : null - } - note={ - <> - If you don’t have an account yet, you can create and fund a test - net account with the{" "} - account creator. - - } - infoLink="https://developers.stellar.org/docs/learn/glossary#source-account" - /> - - { - const id = "seq_num"; - handleParamChange(id, e.target.value); - handleParamsError(id, validateParam(id, e.target.value)); - }} - note="The transaction sequence number is usually one higher than current account sequence number." - rightElement={ + + + { + const id = "source_account"; + handleParamChange(id, e.target.value); + handleParamsError(id, validateParam(id, e.target.value)); + }} + rightElement={ + walletKitPubKey ? ( { - handleParamChange("seq_num", ""); - fetchSequenceNumber(); + const id = "source_account"; + + if (walletKitPubKey) { + handleParamChange(id, walletKitPubKey); + handleParamsError(id, validateParam(id, walletKitPubKey)); + } }} placement="right" - disabled={ - !txnParams.source_account || paramsError.source_account - } - isLoading={isFetchingSequenceNumber || isLoadingSequenceNumber} > - Fetch next sequence + Get connected wallet address - } - infoLink="https://developers.stellar.org/docs/glossary#sequence-number" - /> - - { - const id = "fee"; - handleParamChange(id, e.target.value); - handleParamsError(id, validateParam(id, e.target.value)); - }} - note={ - <> - The base inclusion fee is currently set to 100 stroops (0.00001 - lumens). For more real time inclusion fee, please see{" "} - - getFeeStats - {" "} - from the RPC. To learn more about fees, please see{" "} - - Fees & Metering - - . - - } - infoLink="https://developers.stellar.org/docs/learn/glossary#base-fee" - /> - - { - const id = "memo"; - handleParamChange(id, getMemoValue(memo)); - handleParamsError(id, validateParam(id, memo)); - }} - infoLink="https://developers.stellar.org/docs/encyclopedia/memos" - /> - - { - const id = "cond.time"; - handleParamChange(id, timeBounds); - handleParamsError(id, validateParam("cond", timeBounds)); - }} - infoLink="https://developers.stellar.org/docs/learn/glossary#time-bounds" - /> - - - - + Fetch next sequence + + } + infoLink="https://developers.stellar.org/docs/glossary#sequence-number" + /> + + { + const id = "fee"; + handleParamChange(id, e.target.value); + handleParamsError(id, validateParam(id, e.target.value)); + }} + note={ + <> + The base inclusion fee is currently set to 100 stroops (0.00001 + lumens). For more real time inclusion fee, please see{" "} + + getFeeStats + {" "} + from the RPC. To learn more about fees, please see{" "} + + Fees & Metering + + . + + } + infoLink="https://developers.stellar.org/docs/learn/glossary#base-fee" + /> + + { + const id = "memo"; + handleParamChange(id, getMemoValue(memo)); + handleParamsError(id, validateParam(id, memo)); + }} + infoLink="https://developers.stellar.org/docs/encyclopedia/memos" + /> + + { + const id = "cond.time"; + handleParamChange(id, timeBounds); + handleParamsError(id, validateParam("cond", timeBounds)); + }} + infoLink="https://developers.stellar.org/docs/learn/glossary#time-bounds" + /> + + + - - + + ); }; diff --git a/src/app/(sidebar)/transaction/build/page.tsx b/src/app/(sidebar)/transaction/build/page.tsx index 389802f4..c483b693 100644 --- a/src/app/(sidebar)/transaction/build/page.tsx +++ b/src/app/(sidebar)/transaction/build/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { Alert, Text } from "@stellar/design-system"; +import { Alert } from "@stellar/design-system"; import { useStore } from "@/store/useStore"; import { Box } from "@/components/layout/Box"; @@ -65,12 +65,6 @@ export default function BuildTransaction() { return ( -
- - Build Transaction - -
- diff --git a/src/app/(sidebar)/transaction/fee-bump/page.tsx b/src/app/(sidebar)/transaction/fee-bump/page.tsx index c70a73c3..b6e5ecc9 100644 --- a/src/app/(sidebar)/transaction/fee-bump/page.tsx +++ b/src/app/(sidebar)/transaction/fee-bump/page.tsx @@ -1,7 +1,7 @@ "use client"; import { useEffect, useState } from "react"; -import { Button, Card, Icon, Text } from "@stellar/design-system"; +import { Button, Icon } from "@stellar/design-system"; import { get, omit, set } from "lodash"; import { useRouter } from "next/navigation"; @@ -22,6 +22,7 @@ import { TxResponse } from "@/components/TxResponse"; import { ValidationResponseCard } from "@/components/ValidationResponseCard"; import { XdrPicker } from "@/components/FormElements/XdrPicker"; import { ViewInXdrButton } from "@/components/ViewInXdrButton"; +import { PageCard } from "@/components/layout/PageCard"; import { Routes } from "@/constants/routes"; import { KeysOfUnion } from "@/types/types"; @@ -163,25 +164,23 @@ export default function FeeBumpTransaction() { return ( -
- - Fee Bump - - - -
- + } + iconPosition="right" + onClick={() => { + resetResult(); + resetBaseFee(); + }} + > + Clear and import new + + } + > - + <> {feeBumpedTx.xdr ? ( - -
- - Saved Transactions - -
- - - - <> - {savedTxns.length === 0 - ? `There are no saved transactions on ${network.label} network.` - : savedTxns.map((t) => ( - - ))} - - - - + + + <> + {savedTxns.length === 0 + ? `There are no saved transactions on ${network.label} network.` + : savedTxns.map((t) => ( + + ))} + + + { const { network, transaction } = useStore(); @@ -58,12 +59,7 @@ export const Import = () => { return ( -
- - Sign Transaction - -
- +
{
- + { return ( <> - -
- - Transaction Overview - - + { > Clear and import new + } + > +
+ {mergedFields?.map((field) => { + const className = + field.value && + field.value.toString().length >= MIN_LENGTH_FOR_FULL_WIDTH_FIELD + ? "full-width" + : "half-width"; + + if (field.label.includes("XDR")) { + return ( +
+ +
+ ); + } else { + return ( +
+ +
+ ); + } + })}
- - -
- {mergedFields?.map((field) => { - const className = - field.value && - field.value.toString().length >= MIN_LENGTH_FOR_FULL_WIDTH_FIELD - ? "full-width" - : "half-width"; - - if (field.label.includes("XDR")) { - return ( -
- -
- ); - } else { - return ( -
- -
- ); - } - })} -
- - +
-
- - - Signatures - - -
- - + { - + {sign.signedTx ? (
diff --git a/src/app/(sidebar)/transaction/simulate/page.tsx b/src/app/(sidebar)/transaction/simulate/page.tsx index 8e54b59a..37f6fee2 100644 --- a/src/app/(sidebar)/transaction/simulate/page.tsx +++ b/src/app/(sidebar)/transaction/simulate/page.tsx @@ -1,11 +1,12 @@ "use client"; import { useEffect, useState } from "react"; -import { Button, Text, Card, Input, Alert } from "@stellar/design-system"; +import { Button, Input, Alert } from "@stellar/design-system"; import { Box } from "@/components/layout/Box"; import { XdrPicker } from "@/components/FormElements/XdrPicker"; import { PrettyJson } from "@/components/PrettyJson"; +import { PageCard } from "@/components/layout/PageCard"; import { useStore } from "@/store/useStore"; import { useSimulateTx } from "@/query/useSimulateTx"; @@ -92,75 +93,65 @@ export default function SimulateTransaction() { }; return ( - -
- - Simulate Transaction - -
- - <> - {!network.rpcUrl ? ( - - RPC URL is required to simulate a transaction. You can add it in the - network settings in the upper right corner. - - ) : null} - - - - - { - xdr.updateXdrBlob(e.target.value); - resetResponse(); - }} - note="Enter a base-64 encoded XDR blob to decode." - hasCopyButton - /> - - { - updateSimulateInstructionLeeway(e.target.value || undefined); - resetResponse(); - }} - error={instrLeewayError} - /> - -
- +
+ + <> + {simulateTxData ? ( +
- Simulate transaction - -
- - <> - {simulateTxData ? ( -
- -
- ) : null} - - - - + +
+ ) : null} + + + ); } diff --git a/src/app/(sidebar)/transaction/submit/page.tsx b/src/app/(sidebar)/transaction/submit/page.tsx index c4079e04..efe523b8 100644 --- a/src/app/(sidebar)/transaction/submit/page.tsx +++ b/src/app/(sidebar)/transaction/submit/page.tsx @@ -7,7 +7,7 @@ import { useRef, useState, } from "react"; -import { Button, Card, Icon, Text } from "@stellar/design-system"; +import { Button, Icon, Text } from "@stellar/design-system"; import { useRouter } from "next/navigation"; import { useStore } from "@/store/useStore"; @@ -37,6 +37,7 @@ import { TxResponse } from "@/components/TxResponse"; import { SaveTransactionModal } from "@/components/SaveTransactionModal"; import { SdsLink } from "@/components/SdsLink"; import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField"; +import { PageCard } from "@/components/layout/PageCard"; import { HorizonErrorResponse, @@ -475,12 +476,7 @@ export default function SubmitTransaction() { return ( -
- - Submit Transaction - -
- + - + <>{renderSuccess()} <>{renderError()} diff --git a/src/app/(sidebar)/xdr/to/page.tsx b/src/app/(sidebar)/xdr/to/page.tsx index 43c352b5..af8ab739 100644 --- a/src/app/(sidebar)/xdr/to/page.tsx +++ b/src/app/(sidebar)/xdr/to/page.tsx @@ -1,19 +1,13 @@ "use client"; -import { - Text, - Card, - Alert, - Button, - Icon, - Textarea, -} from "@stellar/design-system"; +import { Text, Alert, Button, Icon, Textarea } from "@stellar/design-system"; import * as StellarXdr from "@/helpers/StellarXdr"; import { Box } from "@/components/layout/Box"; import { SdsLink } from "@/components/SdsLink"; import { XdrPicker } from "@/components/FormElements/XdrPicker"; import { XdrTypeSelect } from "@/components/XdrTypeSelect"; +import { PageCard } from "@/components/layout/PageCard"; import { useIsXdrInit } from "@/hooks/useIsXdrInit"; import { useStore } from "@/store/useStore"; @@ -57,13 +51,7 @@ export default function ToXdr() { return ( -
- - To XDR - -
- - +