diff --git a/src/components/Modals/Send/views/Details.tsx b/src/components/Modals/Send/views/Details.tsx index 52710f9f51c..0fa92581ae4 100644 --- a/src/components/Modals/Send/views/Details.tsx +++ b/src/components/Modals/Send/views/Details.tsx @@ -11,7 +11,7 @@ import { usePrevious, } from '@chakra-ui/react' import type { AccountId } from '@shapeshiftoss/caip' -import { fromAssetId } from '@shapeshiftoss/caip' +import { fromAccountId, fromAssetId } from '@shapeshiftoss/caip' import { CHAIN_NAMESPACE } from '@shapeshiftoss/caip/dist/constants' import isNil from 'lodash/isNil' import React, { useCallback, useEffect, useMemo } from 'react' @@ -23,6 +23,7 @@ import { useHistory } from 'react-router-dom' import { AccountCard } from 'components/AccountCard' import { AccountDropdown } from 'components/AccountDropdown/AccountDropdown' import { Amount } from 'components/Amount/Amount' +import { InlineCopyButton } from 'components/InlineCopyButton' import { DialogBackButton } from 'components/Modal/components/DialogBackButton' import { DialogBody } from 'components/Modal/components/DialogBody' import { DialogFooter } from 'components/Modal/components/DialogFooter' @@ -35,6 +36,7 @@ import { TokenRow } from 'components/TokenRow/TokenRow' import { useModal } from 'hooks/useModal/useModal' import { useWallet } from 'hooks/useWallet/useWallet' import { bnOrZero } from 'lib/bignumber/bignumber' +import { isUtxoAccountId } from 'lib/utils/utxo' import { selectAssetById } from 'state/slices/selectors' import { useAppSelector } from 'state/store' @@ -54,7 +56,8 @@ const MAX_COSMOS_SDK_MEMO_LENGTH = 256 const controllerRules = { required: true, } -const accountDropdownButtonProps = { width: 'full', mb: 2, variant: 'solid' } +const accountDropdownBoxProps = { width: '100%', my: 0, pl: 0 } +const accountDropdownButtonProps = { width: 'full', variant: 'solid' } const formHelperTextHoverStyle = { color: 'gray.400', transition: '.2s color ease' } export const Details = () => { @@ -220,12 +223,20 @@ export const Details = () => { - + + + + + void + positionAddress?: string | undefined // The LP asset this opportunity represents lpAsset?: AssetWithBalance // The assets underlying the LP one @@ -69,6 +71,7 @@ const accountDropdownBoxProps = { px: 0, my: 0, width: 'full' } export const Overview: React.FC = ({ accountId, onAccountIdChange, + positionAddress, lpAsset, underlyingAssetsCryptoPrecision, rewardAssetsCryptoPrecision, @@ -109,7 +112,7 @@ export const Overview: React.FC = ({ {onAccountIdChange && ( <> - + = ({ buttonProps={accountDropdownButtonProps} boxProps={accountDropdownBoxProps} /> - + )} diff --git a/src/features/defi/providers/cosmos/components/CosmosManager/Overview/CosmosOverview.tsx b/src/features/defi/providers/cosmos/components/CosmosManager/Overview/CosmosOverview.tsx index f3e63164ba1..ed2598cff56 100644 --- a/src/features/defi/providers/cosmos/components/CosmosManager/Overview/CosmosOverview.tsx +++ b/src/features/defi/providers/cosmos/components/CosmosManager/Overview/CosmosOverview.tsx @@ -1,7 +1,7 @@ import { ArrowDownIcon, ArrowUpIcon } from '@chakra-ui/icons' import { Center } from '@chakra-ui/react' import type { AccountId } from '@shapeshiftoss/caip' -import { toAssetId } from '@shapeshiftoss/caip' +import { fromAccountId, toAssetId } from '@shapeshiftoss/caip' import { DefiModalContent } from 'features/defi/components/DefiModal/DefiModalContent' import { Overview } from 'features/defi/components/Overview/Overview' import type { @@ -239,6 +239,7 @@ export const CosmosOverview: React.FC = ({ = ({ = ({ = ({ const { chainId, assetReference, assetNamespace } = query const alertBg = useColorModeValue('gray.200', 'gray.900') + const { + state: { wallet }, + } = useWallet() + const assetId = toAssetId({ chainId, assetNamespace, @@ -161,24 +171,6 @@ export const ThorchainSaversOverview: React.FC = ({ : undefined, ) - const hasStakedBalance = useMemo(() => { - return bnOrZero(earnOpportunityData?.stakedAmountCryptoBaseUnit).gt(0) - }, [earnOpportunityData?.stakedAmountCryptoBaseUnit]) - - const highestAssetBalanceFilter = useMemo( - () => ({ - assetId, - }), - [assetId], - ) - const highestAssetBalanceAccountId = useAppSelector(state => - selectHighestUserCurrencyBalanceAccountByAssetId(state, highestAssetBalanceFilter), - ) - - const highestStakedOrAssetBalanceAccountId = hasStakedBalance - ? maybeAccountId - : highestAssetBalanceAccountId - const opportunityMetadataFilter = useMemo(() => ({ stakingId: assetId as StakingId }), [assetId]) const opportunityMetadata = useAppSelector(state => selectStakingOpportunityByFilter(state, opportunityMetadataFilter), @@ -263,6 +255,23 @@ export const ThorchainSaversOverview: React.FC = ({ return Math.ceil(diffTime / 1000) }, [earnOpportunityData]) + const accountFilter = useMemo(() => ({ accountId: maybeAccountId }), [maybeAccountId]) + + const accountMetadata = useAppSelector(state => + selectPortfolioAccountMetadataByAccountId(state, accountFilter), + ) + + const { data: fromAddress } = useQuery({ + ...reactQueries.common.thorchainFromAddress({ + accountId: accountId!, + assetId, + wallet: wallet!, + accountMetadata: accountMetadata!, + getPosition: getThorchainSaversPosition, + }), + enabled: Boolean(accountId && wallet && accountMetadata), + }) + const makeDefaultMenu = useCallback( ({ isFull, @@ -436,11 +445,7 @@ export const ThorchainSaversOverview: React.FC = ({ const handleThorchainSaversEmptyClick = useCallback(() => setHideEmptyState(true), []) - if ( - (!earnOpportunityData?.isLoaded && highestStakedOrAssetBalanceAccountId) || - isTradingActiveLoading || - isMockDepositQuoteLoading - ) { + if (!earnOpportunityData?.isLoaded || isTradingActiveLoading || isMockDepositQuoteLoading) { return (
@@ -452,15 +457,15 @@ export const ThorchainSaversOverview: React.FC = ({ return } - if (!(highestStakedOrAssetBalanceAccountId && opportunityDataFilter)) return null if (!asset) return null if (!underlyingAssetsWithBalancesAndIcons) return null if (!earnOpportunityData) return null return ( = ({ void + selectedAddress: string | undefined } & ( | { isNewAddress: boolean @@ -54,6 +56,7 @@ const buttonProps = { export const AddressSelection: FC = ({ onRuneAddressChange: handleRuneAddressChange, isNewAddress, + selectedAddress, validateIsNewAddress, }) => { const translate = useTranslate() @@ -180,19 +183,31 @@ export const AddressSelection: FC = ({ return undefined }, [currentRuneAddress, maybeMatchingRuneAccountId]) + const maybeSelectedRuneAddress = useMemo(() => { + if (selectedAddress) return selectedAddress + if (maybeDefaultRuneAccountId) return fromAccountId(maybeDefaultRuneAccountId).account + + return undefined + }, [maybeDefaultRuneAccountId, selectedAddress]) + const accountSelection = useMemo(() => { if (isManualAddress) return null return ( - + + + ) - }, [handleAccountIdChange, isManualAddress, maybeDefaultRuneAccountId]) + }, [handleAccountIdChange, isManualAddress, maybeDefaultRuneAccountId, maybeSelectedRuneAddress]) const addressSelectionLabel = useMemo( () => diff --git a/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx b/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx index 301f88b20e5..b26bb49d9e3 100644 --- a/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx +++ b/src/pages/RFOX/components/ChangeAddress/ChangeAddressInput.tsx @@ -267,6 +267,7 @@ export const ChangeAddressInput: FC diff --git a/src/pages/RFOX/components/RFOXHeader.tsx b/src/pages/RFOX/components/RFOXHeader.tsx index 840da57ed6f..d3a43a0dd09 100644 --- a/src/pages/RFOX/components/RFOXHeader.tsx +++ b/src/pages/RFOX/components/RFOXHeader.tsx @@ -1,9 +1,11 @@ import { Flex, Heading, Stack } from '@chakra-ui/react' +import { fromAccountId } from '@shapeshiftoss/caip' import { useCallback, useEffect, useMemo } from 'react' import { useTranslate } from 'react-polyglot' import { useHistory } from 'react-router' import { AccountDropdown } from 'components/AccountDropdown/AccountDropdown' import { Display } from 'components/Display' +import { InlineCopyButton } from 'components/InlineCopyButton' import { PageBackButton, PageHeader } from 'components/Layout/Header/PageHeader' import { SEO } from 'components/Layout/Seo' import { Text } from 'components/Text' @@ -39,14 +41,19 @@ export const RFOXHeader = () => { - + + + ) }, [accountIds.length, setStakingAssetAccountId, stakingAssetAccountId, stakingAssetId]) diff --git a/src/pages/RFOX/components/Stake/StakeInput.tsx b/src/pages/RFOX/components/Stake/StakeInput.tsx index 12951573ab1..0beb3999cba 100644 --- a/src/pages/RFOX/components/Stake/StakeInput.tsx +++ b/src/pages/RFOX/components/Stake/StakeInput.tsx @@ -485,7 +485,10 @@ export const StakeInput: React.FC = ({ fiatAmount={amountUserCurrency} /> - + {stakingAssetAccountId && (