From 44ed666369457b18ca1d5917f86fe87299c0c0cb Mon Sep 17 00:00:00 2001
From: Kyle Breeding <kyle.breeding@algorand.foundation>
Date: Tue, 18 Jun 2024 12:51:45 -0700
Subject: [PATCH] feat(dapp-ui): added loading status and indicator for
 conveying progress between link-message and receiving a data channel

---
 sites/dapp-ui/src/App.tsx                     |  5 +++
 sites/dapp-ui/src/components/ConnectModal.tsx | 33 ++++++++++++++-----
 .../src/components/user/StatusCard.tsx        | 10 ++++++
 sites/dapp-ui/src/hooks/useSignalClient.ts    |  8 +++--
 4 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/sites/dapp-ui/src/App.tsx b/sites/dapp-ui/src/App.tsx
index 693a996..62639b6 100644
--- a/sites/dapp-ui/src/App.tsx
+++ b/sites/dapp-ui/src/App.tsx
@@ -79,6 +79,7 @@ export default function ProviderApp() {
   const [status, setStatus] = useState<'connected' | 'disconnected'>(
     'disconnected',
   );
+  const [loading, setLoading] = useState<boolean>(false);
   useEffect(() => {
     if (!client) return;
     function handleDataChannel(dc: RTCDataChannel) {
@@ -91,6 +92,7 @@ export default function ProviderApp() {
           }
         }
       }
+      setLoading(false);
       setDataChannel(dc);
     }
     client.on('offer-description', (description) => {
@@ -114,6 +116,7 @@ export default function ProviderApp() {
     client.on('connect', handleSocketConnect);
     function handleLinkMessage(msg: LinkMessage) {
       console.log('LinkMessage', msg);
+      setLoading(true);
       setAddress(msg.wallet);
     }
     client.on('link-message', handleLinkMessage);
@@ -138,6 +141,8 @@ export default function ProviderApp() {
         setClient,
         status,
         setStatus,
+        loading,
+        setLoading,
         dataChannel,
         setDataChannel,
       }}
diff --git a/sites/dapp-ui/src/components/ConnectModal.tsx b/sites/dapp-ui/src/components/ConnectModal.tsx
index 5e31376..5a7ef74 100644
--- a/sites/dapp-ui/src/components/ConnectModal.tsx
+++ b/sites/dapp-ui/src/components/ConnectModal.tsx
@@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
 import Modal from '@mui/material/Modal';
 import { useState } from 'react';
 import { Fade } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import { useNavigate } from 'react-router-dom';
 import { useSignalClient } from '@/hooks/useSignalClient.ts';
 import { SignalClient } from '@algorandfoundation/liquid-client';
@@ -28,15 +29,15 @@ export function ConnectModal({
   color,
 }: {
   color?:
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'warning';
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning';
 }) {
-  const { client, dataChannel } = useSignalClient();
+  const { client, loading, dataChannel } = useSignalClient();
   const navigate = useNavigate();
   const [requestId] = useState(SignalClient.generateRequestId());
 
@@ -130,6 +131,22 @@ export function ConnectModal({
                       top: '50%',
                     }}
                   />
+                  {loading && (
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        height: '80px',
+                        width: '80px',
+                      }}
+                    >    
+                      <CircularProgress
+                        size={80}
+                      />
+                    </Box>
+                  )}
                 </Box>
               </Box>
             </Fade>
diff --git a/sites/dapp-ui/src/components/user/StatusCard.tsx b/sites/dapp-ui/src/components/user/StatusCard.tsx
index 073464c..cbe1ea6 100644
--- a/sites/dapp-ui/src/components/user/StatusCard.tsx
+++ b/sites/dapp-ui/src/components/user/StatusCard.tsx
@@ -33,6 +33,9 @@ export type ProfileCardProps = {
 export function StatusCard({ session, user, socket }: ProfileCardProps) {
   const { refetch } = useUserState();
   const { client, setDataChannel } = useContext(SignalClientContext);
+
+  const isLoading = socket.isConnected && !socket.hasDataChannel;
+
   return (
     <Card sx={{ maxWidth: 300, zIndex: 1000 }} raised>
       <CardContent>
@@ -81,6 +84,13 @@ export function StatusCard({ session, user, socket }: ProfileCardProps) {
           <IconButton aria-label="share">
             <ShareIcon />
           </IconButton>
+          {
+            isLoading && (
+              <Typography variant="h6" color="text.secondary">
+                Loading...
+              </Typography>
+            )
+          }
         </CardActions>
       )}
     </Card>
diff --git a/sites/dapp-ui/src/hooks/useSignalClient.ts b/sites/dapp-ui/src/hooks/useSignalClient.ts
index 562b51f..f75f163 100644
--- a/sites/dapp-ui/src/hooks/useSignalClient.ts
+++ b/sites/dapp-ui/src/hooks/useSignalClient.ts
@@ -18,6 +18,10 @@ export const SignalClientContext = createContext({
   setStatus: (_: 'connected' | 'disconnected') => {
     console.log(_);
   },
+  loading: false,
+  setLoading: (_: boolean) => {
+    console.log(_);
+  },
   dataChannel: null,
   setDataChannel: (_: RTCDataChannel) => {
     console.log(_);
@@ -25,10 +29,10 @@ export const SignalClientContext = createContext({
 } as SignalClientState);
 
 export function useSignalClient() {
-  const { client, status, dataChannel } = useContext(SignalClientContext);
+  const { client, status, loading, dataChannel } = useContext(SignalClientContext);
   if (!client)
     throw new Error(
       'SignalClient not found, make sure to wrap your component with <SignalClientProvider>',
     );
-  return { client, status, dataChannel };
+  return { client, status, loading, dataChannel };
 }