Skip to content

fix: enable connect on cashout page + minor UX QoL improvments #429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 9, 2024
Merged

fix: enable connect on cashout page + minor UX QoL improvments #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7182851
fix mobile showing refund payments table
nezz0746 Oct 8, 2024
f762271
add comment about setting initial token value to 0 on cashout
nezz0746 Oct 8, 2024
fd06253
enable cahout connect button when not logged in
nezz0746 Oct 8, 2024
ea6e7b7
refactor: temporarly remove recent recipients from send screen
nezz0746 Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions src/components/Cashout/Components/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,6 @@ export const InitialCashoutView = ({
inputDenomination === 'TOKEN' ? tokenValue : usdValue
)

useEffect(() => {
if (!_tokenValue) {
_setTokenValue('0')
}
}, [])

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting 0 preprends user input with 0, which differs from the behavior from other inputs

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this was a bad hack by me in a previous PR - also bad that it fell through in PR review ^^

praise: nice commenting the code on github and reason for removal

const { prepareCreateLinkWrapper } = useCreateLink()

const { isConnected } = useAccount()
Expand Down Expand Up @@ -402,7 +396,8 @@ export const InitialCashoutView = ({
if (!isConnected) handleConnectWallet()
else handleOnNext()
}}
disabled={isDisabled}
// Only allow the user to proceed if they are connected and the form is valid
disabled={isConnected && isDisabled}
>
{!isConnected ? (
'Connect Wallet'
Expand Down
63 changes: 63 additions & 0 deletions src/components/Create/Components/RecentRecipients.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Icon from '@/components/Global/Icon'
import * as utils from '@/utils'

type RecentRecipientsProps = {
recentRecipients: { address: string; count: number }[]
isLoading: boolean
onClick: (address: string) => void
}

const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipientsProps) => {
if (isLoading) {
return (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-h7 font-bold text-gray-2">Recents</label>
{[0, 1, 2].map((idx) => (
<div
key={idx}
className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
Comment on lines +10 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Praise: appreciate moving Recent recipients into its own component. Way better.

>
<div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
<div className="flex flex-row items-center justify-start gap-2">
<div className="h-6 w-6 animate-colorPulse rounded-full bg-slate-700" />

<div className="h-6 w-24 animate-colorPulse rounded-full bg-slate-700" />
</div>
<div className="h-6 w-24 animate-colorPulse rounded-full bg-slate-700" />
</div>
</div>
))}
</div>
)
}

return (
recentRecipients.length > 0 && (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-h7 font-bold text-gray-2">Recents</label>
{recentRecipients.map((recipient) => (
<div
key={recipient.address}
className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
onClick={() => onClick(recipient.address)}
>
<div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
<div className="flex flex-row items-center justify-start gap-2">
<div className="rounded-full border border-n-1">
<Icon name="profile" className="h-6 w-6" />
</div>
<div className="truncate">{utils.shortenAddressLong(recipient.address, 6)}</div>
</div>
<label className="font-normal">
{' '}
{recipient.count} {recipient.count > 1 ? 'transfers' : 'transfer'}
</label>
</div>
</div>
))}
</div>
)
)
}

export default RecentRecipients
50 changes: 1 addition & 49 deletions src/components/Create/Link/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const CreateLinkInitialView = ({
}}
/>
</div>
{inputValue.length > 0 ? (
{inputValue.length > 0 && (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-h7 font-bold text-gray-2">Search results</label>
<div
Expand All @@ -213,54 +213,6 @@ export const CreateLinkInitialView = ({
{isLoading && <Loading />}
</div>
</div>
) : (
isConnected &&
(recentRecipients.length > 0 ? (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-h7 font-bold text-gray-2">Recents</label>
{recentRecipients.map((recipient) => (
<div
key={recipient.address}
className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
onClick={() => {
handleOnNext(recipient.address)
}}
>
<div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
<div className="flex flex-row items-center justify-start gap-2">
<div className="rounded-full border border-n-1">
<Icon name="profile" className="h-6 w-6" />
</div>
<div className="truncate">{utils.printableAddress(recipient.address)}</div>
</div>
<label className="font-normal">
{' '}
{recipient.count} {recipient.count > 1 ? 'transfers' : 'transfer'}
</label>
</div>
</div>
))}
</div>
) : (
<div className="flex w-full flex-col items-start justify-center gap-2">
<label className="text-h7 font-bold text-gray-2">Recents</label>
{[0, 1, 2].map((idx) => (
<div
key={idx}
className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10"
>
<div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7">
<div className="flex flex-row items-center justify-start gap-2">
<div className="h-6 w-6 animate-colorPulse rounded-full bg-slate-700" />

<div className="h-6 w-24 animate-colorPulse rounded-full bg-slate-700" />
</div>
<div className="h-6 w-24 animate-colorPulse rounded-full bg-slate-700" />
</div>
</div>
))}
</div>
))
)}
{errorState.showError && (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Profile/Components/MobileTableComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const MobileTableComponent = ({
{type === 'history' ? (
<>
{dashboardItem?.type !== 'Link Received' &&
dashboardItem?.type === 'Request Link' &&
dashboardItem?.type !== 'Request Link' &&
dashboardItem?.status === 'pending' && (
<div
onClick={() => {
Expand Down