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

• Fork XRAY onto your own GitHub
• Clone it and checkout the dev branch (git checkout dev)
• Create a new branch named [initials]/[feature] off of dev. Example q/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.

• ESLint
• Prettier
• Prisma
• Svelte
• Better Comments

• 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.

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">

1. Find the icon you want on IconMon. Most of these should render fine.
2. Click "Embed" -> "Inline" and copy only the <path>.
3. 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.

1. Identify a transaction type that is not currently supported.
   • Helius API Docs - View all transaction types supported by Helius.
2. 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.
3. 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)
4. Export the function in ./src/parsers/index.ts, add the transaction type to the ProtonSupportedType object in ./src/types/index.ts, and add the transaction type with the corresponding parser function to the protonParsers object in ./src/types/index.ts.
5. Work on the parser function while testing it since it is now compatible with the UI.

A database for savaing metadata like transaction views or user details.