Prod Release

* citrus config types * foreclose loan * stake & unstake token config * search resolves cnfts * chore: add recommendations for vscode * chore: add .env template file * Update config.ts * feat: update to helius icarus endpoint * fix: formatting and new url psa: cloudflare enterprise for startups sucks, do not recommend. * readme typo * feeBasisPoints on asset route - string util - icons - aditional info on collapsible - share per creator * typo * oopsie * fix (#194) * fix (#193) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * compressed nft details (#191) * asset route update * ownership stuff * compression info * finishing touches --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * compressed nft burn (#190) * parser * config --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Cover readme update (#188) * jpg and readme update * jpg fix * account current merkle tree detail (#184) * route addition * turned button into anchor tags * fixed active tab border logic on transactions tab * concurrent merkle tree tab shows conditionally * concurrent merkle tree route * display cmt info * descriptions and links * icons * removed console log * fixes * loader --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * removed helius section on home page (#173) * log messages improved formatting (#171) * log messages component * log messages format improvement * program names * styling changes * finishing touches * removed unnecessary package * fixed invoke and logged colors --------- Co-authored-by: qudo <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * switch back to rpc.helius.xyz (#185) * route addition * switch beta rpc link back to rpc.helius.xyz * delete unwanted files --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * compressed nft transfer fix (#178) * fix * futureproof --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * proton documentation redo (#165) * deleted outdated stuff * update --------- Co-authored-by: qudo <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * base hooks for linting and formatting pre commit and testing pre push (#187) * more transaction type configs (#160) * add item and update item types * token market configs * extra tx configs --------- Co-authored-by: qudo <[email protected]> * username provider (#141) * account page title replacement * backpack and bonfida username trpc route * account usernames route to router * temp * backpack username display * updated bonfida package * get bonfida domain * usernames alignment fix * ans domain username * tldparser fix * added fix to prev commit * ans test * added catch to ans method * alternating username color styles * simplified username functions & get multiple .sol * skeleton loader & temp layout changes * temp domain * bonfida domain * deleted a bunch of useless code in ans func * responsiveness for numerous domains * remove ans code * ui adjustments * fix dev * get token2022 tokens from account * token2022 metadata * search resolve for token2022 * solarmoon token add --------- Co-authored-by: ssamkkim <[email protected]> Co-authored-by: Jimii <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Miles Smith <[email protected]> Co-authored-by: Miles Smith <[email protected]> Co-authored-by: joaomendoncaa <[email protected]>
helius-labs · Jun 7, 2023 · 310adaf · 310adaf · vercel · Jun 7, 2023
1 parent db98146
commit 310adaf
Show file tree

Hide file tree

Showing 41 changed files with 3,277 additions and 1,168 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,4 +5,5 @@ package.json
 tsconfig.cjs.json
 tsconfig.esm.json
 tsconfig.json
-package-lock.json
+package-lock.json
+packages
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,5 @@
 .eslint/**/*
 packages/**/dist/**/*
 apps/**/.sveltekit/**/*
-tsconfig.json
+tsconfig.json
+packages
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# XRAY
+![https://xray.helius.xyz/](/doc/xray-cover-gh.jpg)
 
-A human-readable Solana transaction explorer powered by Helius.
+## Relevant Links
 
 🔗 **Link**: https://xray.helius.xyz/
 
@@ -12,9 +12,9 @@ A human-readable Solana transaction explorer powered by Helius.
 
 ## Support
 
-- 📝 [Start Discussion](https://github.com/helius-labs/xray/discussions)
-- 💡 [Submit Feature Request](https://github.com/helius-labs/xray/issues/new?assignees=&labels=question&template=FEATURE-REQUEST.yml&title=%F0%9F%92%A1+%5BREQUEST%5D+-+%3Ctitle%3E)
-- 🐛 [Submit Bug Report](https://github.com/helius-labs/xray/issues/new?assignees=&labels=bug&template=BUG-REPORT.yml&title=%F0%9F%90%9B+%5BBUG%5D+-+%3Ctitle%3E)
+-   📝 [Start Discussion](https://github.com/helius-labs/xray/discussions)
+-   💡 [Submit Feature Request](https://github.com/helius-labs/xray/issues/new?assignees=&labels=question&template=FEATURE-REQUEST.yml&title=%F0%9F%92%A1+%5BREQUEST%5D+-+%3Ctitle%3E)
+-   🐛 [Submit Bug Report](https://github.com/helius-labs/xray/issues/new?assignees=&labels=bug&template=BUG-REPORT.yml&title=%F0%9F%90%9B+%5BBUG%5D+-+%3Ctitle%3E)
 
 ## 🤝 Contribute
 
@@ -40,7 +40,7 @@ Then when you're ready to create the PR, click "Ready for review".
 
 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`**
+### 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.
 
@@ -217,50 +217,22 @@ WIP
 -   [TanstackQuery](https://tanstack.com/query/latest)
 -   [SvelteKit tRPC SvelteQuery Adapter](https://github.com/vishalbalaji/trpc-svelte-query-adapter)
 
-# 📦 @helius-labs/proton
+# 📦 @helius-labs/xray
 
-Used for parsing blockchain data and making it pretty for the UI.
+A package that includes our parser, which helps make blockchain data pretty for the UI, and search function.
 
 ## Important Files & Folders
 
-|                            |                                                                                       |
-| -------------------------- | ------------------------------------------------------------------------------------- |
-| 📄`./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                                                |
-
-## General Work Flow When Adding a New Transaction Type
-
-1. Identify a transaction type that is not currently supported.
-    - [Helius API Docs](https://docs.helius.xyz/reference/transaction-types) - 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](https://app.swaggerhub.com/apis-docs/Helius/HeliusAPI/1.1.0#/Transactions/getEnrichedTransactions) - 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.
-
-## Currently Supported Transactions
-
-|                      |                            |
-| -------------------- | -------------------------- |
-| **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`              |
+|                                         |                                                                                                                                                                      |
+| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 📄`./src/lib/parser/index.ts`           | UI calls the function in this file to parse transactions                                                                                                             |
+| 📄`./src/lib/parser/types.ts`           | Contains the types, interfaces, and enums needed to understand to work on the parser.                                                                                |
+| 📁`./src/lib/parser/parsers`            | Contains all parser methods.                                                                                                                                         |
+| 📄`./src/lib/parser/parsers/index.ts`   | Exports parser files in `./src/parsers`.                                                                                                                             |
+| 📄`./src/lib/parser/parsers/unknown.ts` | If there is no dedicated parser file for a Helius transaction type, they are parsed in this file. Changing the label on the UI is in `./apps/web/src/lib/config.ts`. |
+| 📁`./src/lib/parser/utils`              | Utility functions for the parser functions                                                                                                                           |
+| 📄`./src/lib/search.ts`                 | The function that resolves search inputs to a URL parameter.                                                                                                         |
 
 # 📦 @helius-labs/xray-database [WIP]
 
-A database for savaing metadata like transaction views or user details.
+A database for saving metadata like transaction views or user details.
diff --git a/apps/web/src/app.postcss b/apps/web/src/app.postcss
@@ -34,7 +34,12 @@ input::placeholder {
 }
 
 .card {
-    @apply rounded-lg border border-secondary bg-black p-3;
+    @apply rounded-lg border border-secondary bg-black p-3 transition-all duration-150;
+}
+
+a.card:hover,
+button.card:hover {
+    @apply border-[#fff]/50 bg-[#fff]/5;
 }
 
 .center {
@@ -49,6 +54,10 @@ input::placeholder {
     @apply fill-green-500;
 }
 
+.icon-stroke-success {
+    @apply stroke-green-500;
+}
+
 .icon-fill-black {
     @apply fill-black;
 }

diff --git a/apps/web/src/lib/components/account-header.svelte b/apps/web/src/lib/components/account-header.svelte
@@ -1,3 +1,24 @@
+<style>
+    .username-block {
+        opacity: 90%;
+    }
+
+    .username-block:nth-child(3n + 2) {
+        background-color: #dbeafe;
+        color: #2563eb;
+    }
+
+    .username-block:nth-child(3n + 1) {
+        background-color: #fef08a;
+        color: #ca8a04;
+    }
+
+    .username-block:nth-child(3n + 3) {
+        background-color: #bbf7d0;
+        color: #16a34a;
+    }
+</style>
+
 <script lang="ts">
     import { page } from "$app/stores";
     import { trpcWithQuery } from "$lib/trpc/client";
@@ -8,6 +29,8 @@
     import formatMoney from "$lib/util/format-money";
 
     import CopyButton from "$lib/components/copy-button.svelte";
+    import Icon from "$lib/components/icon.svelte";
+    import Username from "$lib/components/providers/username-provider.svelte";
     import ShortenAddress from "./shorten-address.svelte";
 
     const client = trpcWithQuery($page);
@@ -35,33 +58,80 @@
     $: worth = $balance * $price?.data;
 </script>
 
-<div class="nav sticky top-16 z-30 bg-base-100 px-3 pt-2">
-    <div class="flex flex-wrap items-center justify-between bg-base-100">
-        <div class="flex items-center">
-            <h3 class="relative m-0 text-lg font-bold md:text-2xl">
-                <ShortenAddress address={account} />
-            </h3>
-            <div class="relative flex items-center">
-                <div class="my-2">
-                    <CopyButton text={account} />
-                    <CopyButton
-                        text={link}
-                        icon="link"
-                    />
+<Username
+    address={account}
+    let:usernames
+    let:usernameIsLoading
+>
+    <div class="nav sticky top-16 z-30 gap-2 bg-base-100 px-3 pt-2">
+        <div class="flex flex-col bg-base-100">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <h3 class="relative m-0 text-lg font-bold md:text-2xl">
+                        <ShortenAddress address={account} />
+                    </h3>
+                    <div class="relative flex items-center">
+                        <div class="my-2">
+                            <CopyButton text={account} />
+                            <CopyButton
+                                text={link}
+                                icon="link"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class="relative text-right">
+                    <h1 class="text-md md:block">
+                        <span class="">{$balance.toFixed(6)}</span>
+                        <span class="opacity-50">SOL</span>
+                    </h1>
+
+                    {#if !$price?.isLoading}
+                        <span class="ml-1 text-xs opacity-50 md:block"
+                            >{formatMoney(worth)} USD</span
+                        >
+                    {/if}
                 </div>
             </div>
-        </div>
-        <div class="relative text-right">
-            <h1 class="text-md md:block">
-                <span class="">{$balance.toFixed(6)}</span>
-                <span class="opacity-50">SOL</span>
-            </h1>
-
-            {#if !$price?.isLoading}
-                <span class="ml-1 text-xs opacity-50 md:block"
-                    >{formatMoney(worth)} USD</span
-                >
+            {#if usernameIsLoading}
+                <div class="flex flex-wrap gap-2 pt-2">
+                    {#each [1, 2, 3] as _}
+                        <div
+                            class="username-block inline-block h-6 w-[72px] animate-pulse rounded-full py-1 px-3 text-xs font-extrabold"
+                        />
+                    {/each}
+                </div>
+            {:else if usernames && usernames?.length > 0}
+                <div class="flex flex-wrap gap-2 pt-2">
+                    {#each usernames as username}
+                        {#if username.type === "backpack"}
+                            <div
+                                class="inline-block rounded-full bg-red-200/90 py-1 px-3 text-xs font-extrabold text-red-600/90"
+                            >
+                                <div
+                                    class="flex items-center justify-center gap-1"
+                                >
+                                    <Icon
+                                        id="backpack"
+                                        size="sm"
+                                    />
+                                    <!-- <span
+                                            class="flex items-center justify-center"
+                                        > -->
+                                    {username.username}
+                                    <!-- </span> -->
+                                </div>
+                            </div>
+                        {:else}
+                            <div
+                                class="username-block inline-block rounded-full py-1 px-3 text-xs font-extrabold"
+                            >
+                                {username.username}
+                            </div>
+                        {/if}
+                    {/each}
+                </div>
             {/if}
         </div>
     </div>
-</div>
+</Username>
diff --git a/apps/web/src/lib/components/collapse.svelte b/apps/web/src/lib/components/collapse.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import Icon from "$lib/components/icon.svelte";
-    import type { Icon as IconType } from "$lib/types";
+    import type { Icon as IconType, NullableProp } from "$lib/types";
 
     export let iconId = "" as IconType;
-    export let sectionTitle = "";
+    export let sectionTitle: string = "";
+    export let sectionAditionalInfo: NullableProp<string | number> = null;
     export let hideIcon = false;
-
     export let showDetails = false;
 </script>
 
@@ -21,11 +21,17 @@
                     id={iconId}
                     size="md"
                     fill="success"
+                    stroke="success"
                 />
             </div>
         {/if}
-        <div class="ml-2">
+        <div class="ml-2 flex items-center gap-2">
             <p class="text-primary">{sectionTitle}</p>
+            {#if sectionAditionalInfo}
+                <span class="rounded-sm border bg-white/10 px-[0.4rem] text-sm"
+                    >{sectionAditionalInfo}</span
+                >
+            {/if}
         </div>
     </div>
     <div class="collapse-content">

diff --git a/apps/web/src/lib/components/icon.svelte b/apps/web/src/lib/components/icon.svelte
@@ -6,6 +6,7 @@
     export let id: Icon;
     export let path: string = "";
     export let fill: string = "current" as "current" | "success" | "base-100";
+    export let stroke: string = "current" as "current" | "success" | "base-100";
     export let size = "sm" as "xs" | "sm" | "md" | "lg";
 
     let el: SVGElement;
@@ -31,7 +32,8 @@
 
 <svg
     bind:this={el}
-    class="icon icon-{size} icon-fill-{fill}"
+    class="icon icon-{size} icon-fill-{fill} icon-stroke-{stroke}"
     viewBox="0 0 24 24"
+    preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
 />