Merge branch 'release/1.2.0'

.env

@@ -0,0 +1 @@
+NODE_ENV='development'

.github/workflows/update_qa_stand.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ["self-hosted", "k8s-prod"]
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

.nvmrc

@@ -1 +1 @@
-v16.14.0
+v20.14.0

public/index.html → index.html

@@ -8,13 +8,13 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
     />
-    <link rel="icon" href="%PUBLIC_URL%/favicons/favicon-16x16.png" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/apple-touch-icon.png" />
+    <link rel="icon" href="/favicons/favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Interface for dropping test tokens" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/fav_32.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/fav_32.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta http-equiv="cache-control" content="no-cache" />
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="pragma" content="no-cache" />
@@ -25,5 +25,6 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['src/setupTests.js'],
+};

package.json

@@ -1,57 +1,67 @@
 {
   "name": "neon-faucet-ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
+  "type": "module",
   "engines": {
-    "node": ">=16.14.0 && < 17.0.0"
+    "node": ">=18.16.0"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
+    "start": "vite",
+    "build": "vite build",
     "test": "npm-run-all test:*",
     "lint:code": "eslint 'src/**/*.{ts,tsx,js,jsx}' --ignore-path .gitignore .",
     "lint:fix": "yarn lint:code --fix",
     "test:types": "tsc",
     "test:lint": "eslint 'src/**/*.{ts,tsx,js,jsx}'",
     "test:audit": "snyk-protect",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
+    "@ethersproject/providers": "^5.7.2",
     "@snyk/protect": "1.963.0",
-    "@web3-react/core": "6.1.9",
-    "@web3-react/injected-connector": "6.0.7",
     "axios": "0.26.1",
+    "big.js": "^6.2.2",
     "bowser": "2.11.0",
+    "ethers": "^6.13.5",
     "include-media": "1.4.9",
-    "neon-portal": "1.3.4",
     "npm-run-all": "4.1.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass-loader": "^16.0.4",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@2.2.17",
     "token-list": "https://github.com/neonlabsorg/token-list.git#v5.0.0",
-    "web3": "1.6.1"
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
-    "@craco/craco": "6.4.2",
-    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
-    "@types/jest": "28.1.4",
+    "@types/jest": "^29.5.14",
     "@types/node": "18.0.3",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "9.8.8",
     "dotenv": "16.0.0",
     "eslint-plugin-prettier": "4.2.1",
     "http-proxy-middleware": "2.0.6",
-    "husky": ">=6",
-    "lint-staged": "^13.1.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.4.1",
     "postcss": "7.0.39",
     "prettier": "2.7.1",
     "react-scripts": "4.0.3",
     "sass": "1.50.0",
     "style-loader": "3.3.1",
-    "typescript": "4.7.4"
+    "ts-jest": "^29.2.5",
+    "typescript": "4.7.4",
+    "vite": "^6.0.7",
+    "vite-plugin-commonjs": "^0.10.4",
+    "vite-plugin-dynamic-import": "^1.6.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "browserslist": {
     "production": [
@@ -66,8 +76,11 @@
     ]
   },
   "lint-staged": {
-    "**/*.{js,ts,tsx,html,css}": [
+    "**/*.{js,ts,tsx,css}": [
       "yarn lint:fix"
     ]
+  },
+  "volta": {
+    "node": "20.14.0"
   }
 }

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.scss

@@ -34,7 +34,7 @@ $gray: #464646;
 $inp-bg-dark: #242424;
 $inp-bg-light: #f7f8ff;
 
-@import "~include-media/dist/_include-media.scss";
+// @import "~include-media/dist/_include-media.scss";
 @import "./components/common/Loader/index.scss";
 @import "./components/common/Layout/index.scss";
 @import "./components/common/Button/index.scss";

src/App.tsx

@@ -1,19 +1,13 @@
-import { Web3ReactProvider } from '@web3-react/core'
-import Web3 from 'web3'
-
-import { isMobile } from './config'
+import { isMobile } from './utils'
 import Layout from './components/common/Layout'
 import Button from './components/common/Button'
-import { ReactComponent as MobileErrorIcon } from './assets/mobile-error.svg'
+import MobileErrorIcon from '@/assets/mobile-error.svg'
 import TokenGetter from './components/TokenGetter'
 import CookieBanner from './components/CookieBanner';
 import { TokensProvider } from './contexts/tokens'
+import { WalletProvider } from './contexts/wallets'
 import './App.scss'
 
-function getLibrary(provider) {
-  return new Web3(provider)
-}
-
 const MobileErrorOverlay = () => {
   return (
     <div className='flex flex-col items-center justify-between pb-12'>
@@ -48,14 +42,14 @@ function App() {
     )
 
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
-      <Layout className='flex flex-col w-full relative'>
+    <WalletProvider>
+       <Layout className='flex flex-col w-full relative'>
         <TokensProvider>
           <TokenGetter />
         </TokensProvider>
         <CookieBanner />
       </Layout>
-    </Web3ReactProvider>
+    </WalletProvider>
   )
 }
 

src/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong. Please try again later.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/TokenGetter/TokenSelect.tsx

@@ -1,13 +1,13 @@
 import { useTokensContext } from '../../contexts/tokens'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Loader } from '../common/Loader'
-import stub from '../../assets/no_symbol.svg'
-import { ReactComponent as DdIcon } from '../../assets/dropdown.svg'
+import stub from '@/assets/no_symbol.svg?url'
+import DdIcon from '@/assets/dropdown.svg'
 import { useOnClickOutside } from '../../hooks'
-import neonTokenIcon from '../../assets/tokens/neon_token_md.png'
-import wNeonTokenIcon from '../../assets/tokens/wrapped-neon-logo.svg'
-import usdcTokenIcon from '../../assets/tokens/usd-coin-usdc-logo.svg'
-import usdtTokenIcon from '../../assets/tokens/tether-usdt-logo.svg'
+import neonTokenIcon from '@/assets/tokens/neon_token_md.png'
+import wNeonTokenIcon from '@/assets/tokens/wrapped-neon-logo.svg?react'
+import usdcTokenIcon from '@/assets/tokens/usd-coin-usdc-logo.svg?react'
+import usdtTokenIcon from '@/assets/tokens/tether-usdt-logo.svg?react'
 
 const icons = {
   USDT: usdtTokenIcon,
@@ -102,11 +102,10 @@ export const TokenSelect = (props: any) => {
 
   const isSPLToken = ({ name, symbol, address, address_spl }) => {
     const fs = searchQuery.toLowerCase()
-
-    return name.toLowerCase().includes(fs) ||
-      symbol.toLowerCase().includes(fs) ||
-      address.toLowerCase() === fs ||
-      address_spl.toLowerCase() === fs
+    return name?.toLowerCase().includes(fs) ||
+      symbol?.toLowerCase().includes(fs) ||
+      address?.toLowerCase() === fs ||
+      address_spl?.toLowerCase() === fs
   }
 
   const filteredList = useMemo(() => {

src/components/TokenGetter/form.tsx

@@ -1,13 +1,12 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import Button from '../common/Button'
 import { Input as NumericalInput } from '../common/NumericalInput'
 import { Loader } from '../common/Loader'
-import { useWeb3React } from '@web3-react/core'
 import { AxiosError } from 'axios'
 import { TokenSelect } from './TokenSelect'
-import { useHttp } from '../../utils/useHttp'
 import { CircleTimer } from '../common/CircleTimer'
-import { FAUCET_URL, REQUEST_LIMIT_SEC } from '../../config'
+import { FAUCET_URL, REQUEST_LIMIT_SEC, useHttp } from '../../utils'
+import { WalletContext } from '../../contexts/wallets'
 
 export default function Form(props: any) {
   const {
@@ -16,11 +15,10 @@ export default function Form(props: any) {
     }
   } = props
   const { post } = useHttp()
-  const { deactivate } = useWeb3React()
   const [amount, setAmount] = useState(0)
   const [token, setToken] = useState<any>({})
   const [isMaxAmountIncreased, setIsMaxAmointIncreased] = useState(false)
-  const { account } = useWeb3React()
+  const { connectedWallet } = useContext(WalletContext)
 
   const [airdropPending, setAirdropPending] = useState(false)
 
@@ -29,8 +27,8 @@ export default function Form(props: any) {
       token.symbol === 'NEON' ? `${FAUCET_URL}/request_neon` : `${FAUCET_URL}/request_erc20`
 
     const data =
-      token.symbol === 'NEON' ? { amount, wallet: account } :
-        { amount, wallet: account, token_addr: token.address }
+      token.symbol === 'NEON' ? { amount, wallet: connectedWallet } :
+        { amount, wallet: connectedWallet, token_addr: token.address }
     setAirdropPending(true)
     post(url, data)
       .then(() => {
@@ -41,20 +39,14 @@ export default function Form(props: any) {
         })
       })
       .catch((err: AxiosError) => {
-        const status = err.response.status
-
-        if (status === 502) {
-          try {
-            deactivate()
-          } catch (error) {
-            console.error(error)
-          }
-        }
+        const status = err.response?.status
 
         const details =
-          err.response && err.response.statusText ?
-            err.response.statusText :
-            'Server is not responding'
+          status === 524
+            ? 'The airdrop is taking longer than expected. Please check your tokens later.'
+            : err.response?.statusText
+              ? err.response.statusText
+              : 'Server is not responding';
         onResponse({
           success: false,
           details,

src/components/TokenGetter/index.scss

@@ -11,18 +11,20 @@
   &__title {
     font-size: 56px;
     font-weight: 500;
-    @include media(">=xSmall", "<medium") {
-      font-size: 32px;
-    }
+    // TODO: uncomment this
+    // @include media(">=500px", "<960px") {
+    //   font-size: 32px;
+    // }
     margin-bottom: 40px;
   }
   &__summary {
     font-weight: 500;
     font-size: 18px;
     margin-bottom: 24px;
-    @include media(">=xSmall", "<medium") {
-      font-size: 14px;
-    }
+    // TODO: uncomment this
+    // @include media(">=500px", "<960px") {
+    //   font-size: 14px;
+    // }
   }
   &__unlogged {
     display: flex;