Merge pull request #27 from algorandfoundation/chore/update-ui-compon…

…ents chore(dapp-ui): add transaction store
algorandfoundation · Jun 14, 2024 · 18e6452 · 18e6452
2 parents 2c68d47 + c617361
commit 18e6452
Show file tree

Hide file tree

Showing 13 changed files with 343 additions and 126 deletions.
diff --git a/sites/dapp-ui/src/App.tsx b/sites/dapp-ui/src/App.tsx
@@ -122,7 +122,7 @@ export default function ProviderApp() {
       client.off('connect', handleSocketConnect);
       client.off('disconnect', handleSocketDisconnect);
     };
-  }, [client]);
+  }, [client, setAddress]);
   return (
     <SignalClientContext.Provider
       value={{

diff --git a/sites/dapp-ui/src/Layout.tsx b/sites/dapp-ui/src/Layout.tsx
@@ -1,7 +1,6 @@
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material';
@@ -29,10 +28,7 @@ export default function Layout({ children }: PropsWithChildren) {
 
   return (
     <>
-      <AppBar
-        position="sticky"
-        sx={isDarkMode ? { background: 'transparent', boxShadow: 'none' } : {}}
-      >
+      <AppBar position="sticky" sx={isDarkMode ? { background: 'black' } : {}}>
         <Toolbar>
           <SessionMenu />
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
@@ -78,9 +74,14 @@ export default function Layout({ children }: PropsWithChildren) {
       <Container
         component="main"
         maxWidth="md"
-        sx={{ display: 'flex', height: 'calc(100vh - 64px)', overflow: 'auto' }}
+        sx={{
+          my: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          maxWidth: '100vw',
+        }}
       >
-        <Box sx={{ my: 4, flex: 1 }}>{children}</Box>
+        {children}
       </Container>
       <div className="ocean">
         <div className="bubble bubble--1" style={bubbleStyle}></div>

diff --git a/sites/dapp-ui/src/components/ConnectModal.tsx b/sites/dapp-ui/src/components/ConnectModal.tsx
@@ -28,13 +28,13 @@ export function ConnectModal({
   color,
 }: {
   color?:
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning';
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'warning';
 }) {
   const { client, dataChannel } = useSignalClient();
   const navigate = useNavigate();
@@ -60,10 +60,10 @@ export function ConnectModal({
           },
           {
             urls: [
-              "turn:global.relay.metered.ca:80",
-              "turn:global.relay.metered.ca:80?transport=tcp",
-              "turn:global.relay.metered.ca:443",
-              "turns:global.relay.metered.ca:443?transport=tcp"
+              'turn:global.relay.metered.ca:80',
+              'turn:global.relay.metered.ca:80?transport=tcp',
+              'turn:global.relay.metered.ca:443',
+              'turns:global.relay.metered.ca:443?transport=tcp',
             ],
             // default username and credential when the turn server doesn't
             // use auth, the client still requires a value
@@ -102,32 +102,32 @@ export function ConnectModal({
               <Box sx={style}>
                 <Box
                   sx={{
-                    position: "relative"
+                    position: 'relative',
                   }}
                 >
                   <Box
                     component="img"
                     src={barcode}
                     sx={{
-                      maxHeight: "50vh",
-                      maxWidth: "50vh",
+                      maxHeight: '50vh',
+                      maxWidth: '50vh',
                       height: {
                         xs: 250,
                         sm: 600,
                         md: 900,
                         lg: 1200,
-                        xl: 1536
+                        xl: 1536,
                       },
                       width: {
                         xs: 250,
                         sm: 600,
                         md: 900,
                         lg: 1200,
-                        xl: 1536
+                        xl: 1536,
                       },
-                      position: "absolute",
-                      transform: "translate(-50%, -50%)",
-                      top: "50%"
+                      position: 'absolute',
+                      transform: 'translate(-50%, -50%)',
+                      top: '50%',
                     }}
                   />
                 </Box>

diff --git a/sites/dapp-ui/src/components/EmptyAccountCard.tsx b/sites/dapp-ui/src/components/EmptyAccountCard.tsx
@@ -0,0 +1,22 @@
+import Card from '@mui/material/Card';
+import { CardHeader, Link } from '@mui/material';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+
+export function EmptyAccountCard({ address }: { address: string }) {
+  return (
+    <Card sx={{ flex: 1, margin: 1.25 }} raised>
+      <CardHeader
+        title="Account Not Funded"
+        subheader={
+          <Link href="https://bank.testnet.algorand.network" target="_blank">
+            Visit the faucet to fund your account.
+          </Link>
+        }
+      ></CardHeader>
+      <CardContent>
+        <Typography>{address}</Typography>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/sites/dapp-ui/src/components/MessageCard.tsx b/sites/dapp-ui/src/components/MessageCard.tsx
@@ -0,0 +1,46 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { Message } from '@/store.ts';
+import { CardHeader } from '@mui/material';
+
+export function MessageCard({ msg }: { msg: Message }) {
+  let message;
+  const isLocal = msg.type === 'local';
+  switch (msg.data.type) {
+    case 'credential':
+      message = isLocal
+        ? `🔑 Credential Sent: ${msg.data.id}`
+        : `🔑 Credential Received: ${msg.data.id}`;
+      break;
+    case 'transaction':
+      message = isLocal
+        ? `🚚 Transaction Sent: ${msg.data.txId}`
+        : `🚚 Transaction Received: ${msg.data.txId}`;
+      break;
+    case 'transaction-signature':
+      message = isLocal
+        ? `🔏 Signature Sent: ${msg.data.txId}`
+        : `🔏 Signature Received: ${msg.data.txId}`;
+      break;
+    default:
+      message = 'Unknown message';
+  }
+  return (
+    <Card sx={{ flex: 1, margin: 1.25 }} raised>
+      <CardHeader
+        title={`Peer: ${msg.type}`}
+        subheader={new Date(msg.timestamp).toLocaleString()}
+      >
+        <Typography variant="h5" color="text.secondary">
+          Message
+        </Typography>
+      </CardHeader>
+      <CardContent>
+        <Typography variant="body1" color="text.secondary">
+          {message}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/sites/dapp-ui/src/components/TransactionCard.tsx b/sites/dapp-ui/src/components/TransactionCard.tsx
@@ -0,0 +1,40 @@
+import Card from '@mui/material/Card';
+import { LiquidTransaction } from '@/store.ts';
+import { CardHeader, Link } from '@mui/material';
+
+export function TransactionCard({ txn }: { txn: LiquidTransaction }) {
+  const isLive = txn.status === 'confirmed';
+  let emoji;
+  switch (txn.status) {
+    case 'confirmed':
+      emoji = '✅';
+      break;
+    case 'submitted':
+      emoji = '🔵';
+      break;
+    case 'failed':
+      emoji = '❌';
+      break;
+    default:
+      emoji = '🟡';
+  }
+  return (
+    <Card sx={{ flex: 1, margin: 1.25 }} raised>
+      <CardHeader
+        title={`${emoji} ${txn.txn.type} transaction: ${txn.status}`}
+        subheader={
+          isLive ? (
+            <Link
+              href={`https://testnet.explorer.perawallet.app/tx/${txn.txId}`}
+              target="_blank"
+            >
+              {txn.txn.txID()}
+            </Link>
+          ) : (
+            txn.txn.txID()
+          )
+        }
+      ></CardHeader>
+    </Card>
+  );
+}
diff --git a/sites/dapp-ui/src/components/user/SessionMenu.tsx b/sites/dapp-ui/src/components/user/SessionMenu.tsx
@@ -30,7 +30,7 @@ export function SessionMenu() {
     if (isConnected && !hasDataChannel) {
       setBadgeColor('warning');
     }
-  }, [dataChannel, isConnected]);
+  }, [dataChannel, isConnected, hasDataChannel]);
 
   return (
     <>

diff --git a/sites/dapp-ui/src/components/user/StatusCard.tsx b/sites/dapp-ui/src/components/user/StatusCard.tsx
@@ -6,6 +6,11 @@ import Typography from '@mui/material/Typography';
 import ShareIcon from '@mui/icons-material/Share';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { User } from './types.ts';
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
+import { SignalClientContext } from '@/hooks/useSignalClient.ts';
+import { useContext } from 'react';
+import { useUserState } from '@/hooks';
 export type ProfileCardProps = {
   socket: {
     isConnected: boolean;
@@ -26,29 +31,49 @@ export type ProfileCardProps = {
   user: User | null;
 };
 export function StatusCard({ session, user, socket }: ProfileCardProps) {
-  const { cookie, ...sessionData } = session;
+  const { refetch } = useUserState();
+  const { client, setDataChannel } = useContext(SignalClientContext);
   return (
     <Card sx={{ maxWidth: 300, zIndex: 1000 }} raised>
       <CardContent>
-        <Typography variant="h5" color="text.secondary">
-          Session
-        </Typography>
-        <pre>{JSON.stringify(sessionData, null, 2)}</pre>
-        <Typography variant="h5" color="text.secondary">
-          Signaling Service
-        </Typography>
-        <pre>{JSON.stringify(socket, null, 2)}</pre>
-        <Typography variant="h5" color="text.secondary">
-          Cookie
-        </Typography>
-        <pre>{JSON.stringify(cookie, null, 2)}</pre>
+        <List subheader="Session">
+          <ListItem>
+            <Typography variant="h6" color="text.secondary">
+              Address:{' '}
+              {session?.wallet
+                ? `${session.wallet.substring(
+                    0,
+                    4,
+                  )}...${session.wallet.substring(
+                    session.wallet.length - 4,
+                    session.wallet.length,
+                  )}`
+                : 'Anonymous'}
+            </Typography>
+          </ListItem>
+        </List>
+        <List subheader="Service">
+          <ListItem>
+            <Typography variant="h6" color="text.secondary">
+              Connected: {socket.isConnected ? 'Yes' : 'No'}
+            </Typography>
+          </ListItem>
+          <ListItem>
+            <Typography variant="h6" color="text.secondary">
+              DataChannel: {socket.hasDataChannel ? 'Yes' : 'No'}
+            </Typography>
+          </ListItem>
+        </List>
       </CardContent>
       {user && (
         <CardActions disableSpacing>
           <IconButton
             aria-label="sign out"
-            onClick={() => {
-              fetch('/auth/logout');
+            onClick={async () => {
+              await fetch('/auth/logout');
+              await refetch();
+              client && client.close();
+              setDataChannel(null);
             }}
           >
             <LogoutIcon />

diff --git a/sites/dapp-ui/src/hooks/useSignalClient.ts b/sites/dapp-ui/src/hooks/useSignalClient.ts
@@ -7,7 +7,7 @@ type SignalClientState = {
   status: 'connected' | 'disconnected';
   setStatus: (_: 'connected' | 'disconnected') => void;
   dataChannel: RTCDataChannel | null;
-  setDataChannel: (_: RTCDataChannel) => void;
+  setDataChannel: (_: RTCDataChannel | null) => void;
 };
 export const SignalClientContext = createContext({
   client: null,

diff --git a/sites/dapp-ui/src/index.css b/sites/dapp-ui/src/index.css
@@ -1,15 +1,9 @@
-#root, body, html {
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden !important;
-}
-
 .ocean {
     position: absolute;
     top: 0;
     left: 0;
     height: 100vh;
-    width: 100vw;
+    width: 98vw;
     z-index: -10;
     overflow: hidden !important;
 }