feat(sdk-react-provider): complete refactor to use react-query async state management

* feat: update sdk-react-provider to use react-query

* fix: merge providers and add docs

* fix: tests

* fix: more tests

* feat: add useProfiles and useOrder + tests

* fix: invalidate the correct query on linkAddress

* fix: update docs

* fix: update docs

* fix: add api example

* fix: update docs

* fix: merge get balances and get profile balances

* fix: cleanup

* feat: placeOrderMessage, rearranged args, currency required, chainId number or moneriumChainName

* fix: set monerium identifier for cache keys so it wont clash with wagmi or other

* fix: authorization, offer auto link and revoking access

* fix: added landing page that tests most aspects of the hooks

* fix: remove deprecated functions and network

* fix: update lockfile

* test: update placeOrderMessage test

* docs: update generated docs

* fix: tests, currency is now required in placeOrder

* fix: comment out api example dependecies

* fix: react hooks tests

* fix: remove duplicated getAuthFlowURI

* fix: disable test, it fails when its run with turbo

* docs: update documentation

Author: einaralex

README.md

@@ -65,7 +65,7 @@ The pipeline will automatically publish the following packages if there are chan
 
 #### Useful links
 
-[Release please - Github action](https://github.com/marketplace/actions/release-please-action)
+[Release please - Github action](https://github.com/marketplace/actions/release-please-action)</br>
 [Release please - Config file options](https://github.com/googleapis/release-please/blob/main/docs/manifest-releaser.md#configfile)
 
 ### Remote Caching

apps/customer/README.md

@@ -20,6 +20,10 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
 
+## Useful
+
+https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

apps/customer/app/(authorized)/dashboard/page.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 
 import { Currency } from '@monerium/sdk';
+import { useBalances } from '@monerium/sdk-react-provider';
 
 import ChainFilter from 'components/Dashboard/Filters/ChainFilter';
 import TokenFilter from 'components/Dashboard/Filters/TokenFilter';
 import TotalBalance from 'components/Dashboard/TotalBalance';
 import { ChainSelection } from 'components/Dashboard/types';
 import WalletList from 'components/Dashboard/WalletList';
-// import { ConnectButton } from '@rainbow-me/rainbowkit';
 
 function Dashboard() {
   const [selectedChain, setSelectedChain] = useState<ChainSelection>('all');
@@ -20,6 +20,16 @@ function Dashboard() {
     Currency.eur
   );
 
+  const { refetch } = useBalances({
+    query: {
+      refetchOnWindowFocus: false,
+    },
+  });
+
+  useEffect(() => {
+    refetch();
+  }, [selectedCurrency, selectedChain]);
+
   return (
     <Box sx={{ pt: 7 }}>
       <Stack direction="row" sx={{ p: 3 }}>

apps/customer/app/(authorized)/layout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/navigation';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 
-import { useMonerium } from '@monerium/sdk-react-provider';
+import { useAuth } from '@monerium/sdk-react-provider';
 
 import { LoadingScreen } from 'components/LoadingScreen';
 import BottomNavigation from 'components/Navigation/BottomNavigation';
@@ -13,14 +13,14 @@ export default function AuthorizedLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { isAuthorized, loadingAuth } = useMonerium();
+  const { isAuthorized, isLoading } = useAuth();
   const router = useRouter();
 
-  if (loadingAuth) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
-  if (!loadingAuth && !isAuthorized) {
+  if (!isLoading && !isAuthorized) {
     router.push('/');
   }
 

apps/customer/app/api/example/route.ts

@@ -0,0 +1,53 @@
+// import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+// import cookie from 'cookie';´
+
+export async function POST(req: NextRequest) {
+  const requestBody = await req.json();
+
+  let response;
+  try {
+    response = await fetch(`https://example.com`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    }).then((res) => res.json());
+
+    if (response.code) {
+      return new NextResponse(JSON.stringify(response), {
+        status: response.code,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    }
+
+    // const { 'session-id': sessionId, ...cookieOptions } = cookie.parse(
+    //   response.headers.get('set-cookie')
+    // );
+    // cookies().set('session-id', sessionId, cookieOptions);
+
+    return new NextResponse(JSON.stringify(response), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (error) {
+    return new NextResponse(
+      JSON.stringify({ message: (error as Error).message }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  return Response.json({ data: 'example' });
+}

apps/customer/app/page.tsx

@@ -6,15 +6,15 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 
-import { useMonerium } from '@monerium/sdk-react-provider';
+import { useAuth } from '@monerium/sdk-react-provider';
 
 import { MoneriumConnect } from 'components/MoneriumConnect/MoneriumConnect';
 import { LoadingScreen } from 'src/components/LoadingScreen';
 
 import s from './page.module.scss';
 
 export default function Home() {
-  const { isAuthorized, loadingAuth } = useMonerium();
+  const { isAuthorized, isLoading } = useAuth();
   const router = useRouter();
 
   useEffect(() => {
@@ -23,7 +23,7 @@ export default function Home() {
     }
   }, [isAuthorized]);
 
-  if (!loadingAuth && !isAuthorized) {
+  if (!isLoading && !isAuthorized) {
     return (
       <Container component="main" maxWidth="md">
         <Box className={s.logoWrapper}>