Update connect

package.json

@@ -20,31 +20,31 @@
     "url": "git+https://github.com/citycoins/ui.git"
   },
   "dependencies": {
-    "@reach/router": "^1.3.4",
-    "@stacks/blockchain-api-client": "^0.62.1",
-    "@stacks/connect": "6.0.0",
-    "@stacks/connect-react": "11.0.0",
-    "@stacks/profile": "^2.0.0-beta.1",
-    "@stacks/storage": "^2.0.0-beta.1",
-    "@stacks/transactions": "^2.0.0-beta.1",
-    "bn.js": "^5.2.0",
-    "c32check": "^1.1.2",
-    "jotai": "^1.1.2",
+    "@stacks/blockchain-api-client": "^7.3.0",
+    "@stacks/connect": "7.3.1",
+    "@stacks/connect-react": "22.1.1",
+    "@stacks/profile": "^6.5.5",
+    "@stacks/storage": "^6.5.5",
+    "@stacks/transactions": "^6.5.5",
+    "bn.js": "^5.2.1",
+    "c32check": "^2.0.0",
+    "jotai": "^2.2.2",
     "lodash.groupby": "^4.6.0",
     "number-to-words": "github:OmgImAlexis/number-to-words",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-download-link": "^2.3.0",
     "react-input-switch": "^2.2.2",
-    "react-jdenticon": "^0.0.9",
-    "react-router-dom": "^5.2.0",
+    "react-jdenticon": "^1.0.1",
+    "react-router": "^6.14.2",
+    "react-router-dom": "^6.14.2",
     "throttled-queue": "^2.1.4"
   },
   "prettier": "@stacks/prettier-config",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "CI= react-scripts build",
-    "test": "react-scripts build",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider CI= react-scripts build",
+    "test": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -63,11 +63,11 @@
     ]
   },
   "devDependencies": {
-    "@popperjs/core": "^2.9.2",
-    "@stacks/prettier-config": "0.0.8",
-    "bootstrap": "^5.0.2",
+    "@popperjs/core": "^2.11.8",
+    "@stacks/prettier-config": "0.0.10",
+    "bootstrap": "^5.3.1",
     "prettier": "^2.3.2",
-    "react-scripts": "^4.0.3",
-    "react-test-renderer": "^17.0.2"
+    "react-scripts": "^5.0.1",
+    "react-test-renderer": "^18.2.0"
   }
 }

src/App.js

@@ -1,5 +1,4 @@
 import { Connect } from '@stacks/connect-react';
-import { Router } from '@reach/router';
 import { useConnect } from './lib/auth';
 import Landing from './pages/Landing';
 import NotFound from './pages/NotFound';
@@ -13,71 +12,73 @@ import Dashboard from './pages/CityDashboard';
 import Mining from './pages/CityMining';
 import Stacking from './pages/CityStacking';
 import Tools from './pages/CityTools';
-import { useAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { CITY_INFO, currentCityAtom, currentRewardCycleAtom } from './store/cities';
-import { useUpdateAtom } from 'jotai/utils';
 import { currentStacksBlockAtom } from './store/stacks';
 import { useEffect } from 'react';
 import { getBlockHeight } from './lib/stacks';
 import { getRewardCycle } from './lib/citycoins';
 import { sleep } from './lib/common';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 export default function App() {
   const { authOptions } = useConnect();
   const [currentCity] = useAtom(currentCityAtom);
 
   return (
-    <Connect authOptions={authOptions}>
-      <div className="container-fluid">
-        <div
-          className="row align-items-center justify-content-between text-center py-3"
-          style={
-            currentCity.loaded
-              ? {
-                  backgroundSize: 'cover',
-                  backgroundImage: `url(${CITY_INFO[currentCity.data].background})`,
-                }
-              : { backgroundImage: 'none' }
-          }
-        >
-          <div className="col-md-3 text-md-center pb-3 pb-md-0">
-            <HeaderLogo />
+    <BrowserRouter>
+      <Connect authOptions={authOptions}>
+        <div className="container-fluid">
+          <div
+            className="row align-items-center justify-content-between text-center py-3"
+            style={
+              currentCity.loaded
+                ? {
+                    backgroundSize: 'cover',
+                    backgroundImage: `url(${CITY_INFO[currentCity.data].background})`,
+                  }
+                : { backgroundImage: 'none' }
+            }
+          >
+            <div className="col-md-3 text-md-center pb-3 pb-md-0">
+              <HeaderLogo />
+            </div>
+            <div className="col-md-6 text-md-center pb-3 pb-md-0">
+              <HeaderTitle />
+            </div>
+            <div className="col-md-3 text-md-end text-nowrap pb-3 pb-md-0">
+              <HeaderAuth />
+            </div>
           </div>
-          <div className="col-md-6 text-md-center pb-3 pb-md-0">
-            <HeaderTitle />
+          <div className="row align-items-center">
+            <div className="col">
+              <CityMenu menuName="topnav" />
+            </div>
           </div>
-          <div className="col-md-3 text-md-end text-nowrap pb-3 pb-md-0">
-            <HeaderAuth />
+          <hr className="cc-divider" />
+          <div className="row align-items-center">
+            <div className="col">
+              <Content />
+            </div>
           </div>
-        </div>
-        <div className="row align-items-center">
-          <div className="col">
-            <CityMenu menuName="topnav" />
-          </div>
-        </div>
-        <hr className="cc-divider" />
-        <div className="row align-items-center">
-          <div className="col">
-            <Content />
+          <hr className="cc-divider" />
+          <div className="row align-items-center">
+            <div className="col">
+              <CityMenu menuName="bottomnav" />
+            </div>
           </div>
         </div>
         <hr className="cc-divider" />
-        <div className="row align-items-center">
-          <div className="col">
-            <CityMenu menuName="bottomnav" />
-          </div>
-        </div>
-      </div>
-      <hr className="cc-divider" />
-      <Footer />
-    </Connect>
+        <Footer />
+      </Connect>
+    </BrowserRouter>
   );
 }
 
 function Content() {
   const [currentCity] = useAtom(currentCityAtom);
-  const setBlockHeight = useUpdateAtom(currentStacksBlockAtom);
-  const setRewardCycle = useUpdateAtom(currentRewardCycleAtom);
+  const setBlockHeight = useSetAtom(currentStacksBlockAtom);
+  const setRewardCycle = useSetAtom(currentRewardCycleAtom);
 
   useEffect(() => {
     const updatePage = async () => {
@@ -99,14 +100,14 @@ function Content() {
   });
 
   return (
-    <Router>
-      <Landing path="/" exact />
-      <Activation path="/activation" />
-      <Dashboard path="/dashboard" />
-      <Mining path="/mining" />
-      <Stacking path="/stacking" />
-      <Tools path="/tools" />
-      <NotFound default />
-    </Router>
+    <Routes>
+      <Route element={<Landing/>} path="/" exact />
+      <Route element={<Activation/>} path="/activation" />
+      <Route element={<Dashboard/>} path="/dashboard" />
+      <Route element={<Mining/>} path="/mining" />
+      <Route element={<Stacking/>} path="/stacking" />
+      <Route element={<Tools/>} path="/tools" />
+      <Route element={<NotFound/>} path="*" />
+      </Routes>
   );
 }

src/UserSession.js

@@ -1,10 +1,10 @@
-import { AppConfig } from '@stacks/auth';
 import { Storage } from '@stacks/storage';
 import { addressToString } from '@stacks/transactions';
 import { getStacksAccount } from './lib/account';
 import { debugLog } from './lib/common';
+import connect from '@stacks/connect';
 
-export const appConfig = new AppConfig(['store_write', 'publish_data']);
+export const appConfig = new connect.AppConfig(['store_write', 'publish_data']);
 export const STX_JSON_PATH = 'stx.json';
 
 function afterSTXAddressPublished() {

src/components/common/Unauthorized.js

@@ -1,11 +1,11 @@
-import { Link } from '@reach/router';
-import { useUpdateAtom } from 'jotai/utils';
+import { Link } from 'react-router-dom';
 import { useConnect } from '../../lib/auth';
 import { CHAIN_SUFFIX } from '../../lib/stacks';
 import { currentRouteAtom } from '../../store/cities';
+import { useSetAtom } from 'jotai';
 
 export default function Unauthorized() {
-  const setCurrentRoute = useUpdateAtom(currentRouteAtom);
+  const setCurrentRoute = useSetAtom(currentRouteAtom);
   const { handleOpenAuth } = useConnect();
 
   return (

src/components/layout/CityMenu.js

@@ -1,4 +1,4 @@
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import { useAtom } from 'jotai';
 import { CHAIN_SUFFIX } from '../../lib/stacks';
 import {

src/components/layout/HeaderAuth.js

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { useAtom } from 'jotai';
-import { useUpdateAtom } from 'jotai/utils';
+import { useAtom, useSetAtom } from 'jotai';
 import { getUserData } from '@stacks/connect';
 import { getStacksAccount } from '../../lib/account';
 import { useConnect, userSessionStateAtom } from '../../lib/auth';
@@ -22,10 +21,10 @@ export default function HeaderAuth() {
   const [loginStatus] = useAtom(loginStatusAtom);
   const [currentCity] = useAtom(currentCityAtom);
   const [stxAddress, setStxAddress] = useAtom(stxAddressAtom);
-  const setAppStxAddress = useUpdateAtom(appStxAddressAtom);
-  const setBnsName = useUpdateAtom(stxBnsNameAtom);
-  const setUserBalances = useUpdateAtom(userBalancesAtom);
-  const setUserIds = useUpdateAtom(userIdAtom);
+  const setAppStxAddress = useSetAtom(appStxAddressAtom);
+  const setBnsName = useSetAtom(stxBnsNameAtom);
+  const setUserBalances = useSetAtom(userBalancesAtom);
+  const setUserIds = useSetAtom(userIdAtom);
 
   useEffect(() => {
     const fetchUserData = async () => {

src/components/layout/HeaderLogo.js

@@ -1,4 +1,4 @@
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import { useAtom } from 'jotai';
 import { CITYCOIN_LOGO, CITY_INFO, currentCityAtom, currentRouteAtom } from '../../store/cities';
 

src/index.js

@@ -1,10 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import App from './App.js';
+import {createRoot} from 'react-dom/client';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import './styles/style.css';
 import './styles/floating-label.css';
 import './styles/fonts.css';
 
-ReactDOM.render(<App />, document.getElementById('App'));
+const root = createRoot(document.getElementById("App"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/lib/auth.js

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 import { AppConfig, UserSession } from '@stacks/connect-react';
 import { showConnect } from '@stacks/connect';
-import { atom, useAtom } from 'jotai';
-import { useUpdateAtom } from 'jotai/utils';
+import { atom, useAtom, useSetAtom } from 'jotai';
 import {
   appStxAddressAtom,
   stxBnsNameAtom,
@@ -17,12 +16,12 @@ export const authResponseStateAtom = atom();
 
 export const useConnect = () => {
   const [userSession] = useAtom(userSessionStateAtom);
-  const setUserData = useUpdateAtom(userDataStateAtom);
-  const setAuthResponse = useUpdateAtom(authResponseStateAtom);
-  const setLoginStatus = useUpdateAtom(loginStatusAtom);
-  const setStxAddress = useUpdateAtom(stxAddressAtom);
-  const setAppStxAddress = useUpdateAtom(appStxAddressAtom);
-  const setBnsName = useUpdateAtom(stxBnsNameAtom);
+  const setUserData = useSetAtom(userDataStateAtom);
+  const setAuthResponse = useSetAtom(authResponseStateAtom);
+  const setLoginStatus = useSetAtom(loginStatusAtom);
+  const setStxAddress = useSetAtom(stxAddressAtom);
+  const setAppStxAddress = useSetAtom(appStxAddressAtom);
+  const setBnsName = useSetAtom(stxBnsNameAtom);
 
   const onFinish = async payload => {
     setAuthResponse(payload.authResponse);

src/pages/NotFound.js

@@ -1,10 +1,10 @@
-import { Link } from '@reach/router';
-import { useUpdateAtom } from 'jotai/utils';
+import { Link } from 'react-router-dom';
 import { CHAIN_SUFFIX } from '../lib/stacks';
 import { currentRouteAtom } from '../store/cities';
+import { useSetAtom } from 'jotai';
 
 export default function NotFound() {
-  const setCurrentRoute = useUpdateAtom(currentRouteAtom);
+  const setCurrentRoute = useSetAtom(currentRouteAtom);
 
   return (
     <div>