fix: react app example readme

README.md

@@ -9,7 +9,7 @@
 
 This package uses our [NeonPass](https://neonpass.live/) codebase.
 
-- [React demo](https://codesandbox.io/s/neon-transfer-demo-z93nlj) available.
+- [React demo](https://codesandbox.io/p/devbox/gnytck) available.
 
 ---
 

__tests__/mocks/tokenlist.json

@@ -498,6 +498,24 @@
       "name": "$FunGible Token 1",
       "symbol": "$FT1",
       "logoURI": "https://raw.githubusercontent.com/neonlabsorg/token-list/master/assets/ethereum-eth-logo.svg"
+    },
+    {
+      "chainId": 245022926,
+      "address_spl": "C3yEUbxVkdM4V732sFCC7a99Ded1dgdqUzthskWN69y7",
+      "address": "0xBF786eADf117bd5A80636AC3055ffC1Bc233B8C7",
+      "decimals": 9,
+      "name": "newERC20USDT",
+      "symbol": "newERC20USDT",
+      "logoURI": "https://raw.githubusercontent.com/neonlabsorg/token-list/master/assets/tether-usdt-logo.svg"
+    },
+    {
+      "chainId": 245022926,
+      "address_spl": "FyMoyBd2tERgLZsjmg7Ui3wnoCZwcerF46e79hxmVje1",
+      "address": "0xa55969232aC2984ec784659ec675235522aD48ee",
+      "decimals": 9,
+      "name": "newERC20USDC",
+      "symbol": "newERC20USDC",
+      "logoURI": "https://raw.githubusercontent.com/neonlabsorg/token-list/master/assets/usd-coin-usdc-logo.svg"
     }
   ],
   "version": {

examples/neon-transfer-react/README.md

@@ -2,7 +2,7 @@
 
 This code demonstrates how to use [neon-portal](https://github.com/neonlabsorg/neon-client-transfer) package in your project.
 
-You can see [Live Demo](https://2x5gdt.csb.app/).
+You can see [Live Demo](https://gnytck-5173.csb.app/).
 
 Before running rename `.env.example` to `.env`, then add your `Solana` and `MetaMask` wallets private keys:
 

examples/neon-transfer-react/package.json

@@ -40,6 +40,7 @@
     "ethers": "^6.13.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
     "react-scripts": "5.0.1",
     "token-list": "https://github.com/neonlabsorg/token-list.git#v5.6.1",
     "typescript": "^4.4.2",

examples/neon-transfer-react/src/index.tsx

@@ -3,10 +3,28 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import NeonTransferApp from './neon-transfer-app';
 import reportWebVitals from './reportWebVitals';
+import { ErrorBoundary } from "react-error-boundary";
+
+const handleError = (error: Error, info: React.ErrorInfo) => {
+  console.error("Error caught by boundary:", error, info.componentStack ?? "No stack trace available");
+};
+
+const ErrorFallback = () => (
+  <div role="alert">
+    <h2>Something went wrong.</h2>
+    <p>Please refresh the page or try again later.</p>
+  </div>
+);
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
-root.render(<React.StrictMode><NeonTransferApp /></React.StrictMode>);
+root.render(
+  <React.StrictMode>
+    <ErrorBoundary FallbackComponent={ErrorFallback} onError={handleError}>
+      <NeonTransferApp />
+    </ErrorBoundary>
+  </React.StrictMode>
+);
 
 reportWebVitals();

examples/neon-transfer-react/yarn.lock

@@ -8350,6 +8350,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-error-boundary@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-5.0.0.tgz#6b6c7e075c922afb0283147e5b084efa44e68570"
+  integrity sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"