Feat/demo siwe (#136)

* feat: add ens support

* fix: throw queryparam errors in getAccess

* fix: improve error on connect

* feat: add siwe to demo

* fix: missing type

Author: einaralex

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

@@ -2,9 +2,11 @@
 
 import { useState } from 'react';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 
 import { Currency } from '@monerium/sdk';
+import { useAuth } from '@monerium/sdk-react-provider';
 
 import ChainFilter from 'components/Dashboard/Filters/ChainFilter';
 import TokenFilter from 'components/Dashboard/Filters/TokenFilter';
@@ -24,6 +26,8 @@ function Dashboard() {
     selectedCurrency
   );
 
+  const { revokeAccess } = useAuth();
+
   return (
     <Box sx={{ pt: 7 }}>
       <Stack direction="row" sx={{ p: 3 }}>
@@ -42,6 +46,27 @@ function Dashboard() {
         selectedChain={selectedChain}
         selectedCurrency={selectedCurrency}
       />
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          mt: 2, // adds some margin top, adjust as needed
+        }}
+      >
+        <Button
+          color="error"
+          size="large"
+          variant="outlined"
+          onClick={() => {
+            window.localStorage.removeItem(
+              'monerium.insecurely_store_refresh_token'
+            );
+            revokeAccess();
+          }}
+        >
+          Logout
+        </Button>
+      </Box>
     </Box>
   );
 }

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
@@ -14,28 +15,31 @@ export default function AuthorizedLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const router = useRouter();
   const { isAuthorized, isLoading } = useAuth();
 
-  const router = useRouter();
+  useEffect(() => {
+    if (!isAuthorized && !isLoading) {
+      router.push('/');
+    }
+  }, [isAuthorized, isLoading, router]);
 
+  // Render loading screen if still loading
   if (isLoading) {
     return <LoadingScreen />;
   }
 
-  if (!isAuthorized && !isLoading) {
-    router?.push('/');
+  // Return null if not authorized
+  if (!isAuthorized) {
+    return null;
   }
 
-  if (isAuthorized) {
-    return (
-      <>
-        <Box sx={{ pb: 7 }}>
-          {children}
-          <Paper></Paper>
-          <BottomNavigation />
-        </Box>
-      </>
-    );
-  }
-  return null;
+  // Render main content if authorized
+  return (
+    <Box sx={{ pb: 7 }}>
+      {children}
+      <Paper></Paper>
+      <BottomNavigation />
+    </Box>
+  );
 }

apps/customer/components/Dashboard/WalletList/WalletItem.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { ListItemText } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
 
 import { Currency, shortenAddress } from '@monerium/sdk';
 import { useBalances } from '@monerium/sdk-react-provider';
 
+import Punk from 'components/Punk';
 import { useEns } from 'hooks/useEns';
 
 const WalletItem = ({
@@ -31,6 +32,7 @@ const WalletItem = ({
     <ListItemButton key={address}>
       <ListItemAvatar>
         <Avatar alt="Currency" src={`/tokens/${currency}.png`} />
+        {/* <Punk address={address} size={32} /> */}
       </ListItemAvatar>
       <ListItemText
         primary={ensName || shortenAddress(address)}

apps/customer/components/MoneriumConnect/MoneriumConnect.module.scss

@@ -1,12 +1,23 @@
 .wrapper {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    flex-grow: 1;
+    justify-content: center;
+    gap: 1rem;
+    padding: 4rem;
 
     :global(.MuiButton-root) {
         margin: 16px;
         border-radius: 50px;
         text-wrap: nowrap;
     }
+}
+
+.topwrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+
+
 }

apps/customer/components/MoneriumConnect/MoneriumConnect.tsx

@@ -1,40 +1,107 @@
 'use client';
 import React from 'react';
 import Image from 'next/image';
+import { useSignMessage } from 'wagmi';
+import { useAccount } from 'wagmi';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
 
+import { siweMessage } from '@monerium/sdk';
 import { useAuth } from '@monerium/sdk-react-provider';
 
 import s from './MoneriumConnect.module.scss';
 export const MoneriumConnect = () => {
-  const { authorize } = useAuth();
+  const { address } = useAccount();
+  const { authorize, siwe, error } = useAuth();
+  const { signMessageAsync } = useSignMessage();
+  const [open, setOpen] = React.useState(!!(error as Error)?.message);
+
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const message = siweMessage({
+    domain: 'localhost:3000',
+    address: `${address}`,
+    appName: 'SDK TEST APP',
+    redirectUri: 'http://localhost:3000/dashboard',
+    chainId: 1,
+    privacyPolicyUrl: 'https://example.com/privacy-policy',
+    termsOfServiceUrl: 'https://example.com/terms-of-service',
+  });
+
+  const signInWithEthereum = () => {
+    signMessageAsync({
+      message: message,
+    }).then((signature) => {
+      siwe({
+        message: message,
+        signature: signature,
+      });
+    });
+  };
 
   return (
-    <div className={s.wrapper}>
-      <Button
-        href="https://monerium.com"
-        size="large"
-        variant="contained"
-        onClick={() => {}}
-      >
-        Read more
-      </Button>
-      <Button
-        size="large"
-        variant="outlined"
-        onClick={() => authorize()}
-        startIcon={
-          <Image
-            src="/monerium-icon.png"
-            alt="Monerium icon"
-            width={16}
-            height={20}
-            priority
-          />
-        }
+    <>
+      <Snackbar
+        color="error"
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
       >
-        Connect
-      </Button>
-    </div>
+        <Alert
+          onClose={handleClose}
+          severity="error"
+          variant="filled"
+          sx={{ width: '100%' }}
+        >
+          {(error as Error)?.message}
+        </Alert>
+      </Snackbar>
+      <Box className={s.wrapper}>
+        <Box className={s.topwrapper}>
+          <Button
+            href="https://monerium.com"
+            size="large"
+            variant="contained"
+            onClick={() => {}}
+          >
+            Read more
+          </Button>
+          <Button
+            size="large"
+            variant="outlined"
+            onClick={() => authorize()}
+            startIcon={
+              <Image
+                src="/monerium-icon.png"
+                alt="Monerium icon"
+                width={16}
+                height={20}
+                priority
+              />
+            }
+          >
+            Connect
+          </Button>
+        </Box>
+        <Button
+          size="large"
+          variant="outlined"
+          onClick={() => signInWithEthereum()}
+        >
+          Sign In with Ethereum
+        </Button>
+      </Box>
+    </>
   );
 };

apps/customer/components/Punk/index.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+
+export default function Punk({
+  address,
+  size,
+}: {
+  address: string;
+  size: number;
+}) {
+  const part1 = address.substr(2, 20);
+  const part2 = address.substr(22);
+
+  const x = parseInt(part1, 16) % 100;
+  const y = parseInt(part2, 16) % 100;
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: size,
+        height: size,
+        overflow: 'hidden',
+      }}
+    >
+      <img
+        src="https://punkwallet.io/punks.png"
+        style={{
+          position: 'absolute',
+          left: -size * x,
+          top: -size * y,
+          width: size * 100,
+          height: size * 100,
+          imageRendering: 'pixelated',
+        }}
+      />
+    </div>
+  );
+}

packages/sdk-react-provider/src/lib/provider.tsx

@@ -63,7 +63,7 @@ export const MoneriumProvider = ({
         try {
           setIsAuthorized(await sdk.getAccess());
         } catch (error) {
-          console.error('Failed to get access:', error);
+          setError(error);
         } finally {
           setLoadingAuth(false);
           if (sdk?.bearerProfile) {
@@ -88,7 +88,7 @@ export const MoneriumProvider = ({
         try {
           setIsAuthorized(await sdk.getAccess(refreshToken));
         } catch (error) {
-          console.error('Failed to get access:', error);
+          setError(error);
         } finally {
           if (sdk?.bearerProfile) {
             onRefreshTokenUpdate?.(sdk.bearerProfile.refresh_token);

packages/sdk/src/client.ts

@@ -296,6 +296,15 @@ export class MoneriumClient {
       throw new Error('This only works client side');
     }
 
+    const error =
+      new URLSearchParams(window.location.search).get('error') || undefined;
+    const errorDescription =
+      new URLSearchParams(window.location.search).get('error_description') ||
+      undefined;
+    if (error || errorDescription) {
+      throw new Error(errorDescription);
+    }
+
     const authCode =
       new URLSearchParams(window.location.search).get('code') || undefined;