Skip to content

Commit

Permalink
move home page route to calling horizon from the browser instead of t…
Browse files Browse the repository at this point in the history 
…he server
  • Loading branch information
Chris Hatch committed Mar 22, 2024
1 parent df1b089 commit bc51463
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 118 deletions.
226 changes: 109 additions & 117 deletions app/routes/_index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
<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>
)
}
1 change: 0 additions & 1 deletion app/routes/account.$accountId.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down

0 comments on commit bc51463

Please sign in to comment.