-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement manual receive address to limit orders (#8065)
* feat: the Great Receive Address Refactor * chore: cleanup * fix: recommit skill issue git rugs * chore: cleanup fetchUnchainedAddress flag * chore: cleanup todos * chore: move limit order recipient address things into useLimitOrderRecipientAddress * feat: wire up recipientAddress to limit orders input * feat: move walletReceiveAddress to react-query * chore: unify naming of sellAccountId within reason * chore: unify naming of manual receive address flags and setters * fix: use correct check for metamask * fix: use runtime support check when deciding whether to show manual address entry * chore: better naming * chore: use hook for shouldForceDisplayManualAddressEntry * fix: invalidate receive address cache when sellAccountId changes * fix: hide receive address ui when wallet receive address is loading * fix: corrupted accountId in redux causing receive address dramas * fix: dont require account number when getting a quote
- Loading branch information
1 parent
c5b58f9
commit ccdcd4f
Showing
18 changed files
with
875 additions
and
625 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
src/components/MultiHopTrade/components/LimitOrder/hooks/useLimitOrderRecipientAddress.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import type { Asset } from '@shapeshiftoss/types' | ||
| import { useCallback, useMemo, useState } from 'react' | ||
| import type { Address } from 'viem' | ||
| import { useIsManualReceiveAddressRequired } from 'components/MultiHopTrade/hooks/useIsManualReceiveAddressRequired' | ||
| import { useReceiveAddress } from 'components/MultiHopTrade/hooks/useReceiveAddress' | ||
|
|
||
| import { SharedRecipientAddress } from '../../SharedTradeInput/SharedRecipientAddress' | ||
|
|
||
| type UseLimitOrderRecipientAddressProps = { | ||
| buyAsset: Asset | ||
| buyAccountId: string | undefined | ||
| sellAccountId: string | undefined | ||
| } | ||
|
|
||
| export const useLimitOrderRecipientAddress = ({ | ||
| buyAsset, | ||
| buyAccountId, | ||
| sellAccountId, | ||
| }: UseLimitOrderRecipientAddressProps) => { | ||
| const [manualReceiveAddress, setManualReceiveAddress] = useState<string | undefined>(undefined) | ||
| const [isManualReceiveAddressValid, setIsManualReceiveAddressValid] = useState< | ||
| boolean | undefined | ||
| >(undefined) | ||
| const [isManualReceiveAddressEditing, setIsManualReceiveAddressEditing] = useState(false) | ||
| const [isManualReceiveAddressValidating, setIsManualReceiveAddressValidating] = useState(false) | ||
| const { walletReceiveAddress, isLoading: isWalletReceiveAddressLoading } = useReceiveAddress({ | ||
| sellAccountId, | ||
| buyAccountId, | ||
| buyAsset, | ||
| }) | ||
|
|
||
| const handleManualReceiveAddressError = useCallback(() => { | ||
| setManualReceiveAddress(undefined) | ||
| }, []) | ||
|
|
||
| const handleEditManualReceiveAddress = useCallback(() => { | ||
| setIsManualReceiveAddressEditing(true) | ||
| }, []) | ||
|
|
||
| const handleCancelManualReceiveAddress = useCallback(() => { | ||
| setIsManualReceiveAddressEditing(false) | ||
| // Reset form value and valid state on cancel so the valid check doesn't wrongly evaluate to false after bailing out of editing an invalid address | ||
| setIsManualReceiveAddressValid(undefined) | ||
| }, []) | ||
|
|
||
| const handleResetManualReceiveAddress = useCallback(() => { | ||
| // Reset the manual receive address in store | ||
| setManualReceiveAddress(undefined) | ||
| // Reset the valid state in store | ||
| setIsManualReceiveAddressValid(undefined) | ||
| }, []) | ||
|
|
||
| const handleSubmitManualReceiveAddress = useCallback((address: string) => { | ||
| setManualReceiveAddress(address) | ||
| setIsManualReceiveAddressEditing(false) | ||
| }, []) | ||
|
|
||
| const isManualReceiveAddressRequired = useIsManualReceiveAddressRequired({ | ||
| shouldForceManualAddressEntry: false, | ||
| sellAccountId, | ||
| buyAsset, | ||
| manualReceiveAddress, | ||
| walletReceiveAddress, | ||
| isWalletReceiveAddressLoading, | ||
| }) | ||
|
|
||
| const isRecipientAddressEntryActive = useMemo(() => { | ||
| return ( | ||
| isManualReceiveAddressRequired || | ||
| isManualReceiveAddressValidating || | ||
| isManualReceiveAddressEditing || | ||
| isManualReceiveAddressValid === false | ||
| ) | ||
| }, [ | ||
| isManualReceiveAddressEditing, | ||
| isManualReceiveAddressRequired, | ||
| isManualReceiveAddressValid, | ||
| isManualReceiveAddressValidating, | ||
| ]) | ||
|
|
||
| const renderedRecipientAddress = useMemo(() => { | ||
| return ( | ||
| <SharedRecipientAddress | ||
| buyAsset={buyAsset} | ||
| isWalletReceiveAddressLoading={isWalletReceiveAddressLoading} | ||
| manualReceiveAddress={manualReceiveAddress} | ||
| walletReceiveAddress={walletReceiveAddress} | ||
| onCancel={handleCancelManualReceiveAddress} | ||
| onEdit={handleEditManualReceiveAddress} | ||
| onError={handleManualReceiveAddressError} | ||
| onIsValidatingChange={setIsManualReceiveAddressValidating} | ||
| onIsValidChange={setIsManualReceiveAddressValid} | ||
| onReset={handleResetManualReceiveAddress} | ||
| onSubmit={handleSubmitManualReceiveAddress} | ||
| /> | ||
| ) | ||
| }, [ | ||
| buyAsset, | ||
| manualReceiveAddress, | ||
| handleCancelManualReceiveAddress, | ||
| handleEditManualReceiveAddress, | ||
| handleManualReceiveAddressError, | ||
| handleResetManualReceiveAddress, | ||
| handleSubmitManualReceiveAddress, | ||
| walletReceiveAddress, | ||
| isWalletReceiveAddressLoading, | ||
| ]) | ||
|
|
||
| return { | ||
| isRecipientAddressEntryActive, | ||
| renderedRecipientAddress, | ||
| recipientAddress: (manualReceiveAddress ?? walletReceiveAddress) as Address | undefined, | ||
| } | ||
| } |
Oops, something went wrong.