Add transaction feedback to card

src/components/LoadingOverlay.tsx

@@ -1,13 +1,90 @@
-import React from 'react'
-import { Container, Spinner } from '@chakra-ui/react'
-
-export const LoadingOverlay: React.FC = () => (
-    <Container
-        variant='disabledOverlay'
-        mt='32px'
-        size='16px'
-        style={{ display: 'flex', justifyContent: 'center' }}
-    >
-        <Spinner size='lg' color='text' />
-    </Container>
-)
+import React, { useEffect, useState } from 'react'
+import { Container, Spinner, Text, Badge } from '@chakra-ui/react'
+import { useTransactionState } from './Transaction'
+
+type LoadingBadgeProps = {
+    type: string
+}
+
+const LoadingBadge = ({ type }: LoadingBadgeProps) => {
+    switch (type) {
+        case 'waitingForApproval':
+        case 'waitingForConfirmation':
+            return (
+                <Badge ml='16px' colorScheme='purple'>
+                    Waiting
+                </Badge>
+            )
+        case 'failed':
+            return (
+                <Badge ml='16px' colorScheme='red'>
+                    Failed
+                </Badge>
+            )
+        case 'cancelled':
+            return (
+                <Badge ml='16px' colorScheme='orange'>
+                    Cancelled
+                </Badge>
+            )
+        default:
+            return (
+                <Badge ml='16px' colorScheme='teal'>
+                    Confirmed
+                </Badge>
+            )
+    }
+}
+
+type LoadingFeedbackProps = {
+    type: string
+}
+
+const LoadingFeedback = ({ type }: LoadingFeedbackProps) => {
+    const [localType, setLocalType] = useState<null | string>(null)
+    function parseType(type: string) {
+        // Message usually arrives as camelCase eg waitingForApproval
+        const messageWithSpaces = type.replace(/([a-z](?=[A-Z]))/g, '$1 ')
+        const messageCapitalised =
+            messageWithSpaces.charAt(0).toUpperCase() +
+            messageWithSpaces.slice(1)
+        const specialCases = ['cancelled', 'failed', 'confirmed']
+
+        return specialCases.includes(type)
+            ? `Transaction ${messageCapitalised}!`
+            : messageCapitalised
+    }
+    useEffect(() => {
+        if (type) {
+            setLocalType(type)
+        }
+    }, [type])
+    return (
+        <>
+            {localType && localType !== 'idle' && (
+                <Container
+                    variant='disabledOverlay'
+                    p={0}
+                    mt='32px'
+                    size='16px'
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'start',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Spinner size='lg' color='text' />
+                    <LoadingBadge type={localType} />
+                    <Text ml='16px' px={0}>
+                        {parseType(localType)}
+                    </Text>
+                </Container>
+            )}
+        </>
+    )
+}
+
+export const LoadingOverlay: React.FC = () => {
+    const [transactionState] = useTransactionState()
+    return <LoadingFeedback type={transactionState.type} />
+}

src/components/Stability/ActiveDeposit.tsx

@@ -113,7 +113,7 @@ export const ActiveDeposit: React.FC = () => {
                 </ClaimAndMove>
             )}
 
-            {isWaitingForTransaction && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Stability/StabilityDepositEditor.tsx

@@ -144,7 +144,7 @@ export const StabilityDepositEditor: React.FC<StabilityDepositEditorProps> = ({
                 {children}
             </Box>
 
-            {changePending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Staking/ReadOnlyStake.tsx

@@ -69,7 +69,7 @@ export const ReadOnlyStake: React.FC = () => {
                 <StakingGainsAction />
             </HStack>
 
-            {changePending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Staking/StakingEditor.tsx

@@ -125,7 +125,7 @@ export const StakingEditor: React.FC<StakingEditorProps> = ({
                 )}
             </Box>
             {children}
-            {changePending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Transaction.tsx

@@ -105,7 +105,7 @@ export const TransactionProvider: React.FC = ({ children }) => {
     )
 }
 
-const useTransactionState = () => {
+export const useTransactionState = () => {
     const transactionState = useContext(TransactionContext)
 
     if (!transactionState) {
@@ -449,38 +449,39 @@ export const TransactionMonitor: React.FC = () => {
     }
 
     return (
-        <Flex
-            sx={{
-                alignItems: 'center',
-                bg:
-                    transactionState.type === 'confirmed'
-                        ? '#20113f'
-                        : transactionState.type === 'cancelled'
-                        ? '#CECECE'
-                        : transactionState.type === 'failed'
-                        ? 'salmon'
-                        : '#4C5E9D',
-                p: 3,
-                pl: 4,
-                position: 'fixed',
-                width: '100vw',
-                bottom: 0,
-                overflow: 'hidden',
-            }}
-        >
-            <Box sx={{ mr: 3, width: '40px', height: '40px' }}>
-                <TransactionProgressDonut state={transactionState.type} />
-            </Box>
-
-            <Text sx={{ fontSize: '20px', color: 'white' }}>
-                {transactionState.type === 'waitingForConfirmation'
-                    ? 'Waiting for confirmation'
-                    : transactionState.type === 'cancelled'
-                    ? 'Cancelled'
-                    : transactionState.type === 'failed'
-                    ? transactionState.error.message
-                    : 'Confirmed'}
-            </Text>
-        </Flex>
+        <></>
+        // <Flex
+        //     sx={{
+        //         alignItems: 'center',
+        //         bg:
+        //             transactionState.type === 'confirmed'
+        //                 ? '#20113f'
+        //                 : transactionState.type === 'cancelled'
+        //                 ? '#CECECE'
+        //                 : transactionState.type === 'failed'
+        //                 ? 'salmon'
+        //                 : '#4C5E9D',
+        //         p: 3,
+        //         pl: 4,
+        //         position: 'fixed',
+        //         width: '100vw',
+        //         bottom: 0,
+        //         overflow: 'hidden',
+        //     }}
+        // >
+        //     <Box sx={{ mr: 3, width: '40px', height: '40px' }}>
+        //         <TransactionProgressDonut state={transactionState.type} />
+        //     </Box>
+
+        //     <Text sx={{ fontSize: '20px', color: 'white' }}>
+        //         {transactionState.type === 'waitingForConfirmation'
+        //             ? 'Waiting for confirmation'
+        //             : transactionState.type === 'cancelled'
+        //             ? 'Cancelled'
+        //             : transactionState.type === 'failed'
+        //             ? transactionState.error.message
+        //             : 'Confirmed'}
+        //     </Text>
+        // </Flex>
     )
 }

src/components/Trove/Adjusting.tsx

@@ -333,7 +333,7 @@ export const Adjusting: React.FC = () => {
                     )}
                 </HStack>
             </Box>
-            {isTransactionPending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Trove/Opening.tsx

@@ -218,7 +218,7 @@ export const Opening: React.FC = () => {
                     )}
                 </HStack>
             </Box>
-            {isTransactionPending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }

src/components/Trove/TroveEditor.tsx

@@ -101,7 +101,7 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
                 {children}
             </Box>
 
-            {changePending && <LoadingOverlay />}
+            <LoadingOverlay />
         </CardBase>
     )
 }