Relevant Links

🔗 Link: https://xray.helius.xyz/

🎥 Demo: https://www.loom.com/share/402a4397ebd1403f8f4b7df8f024e9b8

🐤 Twitter: https://twitter.com/xray_explorer

💬 Discord: https://discord.gg/HjummjUXgq

Support

• 📝 Start Discussion
• 💡 Submit Feature Request
• 🐛 Submit Bug Report

🤝 Contribute

• Fork XRAY onto your own GitHub
• Clone it and make sure you're on the dev branch.
• Create a new branch named [initials]/[feature] off of dev. Example q/added-a-cool-thing.

Create PR

When you're ready for your changes to be reviewed, create a PR with your new branch to be merged into the dev branch on the official repo.

Pro Tip (Draft PR)

If you're working on something and want to share the progress but aren't ready for merge, click the little arrow next to "Create PR" and chose "draft".

Then when you're ready to create the PR, click "Ready for review".

Test

To save time, run tests locally, but they will also run on all PRs to dev and main. Tests will need to be passing for your changes to be merged.

Auto merge dev -> main**

Once changes are approved and merged into dev, they will be assumed as good and auto merged to main. From here they can be deployed by merging to either the vercel/staging or vercel/prod branches.

[Temp] Auto merge main -> vercel/staging

For now we are auto deploying everything in main to staging.

🏃🏽‍♂️ Runbook

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.

Recommended VSCode Extensions

• ESLint
• Prettier
• Prisma
• Svelte
• Better Comments

Tech Stack

• Node
• TurboRepo
• TypeScript
• Prisma
• tRPC
• SvelteKit
• TanstackQuery
• SvelteKit tRPC SvelteQuery Adapter
• Tailwind
• DaisyUI Components

Setup Environment

In the root of the project, create a .env file with the values mentioned in .env.template.

Install

Run the install command from the root of the project to install dependencies for all apps and packages.

npm install

Dev

Start all packages and apps in dev mode which watches for changes and adds your local environment.

npm run dev

Lint

It's recommended you use VSCode beacuase if you do, ESLint is setup to auto fix/format as you're working.

npm run lint

Format

Formats files based on the Prettier and ESlint settings.

npm run format

Test

Tests the code, determines if it should be allowed to merge. We recommend running this locally before creating PRs.

npm run test

Build

Build all apps and packages for production.

npm run build

Build Local Environment

Build all apps and packages for production using your .env file.

npm run build:env

🚀 Deployments

| Environment | Description | Directory | | ----------- | --------------------------------------------------------- | ------------------------------------------------------ | | Production | The main deployment attached to the domain. vercel/prod | https://xray.helius.xyz/ | | Staging | Staging branch based on contents of vercel/staging | https://xray-web-git-vercel-staging-helius.vercel.app/ |

📦 Packages

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

📱 @helius-labs/xray-web

A SvelteKit app that contains the main XRAY UI.

Important Files & Folders

| | | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 📁 ./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 wraps all pages. Routes are injected into the %sveltekit.body% tag. |

Routes

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