Upgrade dependencies, use useSetAtom, use correct AppConfig

package.json

@@ -20,25 +20,25 @@
     "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",
-    "lodash.groupby": "^4.6.0",
+    "@reach/router": "1.3.4",
+    "@stacks/blockchain-api-client": "7.2.1",
+    "@stacks/connect": "7.3.1",
+    "@stacks/connect-react": "22.1.1",
+    "@stacks/profile": "6.5.4",
+    "@stacks/storage": "6.5.4",
+    "@stacks/transactions": "6.5.4",
+    "bn.js": "5.2.1",
+    "c32check": "2.0.0",
+    "jotai": "2.1.0",
+    "lodash.groupby": "4.6.0",
     "number-to-words": "github:OmgImAlexis/number-to-words",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-download-link": "^2.3.0",
-    "react-input-switch": "^2.2.2",
-    "react-jdenticon": "^0.0.9",
-    "react-router-dom": "^5.2.0",
-    "throttled-queue": "^2.1.4"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-download-link": "2.3.0",
+    "react-input-switch": "2.2.2",
+    "react-jdenticon": "1.0.1",
+    "react-router-dom": "6.11.2",
+    "throttled-queue": "2.1.4"
   },
   "prettier": "@stacks/prettier-config",
   "scripts": {
@@ -63,11 +63,11 @@
     ]
   },
   "devDependencies": {
-    "@popperjs/core": "^2.9.2",
-    "@stacks/prettier-config": "0.0.8",
-    "bootstrap": "^5.0.2",
-    "prettier": "^2.3.2",
-    "react-scripts": "^4.0.3",
-    "react-test-renderer": "^17.0.2"
+    "@popperjs/core": "2.11.8",
+    "@stacks/prettier-config": "0.0.10",
+    "bootstrap": "5.2.3",
+    "prettier": "2.8.8",
+    "react-scripts": "5.0.1",
+    "react-test-renderer": "18.2.0"
   }
 }

src/App.js

@@ -1,27 +1,25 @@
-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';
-import HeaderLogo from './components/layout/HeaderLogo';
-import HeaderTitle from './components/layout/HeaderTitle';
+import { Connect } from '@stacks/connect-react';
+import { useAtom, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
 import CityMenu from './components/layout/CityMenu';
-import HeaderAuth from './components/layout/HeaderAuth';
 import Footer from './components/layout/Footer';
+import HeaderAuth from './components/layout/HeaderAuth';
+import HeaderLogo from './components/layout/HeaderLogo';
+import HeaderTitle from './components/layout/HeaderTitle';
+import { useConnect } from './lib/auth';
+import { fetchJson, sleep } from './lib/common';
+import { getBlockHeight } from './lib/stacks';
 import Activation from './pages/CityActivation';
 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 Landing from './pages/Landing';
+import NotFound from './pages/NotFound';
+import Vote from './pages/Vote';
 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 { fetchJson, sleep } from './lib/common';
-import Vote from './pages/Vote';
 
 export default function App() {
   const { authOptions } = useConnect();
@@ -77,8 +75,8 @@ export default function App() {
 
 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 () => {

src/UserSession.js

@@ -1,8 +1,8 @@
-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 { AppConfig } from '@stacks/connect';
 
 export const appConfig = new AppConfig(['store_write', 'publish_data']);
 export const STX_JSON_PATH = 'stx.json';

src/components/common/Unauthorized.js

@@ -1,11 +1,11 @@
 import { Link } from '@reach/router';
-import { useUpdateAtom } from 'jotai/utils';
 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/dashboard/MiningActivity.js

@@ -1,14 +1,12 @@
 import { useAtom } from 'jotai';
 import { useEffect, useMemo } from 'react';
-import { getCoinbaseAmount, getMiningStatsAtBlock } from '../../lib/citycoins';
 import { fetchJson } from '../../lib/common';
 import { CITY_INFO, currentCityAtom, miningStatsPerCityAtom } from '../../store/cities';
 import { cityIdsAtom } from '../../store/citycoins-protocol';
 import { currentStacksBlockAtom } from '../../store/stacks';
 import CurrentStacksBlock from '../common/CurrentStacksBlock';
 import LoadingSpinner from '../common/LoadingSpinner';
 import MiningStats from './MiningStats';
-import ComingSoon from '../common/ComingSoon';
 
 export default function MiningActivity() {
   const [currentStacksBlock] = useAtom(currentStacksBlockAtom);

src/components/dashboard/StackingActivity.js

@@ -1,20 +1,17 @@
 import { useAtom } from 'jotai';
 import { useEffect, useMemo } from 'react';
-import { getFirstStacksBlockInRewardCycle, getStackingStatsAtCycle } from '../../lib/citycoins';
+import { fetchJson } from '../../lib/common';
 import {
   CITY_INFO,
-  REWARD_CYCLE_LENGTH,
   currentCityAtom,
   currentRewardCycleAtom,
   stackingStatsPerCityAtom,
 } from '../../store/cities';
+import { cityIdsAtom } from '../../store/citycoins-protocol';
 import { currentStacksBlockAtom } from '../../store/stacks';
 import CurrentRewardCycle from '../common/CurrentRewardCycle';
 import LoadingSpinner from '../common/LoadingSpinner';
 import StackingStats from './StackingStats';
-import ComingSoon from '../common/ComingSoon';
-import { fetchJson } from '../../lib/common';
-import { cityIdsAtom } from '../../store/citycoins-protocol';
 
 export default function StackingActivity() {
   const [currentStacksBlock] = useAtom(currentStacksBlockAtom);
@@ -145,6 +142,7 @@ export default function StackingActivity() {
     currentStacksBlock.data,
     setStackingStatsPerCity,
     updateStackingStats,
+    cityIds,
   ]);
 
   return (

src/components/layout/CityMenu.js

@@ -5,11 +5,11 @@ import {
   CITY_INFO,
   CITY_LIST,
   CITY_ROUTES,
-  currentRouteAtom,
   currentCityAtom,
+  currentRewardCycleAtom,
+  currentRouteAtom,
   miningStatsAtom,
   stackingStatsAtom,
-  currentRewardCycleAtom,
 } from '../../store/cities';
 
 export default function CityMenu({ menuName }) {

src/components/layout/HeaderAuth.js

@@ -1,32 +1,31 @@
-import { useEffect } from 'react';
-import { useAtom } from 'jotai';
-import { useUpdateAtom } from 'jotai/utils';
 import { getUserData } from '@stacks/connect';
+import { useAtom, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
 import { getStacksAccount } from '../../lib/account';
 import { useConnect, userSessionStateAtom } from '../../lib/auth';
+import { getCCBalance, getUserId } from '../../lib/citycoins';
+import { fetchJson } from '../../lib/common';
 import { getBnsName, getStxBalance, isMainnet } from '../../lib/stacks';
+import { CITY_INFO, currentCityAtom, userIdAtom } from '../../store/cities';
 import {
+  appStxAddressAtom,
   loginStatusAtom,
   stxAddressAtom,
-  appStxAddressAtom,
   stxBnsNameAtom,
   userBalancesAtom,
 } from '../../store/stacks';
 import { ProfileSmall } from '../profile/ProfileSmall';
-import { CITY_INFO, currentCityAtom, userIdAtom } from '../../store/cities';
-import { getCCBalance, getUserId } from '../../lib/citycoins';
-import { fetchJson } from '../../lib/common';
 
 export default function HeaderAuth() {
   const { handleOpenAuth } = useConnect();
   const [userSessionState] = useAtom(userSessionStateAtom);
   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/mining/MineCityCoins.js

@@ -1,25 +1,24 @@
-import { useMemo, useRef, useState } from 'react';
-import { useAtom } from 'jotai';
 import { useConnect } from '@stacks/connect-react';
 import {
   FungibleConditionCode,
+  PostConditionMode,
   listCV,
   makeStandardSTXPostCondition,
-  PostConditionMode,
   stringAsciiCV,
   uintCV,
 } from '@stacks/transactions';
+import { useAtom } from 'jotai';
+import { useMemo, useRef, useState } from 'react';
+import { STACKS_NETWORK, displayMicro } from '../../lib/stacks';
+import { stxAddressAtom, userBalancesAtom } from '../../store/stacks';
 import CurrentStacksBlock from '../common/CurrentStacksBlock';
 import DocumentationLink from '../common/DocumentationLink';
 import FormResponse from '../common/FormResponse';
-import { displayMicro, STACKS_NETWORK } from '../../lib/stacks';
-import { stxAddressAtom, userBalancesAtom } from '../../store/stacks';
 
 import { CITY_INFO, currentCityAtom, miningStatsPerCityAtom } from '../../store/cities';
+import { getCitySettings } from '../../store/citycoins-protocol';
 import LoadingSpinner from '../common/LoadingSpinner';
 import MiningStats from '../dashboard/MiningStats';
-import { getCitySettings } from '../../store/citycoins-protocol';
-import ComingSoon from '../common/ComingSoon';
 
 export default function MineCityCoins() {
   const { doContractCall } = useConnect();

src/components/stacking/ClaimStackingRewards.js

@@ -3,24 +3,23 @@ import { RESET } from 'jotai/utils';
 import { Fragment, useMemo, useRef, useState } from 'react';
 import {
   getStackerAtCycle,
-  getStackingReward,
-  getStackingRewardFromContract,
+  getStackingRewardFromContract
 } from '../../lib/citycoins';
+import { fetchJson } from '../../lib/common';
 import {
   CITY_INFO,
   currentCityAtom,
   currentRewardCycleAtom,
   rewardCyclesToClaimAtom,
   userIdAtom,
 } from '../../store/cities';
+import { cityIdsAtom, getCityInfo } from '../../store/citycoins-protocol';
 import { currentStacksBlockAtom } from '../../store/stacks';
 import CurrentRewardCycle from '../common/CurrentRewardCycle';
+import DocumentationLink from '../common/DocumentationLink';
 import FormResponse from '../common/FormResponse';
 import LoadingSpinner from '../common/LoadingSpinner';
-import DocumentationLink from '../common/DocumentationLink';
 import StackingReward from './StackingReward';
-import { cityIdsAtom, getCityInfo } from '../../store/citycoins-protocol';
-import { fetchJson } from '../../lib/common';
 
 export default function ClaimStackingRewards() {
   const [userIds] = useAtom(userIdAtom);

src/components/stacking/StackCityCoins.js

@@ -12,20 +12,18 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { isStringAllDigits } from '../../lib/common';
 import { displayMicro, fromMicro, STACKS_NETWORK, toMicro } from '../../lib/stacks';
 import {
-  CITY_CONFIG,
   CITY_INFO,
   currentCityAtom,
   currentRewardCycleAtom,
-  stackingStatsPerCityAtom,
+  stackingStatsPerCityAtom
 } from '../../store/cities';
+import { getCitySettings } from '../../store/citycoins-protocol';
 import { stxAddressAtom, userBalancesAtom } from '../../store/stacks';
 import CurrentRewardCycle from '../common/CurrentRewardCycle';
+import DocumentationLink from '../common/DocumentationLink';
 import FormResponse from '../common/FormResponse';
 import LoadingSpinner from '../common/LoadingSpinner';
-import DocumentationLink from '../common/DocumentationLink';
 import StackingStats from '../dashboard/StackingStats';
-import { getCitySettings } from '../../store/citycoins-protocol';
-import ComingSoon from '../common/ComingSoon';
 
 export default function StackCityCoins() {
   const { doContractCall } = useConnect();

src/lib/auth.js

@@ -1,13 +1,12 @@
-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 { AppConfig, UserSession } from '@stacks/connect-react';
+import { atom, useAtom, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
 import {
   appStxAddressAtom,
-  stxBnsNameAtom,
   loginStatusAtom,
   stxAddressAtom,
+  stxBnsNameAtom,
 } from '../store/stacks';
 
 const appConfig = new AppConfig(['store_write', 'publish_data']);
@@ -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 { useSetAtom } from 'jotai';
 import { CHAIN_SUFFIX } from '../lib/stacks';
 import { currentRouteAtom } from '../store/cities';
 
 export default function NotFound() {
-  const setCurrentRoute = useUpdateAtom(currentRouteAtom);
+  const setCurrentRoute = useSetAtom(currentRouteAtom);
 
   return (
     <div>