Fix pending states in examples (#69)

0xsequence · May 28, 2024 · aca7818 · aca7818
1 parent 7dd9cb2
commit aca7818
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system'
+import { Box, Text, Card, Button, Select, SignoutIcon, Spinner } from '@0xsequence/design-system'
 import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
@@ -221,7 +221,7 @@ export const Connected = () => {
     <>
       <Header />
 
-      <Box flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
+      <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4">
           <Box flexDirection="column" gap="2">
             <Text color="text50" fontSize="small" fontWeight="medium">
@@ -428,6 +428,15 @@ const CardButton = (props: CardButtonProps) => {
       <Text as="p" variant="small" color="text50">
         {description}
       </Text>
+
+      {props.isPending && (
+        <Box gap="2" alignItems="center">
+          <Spinner />
+          <Text variant="small" color="text50">
+            Pending...
+          </Text>
+        </Box>
+      )}
     </Card>
   )
 }

diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Card, Modal, Select, SignoutIcon, Switch, Text, TextInput } from '@0xsequence/design-system'
+import { Box, Button, Card, Modal, Select, SignoutIcon, Spinner, Switch, Text, TextInput } from '@0xsequence/design-system'
 import {
   useStorage,
   useWaasFeeOptions,
@@ -284,7 +284,7 @@ export const Connected = () => {
     <>
       <Header />
 
-      <Box flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
+      <Box paddingX="4" flexDirection="column" justifyContent="center" alignItems="center" style={{ margin: '140px 0' }}>
         <Box flexDirection="column" gap="4">
           <Box flexDirection="column" gap="2">
             <Text color="text50" fontSize="small" fontWeight="medium">
@@ -586,6 +586,15 @@ const CardButton = (props: CardButtonProps) => {
       <Text as="p" variant="small" color="text50">
         {description}
       </Text>
+
+      {props.isPending && (
+        <Box gap="2" alignItems="center">
+          <Spinner size="sm" />
+          <Text variant="small" color="text50">
+            Pending...
+          </Text>
+        </Box>
+      )}
     </Card>
   )
 }