Skip to content
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

Jump to bottom

fix: remaining ux issues #401

Merged
merged 8 commits into from
Oct 2, 2024
Merged

fix: remaining ux issues #401

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f58214b
fix: .find callback breaking at address casing
nezz0746 Oct 2, 2024
7c8ab90
fix: make return button go back to home screen when on first step
nezz0746 Oct 2, 2024
5f45a99
fix: make NO KYC badge clickable
nezz0746 Oct 2, 2024
68dba2f
fix: show user truncated address in profile and propose to KYC & sign…
nezz0746 Oct 2, 2024
a72a49f
fix: center value in token input
nezz0746 Oct 2, 2024
628be84
fix: don't require a connected wallet for request creations
nezz0746 Oct 2, 2024
a200746
fix: don't wrap connect button text
nezz0746 Oct 2, 2024
4d0158e
fix: avoid potential runtime errors when accessing user account ident…
nezz0746 Oct 2, 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
4 changes: 2 additions & 2 deletions src/components/Global/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ const MenuLinks = () => {
}}
className="flex h-full w-full items-center justify-start py-2 uppercase sm:hidden sm:w-max sm:justify-center"
>
<Text display="block">
<Text display="block text-nowrap">
{' '}
{isConnected ? utils.shortenAddress(address ?? '') : 'Create or Connect'}
</Text>
Expand All @@ -282,7 +282,7 @@ const SocialLinks = () => {
<button className="btn btn-large bg-white px-2 ">Profile</button>
</Link>
<button
className="btn btn-large bg-white px-2"
className="btn btn-large text-nowrap bg-white px-2"
onClick={() => {
web3modalOpen()
}}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/TokenAmountInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit }: To
className={`relative max-w-96 rounded-none border border-n-1 px-2 py-4 dark:border-white ${className}`}
action=""
>
<div className="flex h-14 w-full flex-row items-center justify-center gap-1 ">
<div className="flex h-14 w-full flex-row items-center justify-center gap-1">
{}
{selectedTokenPrice &&
!utils.estimateStableCoin(selectedTokenPrice) &&
Expand All @@ -53,7 +53,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit }: To
<label className={`sr-only text-h1 `}>$</label>
))}
<input
className={`h-12 w-[4ch] max-w-80 bg-transparent text-h1 outline-none transition-colors placeholder:text-h1 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1`}
className={`h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1`}
placeholder={'0.00'}
onChange={(e) => {
const value = utils.formatAmountWithoutComma(e.target.value)
Expand Down
1 change: 1 addition & 0 deletions src/components/Global/TokenSelector/TokenSelector.consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export interface CombinedType extends interfaces.IPeanutChainDetails {

export interface TokenSelectorProps {
classNameButton?: string
shouldBeConnected?: boolean
}

export interface TokenSelectorXChainProps extends TokenSelectorProps {
Expand Down
14 changes: 9 additions & 5 deletions src/components/Global/TokenSelector/TokenSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,23 @@ import { useWalletType } from '@/hooks/useWalletType'
import Icon from '../Icon'
import { CrispButton } from '@/components/CrispChat'

const TokenSelector = ({ classNameButton }: _consts.TokenSelectorProps) => {
const TokenSelector = ({ classNameButton, shouldBeConnected = true }: _consts.TokenSelectorProps) => {
const [visible, setVisible] = useState(false)
const [filterValue, setFilterValue] = useState('')
const focusButtonRef = useRef<HTMLButtonElement>(null)
const [showFallback, setShowFallback] = useState(false)
/**
* If the user is not connected, we show a fallback screen to search for tokens directly,
* instead of showing the balances.
*/
const [showFallback, setShowFallback] = useState(!shouldBeConnected)

const { balances, hasFetchedBalances } = useBalance()
const { selectedChainID, selectedTokenAddress, setSelectedTokenAddress, setSelectedChainID } = useContext(
context.tokenSelectorContext
)
const { isConnected } = useAccount()
const { open } = useWeb3Modal()
const { safeInfo, walletType, environmentInfo } = useWalletType()
const { safeInfo, walletType } = useWalletType()
const [tokenPlaceholders, setTokenPlaceholders] = useState<{ [key: string]: boolean }>({})
const [chainPlaceholders, setChainPlaceholders] = useState<{ [key: string]: boolean }>({})

Expand Down Expand Up @@ -151,12 +155,12 @@ const TokenSelector = ({ classNameButton }: _consts.TokenSelectorProps) => {
title={'Select Token'}
classNameWrapperDiv="px-2 pb-7 pt-8"
classWrap="max-w-[32rem]"
showPrev={showFallback}
showPrev={shouldBeConnected ? showFallback : false}
onPrev={() => {
setShowFallback(false)
}}
>
{!isConnected ? (
{!isConnected && shouldBeConnected ? (
<div className="flex h-full w-full flex-col items-center justify-center gap-4 px-2 ">
<label className="text-center text-h5">Connect a wallet to select a token to send.</label>
<button
Expand Down
2 changes: 1 addition & 1 deletion src/components/Kyc/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const KYCComponent = () => {
</div>
) : (
<GlobalKYCComponent
intialStep={user ? 1 : 0}
intialStep={user?.user?.email ? 1 : 0}
nezz0746 marked this conversation as resolved.
Show resolved Hide resolved
offrampForm={{
email: user?.user?.email ?? '',
name: user?.user?.full_name ?? '',
Expand Down
32 changes: 18 additions & 14 deletions src/components/Profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client'

import Icon from '../Global/Icon'
import * as consts from '@/constants'
import { createAvatar } from '@dicebear/core'
import { identicon } from '@dicebear/collection'
import MoreInfo from '../Global/MoreInfo'
import * as components from './Components'
import { useContext, useEffect, useRef, useState } from 'react'
import { Divider, ToastId, useToast } from '@chakra-ui/react'
Expand All @@ -16,11 +16,10 @@ import Modal from '../Global/Modal'
import { useAuth } from '@/context/authContext'
import ImageEdit from '../Global/ImageEdit'
import TextEdit from '../Global/TextEdit'
import IframeWrapper from '../Global/IframeWrapper'
import Link from 'next/link'
import * as context from '@/context'
import Loading from '../Global/Loading'
import peanut, { generateKeysFromString } from '@squirrel-labs/peanut-sdk'

const tabs = [
{
title: 'History',
Expand Down Expand Up @@ -391,18 +390,23 @@ export const Profile = () => {
}}
/>

{user?.user?.email && (
<span className="flex justify-center gap-1 text-h8 font-normal">
{user?.user?.email}
<div className={`flex flex-row items-center justify-center `}>
<div
className={`kyc-badge ${user?.user?.kycStatus === 'verified' ? 'bg-kyc-green text-black' : 'bg-gray-1 text-white'} w-max px-2 py-1 `}
>
{user?.user?.kycStatus === 'verified' ? 'KYC' : 'NO KYC'}
</div>
<span className="flex justify-center gap-1 text-h8 font-normal">
{user?.user?.email ??
utils.shortenAddressLong(user.accounts[0].account_identifier)}
nezz0746 marked this conversation as resolved.
Show resolved Hide resolved
<div className={`flex flex-row items-center justify-center `}>
<div
className={`kyc-badge select-none ${user?.user?.kycStatus === 'verified' ? 'bg-kyc-green px-2 py-1 text-black' : 'bg-gray-1 text-white hover:ring-2 hover:ring-gray-2'} w-max`}
>
{user?.user?.kycStatus === 'verified' ? (
'KYC'
) : (
<Link className="px-2 py-1" href={'/kyc'}>
NO KYC
</Link>
)}
nezz0746 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</span>
)}
</div>
</span>
</div>
</div>
<button className="btn btn-xl h-8 w-full" onClick={handleLogout}>
Expand Down
6 changes: 5 additions & 1 deletion src/components/Request/Create/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import { createElement, useEffect, useState } from 'react'
import * as _consts from './Create.consts'
import { IAttachmentOptions } from '@/components/Create/Create.consts'
import { useAccount } from 'wagmi'
import { useRouter } from 'next/navigation'

export const CreateRequestLink = () => {
const router = useRouter()
const [step, setStep] = useState<_consts.ICreateScreenState>(_consts.INIT_VIEW_STATE)
const [tokenValue, setTokenValue] = useState<undefined | string>(undefined)
const [usdValue, setUsdValue] = useState<undefined | string>(undefined)
Expand All @@ -29,7 +31,9 @@ export const CreateRequestLink = () => {
}

const handleOnPrev = () => {
if (step.idx === 0) return
if (step.idx === 0) {
return router.push('/')
}
const newIdx = step.idx - 1
setStep(() => ({
screen: _consts.CREATE_SCREEN_FLOW[newIdx],
Expand Down
18 changes: 4 additions & 14 deletions src/components/Request/Create/Views/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import TokenAmountInput from '@/components/Global/TokenAmountInput'
import * as _consts from '../Create.consts'
import FileUploadInput from '@/components/Global/FileUploadInput'
import { useAccount } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useCallback, useContext, useEffect, useState } from 'react'
import { useContext, useEffect, useState } from 'react'
import * as context from '@/context'
import Loading from '@/components/Global/Loading'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
Expand All @@ -26,8 +24,6 @@ export const InitialView = ({
recipientAddress,
setRecipientAddress,
}: _consts.ICreateScreenProps) => {
const { isConnected, address } = useAccount()
const { open } = useWeb3Modal()
const { balances } = useBalance()
const { selectedTokenPrice, inputDenomination, selectedChainID, selectedTokenAddress, selectedTokenDecimals } =
useContext(context.tokenSelectorContext)
Expand All @@ -41,10 +37,6 @@ export const InitialView = ({
inputDenomination === 'TOKEN' ? tokenValue : usdValue
)

const handleConnectWallet = async () => {
open()
}

const handleOnNext = async () => {
if (!recipientAddress) {
setErrorState({
Expand Down Expand Up @@ -131,11 +123,10 @@ export const InitialView = ({
}}
tokenValue={_tokenValue}
onSubmit={() => {
if (!isConnected) handleConnectWallet()
else handleOnNext()
handleOnNext()
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

💡 Codebase verification

Potential Wallet Connection Dependencies Found: Review Required

Wallet connection logic remains in the following files:

  • src/components/Request/Create/Create.tsx
  • src/components/Request/Pay/Views/Initial.view.tsx
  • src/components/Create/Link/Input.view.tsx
  • src/components/Create/Link/Success.view.tsx
  • src/components/Create/Link/Initial.view.tsx
  • src/components/Create/Link/Confirm.view.tsx
  • src/components/Create/useCreateLink.tsx

The removal of handleConnectWallet in Initial.view.tsx may affect functionalities that rely on wallet connections. Please verify that downstream processes still operate correctly without the wallet connection check.

🔗 Analysis chain

LGTM: Simplified user flow, but verify downstream impacts.

The direct call to handleOnNext() without wallet connection checks simplifies the user flow, aligning with the removal of wallet connection logic. This change allows users to proceed without being connected to a wallet.

However, let's verify that this change doesn't introduce issues later in the process where a wallet connection might be required. Run the following script to check for any wallet connection requirements in the subsequent steps:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for wallet connection requirements in the payment request flow

# Test: Search for wallet connection logic in related components
rg --type typescript -g '**/{Create,Pay}/**/*.tsx' 'useAccount|useWeb3Modal|connect.*wallet'

Length of output: 177

Script:

#!/bin/bash
# Description: Re-run the wallet connection logic search with corrected rg command

# Test: Search for wallet connection logic in related components
rg --type typescript -g '**/{Create,Pay}/**/*.tsx' 'useAccount|useWeb3Modal|connect.*wallet'

Length of output: 129

Script:

#!/bin/bash
# Description: Search for wallet connection logic in Create and Pay components using corrected rg command

# Test: Search for wallet connection logic in related components
rg -g '**/{Create,Pay}/**/*.tsx' 'useAccount|useWeb3Modal|connect.*wallet'

Length of output: 1781

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think removing the connect prompts on the request page should break anything since it's isolated @Hugo0 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor

Choose a reason for hiding this comment

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

I think you're right!

}}
/>
<TokenSelector classNameButton="w-full" />
<TokenSelector classNameButton="w-full" shouldBeConnected={false} />

<FileUploadInput attachmentOptions={attachmentOptions} setAttachmentOptions={setAttachmentOptions} />
<AddressInput
Expand Down Expand Up @@ -164,8 +155,7 @@ export const InitialView = ({
<button
className="wc-disable-mf btn-purple btn-xl "
onClick={() => {
if (!isConnected) handleConnectWallet()
else handleOnNext()
handleOnNext()
}}
disabled={!isValidRecipient || inputChanging || isLoading || !tokenValue}
>
Expand Down
17 changes: 7 additions & 10 deletions src/components/Request/Pay/Views/Initial.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,12 @@ export const InitialView = ({
}
}

const chainDetails = consts.peanutTokenDetails.find((chain) => chain.chainId === requestLinkData.chainId)

const tokenRequestedLogoURI = chainDetails?.tokens.find((token) =>
utils.compareTokenAddresses(token.address, requestLinkData.tokenAddress)
)?.logoURI

return (
<div className="flex w-full flex-col items-center justify-center gap-6 text-center">
{(requestLinkData.reference || requestLinkData.attachmentUrl) && (
Expand Down Expand Up @@ -240,16 +246,7 @@ export const InitialView = ({
<div>
<div className="flex flex-row items-center justify-center gap-2 pl-1 text-h7">
<div className="relative h-6 w-6">
<img
src={
consts.peanutTokenDetails
.find((chain) => chain.chainId === requestLinkData.chainId)
?.tokens.find((token) => token.address === requestLinkData.tokenAddress)
?.logoURI
}
className="absolute left-0 top-0 h-6 w-6"
alt="logo"
/>
<img src={tokenRequestedLogoURI} className="absolute left-0 top-0 h-6 w-6" alt="logo" />
<img
src={
consts.supportedPeanutChains.find(
Expand Down