From bc514639c2da7e90aaf808f310da7e7dcd59138f Mon Sep 17 00:00:00 2001 From: Chris Hatch Date: Fri, 22 Mar 2024 20:48:04 +1000 Subject: [PATCH] move home page route to calling horizon from the browser instead of the server --- app/routes/_index.tsx | 226 ++++++++++++++---------------- app/routes/account.$accountId.tsx | 1 - 2 files changed, 109 insertions(+), 118 deletions(-) diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index f4df7e8de..24e0fb825 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -4,150 +4,142 @@ import Col from 'react-bootstrap/Col' import Container from 'react-bootstrap/Container' import Row from 'react-bootstrap/Row' import { useIntl } from 'react-intl' -import { requestToServer } from '~/lib/stellar/server' +import HorizonServer, { HorizonServerDetails, requestToServerDetails } from '~/lib/stellar/server' -import { json } from '@remix-run/node' import { useLoaderData } from '@remix-run/react' import LedgerTable from '../components/LedgerTable' import Title from '../components/shared/TitleWithLink' import TransactionTable from '../components/TransactionTable' -import type { LoaderFunctionArgs, V2_MetaFunction } from '@remix-run/node' +import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node' import { - ledgers, - operations, - transactions, + ledgers as ledgersRequest, + operations as operationsRequest, + transactions as transactionsRequest, } from '~/lib/stellar/server_request_utils' -import type { OperationTableProps } from '~/components/OperationTable' import OperationTable from '~/components/OperationTable' -import type { LedgerProps } from './ledger.$ledgerId' -import type { TransactionProps } from './tx.$txHash' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { setTitle } from '~/lib/utils' // App Metadata -export const meta: V2_MetaFunction = () => { - return [ - { title: 'Stellar Explorer' }, - { - name: 'description', - content: - 'Stellar Explorer - a ledger explorer for the Stellar network (https://stellar.org)', - }, - ] +export const meta: MetaFunction = () => { + return [ + { title: 'Stellar Explorer' }, + { + name: 'description', + content: + 'Stellar Explorer - a ledger explorer for the Stellar network (https://stellar.org)', + }, + ] } const PanelHeaderTitle = ({ - title, - viewAllLabel, - viewAllLink, + title, + viewAllLabel, + viewAllLink, }: { - title: string - viewAllLabel: string - viewAllLink: string + title: string + viewAllLabel: string + viewAllLink: string }) => ( - + <Title + rightLinkAddr={viewAllLink} + rightLinkLabel={viewAllLabel} + title={title} + /> ) const TX_RECORD_LIMIT = 10 const LEDGER_RECORD_LIMIT = 10 const OPERATION_RECORD_LIMIT = 25 -export const loader = async ({ request }: LoaderFunctionArgs) => { - const server = await requestToServer(request) - return Promise.all([ - ledgers(server, { limit: LEDGER_RECORD_LIMIT }), - transactions(server, { limit: TX_RECORD_LIMIT }), - operations(server, { limit: OPERATION_RECORD_LIMIT }), - server.serverURL.toString(), - ]).then((result) => - json({ - ledgers: result[0], - transactions: result[1], - operations: result[2], - horizonURL: result[3], - }), - ) -} +export const loader = ({ request }: LoaderFunctionArgs) => + requestToServerDetails(request) export default function Home() { - const { - ledgers, - transactions, - operations, - horizonURL, - }: { - ledgers: ReadonlyArray<LedgerProps> - transactions: ReadonlyArray<TransactionProps> - operations: ReadonlyArray<OperationTableProps> - horizonURL?: string - } = useLoaderData<typeof loader>() + const { formatMessage } = useIntl() + const serverDetails = useLoaderData<typeof loader>() as HorizonServerDetails + const [serverResponse, setServerResponse] = useState(null) + + useEffect(() => { + if (typeof window !== 'undefined') { + setTitle('Home') + + const server = new HorizonServer( + serverDetails.serverAddress, + serverDetails.networkType as string, + ) + Promise.all([ + ledgersRequest(server, { limit: LEDGER_RECORD_LIMIT }), + transactionsRequest(server, { limit: TX_RECORD_LIMIT }), + operationsRequest(server, { limit: OPERATION_RECORD_LIMIT }), + server.serverURL.toString(), + ]).then(response => setServerResponse(response as any)) + } + }, []) + + if (!serverResponse) { + return + } - const { formatMessage } = useIntl() - useEffect(() => { - setTitle('Home') - }, []) + const [ledgers, transactions, operations, horizonURL] = serverResponse as any - const viewAllStr = formatMessage({ id: 'view.all' }) + const viewAllStr = formatMessage({ id: 'view.all' }) - return ( - <Container id="home"> - <Row> - <Col md={8}> - <Card> - <CardHeader> - <PanelHeaderTitle - title={formatMessage({ id: 'latest.operations' })} - viewAllLabel={viewAllStr} - viewAllLink="/operations" - /> - </CardHeader> - <Card.Body> - <OperationTable - compact - records={operations} - horizonURL={horizonURL} - /> - </Card.Body> - </Card> - </Col> - <Col md={4}> - <Card> - <CardHeader> - <PanelHeaderTitle - title={formatMessage({ id: 'latest.txs' })} - viewAllLabel={viewAllStr} - viewAllLink="/txs" - /> - </CardHeader> - <Card.Body> - <TransactionTable - compact - records={transactions} - showLedger - showSource={false} - /> - </Card.Body> - </Card> - <Card> - <CardHeader> - <PanelHeaderTitle - title={formatMessage({ id: 'latest.ledgers' })} - viewAllLabel={viewAllStr} - viewAllLink="/ledgers" - /> - </CardHeader> - <Card.Body> - <LedgerTable records={ledgers} compact /> - </Card.Body> - </Card> - </Col> - </Row> - </Container> - ) + return ( + <Container id="home"> + <Row> + <Col md={8}> + <Card> + <CardHeader> + <PanelHeaderTitle + title={formatMessage({ id: 'latest.operations' })} + viewAllLabel={viewAllStr} + viewAllLink="/operations" + /> + </CardHeader> + <Card.Body> + <OperationTable + compact + records={operations} + horizonURL={horizonURL} + /> + </Card.Body> + </Card> + </Col> + <Col md={4}> + <Card> + <CardHeader> + <PanelHeaderTitle + title={formatMessage({ id: 'latest.txs' })} + viewAllLabel={viewAllStr} + viewAllLink="/txs" + /> + </CardHeader> + <Card.Body> + <TransactionTable + compact + records={transactions} + showLedger + showSource={false} + /> + </Card.Body> + </Card> + <Card> + <CardHeader> + <PanelHeaderTitle + title={formatMessage({ id: 'latest.ledgers' })} + viewAllLabel={viewAllStr} + viewAllLink="/ledgers" + /> + </CardHeader> + <Card.Body> + <LedgerTable records={ledgers} compact /> + </Card.Body> + </Card> + </Col> + </Row> + </Container> + ) } diff --git a/app/routes/account.$accountId.tsx b/app/routes/account.$accountId.tsx index 00083712c..a6e9e7989 100644 --- a/app/routes/account.$accountId.tsx +++ b/app/routes/account.$accountId.tsx @@ -146,7 +146,6 @@ export const loader = ({ request }: LoaderFunctionArgs) => export default function Account() { const serverDetails = useLoaderData<typeof loader>() as HorizonServerDetails - // const { accountResponse, horizonURL } = useLoaderData<typeof loader>() const { accountId } = useParams() const [activeTab, setActiveTab] = useState('data')