Skip to content

Commit

Permalink
fixed pending txn indicator ui bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewlee348
andrewlee348 committed Dec 16, 2024
1 parent 5667fe6 commit f4ea715
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 54 deletions.
38 changes: 21 additions & 17 deletions src/components/wallet/PendingTxn.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Spinner, Text } from '@0xsequence/design-system'
import { Box, Spinner, Text, truncateAddress, useMediaQuery } from '@0xsequence/design-system'

import NetworkTag from '~/components/network/NetworkTag'

Expand All @@ -13,31 +13,35 @@ export default function PendingTxn({
to: string
amount?: string
}) {
const isMobile = useMediaQuery('isMobile')

return (
<Box flexDirection="column" width="full" gap="5" paddingTop="7">
<Text variant="normal" fontWeight="bold" color="text80">
Pending transactions
</Text>
<Box background="backgroundSecondary" borderRadius="sm" alignItems="center" padding="4" gap="5">
<Spinner size="lg" />

<Box flexDirection="column" gap="1">
<Box flexDirection="row" alignItems="center" gap="1">
<Text variant="normal" fontWeight="medium" color="text80">
Sending {amount} {symbol} on
</Text>

<NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
<Spinner size="md" width="full" />

<Text variant="normal" fontWeight="medium" color="text80">
to
</Text>
<Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
{to}
</Text>
<Box flexDirection="column" gap="1" width="fit">
<Box flexDirection={isMobile ? 'column' : 'row'} gap="1">
<Box alignItems="center" gap="1">
<Text variant="normal" fontWeight="medium" color="text80">
Sending {Number(amount).toFixed(4)} {symbol} on
</Text>
<NetworkTag chainId={chainId} paddingTop="0" paddingBottom="1" />
</Box>
<Box alignItems="center" gap="1">
<Text variant="normal" fontWeight="medium" color="text80">
to
</Text>
<Text variant="normal" fontWeight="medium" color="text80" style={{ fontFamily: 'monospace' }}>
{truncateAddress(to)}
</Text>
</Box>
</Box>

<Text variant="normal" fontWeight="medium" color="text50">
<Text variant="normal" fontWeight="medium" color="text50" width="fit">
Your external wallet will prompt you to confirm the transaction
</Text>
</Box>
Expand Down
82 changes: 46 additions & 36 deletions src/components/wallet/collectibles/ImportCollectible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
const toast = useToast()

const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
const [collectibleManualAddress, setCollectibleManualAddress] = useState<string>('')
const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
const [contractType, setContractType] = useState<CollectibleContractType>(
CollectibleContractTypeValues.ERC721
Expand Down Expand Up @@ -95,6 +95,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
contractType
})
.then(response => {
console.log('response', response)
setManualCollectibleInfo(response)
})
}
Expand All @@ -104,11 +105,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
fetchCollectibleInfo()
}, [selectedNetwork, contractType, collectibleManualAddress, collectibleManualTokenId])

useEffect(() => {
if (selectedNetwork && contractType && selectedCollection) {
}
}, [selectedNetwork, contractType, selectedCollection, selectedCollectibles])

useEffect(() => {
const fetchQueriedCollectibles = async () => {
setQueriedCollectibles([])
Expand All @@ -126,6 +122,8 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
tokenId: tokenId
})

// TODO: potential improvement to show user that the collectible is not owned

if (collectibleInfo.isOwner) {
setQueriedCollectibles(prev => [
...prev,
Expand All @@ -149,10 +147,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
fetchQueriedCollectibles()
}, [queryCollectibleTokenIdsMap])

useEffect(() => {
console.log(selectedCollectibles)
}, [selectedCollectibles])

useEffect(() => {
const fetchCollectionList = async () => {
if (selectedNetwork) {
Expand Down Expand Up @@ -220,7 +214,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
description:
"You'll be able to see this collectible on your browser as long as you don't clear your cache."
})
resetInputs()
onClose()
} catch (error) {
console.error(error)
Expand All @@ -232,11 +225,6 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
}
}

const resetInputs = () => {
setCollectibleManualAddress(undefined)
setCollectibleManualTokenId(undefined)
}

const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
if (file) {
Expand Down Expand Up @@ -506,29 +494,49 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
<Box marginTop="auto">
<Box paddingX="6">
{isAddingCollectibleManually && (
<Box flexDirection="column" marginBottom="6" gap="0.5">
<Text variant="normal" fontWeight="medium" color="text80">
Collectible Address
</Text>
<Box flexDirection="column" gap="3">
<Box flexDirection="column" gap="0.5">
<Text variant="normal" fontWeight="medium" color="text80">
Collectible Address
</Text>

<TextInput
name="collectibleAddress"
value={collectibleManualAddress ?? ''}
onChange={(ev: ChangeEvent<HTMLInputElement>) => {
setCollectibleManualAddress(ev.target.value)
}}
/>
<TextInput
name="collectibleAddress"
value={collectibleManualAddress ?? ''}
onChange={(ev: ChangeEvent<HTMLInputElement>) => {
setCollectibleManualAddress(ev.target.value)
}}
/>
</Box>
<Box flexDirection="column" marginBottom="6" gap="0.5">
<Text variant="normal" fontWeight="medium" color="text80">
Token ID
</Text>

<TextInput
name="collectibleTokenId"
value={collectibleManualTokenId ?? ''}
onChange={(ev: ChangeEvent<HTMLInputElement>) => {
if (ev.target.value === '') {
setCollectibleManualTokenId(undefined)
return
}

setCollectibleManualTokenId(ev.target.value as unknown as number)
}}
/>
</Box>
</Box>
)}

{isFetchingCollectibleInfo && collectibleManualAddress && (
<Box alignItems="center" justifyContent="center">
{isFetchingCollectibleInfo && collectibleManualAddress && collectibleManualTokenId && (
<Box alignItems="center" justifyContent="center" marginBottom="6">
<Spinner size="lg" />
</Box>
)}

{manualCollectibleInfo && !manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
<Box alignItems="center" justifyContent="center">
<Box alignItems="center" justifyContent="center" marginBottom="6">
<Text variant="medium" color="warning">
You do not own this collectible
</Text>
Expand All @@ -547,12 +555,14 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
Your Balance:
</Text>
<Text variant="medium" fontWeight="bold" color="text80">
{Number(
ethers.formatUnits(
manualCollectibleInfo.balance as BigNumberish,
manualCollectibleInfo.decimals ?? 0
)
)}
{manualCollectibleInfo.balance
? Number(
ethers.formatUnits(
manualCollectibleInfo.balance as BigNumberish,
manualCollectibleInfo.decimals ?? 0
)
)
: 1}
</Text>
</Box>
</Card>
Expand Down
7 changes: 6 additions & 1 deletion src/stores/WalletStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,13 @@ export class WalletStore {
}

return { hash }
} catch {
} catch (error) {
this.isSendingTokenTransaction.set(undefined)
this.toast({
variant: 'error',
title: 'External wallet error',
description: (error as any).message
})
throw new Error('Could not create transaction')
}
}
Expand Down

0 comments on commit f4ea715

Please sign in to comment.