Skip to content

Commit

Permalink
Refactor page headings (#1165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@quietbits
quietbits authored Nov 18, 2024
1 parent 4d32dc8 commit a3d1a3c
Show file tree
Hide file tree
Showing 22 changed files with 675 additions and 716 deletions.
24 changes: 10 additions & 14 deletions src/app/(sidebar)/account/create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -79,19 +80,14 @@ export default function CreateAccount() {

return (
<div className="Account">
<Card>
<PageCard heading="Keypair Generator">
<div className="Account__card">
<div className="CardText">
<Text size="lg" as="h1" weight="medium">
Keypair Generator
</Text>

<Text size="sm" as="p">
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.
</Text>
</div>
<Text size="sm" as="div">
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.
</Text>

<Box
gap="sm"
direction="row"
Expand Down Expand Up @@ -162,7 +158,7 @@ export default function CreateAccount() {
</ExpandBox>
)}
</div>
</Card>
</PageCard>

<SuccessMsg
publicKey={account.publicKey!}
Expand Down
21 changes: 8 additions & 13 deletions src/app/(sidebar)/account/fund/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Card, Input, Text, Button } from "@stellar/design-system";
import { Input, Text, Button } from "@stellar/design-system";
import { useQueryClient } from "@tanstack/react-query";

import { useFriendBot } from "@/query/useFriendBot";
Expand All @@ -12,6 +12,7 @@ import { validate } from "@/validate";

import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
import { PageCard } from "@/components/layout/PageCard";

import { SwitchNetwork } from "./components/SwitchNetwork";

Expand Down Expand Up @@ -78,18 +79,12 @@ export default function FundAccount() {
}
return (
<div className="Account">
<Card>
<PageCard heading={`Friendbot: fund a ${network.id} network account`}>
<div className="Account__card">
<div className="CardText">
<Text size="lg" as="h1" weight="medium">
Friendbot: fund a {network.id} network account
</Text>

<Text size="sm" as="p">
The friendbot is a horizon API endpoint that will fund an account
with 10,000 lumens on the {network.id} network.
</Text>
</div>
<Text size="sm" as="div">
The friendbot is a horizon API endpoint that will fund an account
with 10,000 lumens on the {network.id} network.
</Text>

<Input
id="fund-public-key-input"
Expand Down Expand Up @@ -133,7 +128,7 @@ export default function FundAccount() {
</Button>
</div>
</div>
</Card>
</PageCard>

<SuccessMsg
isVisible={Boolean(showAlert && isFetchedAfterMount && isSuccess)}
Expand Down
43 changes: 19 additions & 24 deletions src/app/(sidebar)/account/muxed-create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
"use client";

import { useState } from "react";
import { Alert, Button, Card, Input, Link, Text } from "@stellar/design-system";
import { Alert, Button, Input, Link, Text } from "@stellar/design-system";

import { useStore } from "@/store/useStore";

import { ExpandBox } from "@/components/ExpandBox";
import { MuxedAccountResult } from "@/components/MuxedAccountResult";
import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
import { SdsLink } from "@/components/SdsLink";
import { WithInfoText } from "@/components/WithInfoText";
import { PageCard } from "@/components/layout/PageCard";

import { muxedAccount } from "@/helpers/muxedAccount";

Expand Down Expand Up @@ -66,28 +66,23 @@ export default function CreateMuxedAccount() {

return (
<div className="Account">
<Card>
<PageCard
heading="Create Multiplexed Account"
headingInfoLink="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos"
>
<div className="Account__card">
<div className="CardText">
<WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
<Text size="lg" as="h1" weight="medium">
Create Multiplexed Account
</Text>
</WithInfoText>

<Text size="sm" as="p">
A muxed (or multiplexed) account (defined in{" "}
<SdsLink href="https://github.com/stellar/stellar-protocol/blob/master/core/cap-0027.md">
CAP-27
</SdsLink>{" "}
and briefly{" "}
<SdsLink href="https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0023.md">
SEP-23
</SdsLink>
) is one that resolves a single Stellar G...account to many
different underlying IDs.
</Text>
</div>
<Text size="sm" as="div">
A muxed (or multiplexed) account (defined in{" "}
<SdsLink href="https://github.com/stellar/stellar-protocol/blob/master/core/cap-0027.md">
CAP-27
</SdsLink>{" "}
and briefly{" "}
<SdsLink href="https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0023.md">
SEP-23
</SdsLink>
) is one that resolves a single Stellar G...account to many
different underlying IDs.
</Text>

<PubKeyPicker
id="muxed-public-key"
Expand Down Expand Up @@ -160,7 +155,7 @@ export default function CreateMuxedAccount() {
/>
</ExpandBox>
</div>
</Card>
</PageCard>

<Alert
placement="inline"
Expand Down
19 changes: 7 additions & 12 deletions src/app/(sidebar)/account/muxed-parse/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
"use client";

import { useState } from "react";
import { Alert, Card, Link, Text, Button } from "@stellar/design-system";
import { Alert, Link, Button } from "@stellar/design-system";

import { useStore } from "@/store/useStore";

import { ExpandBox } from "@/components/ExpandBox";
import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
import { MuxedAccountResult } from "@/components/MuxedAccountResult";
import { WithInfoText } from "@/components/WithInfoText";
import { PageCard } from "@/components/layout/PageCard";

import { muxedAccount } from "@/helpers/muxedAccount";

Expand Down Expand Up @@ -57,16 +57,11 @@ export default function ParseMuxedAccount() {

return (
<div className="Account">
<Card>
<PageCard
heading="Get Muxed Account from M address"
headingInfoLink="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos"
>
<div className="Account__card">
<div className="CardText">
<WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
<Text size="lg" as="h1" weight="medium">
Get Muxed Account from M address
</Text>
</WithInfoText>
</div>

<PubKeyPicker
id="muxed-account-address"
label="Muxed Account M Address"
Expand Down Expand Up @@ -121,7 +116,7 @@ export default function ParseMuxedAccount() {
/>
</ExpandBox>
</div>
</Card>
</PageCard>

<Alert
placement="inline"
Expand Down
14 changes: 4 additions & 10 deletions src/app/(sidebar)/account/saved/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useCallback, useEffect, useState } from "react";
import {
Alert,
Text,
Card,
Input,
Icon,
Button,
Expand All @@ -28,6 +27,7 @@ import { useFriendBot } from "@/query/useFriendBot";
import { useAccountInfo } from "@/query/useAccountInfo";

import { NetworkType, SavedKeypair } from "@/types/types";
import { PageCard } from "@/components/layout/PageCard";

export default function SavedKeypairs() {
const { network, selectNetwork, updateIsDynamicNetworkSelect } = useStore();
Expand Down Expand Up @@ -157,13 +157,7 @@ export default function SavedKeypairs() {

return (
<Box gap="md">
<Box gap="md">
<div className="PageHeader">
<Text size="md" as="h1" weight="medium">
Saved Keypairs
</Text>
</div>

<PageCard heading="Saved Keypairs">
<>
{IS_TESTING_NETWORK ? (
<Alert variant="warning" placement="inline">
Expand All @@ -178,8 +172,8 @@ export default function SavedKeypairs() {
) : null}
</>

<Card>{renderContent()}</Card>
</Box>
{renderContent()}
</PageCard>

<>{renderOtherNetworkMessage()}</>

Expand Down
32 changes: 14 additions & 18 deletions src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -951,23 +952,18 @@ export default function Endpoints() {

return (
<>
<div className="PageHeader">
{page ? (
<Text size="md" as="h1" weight="medium">
{page.label}
</Text>
) : null}

<SdsLink
href={pageData.docsUrl}
icon={<Icon.LinkExternal01 />}
data-testid="endpoints-docsLink"
>
View Docs
</SdsLink>
</div>

<Card>
<PageCard
heading={page?.label}
rightElement={
<SdsLink
href={pageData.docsUrl}
icon={<Icon.LinkExternal01 />}
data-testid="endpoints-docsLink"
>
View Docs
</SdsLink>
}
>
<form className="PageBody" onSubmit={handleSubmit}>
{renderEndpointUrl()}

Expand All @@ -983,7 +979,7 @@ export default function Endpoints() {

{renderFields()}
</form>
</Card>
</PageCard>

{endpointData || endpointError ? (
<div ref={responseEl}>
Expand Down
65 changes: 30 additions & 35 deletions src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down Expand Up @@ -30,40 +31,34 @@ export const EndpointsLandingPage = () => {

return (
<>
<Card>
<div className="CardText">
<Text size="lg" as="h1" weight="medium">
API Explorer
</Text>

<Text size="sm" as="p">
The Stellar Lab is a set of tools that enables people to try out and
learn about the Stellar network. The Lab can{" "}
<NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
build transactions
</NextLink>
,{" "}
<NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
sign them
</NextLink>
, and{" "}
<NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
submit them to the network
</NextLink>
. 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.
</Text>
<PageCard heading="API Explorer">
<Text size="sm" as="p">
The Stellar Lab is a set of tools that enables people to try out and
learn about the Stellar network. The Lab can{" "}
<NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
build transactions
</NextLink>
,{" "}
<NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
sign them
</NextLink>
, and{" "}
<NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
submit them to the network
</NextLink>
. 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.
</Text>

<Text size="sm" as="p">
For Stellar docs, take a look at the{" "}
<Link href="https://developers.stellar.org/">
Stellar developers site
</Link>
.
</Text>
</div>
</Card>
<Text size="sm" as="p">
For Stellar docs, take a look at the{" "}
<Link href="https://developers.stellar.org/">
Stellar developers site
</Link>
.
</Text>
</PageCard>
<InfoCards infoCards={infoCards} />
</>
);
Expand Down
Loading

0 comments on commit a3d1a3c

Please sign in to comment.