A human-readable Solana transaction explorer powered by Helius.
🔗 Link: https://xray.helius.xyz/
🎥 Demo: https://www.loom.com/share/402a4397ebd1403f8f4b7df8f024e9b8
🐤 Twitter: https://twitter.com/xray_explorer
💬 Discord: https://discord.gg/8Qxk7PmArt
Environment | Description | Directory |
---|---|---|
Production | The main deployment attached to the domain. | https://xray.helius.xyz/ |
Staging | Staging branch based on contents of origin/dev . |
https://xray-web-git-dev-helius.vercel.app/ |
Name | Description | Directory |
---|---|---|
@helius-labs/xray-web | SvelteKit app with UI and backend endpoints. | apps/web |
@helius-labs/xray-proton | Parses transaction data to produce UI state. | packages/xray-proton |
@helius-labs/xray-database [WIP] |
Prisma client used for communicating with database. | packages/xray-database |
- Fork XRAY onto your own GitHub
- Clone it and checkout the dev branch (
git checkout dev
) - Create a new branch named
[initials]/[feature]
off ofdev
. Exampleq/added-a-cool-thing
. - When ready for us to review your changes, create a PR with your new branch to be merged into the
dev
branch on the official repo.
This is a TurboRepo monorepo that can run and build all apps/packages in parallel. Apps like the UI are located in /apps
. Packages used across apps are located in /packages
.
- Node
- TurboRepo
- TypeScript
- Prisma
- tRPC
- SvelteKit
- TanstackQuery
- SvelteKit tRPC SvelteQuery Adapter
- Tailwind
- DaisyUI Components
In the root of the project, create a .env
file with the values mentioned in .env.template
.
Run the install command from the root of the project to install dependencies for all apps and packages.
npm install
Start all packages and apps in dev mode which watches for changes and adds your local environment.
npm run dev
It's reccomended you use VSCode beacuase if you do, ESLint is setup to auto fix/format as you're working.
npm run lint
Formats files based on the Prettier and ESlint settings.
npm run format
Tests the code, determines if it should be allowed to merge. We recommend running this locally before creating PRs.
npm run test
Build all apps and packages for production.
npm run build
Build all apps and packages for production using your .env
file.
npm run build:env
A SvelteKit app that contains the main XRAY UI.
📁 ./src/lib |
Common components, utilities, and libraries used throughout the app. Import things from this directory using the $lib/ alias. |
📁 ./src/lib/trpc |
The tRPC server which has all of our backend endpoints. See trpc/routes . |
📁 ./src/lib/components |
Shared components used throughout the app. |
📁 ./src/lib/trpc |
The tRPC server which has all of our backend endpoints. |
📁 ./src/lib/types |
Global types |
📁 ./src/lib/configs |
Config definitions for things like the icons, modals, and generating other types. |
📁./src/routes |
Any +page or +server file in this directory becomes a page or an endpoint based on the folder structure. |
📁./static |
A place to put any static assets. The files in this directory are hosted at the root of the domain. When using images, try to import them in the <script> vs put them in ./static when you can help it. |
📄./app.postcss |
Initialize/config Tailwind + global styles. |
📄./app.html |
The top level HTML template that wrapps all pages. Routes are injected into the %sveltekit.body% tag. |
/ |
Home |
/api |
REST endpoints (This is mostly replaces by tRPC now) |
/[search] |
From the home page, users can navigate to /anything which attempts to resolve the search and then redirect them to /[search]/tx , /[search]/wallet , or /[search]/token based on the search. |
/[search]/tx |
Details about a particular transaction where [search] is a transaction signature. |
/[search]/wallet |
Details about a particular wallet where [search] is a public key. |
/[search]/token |
Details about a particular token where [search] is a token mint address. |
Build Command | cd ../.. && npx turbo run build --filter=web... |
Output Director | apps/web/.svelte-kit |
Install Command | npm install --prefix=../.. |
TailwindCSS is used for base utilies and DaisyUI contains helpful UI components.
See list of available icons in $lib/config
.
<script>
import Icon from "$lib/components/icon.svelte";
</script>
<Icon id="paper-plane">
- Find the icon you want on IconMon. Most of these should render fine.
- Click "Embed" -> "Inline" and copy only the
<path>
. - Add a new key to
$lib/config.ts
that is similar to the Icon Monsters name for the icon and add your<path>
.
WIP
Used for parsing blockchain data and making it pretty for the UI.
📄./index.ts |
UI calls the function in this file to parse transactions |
📄./src/types/index.ts |
Contains the types, interfaces, and enums needed to understand to work on the parser. |
📁./src/parsers |
Contains all parser methods. |
📄./src/parsers/index.ts |
Exports parser files in ./src/parsers . |
📁./src/utils |
Utility functions for parser functions |
- Identify a transaction type that is not currently supported.
- Helius API Docs - View all transaction types supported by Helius.
- Get to know the transaction type. Here is the resource I personally like to use for it:
- SwaggerHub - Use
/v0/addresses/{address}/transactions
for addresses with the specific transaction type or/v0/transactions/
for a transaction (also supports multiple transactions). I like downloading the JSON file and looking through it constantly. More transactions + edge cases are better to battle test your parser function.
- SwaggerHub - Use
- Add a new file or edit an existing one in
./src/parsers
. (refer to other files for general structures of what a parser function should look like) - Export the function in
./src/parsers/index.ts
, add the transaction type to theProtonSupportedType
object in./src/types/index.ts
, and add the transaction type with the corresponding parser function to theprotonParsers
object in./src/types/index.ts
. - Work on the parser function while testing it since it is now compatible with the UI.
Transaction Type | File in /src/parsers |
TRANSFER | /transfer.ts |
SWAP | /swap.ts |
BURN | /burn.ts |
BURN_NFT | /burn.ts |
TOKEN_MINT | /token.ts |
NFT_MINT | /nft.ts |
NFT_SALE | /nft.ts |
NFT_LISTING | /nft.ts |
NFT_CANCEL_LISTING | /nft.ts |
NFT_BID | /nft.ts |
NFT_BID_CANCELLED | /nft.ts |
BORROW_FOX | /fox.ts |
LOAN_FOX | /fox.ts |
UNKNOWN | /unknown.ts |
A database for savaing metadata like transaction views or user details.