From d7093b01aeb6196af748919644a96dc797b25579 Mon Sep 17 00:00:00 2001 From: Hanzalah Waheed Date: Thu, 30 Oct 2025 23:04:56 +0530 Subject: [PATCH] chore: refactor into a form-group component --- .../app/components/index.ts | 1 + .../frontend/app/components/FormGroup.tsx | 29 ++ packages/frontend/app/components/index.ts | 1 + .../frontend/app/routes/assets.$assetId.tsx | 252 +++++----- .../frontend/app/routes/assets.create.tsx | 81 ++-- .../frontend/app/routes/peers.$peerId.tsx | 459 +++++++++--------- packages/frontend/app/routes/peers.create.tsx | 340 +++++++------ .../frontend/app/routes/tenants.create.tsx | 144 +++--- .../app/routes/wallet-addresses.create.tsx | 115 +++-- 9 files changed, 690 insertions(+), 732 deletions(-) create mode 100644 packages/frontend/app/components/FormGroup.tsx diff --git a/localenv/mock-account-servicing-entity/app/components/index.ts b/localenv/mock-account-servicing-entity/app/components/index.ts index 498c853b23..4aa7c8895b 100644 --- a/localenv/mock-account-servicing-entity/app/components/index.ts +++ b/localenv/mock-account-servicing-entity/app/components/index.ts @@ -6,3 +6,4 @@ export * from './Button' export * from './ErrorPanel' export * from './Input' export * from './Select' +export * from './FormGroup' diff --git a/packages/frontend/app/components/FormGroup.tsx b/packages/frontend/app/components/FormGroup.tsx new file mode 100644 index 0000000000..00bb8255e5 --- /dev/null +++ b/packages/frontend/app/components/FormGroup.tsx @@ -0,0 +1,29 @@ +import type { ReactNode } from 'react' + +type FormGroupProps = { + title: string + subtitle?: ReactNode + children: ReactNode + className?: string +} + +export const FormGroup = ({ + title, + subtitle, + children, + className = '' +}: FormGroupProps) => { + return ( +
+
+

{title}

+ {subtitle &&
{subtitle}
} +
+
+ {children} +
+
+ ) +} diff --git a/packages/frontend/app/components/index.ts b/packages/frontend/app/components/index.ts index 70ffc8f373..e0fc8a691c 100644 --- a/packages/frontend/app/components/index.ts +++ b/packages/frontend/app/components/index.ts @@ -3,3 +3,4 @@ export * from './PageHeader' export * from './Sidebar' export * from './Snackbar' export * from './Badge' +export * from './FormGroup' diff --git a/packages/frontend/app/routes/assets.$assetId.tsx b/packages/frontend/app/routes/assets.$assetId.tsx index c72c686961..f296044464 100644 --- a/packages/frontend/app/routes/assets.$assetId.tsx +++ b/packages/frontend/app/routes/assets.$assetId.tsx @@ -14,7 +14,7 @@ import { } from '@remix-run/react' import { type FormEvent, useState, useRef } from 'react' import { z } from 'zod' -import { DangerZone, PageHeader } from '~/components' +import { DangerZone, FormGroup, PageHeader } from '~/components' import { Button, ErrorPanel, Input } from '~/components/ui' import { ConfirmationDialog, @@ -93,146 +93,140 @@ export default function ViewAssetPage() { Go to assets page -
-
-

General Information

-

- Created at {new Date(asset.createdAt).toLocaleString()} -

- -
-
-
-
-
- - - - - -
-
- -
-
-
-
-
- {/* Asset Liquidity Info */} -
-
-

Liquidity Information

-
-
-
-
-

Amount

-

- {formatAmount(asset.liquidity ?? '0', asset.scale)}{' '} - {asset.code} -

+ +

+ Created at {new Date(asset.createdAt).toLocaleString()} +

+ + + } + > +
+
+
+ + + + +
-
- +
-
-
-
- {/* Asset Liquidity Info - END */} - {/* Asset Fee Info */} -
-
-

Sending Fee

- {asset.sendingFee ? ( -

- Created at{' '} - {new Date(asset.sendingFee.createdAt).toLocaleString()} + + + + {/* Asset Liquidity Info */} + +

+
+

Amount

+

+ {formatAmount(asset.liquidity ?? '0', asset.scale)} {asset.code}

- ) : null} - -
-
-
+
+
+
-
-
-
- - - - setBasisPointsInput(parseFloat(e?.target?.value)) - } - /> -

- A single basis point is a fee equal to 0.01% of the total - amount. A fee of {basisPointsInput || 1} basis point on $100 - is ${((basisPointsInput || 1) * 0.01).toFixed(4)}. -

-
- -
-
-
-
-
- {/* Asset Fee Info - END */} + + {/* Asset Fee Info */} + + {asset.sendingFee ? ( +

+ Created at{' '} + {new Date(asset.sendingFee.createdAt).toLocaleString()} +

+ ) : null} + + + } + > +
+ +
+
+
+
+ + + + setBasisPointsInput(parseFloat(e?.target?.value)) + } + /> +

+ A single basis point is a fee equal to 0.01% of the total + amount. A fee of {basisPointsInput || 1} basis point on $100 + is ${((basisPointsInput || 1) * 0.01).toFixed(4)}. +

+
+ +
+
+
+
+ {/* DELETE ASSET - Danger zone */} diff --git a/packages/frontend/app/routes/assets.create.tsx b/packages/frontend/app/routes/assets.create.tsx index d68b8932fc..6627c54306 100644 --- a/packages/frontend/app/routes/assets.create.tsx +++ b/packages/frontend/app/routes/assets.create.tsx @@ -5,7 +5,7 @@ import { useLoaderData, useNavigation } from '@remix-run/react' -import { PageHeader } from '~/components' +import { FormGroup, PageHeader } from '~/components' import { Button, Select, ErrorPanel, Input } from '~/components/ui' import { createAsset } from '~/lib/api/asset.server' import { messageStorage, setMessageAndRedirect } from '~/lib/message.server' @@ -54,51 +54,46 @@ export default function CreateAssetPage() {
{/* Asset General Info */} -
-
-

General Information

-
-
-
- - +
+ + + + {tenants && ( + - {tenants && ( - - - - The name of the{' '} - - peer - - . - - } - /> - - {"The peer's "} - - address on the Interledger network. - - - } - /> - - The maximum amount of value that can be sent in a single{' '} - - Interledger STREAM Packet - - . - - } - /> -
-
- -
-
- -
-
- {/* Peer General Info - END */} - {/* Peer HTTP Info */} -
-
-

HTTP Information

- -
-
-
-
-
- - - List of valid tokens to accept when receiving incoming{' '} - - ILP packets - {' '} - from the peer. - - } - /> - - Valid auth token to present when sending outgoing{' '} - - ILP packets - {' '} - to the peer. - - } - /> - - Endpoint on the peer to which outgoing ILP packets will - be sent. - - } - /> -
-
- -
-
-
-
-
- {/* Peer HTTP Info - END */} - {/* Peer Asset Info */} -
-
-

Asset Information

-
-
-
-
-

Code

-

{peer.asset.code}

-
-
-

Scale

-

{peer.asset.scale}

-
-
-

Withdrawal threshold

-

- {peer.asset.withdrawalThreshold ?? 'No withdrawal threshhold'} -

-
-
-
- -
-
-
- {/* Peer Asset Info - END */} - {/* Peer Liquidity Info */} -
-
-

Liquidity Information

-
-
-
-
-

Amount

-

- {formatAmount(peer.liquidity ?? '0', peer.asset.scale)}{' '} - {peer.asset.code} -

+ +

+ Created at {new Date(peer.createdAt).toLocaleString()} +

+ + + } + > +
+
+
+ + + + The name of the{' '} + + peer + + . + + } + /> + + {"The peer's "} + + address on the Interledger network. + + + } + /> + + The maximum amount of value that can be sent in a single{' '} + + Interledger STREAM Packet + + . + + } + />
-
+
+
+
+
+ + {/* Peer HTTP Info */} + } + > +
+
+
+ + + List of valid tokens to accept when receiving incoming{' '} + + ILP packets + {' '} + from the peer. + + } + /> + + Valid auth token to present when sending outgoing{' '} + + ILP packets + {' '} + to the peer. + + } + /> + + Endpoint on the peer to which outgoing ILP packets will be + sent. + + } + /> +
+
+
+
+ + {/* Peer Asset Info */} + +
+
+

Code

+

{peer.asset.code}

+
+
+

Scale

+

{peer.asset.scale}

+
+
+

Withdrawal threshold

+

+ {peer.asset.withdrawalThreshold ?? 'No withdrawal threshhold'} +

+
+
+
+ +
+ + {/* Peer Liquidity Info */} + +
+
+

Amount

+

+ {formatAmount(peer.liquidity ?? '0', peer.asset.scale)}{' '} + {peer.asset.code} +

+
+
+ +
-
- {/* Peer Liquidity Info - END */} + {/* DELETE PEER - Danger zone */}
diff --git a/packages/frontend/app/routes/peers.create.tsx b/packages/frontend/app/routes/peers.create.tsx index eaa520e2d4..2de1f57f6d 100644 --- a/packages/frontend/app/routes/peers.create.tsx +++ b/packages/frontend/app/routes/peers.create.tsx @@ -9,7 +9,7 @@ import { useLoaderData, useNavigation } from '@remix-run/react' -import { PageHeader } from '~/components/PageHeader' +import { FormGroup, PageHeader } from '~/components' import type { SelectOption } from '~/components/ui' import { Button, ErrorPanel, Input, Select } from '~/components/ui' import { loadAssets } from '~/lib/api/asset.server' @@ -87,213 +87,197 @@ export default function CreatePeerPage() {
{/* Peer General Info */} -
-
-

General Information

+ +
+ + The name of the{' '} + + peer + {' '} + to be added. + + } + /> + + {"The peer's "} + + address on the Interledger network. + + + } + /> + + The maximum amount of value that can be sent in a single{' '} + + Interledger STREAM Packet + + . + + } + />
-
-
- - The name of the{' '} - - peer - {' '} - to be added. - - } - /> - + {/* Peer General Info - END */} + {/* Peer HTTP Info */} + +
+ + List of valid tokens to accept when receiving incoming{' '} + + ILP packets + {' '} + from the peer. + + } + /> + + Valid auth token to present when sending outgoing{' '} + + ILP packets + {' '} + to the peer. + + } + /> + + Endpoint on the peer to which outgoing ILP packets will + be sent. + + } + /> +
+ + {/* Peer HTTP Info - END */} + {/* Peer Asset */} + +
+ {tenants ? ( + - The maximum amount of value that can be sent in a - single{' '} - - Interledger STREAM Packet - - . + asset + {' '} + will sent to & received from the peer. } + bringForward /> -
-
-
- {/* Peer General Info - END */} - {/* Peer HTTP Info */} -
-
-

HTTP Information

-
-
-
- ({ + value: asset.node.id, + label: `${asset.node.code} (Scale: ${asset.node.scale})` + }))} + error={response?.errors.fieldErrors.asset} + name='asset' + placeholder='Select asset...' + label='Asset' description={ <> - List of valid tokens to accept when receiving incoming{' '} + The type of{' '} - ILP packets + asset {' '} - from the peer. + that is sent to & received from the peer. } - /> - + )} + {tenants && tenantId && ( + - Endpoint on the peer to which outgoing ILP packets - will be sent. - - } /> -
-
-
- {/* Peer HTTP Info - END */} - {/* Peer Asset */} -
-
-

Asset Information

+ )}
-
-
- {tenants ? ( - ({ - value: asset.node.id, - label: `${asset.node.code} (Scale: ${asset.node.scale})` - }))} - error={response?.errors.fieldErrors.asset} - name='asset' - placeholder='Select asset...' - label='Asset' - description={ - <> - The type of{' '} - - asset - {' '} - that is sent to & received from the peer. - - } - required - /> - )} - {tenants && tenantId && ( - +
-
-
- - -
-
-
+ {/* Tenant General Info - END */} {/* Tenant Sensitive Info */} -
-
-

Sensitive Information

+ +
+
-
-
- -
-
-
+ {/* Tenant Sensitive Info - END */} {/* Tenant Identity Provider */} -
-
-

- Identity Provider Information -

+ +
+ +
-
-
- - -
-
-
+ {/* Tenant Identity Provider - End */} {/* Tenant Settings */} -
-
-

Tenant Settings

+ +
+ {tenantSettings.map((setting) => ( +
+ +

+ {getTenantSettingError(setting.name)} +

+
+ ))}
-
-
- {tenantSettings.map((setting) => ( -
- -

- {getTenantSettingError(setting.name)} -

-
- ))} -
- -
-
+ + {/* Tenant Settings - END */}
-
-
-

General Information

-
-
-
- +
+ + + + {tenants ? ( + ({ + value: asset.node.id, + label: `${asset.node.code} (Scale: ${asset.node.scale})` + }))} + error={response?.errors.fieldErrors.asset} + name='asset' + placeholder='Select asset...' + label='Asset' required - addOn={waPrefix ?? getOpenPaymentsUrl()} - name='name' - label='Wallet address name' - placeholder='jdoe' - error={response?.errors?.fieldErrors.name} /> - - {tenants ? ( - ({ - value: asset.node.id, - label: `${asset.node.code} (Scale: ${asset.node.scale})` - }))} - error={response?.errors.fieldErrors.asset} - name='asset' - placeholder='Select asset...' - label='Asset' - required - /> - )} - {tenants && tenantId && ( -