feat(poc): Rebuild the PoC Dapp with React

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
         run: yarn --immutable
       - name: Build
         run: yarn build
+        env:
+          VITE_PRICE_API_KEY: ${{ secrets.VITE_PRICE_API_KEY }}
       - name: Lint
         run: yarn run lint
         env:
@@ -52,7 +54,7 @@ jobs:
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: 2238a825c5aca59233eab1f221f7aefb
-          command: pages deploy ./web/.svelte-kit/cloudflare --project-name=sprinter-poc --branch=${{ env.CF_BRANCH_NAME }}
+          command: pages deploy ./web/dist --project-name=sprinter-poc --branch=${{ env.CF_BRANCH_NAME }}
       - name: Generate Deployment Summary
         run: |
           echo "# 🚀 Deployment Summary" >> $GITHUB_STEP_SUMMARY
@@ -90,4 +92,4 @@ jobs:
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: 2238a825c5aca59233eab1f221f7aefb
-          command: pages deploy ./web/.svelte-kit/cloudflare --project-name=gopher-poc --branch=${{ env.CF_BRANCH_NAME }}
+          command: pages deploy ./web/dist --project-name=gopher-poc --branch=${{ env.CF_BRANCH_NAME }}

.prettierignore

@@ -2,8 +2,11 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+web/.yarn
 
 docs/.docusaurus
 docs/build
 docs/_temp
-docs/CHANGELOG.md
+docs/CHANGELOG.md
+packages/react/CHANGELOG.md
+packages/sdk/CHANGELOG.md

docs/README.md

@@ -1,4 +1,3 @@
-
 # Website
 
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.

packages/react/README.md

@@ -1,4 +1,3 @@
-
 # Sprinter React SDK
 
 The Sprinter React SDK is a React wrapper for the [Sprinter SDK](https://github.com/ChainSafe/sprinter-sdk), enabling easy interaction with blockchain networks through React components and hooks. It provides context management and custom hooks for retrieving balances, tokens, supported chains, and solutions for asset transfers.

packages/sdk/README.md

@@ -1,4 +1,3 @@
-
 # Sprinter SDK
 
 The **Sprinter SDK** is a JavaScript/TypeScript library that simplifies cross-chain operations such as fetching balances and providing solutions for asset transfers across multiple blockchains.

web/.gitignore

@@ -1,14 +1,37 @@
-.DS_Store
-node_modules
+dist
+dist-ssr
+*.local
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
 /build
-/.svelte-kit
-/package
-/.wrangler
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Sentry Config File
-.sentryclirc
+# vercel
+.vercel

web/.prettierrc

@@ -1,8 +1,5 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true
 }

web/.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

web/README.md

@@ -1,4 +1,4 @@
-# Poc interface for Sprinter-ts
+# Poc interface for Sprinter-sdk
 
 ## Developing
 
@@ -31,7 +31,3 @@ To create a production version of your app:
 ```bash
 yarn build
 ```
-
-You can preview the production build with `yarn preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

web/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

web/eslint.config.js

@@ -0,0 +1,107 @@
+import js from '@eslint/js'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import testingLibrary from 'eslint-plugin-testing-library'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import prettierRecommended from 'eslint-plugin-prettier/recommended'
+import tailwindRecommended from 'eslint-plugin-tailwindcss'
+
+export default tseslint.config(
+  { ignores: ['dist', '.storybook'] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked
+    ],
+    files: ['**/*.{ts,tsx}'],
+    settings: { react: { version: '19' } },
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: import.meta.dirname
+      }
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      'prettier-recommended': prettierRecommended,
+      tailwindcss: tailwindRecommended
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true }
+      ],
+      // typescript
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { ignoreRestSiblings: true, argsIgnorePattern: '^_' }
+      ],
+      'react/prop-types': 'off',
+      // READ-MORE: https://typescript-eslint.io/rules/consistent-type-definitions
+      '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
+      'tailwindcss/classnames-order': 'warn',
+      'tailwindcss/no-custom-classname': 'warn',
+      'tailwindcss/no-contradicting-classname': 'error',
+      // typeAlias selectors should start with prefix T
+      // READ-MORE: https://typescript-eslint.io/rules/naming-convention
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: ['typeAlias'],
+          format: ['PascalCase'],
+          custom: {
+            regex: '^T[A-Z]',
+            match: true
+          }
+        }
+      ],
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'variable',
+          format: ['camelCase', 'PascalCase', 'UPPER_CASE']
+        },
+        {
+          selector: 'function',
+          format: ['camelCase', 'PascalCase']
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase']
+        }
+      ]
+    }
+  },
+  {
+    files: [
+      'src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+      'src/**/__tests__/**/*.{js,jsx,ts,tsx}'
+    ],
+    extends: [testingLibrary.configs['flat/react']],
+    rules: {
+      'testing-library/no-await-sync-events': [
+        'error',
+        {
+          eventModules: ['fire-event']
+        }
+      ],
+      'testing-library/no-manual-cleanup': 'error',
+      'testing-library/prefer-explicit-assert': 'error',
+      'testing-library/prefer-user-event': 'error',
+      'testing-library/prefer-presence-queries': 'error'
+    }
+  },
+  prettierRecommended,
+  tailwindRecommended.configs['flat/recommended']
+)

web/index.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 40%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sprinter PoC</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>