{children}
+ | Command Line Option | Environment Variable | |
|---|---|---|
| --envfile {file} | RETI_ENVFILE | Specify an additional file to process like an .env file. |
| --validator | RETI_VALIDATORID | The validator ID of the validator running commands like the daemon |
| --node | RETI_NODENUM | The node number (1 - 6) |
| --usehostname | When running in Kubernetes environments, this sets the node number assuming the node daemon is running as a sidecar alongside an algod container. The suffix of the (presumed statefulset) hostname is used for the node number. Since stateful sets are sequentially numbered starting from 0, the node number will be the hostname suffix + 1. | |
| --network | ALGO_NETWORK | Override the network to use (sandbox, betanet, testnet, mainnet, voitestnet) |
Defaults to 6260.
Specifies the port the Node Daemon listens on for its HTTP endpoint.
The paths:
/ready
/metrics
are exposed.
| Metric | Type | Description |
|---|---|---|
| reti_max_stake_allowed_total | gauge | Current maximum stake per validator allowed by the protocol. This is defined as 15% of online stake. |
| reti_max_stake_before_saturated_total | gauge | Current stake per validator allowed by the protocol before the validator is considered 'saturated' and rewards are diminished. This is defined as 10% of online stake. |
| reti_pool_count | gauge | Total number of pools assigned to this node. |
| reti_reward_available_total | gauge | Rewards currently available for the pools on this node. This will be the amount in excess of known stake (minus MBR) |
| reti_staked_total | gauge | The total amount of stake in the pools on this node. |
| reti_staker_count | gauge | The total number of stakes in pools on this node. |
General Overview
Basic Operations
+
,
+ {
+ id: toastId,
+ duration: 5000,
+ },
+ )
+
+ queryClient.setQueryData
+
,
+ {
+ id: toastId,
+ duration: 5000,
+ },
+ )
+
+ navigate({ to: '/dashboard' })
+ } catch (error) {
+ toast.error('Failed to create validator', { id: toastId })
+ console.error(error)
+ }
+ }
+
+ return (
+
+
+ )
+}
diff --git a/ui/src/components/AlgoDisplayAmount.tsx b/ui/src/components/AlgoDisplayAmount.tsx
new file mode 100644
index 00000000..fef8c465
--- /dev/null
+++ b/ui/src/components/AlgoDisplayAmount.tsx
@@ -0,0 +1,60 @@
+import Big from 'big.js'
+import { AlgoSymbol } from '@/components/AlgoSymbol'
+import { convertFromBaseUnits, formatWithPrecision } from '@/utils/format'
+import { cn } from '@/utils/ui'
+
+interface AlgoDisplayAmountProps {
+ amount: number | bigint | string
+ microalgos?: boolean
+ trim?: boolean
+ maxLength?: number
+ compactPrecision?: number
+ mutedRemainder?: boolean
+ className?: string
+}
+
+export function AlgoDisplayAmount({
+ amount,
+ microalgos = false,
+ trim = true,
+ maxLength,
+ compactPrecision = 1,
+ mutedRemainder = false,
+ className = '',
+}: AlgoDisplayAmountProps) {
+ const classes = cn('whitespace-nowrap', className)
+ const numAmount = typeof amount === 'string' ? parseFloat(amount) : Number(amount)
+
+ const formatted = microalgos
+ ? convertFromBaseUnits(numAmount, 6).toFixed(6)
+ : new Big(numAmount).toFixed(6)
+
+ const parts = formatted.split('.')
+
+ if (trim && parts.length === 2) {
+ parts[1] = parts[1].replace(/\.?0+$/, '')
+ }
+
+ if (maxLength && parts.join('.').length > maxLength) {
+ return (
+
+
+ {!!activeWallet && activeWallet.accounts.length > 1 ? (
+
+
+
+ {title}
+ }
+
+ return (
+
+
+
+
+
+
+ column.toggleSorting(false)}>
+
+ column.toggleSorting(true)}>
+
+ column.toggleVisibility(false)}>
+
+
+
+
+ )
+}
diff --git a/ui/src/components/DataTableViewOptions.tsx b/ui/src/components/DataTableViewOptions.tsx
new file mode 100644
index 00000000..97fa6cf9
--- /dev/null
+++ b/ui/src/components/DataTableViewOptions.tsx
@@ -0,0 +1,51 @@
+import { Table } from '@tanstack/react-table'
+import { ChevronDownIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { cn } from '@/utils/ui'
+
+interface DataTableViewOptionsProps
+
+ )
+ }
+
+ return this.props.children
+ }
+}
+
+export default ErrorBoundary
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
new file mode 100644
index 00000000..55007847
--- /dev/null
+++ b/ui/src/components/Layout.tsx
@@ -0,0 +1,49 @@
+import { Link } from '@tanstack/react-router'
+import { useWallet } from '@txnlab/use-wallet-react'
+import { Crown } from 'lucide-react'
+import { Connect } from '@/components/Connect'
+import { ConnectedMenu } from '@/components/ConnectedMenu'
+import { MobileMenu } from '@/components/MobileMenu'
+import { ModeToggle } from '@/components/ModeToggle'
+import { Navigation } from '@/components/Navigation'
+
+interface LayoutProps {
+ title?: string
+ children: React.ReactNode
+}
+
+export function Layout({ children }: LayoutProps) {
+ const { activeAddress } = useWallet()
+
+ return (
+
+
+
+
+ Error occured
++ {this.state.error?.message.includes('Attempt to get default algod configuration') + ? 'Please make sure to set up your environment variables correctly. Create a .env file based on .env.template and fill in the required values. This controls the network and credentials for connections with Algod and Indexer.' + : this.state.error?.message} +
+
+
+
+
+ )
+}
diff --git a/ui/src/components/Meta.tsx b/ui/src/components/Meta.tsx
new file mode 100644
index 00000000..951556e6
--- /dev/null
+++ b/ui/src/components/Meta.tsx
@@ -0,0 +1,14 @@
+import { Helmet } from 'react-helmet-async'
+
+interface MetaProps {
+ title?: string
+}
+
+export function Meta({ title }: MetaProps) {
+ return (
+ {children}
+
+
+
+
+ + {title} +
+
+
+
+
+
+
+
+
+
+
+ setAddStakeValidator(validator)}
+ disabled={stakingDisabled}
+ >
+ Stake
+
+ setUnstakeValidator(validator)}
+ disabled={unstakingDisabled}
+ >
+ Unstake
+
+
+
+ {canSimulateEpoch && (
+ <>
+
+
+ await simulateEpoch(
+ validator,
+ row.original.pools,
+ 100,
+ transactionSigner,
+ activeAddress,
+ queryClient,
+ router,
+ )
+ }
+ disabled={unstakingDisabled}
+ >
+
+
+
+ )}
+
+
+
+ )
+ },
+ },
+ ]
+
+ const table = useReactTable({
+ data: stakesByValidator,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ onColumnFiltersChange: setColumnFilters,
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ })
+
+ return (
+ <>
+
+
+
+
+
+ My Stakes
+
+
+
+
+
+ {/* {table.getFilteredRowModel().rows.length > 0 && (
+
+
+ )} */}
+
+ {table.getFilteredSelectedRowModel().rows.length} of{' '}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
,
+ {
+ id: toastId,
+ duration: 5000,
+ },
+ )
+
+ const allStakerData = queryClient.getQueryData
+
+
+ {poolAssignment && (
+
+
+
+ Total Staked
+
+
+
+
+
+
+ Stakers
+
+
+
+
+
+
+ Pools
+
+
+
+
+
+
+ Commission
+
+
+
+
+
+
+
+ {/* +20.1% from last month
*/} +
+ {validator.state.totalStakers}
+
+ {/* +180.1% from last month
*/} +
+ {Number(validator.state.numPools)}
+ {canAddPool && (
+
+ )}
+
+ {/* +201 since last hour
*/} +
+ {`${validator.config.percentToValidator / 10000}%`}
+
+ {/* +19% from last month
*/} +
+
+
+ Analytics
+
+
+
+
+
+
+ Validator Details
+ {/* You made 265 sales this month. */}
+
+
+
+
+
+
+
+ -
+
- Owner +
- + {ellipseAddress(validator.config.owner)} + +
- Manager +
-
+ {ellipseAddress(validator.config.manager)}
+ {canEdit && (
+
+ + )} ++ ++ + ++ +Edit manager
+
+ - + Commission Account + +
-
+ {ellipseAddress(validator.config.validatorCommissionAddress)}
+ {canEdit && (
+
+ + )} ++ ++ + ++ +Edit commission account
+
+ - + Payout Frequency + +
-
+
+ {formatDuration(validator.config.payoutEveryXMins)}
+
+ {canEdit && (
+
+ + )} ++ ++ + ++ +Edit payout frequency
+
+ - + Minimum Entry Stake + +
-
+
+
+ - + Maximum Stake Per Pool + +
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setAddStakeValidator(validator)}
+ disabled={stakingDisabled}
+ >
+ Stake
+
+ setUnstakeValidator(validator)}
+ disabled={unstakingDisabled}
+ >
+ Unstake
+
+
+
+
+
+ {canManage ? 'Manage' : 'View'}
+
+
+ {canManage && (
+ setAddPoolValidator(validator)}
+ disabled={addingPoolDisabled}
+ >
+ Add Staking Pool
+
+ )}
+
+ {canSendRewardTokens && (
+ <>
+
+
+ await sendRewardTokensToPool(
+ validator,
+ 5000,
+ transactionSigner,
+ activeAddress!,
+ )
+ }
+ disabled={sendRewardTokensDisabled}
+ >
+
+
+
+ )}
+
+
+
+
+ )
+ },
+ size: 120,
+ },
+ ]
+
+ const table = useReactTable({
+ data: validators,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ onColumnFiltersChange: setColumnFilters,
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ })
+
+ return (
+ <>
+
+
+
+
+
+ All Validators
+
+ table.getColumn('validator')?.setFilterValue(event.target.value)}
+ className="sm:max-w-sm lg:w-64"
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/ui/src/components/WalletShortcutHandler.tsx b/ui/src/components/WalletShortcutHandler.tsx
new file mode 100644
index 00000000..08fc55b9
--- /dev/null
+++ b/ui/src/components/WalletShortcutHandler.tsx
@@ -0,0 +1,28 @@
+import { useWallet } from '@txnlab/use-wallet-react'
+import * as React from 'react'
+
+export function WalletShortcutHandler() {
+ const { activeWallet } = useWallet()
+
+ const handleDisconnect = React.useCallback(() => {
+ if (activeWallet) {
+ activeWallet.disconnect()
+ }
+ }, [activeWallet])
+
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.shiftKey && event.key === 'D') {
+ handleDisconnect()
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [handleDisconnect])
+
+ return null
+}
diff --git a/ui/src/components/_Overview.tsx b/ui/src/components/_Overview.tsx
new file mode 100644
index 00000000..2d73d9de
--- /dev/null
+++ b/ui/src/components/_Overview.tsx
@@ -0,0 +1,70 @@
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
+
+const data = [
+ {
+ name: 'Jan',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Feb',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Mar',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Apr',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'May',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Jun',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Jul',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Aug',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Sep',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Oct',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Nov',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+ {
+ name: 'Dec',
+ total: Math.floor(Math.random() * 5000) + 1000,
+ },
+]
+
+export function Overview() {
+ return (
+ Account Balance
+
+