Skip to content

I
interface
Commit be21e483 authored by Uniswap Labs Service Account's avatar Uniswap Labs Service Account
Browse files
Options

ci(release): publish latest release

parent 35df6944
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3956 additions and 17291 deletions
.gitignore
View file @ be21e483
......@@ -51,6 +51,3 @@ packages/uniswap/src/i18n/locales/source/*_old.json
# Vercel
.vercel
# CodeTours Extension
.tours/*
CODEOWNERS deleted 100644 → 0
View file @ 35df6944
* @uniswap/web-admins
RELEASE
View file @ be21e483
IPFS hash of the deployment:
- CIDv0: `QmPq9sW2ih541PM9991Trh3Cocrdstrh63m6UWRbZb6Nqo`
- CIDv1: `bafybeiawfdwfe6ayrmkbbgbjos2noxf2w7ihz4tk7x5tu67ybggnmuvrni`
### Lots of new updates!
The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
### Bridging
You can now swap your ETH, USDC, and more across 8+ networks! Try it by pressing the banner on your homepage.
You can also access the Uniswap Interface from an IPFS gateway.
**BEWARE**: The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported.
**You should always use an IPFS gateway that enforces origin separation**, or our hosted deployment of the latest release at [app.uniswap.org](https://app.uniswap.org).
Your Uniswap settings are never remembered across different URLs.
### Claim usernames
IPFS gateways:
- https://bafybeiawfdwfe6ayrmkbbgbjos2noxf2w7ihz4tk7x5tu67ybggnmuvrni.ipfs.dweb.link/
- https://bafybeiawfdwfe6ayrmkbbgbjos2noxf2w7ihz4tk7x5tu67ybggnmuvrni.ipfs.cf-ipfs.com/
- [ipfs://QmPq9sW2ih541PM9991Trh3Cocrdstrh63m6UWRbZb6Nqo/](ipfs://QmPq9sW2ih541PM9991Trh3Cocrdstrh63m6UWRbZb6Nqo/)
You can now claim a free uni.eth for your wallet address, a readable username that makess it easy to identify your wallet and receive crypto.
## 5.56.0 (2024-10-29)
### Multichain Explore
Users can now see all 12 chains we support on the Explore page, and can also filter by a specific chain.
### Features
### Worldchain
* **web:** add empty states for not connected wallets and wallets with no positions (#12973) 31320f1
* **web:** add entry points for new lp flow (#13053) 1a7a2d9
* **web:** add hook parsing util (#13364) ed1eeb6
* **web:** add mainnet to bridge banner (#13296) 9f2fe44
* **web:** add new TokenWarningCard to tdp and pdp (#12667) 36688f1
* **web:** add the hook modal (#13371) d18aae7
* **web:** add warning icon to search bar (#12768) 830022a
* **web:** adding liquidity create step (#13014) 5ec4b90
* **web:** adding v4 to the liquidity flow (#12793) 966a85d
* **web:** closed Positions CTA at bottom of positions list (#13308) 2220383
* **web:** handle insufficient swap approvals (#13201) 60f699a
* **web:** improve fingerprinting for swap errors (#13045) cc066b9
* **web:** improve remove liquidity modal (#12936) 1ab10ca
* **web:** include poolId on positionInfo object (#13269) 14c26a1
* **web:** LP creation default one input to native currency (#13167) 9de127c
* **web:** migrate v3 liquidity review modal, saga logic (#13008) 3017b06
* **web:** mweb layouts for new lp pages (#13317) d0836e0
* **web:** redesigned pool table tabs (#13291) 918ee0f
* **web:** remove manual wrapping step (#13022) 956377a
* **web:** Remove Vanilla Extract from non-nft code (#12504) 07440e5
* **web:** support v4 position NFT images (#13349) 88062c8
* **web:** truncate bridge activity for smaller screens (#13074) 1a79bda
* **web:** UI updates for the pdp page for v4 (#12878) 491748a
* **web:** updates types in Create flow to support native (#13024) 5657b0e
* **web:** use live fee tier data for position creation flow (#12880) 9939608
* **web:** use tickspacings when fees are selected (#12945) c5908fd
* **web:** v2 create flow setup (#12767) 4a17ba4
* **web:** v3-v4 migrate calldata query (#12902) c4e9646
* **web:** v4 create flow creating a pool (#12747) 64dcd7d
* **web:** v4 url redirects (#13237) d91a04c
### Bug Fixes
* **web:** [v4] fix "New" button styling on positions page (#13143) 24e8bb9
* **web:** [v4] fix reset button (#13160) 8b10c23
* **web:** [v4] normalize language to collect fees (#13150) 97b4fee
* **web:** [v4] polish (#13204) 9735bed
* **web:** Add 3s delay to portfolio balance refetch (#13367) 4605961
* **web:** add help center links (#13147) a9239c4
* **web:** add missing breadcrumb to LP create page (#13306) f0743d2
* **web:** Align Continue button text (#13023) 9bfcaf5
* **web:** allow pool creation on testnets (#13009) 05dfe00
* **web:** bugs in create flow when initializing pool (#13282) c333def
* **web:** check wrapped input approvals for all uniswapx types (#13377) 59a8378
* **web:** create fee tier alignment and nan (#13157) 701c7a9
* **web:** default price range fix (#13169) adc95d6
* **web:** display bridging options in unconnected state (#13048) 0961f12
* **web:** dont hide position filters (#13194) 2a6b72a
* **web:** fallback to local activity if remote is empty (#13135) b5129d8
* **web:** fix blocked tokens on TDP (#12742) d364216
* **web:** fix broken worldchain images (#13028) b9d436d
* **web:** fix crashe in create flow when changing tokens (#13264) 63b9734
* **web:** Fix explore table only scrolling once (#13110) 73083d7
* **web:** fix fee modal crash (#13083) 91983fc
* **web:** fix formatting for closed positions (#13172) bfdedd9
* **web:** fix link to PosDP from migratev3 page (#13311) a8e2050
* **web:** fix network filter on explore (#12876) e6aaa50
* **web:** handle account chain id switch (#12994) 45fcd58
* **web:** handle selecting coin on diff chain (#13149) 49c903d
* **web:** keep old data in positions list while loading new filter results (#13299) 6cc7159
* **web:** mock pair and mock pool price numerator and denominators are switched (#13279) efe13f3
* **web:** navbar links for v4 positions pages (#13271) 2b3821e
* **web:** numeric input validation in fee tiers search (#13304) b51bf90
* **web:** Only poll for bridging status updates if pending txs (#13066) f31d0fc
* **web:** only show bridging card on swap tab (#13333) c1f3eba
* **web:** persist positions filters and remove "closed" from default filter (#13168) f10fc62
* **web:** prevent swap flow from continuing when approval has not bee… (#13374) 7421208
* **web:** Redirect to security measures article while clicking button in ResetComplete step (#12606) e917818
* **web:** remove outputPositionLiquidity from migration request (#13156) 2b4d71c
* **web:** remove second status on pdp (#13210) db5f3e1
* **web:** remove v2 liquidity (add approve step) (#13314) ce48a33
* **web:** show liqudity info badge in step and confirmation (#13312) 0c23eff
* **web:** show Not Found on PosDP if it doesn't exist (#13250) 0177752
* **web:** temp endpoints (#13093) a50b98d
* **web:** unichain modal button widths (#13092) 0eb5abe
* **web:** Unstick continue button from SettingsRecoveryPhrase screen (#12609) 10b17a2
* **web:** update approved token (#13357) de06e23
* **web:** update v2 remove on L2 functionality (#13037) 6971b0b
* **web:** use position chain id (#13001) 3872b9a
* **web:** use prod url for positions API (#13351) e25b4ca
* **web:** v4 create flow - reset tokens on chain changed (#13249) ae6ef1a
* **web:** v4 fixes (#13223) 6ad8335
* **web:** v4 poolsQueryEnabledCheck (#13078) b9f210d
* **web:** various trading api calls fixes (#13102) ecb1c30
### Continuous Integration
* **web:** update sitemaps afffa8d
Users now have access to all ur regular features for this new chain.
### Other changes:
- Various bug fixes and performance improvements
\ No newline at end of file
VERSION
View file @ be21e483
web/5.56.0
\ No newline at end of file
extension/1.8.0
\ No newline at end of file
apps/extension/package.json
View file @ be21e483
......@@ -15,7 +15,7 @@
"@tamagui/core": "1.108.4",
"@types/uuid": "9.0.1",
"@uniswap/analytics-events": "2.38.0",
"@uniswap/uniswapx-sdk": "2.1.0-beta.18",
"@uniswap/uniswapx-sdk": "^2.1.0-beta.14",
"@uniswap/universal-router-sdk": "4.5.2",
"@uniswap/v3-sdk": "3.18.1",
"@uniswap/v4-sdk": "1.10.3",
......
apps/extension/src/app/features/accounts/AccountItem.tsx
View file @ be21e483
......@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { EditLabelModal } from 'src/app/features/accounts/EditLabelModal'
import { removeAllDappConnectionsForAccount } from 'src/app/features/dapp/actions'
import { Flex, Text, TouchableArea } from 'ui/src'
import { ContextMenu, Flex, MenuContentItem, Text, TouchableArea } from 'ui/src'
import { CopySheets, Edit, Ellipsis, TrashFilled } from 'ui/src/components/icons'
import { iconSizes } from 'ui/src/theme'
import { WarningModal } from 'uniswap/src/components/modals/WarningModal/WarningModal'
......@@ -17,8 +17,6 @@ import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { setClipboard } from 'uniswap/src/utils/clipboard'
import { NumberType } from 'utilities/src/format/types'
import { AddressDisplay } from 'wallet/src/components/accounts/AddressDisplay'
import { ContextMenu } from 'wallet/src/components/menu/ContextMenu'
import { MenuContentItem } from 'wallet/src/components/menu/types'
import { EditAccountAction, editAccountActions } from 'wallet/src/features/wallet/accounts/editAccountSaga'
import { useActiveAccountWithThrow, useDisplayName, useSignerAccounts } from 'wallet/src/features/wallet/hooks'
import { DisplayNameType } from 'wallet/src/features/wallet/types'
......
apps/extension/src/app/features/accounts/AccountSwitcherScreen.tsx
View file @ be21e483
......@@ -14,7 +14,7 @@ import { PopupName, openPopup } from 'src/app/features/popups/slice'
import { AppRoutes, RemoveRecoveryPhraseRoutes, SettingsRoutes, UnitagClaimRoutes } from 'src/app/navigation/constants'
import { navigate } from 'src/app/navigation/state'
import { focusOrCreateUnitagTab } from 'src/app/navigation/utils'
import { Button, Flex, Popover, ScrollView, Text, useSporeColors } from 'ui/src'
import { Button, Flex, MenuContent, MenuContentItem, Popover, ScrollView, Text, useSporeColors } from 'ui/src'
import { WalletFilled, X } from 'ui/src/components/icons'
import { spacing } from 'ui/src/theme'
import { WarningModal } from 'uniswap/src/components/modals/WarningModal/WarningModal'
......@@ -31,8 +31,6 @@ import { logger } from 'utilities/src/logger/logger'
import { sleep } from 'utilities/src/time/timing'
import { AddressDisplay } from 'wallet/src/components/accounts/AddressDisplay'
import { PlusCircle } from 'wallet/src/components/icons/PlusCircle'
import { MenuContent } from 'wallet/src/components/menu/MenuContent'
import { MenuContentItem } from 'wallet/src/components/menu/types'
import { useAccountList } from 'wallet/src/features/accounts/hooks'
import { createOnboardingAccount } from 'wallet/src/features/onboarding/createOnboardingAccount'
import { BackupType, SignerMnemonicAccount } from 'wallet/src/features/wallet/accounts/types'
......
apps/extension/src/app/features/accounts/EditLabelModal.tsx
View file @ be21e483
......@@ -37,7 +37,7 @@ export function EditLabelModal({ isOpen, address, onClose }: EditLabelModalProps
const [inputText, setInputText] = useState<string>(defaultText)
const [isfocused, setIsFocused] = useState(false)
const { canClaimUnitag } = useCanActiveAddressClaimUnitag()
const { canClaimUnitag } = useCanActiveAddressClaimUnitag(address)
const unitagsClaimEnabled = useFeatureFlag(FeatureFlags.ExtensionClaimUnitag)
const onConfirm = useCallback(async () => {
......
apps/extension/src/app/features/home/TokenBalanceList.tsx
View file @ be21e483
......@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { useInterfaceBuyNavigator } from 'src/app/features/for/utils'
import { AppRoutes } from 'src/app/navigation/constants'
import { navigate } from 'src/app/navigation/state'
import { AnimatePresence, Flex, Loader } from 'ui/src'
import { AnimatePresence, ContextMenu, Flex, Loader } from 'ui/src'
import { ShieldCheck } from 'ui/src/components/icons'
import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
import { InfoLinkModal } from 'uniswap/src/components/modals/InfoLinkModal'
......@@ -15,7 +15,6 @@ import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
import { ElementName, ModalName, SectionName, WalletEventName } from 'uniswap/src/features/telemetry/constants'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { InformationBanner } from 'wallet/src/components/banners/InformationBanner'
import { ContextMenu } from 'wallet/src/components/menu/ContextMenu'
import { useWalletNavigation } from 'wallet/src/contexts/WalletNavigationContext'
import { isNonPollingRequestInFlight } from 'wallet/src/data/utils'
import { HiddenTokensRow } from 'wallet/src/features/portfolio/HiddenTokensRow'
......@@ -212,12 +211,7 @@ const TokenBalanceItemRow = memo(function TokenBalanceItemRow({ item }: { item:
return (
<TokenContextMenu portfolioBalance={portfolioBalance}>
<TokenBalanceItem
isLoading={isWarmLoading}
portfolioBalanceId={portfolioBalance.id}
currencyInfo={portfolioBalance.currencyInfo}
onPressToken={onPressToken}
/>
<TokenBalanceItem isLoading={isWarmLoading} portfolioBalance={portfolioBalance} onPressToken={onPressToken} />
</TokenContextMenu>
)
})
......
apps/extension/src/app/features/onboarding/ClaimUnitagScreen.tsx
View file @ be21e483
......@@ -50,7 +50,7 @@ export function ClaimUnitagScreen(): JSX.Element {
onBack={handleBack}
onSkip={goToNextStep}
>
<Flex gap="$spacing16" py="$spacing24" width="100%">
<Flex gap="$spacing16" pt="$spacing24" width="100%">
<ClaimUnitagContent
animateY={false}
entryPoint={ExtensionOnboardingFlow.New}
......
apps/extension/src/app/features/send/SendFormScreen/RecipientPanel.tsx
View file @ be21e483
......@@ -35,7 +35,7 @@ export function RecipientPanel({ chainId }: RecipientPanelProps): JSX.Element {
onSetShowRecipientSelector(!showRecipientSelector)
}, [onSetShowRecipientSelector, showRecipientSelector])
const { sections } = useFilteredRecipientSections(pattern)
const sections = useFilteredRecipientSections(pattern)
const onSelectRecipient = useCallback((newRecipient: string) => {
setSelectedRecipient(newRecipient)
......
apps/extension/src/app/features/settings/SettingsManageConnectionsScreen/internal/EllipsisDropdown.tsx
View file @ be21e483
import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { removeAllDappConnectionsForAccount } from 'src/app/features/dapp/actions'
import { Flex, TouchableArea } from 'ui/src'
import { ContextMenu, Flex, TouchableArea } from 'ui/src'
import { Ellipsis, Power } from 'ui/src/components/icons'
import { pushNotification } from 'uniswap/src/features/notifications/slice'
import { AppNotificationType } from 'uniswap/src/features/notifications/types'
import { ExtensionEventName } from 'uniswap/src/features/telemetry/constants'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { ContextMenu } from 'wallet/src/components/menu/ContextMenu'
import { useActiveAccountAddress, useActiveAccountWithThrow } from 'wallet/src/features/wallet/hooks'
const PowerCircle = (): JSX.Element => (
......
apps/extension/src/app/features/settings/SettingsRecoveryPhraseScreen/SettingsRecoveryPhrase.tsx
View file @ be21e483
......@@ -37,7 +37,7 @@ export function SettingsRecoveryPhrase({
</Flex>
</Flex>
<Flex grow>{children}</Flex>
<Flex mt="$spacing12">
<Flex>
<Button
disabled={!nextButtonEnabled}
flexGrow={1}
......
apps/extension/src/app/features/unitags/EditUnitagProfileScreen.tsx
View file @ be21e483
......@@ -6,14 +6,12 @@ import { UnitagClaimRoutes } from 'src/app/navigation/constants'
import { navigate } from 'src/app/navigation/state'
import { backgroundToSidePanelMessageChannel } from 'src/background/messagePassing/messageChannels'
import { BackgroundToSidePanelRequestType } from 'src/background/messagePassing/types/requests'
import { AnimatePresence, Flex } from 'ui/src'
import { AnimatePresence, ContextMenu, Flex, MenuContentItem } from 'ui/src'
import { Edit, Ellipsis, Trash } from 'ui/src/components/icons'
import { iconSizes } from 'ui/src/theme'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { useUnitagByAddress } from 'uniswap/src/features/unitags/hooks'
import { UnitagScreens } from 'uniswap/src/types/screens/mobile'
import { ContextMenu } from 'wallet/src/components/menu/ContextMenu'
import { MenuContentItem } from 'wallet/src/components/menu/types'
import { ChangeUnitagModal } from 'wallet/src/features/unitags/ChangeUnitagModal'
import { DeleteUnitagModal } from 'wallet/src/features/unitags/DeleteUnitagModal'
import { EditUnitagProfileContent } from 'wallet/src/features/unitags/EditUnitagProfileContent'
......
apps/extension/src/manifest.json
View file @ be21e483
......@@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Uniswap Extension",
"description": "The Uniswap Extension is a self-custody crypto wallet that's built for swapping.",
"version": "1.9.0",
"version": "1.8.0",
"minimum_chrome_version": "116",
"icons": {
"16": "assets/icon16.png",
......
apps/mobile/README.md
View file @ be21e483
This diff is collapsed.
apps/mobile/android/app/build.gradle
View file @ be21e483
......@@ -90,9 +90,9 @@ if (isCI && datadogPropertiesAvailable && !isDetox) {
apply from: "../../../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"
}
def devVersionName = "1.39"
def betaVersionName = "1.39"
def prodVersionName = "1.39"
def devVersionName = "1.38"
def betaVersionName = "1.38"
def prodVersionName = "1.38"
android {
ndkVersion rootProject.ext.ndkVersion
......
apps/mobile/ios/Uniswap/Uniswap.entitlements
View file @ be21e483
......@@ -9,7 +9,6 @@
<string>applinks:uniswap.org</string>
<string>applinks:app.uniswap.org</string>
<string>applinks:app.corn-staging.com</string>
<string>webcredentials:app.uniswap.org</string>
</array>
<key>com.apple.developer.devicecheck.appattest-environment</key>
<string>production</string>
......
apps/mobile/package.json
View file @ be21e483
......@@ -90,7 +90,7 @@
"@uniswap/analytics-events": "2.38.0",
"@uniswap/client-explore": "0.0.10",
"@uniswap/ethers-rs-mobile": "0.0.5",
"@uniswap/sdk-core": "5.9.0",
"@uniswap/sdk-core": "5.8.4",
"@walletconnect/core": "2.17.1",
"@walletconnect/react-native-compat": "2.17.1",
"@walletconnect/utils": "2.17.1",
......
apps/mobile/src/components/RecipientSelect/RecipientSelect.tsx
View file @ be21e483
......@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import { TextInput } from 'react-native'
import { FadeIn, FadeOut } from 'react-native-reanimated'
import { RecipientScanModal } from 'src/components/RecipientSelect/RecipientScanModal'
import { Flex, Loader, Text, TouchableArea, useSporeColors } from 'ui/src'
import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
import ScanQRIcon from 'ui/src/assets/icons/scan.svg'
import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
import { iconSizes } from 'ui/src/theme'
......@@ -51,7 +51,7 @@ export function _RecipientSelect({
const [showQRScanner, setShowQRScanner] = useState(false)
const [checkSpeedBumps, setCheckSpeedBumps] = useState(false)
const [selectedRecipient, setSelectedRecipient] = useState(recipient)
const { sections, loading } = useFilteredRecipientSections(pattern)
const sections = useFilteredRecipientSections(pattern)
useEffect(() => {
if (focusInput) {
......@@ -104,9 +104,7 @@ export function _RecipientSelect({
onBack={recipient ? onHideRecipientSelector : undefined}
onChangeText={setPattern}
/>
{loading ? (
<Loader.SearchResult />
) : !sections.length ? (
{!sections.length ? (
<Flex centered gap="$spacing12" mt="$spacing24" px="$spacing24">
<Text variant="buttonLabel2">{t('send.recipient.results.empty')}</Text>
<Text color="$neutral3" textAlign="center" variant="body1">
......@@ -114,6 +112,7 @@ export function _RecipientSelect({
</Text>
</Flex>
) : (
// Show either suggested recipients or filtered sections based on query
<RecipientList renderedInModal={renderedInModal} sections={sections} onPress={onSelect} />
)}
</AnimatedFlex>
......
apps/mobile/src/components/Settings/SettingsRow.tsx
View file @ be21e483
......@@ -109,8 +109,8 @@ export function SettingsRow({
) : screen || modal ? (
<Flex centered row>
{currentSetting ? (
<Flex shrink alignItems="flex-end" flexBasis="35%" justifyContent="flex-end">
<Text adjustsFontSizeToFit color="$neutral2" mr="$spacing8" numberOfLines={2} variant="body3">
<Flex row shrink alignItems="flex-end" flexBasis="30%" justifyContent="flex-end">
<Text adjustsFontSizeToFit color="$neutral2" mr="$spacing8" numberOfLines={1} variant="body3">
{currentSetting}
</Text>
</Flex>
......
apps/mobile/src/components/TokenBalanceList/TokenBalanceItemContextMenu.tsx
View file @ be21e483
import React, { PropsWithChildren, memo, useMemo } from 'react'
import React, { memo, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ContextMenu from 'react-native-context-menu-view'
import { borderRadii } from 'ui/src/theme'
......@@ -6,12 +6,13 @@ import { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generat
import { PortfolioBalance } from 'uniswap/src/features/dataApi/types'
import { useTokenContextMenu } from 'wallet/src/features/portfolio/useTokenContextMenu'
export const TokenBalanceItemContextMenu = memo(function _TokenBalanceItemContextMenu({
export const TokenBalanceItemContextMenu = memo(function _TokenBalanceItem({
portfolioBalance,
children,
}: PropsWithChildren<{
}: {
portfolioBalance: PortfolioBalance
}>) {
children: React.ReactNode
}) {
const { t } = useTranslation()
const { menuActions, onContextMenuPress } = useTokenContextMenu({
......
apps/mobile/src/components/TokenDetails/TokenDetailsHeader.tsx
View file @ be21e483
......@@ -7,8 +7,6 @@ import {
TokenDetailsScreenQuery,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { TestID } from 'uniswap/src/test/fixtures/testIDs'
export interface TokenDetailsHeaderProps {
......@@ -22,12 +20,9 @@ export function TokenDetailsHeader({
loading = false,
onPressWarningIcon,
}: TokenDetailsHeaderProps): JSX.Element {
const tokenProtectionEnabled = useFeatureFlag(FeatureFlags.TokenProtection)
const token = data?.token
const tokenProject = token?.project
const shouldShowWarningIcon =
!tokenProtectionEnabled &&
(tokenProject?.safetyLevel === SafetyLevel.StrongWarning || tokenProject?.safetyLevel === SafetyLevel.Blocked)
return (
<Flex gap="$spacing12" mx="$spacing16">
<TokenLogo
......@@ -47,7 +42,9 @@ export function TokenDetailsHeader({
>
{token?.name ?? '—'}
</Text>
{shouldShowWarningIcon && (
{/* Suppress warning icon on low warning level */}
{(tokenProject?.safetyLevel === SafetyLevel.StrongWarning ||
tokenProject?.safetyLevel === SafetyLevel.Blocked) && (
<TouchableArea onPress={onPressWarningIcon}>
<WarningIcon safetyLevel={tokenProject?.safetyLevel} size="$icon.20" strokeColorOverride="$neutral3" />
</TouchableArea>
......
apps/mobile/src/components/TokenSelector/TokenFiatOnRampList.tsx
View file @ be21e483
......@@ -48,7 +48,7 @@ function TokenOptionItemWrapper({
[currencyInfo, balanceUSD, quantity, isUnsupported],
)
const onPress = useCallback(() => onSelectCurrency?.(currency), [currency, onSelectCurrency])
const { tokenWarningDismissed } = useDismissedTokenWarnings(currencyInfo?.currency)
const { tokenWarningDismissed, onDismissTokenWarning } = useDismissedTokenWarnings(currencyInfo?.currency)
const { convertFiatAmountFormatted, formatNumberOrString } = useLocalizationContext()
if (!option) {
......@@ -62,6 +62,7 @@ function TokenOptionItemWrapper({
return (
<TokenOptionItem
balance={convertFiatAmountFormatted(option.balanceUSD, NumberType.FiatTokenPrice)}
dismissWarningCallback={onDismissTokenWarning}
isSelected={isSelected}
option={option}
quantity={option.quantity}
......@@ -148,10 +149,6 @@ function _TokenFiatOnRampList({
return <></>
}
if (section.data.length === 0) {
return <></>
}
return (
<Flex mt="$spacing12">
<ListSeparatorToggle
......
apps/mobile/src/components/explore/FavoriteTokenCard.tsx
View file @ be21e483
import React, { memo, useCallback } from 'react'
import { ViewProps } from 'react-native'
import ContextMenu from 'react-native-context-menu-view'
import { SharedValue } from 'react-native-reanimated'
import { FadeIn, SharedValue } from 'react-native-reanimated'
import { useDispatch } from 'react-redux'
import { useTokenDetailsNavigation } from 'src/components/TokenDetails/hooks'
import RemoveButton from 'src/components/explore/RemoveButton'
......@@ -125,6 +125,7 @@ function FavoriteTokenCard({
borderColor={opacify(0.05, colors.surface3.val)}
borderRadius="$rounded16"
borderWidth={isDarkMode ? '$none' : '$spacing1'}
entering={FadeIn}
hapticFeedback={!isEditing}
hapticStyle={ImpactFeedbackStyle.Light}
m="$spacing4"
......
apps/mobile/src/components/explore/hooks.test.ts
View file @ be21e483
......@@ -206,7 +206,7 @@ describe(useExploreTokenContextMenu, () => {
payload: {
name: 'swap-modal',
initialState: {
exactAmountToken: '',
exactAmountToken: '0',
exactCurrencyField: 'input',
[CurrencyField.INPUT]: null,
[CurrencyField.OUTPUT]: {
......
apps/mobile/src/components/explore/hooks.ts
View file @ be21e483
......@@ -59,7 +59,7 @@ export function useExploreTokenContextMenu({
const onPressSwap = useCallback(() => {
const swapFormState: TransactionState = {
exactCurrencyField: CurrencyField.INPUT,
exactAmountToken: '',
exactAmountToken: '0',
[CurrencyField.INPUT]: null,
[CurrencyField.OUTPUT]: {
chainId,
......
apps/mobile/src/components/explore/search/SearchPopularTokens.tsx
View file @ be21e483
......@@ -4,11 +4,9 @@ import { FlatList, ListRenderItemInfo } from 'react-native'
import { SearchTokenItem } from 'src/components/explore/search/items/SearchTokenItem'
import { getSearchResultId } from 'src/components/explore/search/utils'
import { Flex, Loader } from 'ui/src'
import { ProtectionResult, SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { ALL_NETWORKS_ARG } from 'uniswap/src/data/rest/base'
import { useTokenRankingsQuery } from 'uniswap/src/data/rest/tokenRankings'
import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
import { TokenList } from 'uniswap/src/features/dataApi/types'
import { SearchResultType, TokenSearchResult } from 'uniswap/src/features/search/SearchResult'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { RankingType } from 'wallet/src/features/wallet/types'
......@@ -34,14 +32,7 @@ function tokenStatsToTokenSearchResult(token: Maybe<TokenRankingsStat>): TokenSe
name,
symbol,
logoUrl: logo ?? null,
// BE has confirmed that all of these TokenRankingsStat tokens are Verified SafetyLevel, and design confirmed that we can hide the warning icon here
safetyLevel: SafetyLevel.Verified,
safetyInfo: {
tokenList: TokenList.Default,
attackType: undefined,
protectionResult: ProtectionResult.Benign,
},
feeData: null,
safetyLevel: null,
}
}
......
apps/mobile/src/components/explore/search/SearchResultsLoader.tsx
View file @ be21e483
import React from 'react'
import { NFTHeaderItem, TokenHeaderItem, WalletHeaderItem } from 'src/components/explore/search/constants'
import { useTranslation } from 'react-i18next'
import { FadeIn, FadeOut } from 'react-native-reanimated'
import { SectionHeaderText } from 'src/components/explore/search/SearchSectionHeader'
import { SearchHeader } from 'src/components/explore/search/types'
import { Flex, Loader } from 'ui/src'
import { Coin, Gallery, Person } from 'ui/src/components/icons'
import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
import { UniverseChainId } from 'uniswap/src/types/chains'
function SectionLoader({ searchHeader, repeat = 1 }: { searchHeader: SearchHeader; repeat?: number }): JSX.Element {
return (
<Flex gap="$spacing12">
<SectionHeaderText icon={searchHeader.icon} title={searchHeader.title} />
<Flex mx="$spacing24">
<Loader.SearchResult repeat={repeat} />
</Flex>
</Flex>
)
}
export const SearchResultsLoader = ({ selectedChain }: { selectedChain: UniverseChainId | null }): JSX.Element => {
const { t } = useTranslation()
/**
* Placeholder component used while a search is loading.
*/
export function SearchResultsLoader({ selectedChain }: { selectedChain: UniverseChainId | null }): JSX.Element {
// Only mainnet or "all" networks support nfts, hide loader otherwise
const hideNftLoading = selectedChain !== null && selectedChain !== UniverseChainId.Mainnet
return (
<Flex gap="$spacing16">
<SectionLoader searchHeader={TokenHeaderItem} repeat={2} />
<SectionLoader searchHeader={WalletHeaderItem} />
{!hideNftLoading && <SectionLoader searchHeader={NFTHeaderItem} repeat={2} />}
<Flex gap="$spacing12">
<SectionHeaderText
icon={<Coin color="$neutral2" size="$icon.24" />}
title={t('explore.search.section.tokens')}
/>
<AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing24">
<Loader.Token repeat={2} />
</AnimatedFlex>
</Flex>
<Flex gap="$spacing12">
<SectionHeaderText
icon={<Person color="$neutral2" size="$icon.24" />}
title={t('explore.search.section.wallets')}
/>
<AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing24">
<Loader.Token />
</AnimatedFlex>
</Flex>
{!hideNftLoading && (
<Flex gap="$spacing12">
<SectionHeaderText
icon={<Gallery color="$neutral2" size="$icon.24" />}
title={t('explore.search.section.nft')}
/>
<AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing24">
<Loader.Token repeat={2} />
</AnimatedFlex>
</Flex>
)}
</Flex>
)
}
apps/mobile/src/components/explore/search/SearchResultsSection.tsx
View file @ be21e483
......@@ -4,13 +4,7 @@ import { FlatList, ListRenderItemInfo } from 'react-native'
import { FadeIn, FadeOut } from 'react-native-reanimated'
import { SearchResultsLoader } from 'src/components/explore/search/SearchResultsLoader'
import { SectionHeaderText } from 'src/components/explore/search/SearchSectionHeader'
import {
EtherscanHeaderItem,
NFTHeaderItem,
SEARCH_RESULT_HEADER_KEY,
TokenHeaderItem,
WalletHeaderItem,
} from 'src/components/explore/search/constants'
import { SEARCH_RESULT_HEADER_KEY } from 'src/components/explore/search/constants'
import { useWalletSearchResults } from 'src/components/explore/search/hooks'
import { SearchENSAddressItem } from 'src/components/explore/search/items/SearchENSAddressItem'
import { SearchEtherscanItem } from 'src/components/explore/search/items/SearchEtherscanItem'
......@@ -25,8 +19,10 @@ import {
getSearchResultId,
} from 'src/components/explore/search/utils'
import { Flex, Text } from 'ui/src'
import { Coin, Gallery, Person } from 'ui/src/components/icons'
import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
import { useExploreSearchQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { SearchContext } from 'uniswap/src/features/search/SearchContext'
import {
......@@ -35,10 +31,36 @@ import {
TokenSearchResult,
} from 'uniswap/src/features/search/SearchResult'
import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
import i18n from 'uniswap/src/i18n/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { getValidAddress } from 'uniswap/src/utils/addresses'
import { logger } from 'utilities/src/logger/logger'
const ICON_SIZE = '$icon.24'
const ICON_COLOR = '$neutral2'
const WalletHeaderItem: SearchResultOrHeader = {
icon: <Person color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.wallets'),
}
const TokenHeaderItem: SearchResultOrHeader = {
icon: <Coin color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.tokens'),
}
const NFTHeaderItem: SearchResultOrHeader = {
icon: <Gallery color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.nft'),
}
const EtherscanHeaderItem: (chainId: UniverseChainId) => SearchResultOrHeader = (chainId: UniverseChainId) => ({
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.action.viewEtherscan', {
blockExplorerName: UNIVERSE_CHAIN_INFO[chainId].explorer.name,
}),
})
const IGNORED_ERRORS = ['Subgraph provider undefined not supported']
export function SearchResultsSection({
......
apps/mobile/src/components/explore/search/constants.tsx
View file @ be21e483
import { SearchHeader, SearchHeaderKey } from 'src/components/explore/search/types'
import { Coin, Gallery, Person } from 'ui/src/components/icons'
import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
import i18n from 'uniswap/src/i18n/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
export const SEARCH_RESULT_HEADER_KEY: SearchHeaderKey = 'header'
const ICON_SIZE = '$icon.24'
const ICON_COLOR = '$neutral2'
export const WalletHeaderItem: SearchHeader = {
icon: <Person color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.wallets'),
}
export const TokenHeaderItem: SearchHeader = {
icon: <Coin color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.tokens'),
}
export const NFTHeaderItem: SearchHeader = {
icon: <Gallery color={ICON_COLOR} size={ICON_SIZE} />,
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.section.nft'),
}
export const EtherscanHeaderItem: (chainId: UniverseChainId) => SearchHeader = (chainId: UniverseChainId) => ({
type: SEARCH_RESULT_HEADER_KEY,
title: i18n.t('explore.search.action.viewEtherscan', {
blockExplorerName: UNIVERSE_CHAIN_INFO[chainId].explorer.name,
}),
})
export const SEARCH_RESULT_HEADER_KEY = 'header'
apps/mobile/src/components/explore/search/items/SearchTokenItem.tsx
View file @ be21e483
......@@ -7,7 +7,7 @@ import { disableOnPress } from 'src/utils/disableOnPress'
import { Flex, ImpactFeedbackStyle, Text, TouchableArea } from 'ui/src'
import { TokenLogo } from 'uniswap/src/components/CurrencyLogo/TokenLogo'
import WarningIcon from 'uniswap/src/components/warnings/WarningIcon'
import { getWarningIconColors } from 'uniswap/src/components/warnings/utils'
import { getWarningIconColorOverride } from 'uniswap/src/components/warnings/utils'
import { SearchContext } from 'uniswap/src/features/search/SearchContext'
import { SearchResultType, TokenSearchResult } from 'uniswap/src/features/search/SearchResult'
import { addToSearchHistory } from 'uniswap/src/features/search/searchHistorySlice'
......@@ -28,12 +28,11 @@ export function SearchTokenItem({ token, searchContext }: SearchTokenItemProps):
const dispatch = useDispatch()
const tokenDetailsNavigation = useTokenDetailsNavigation()
const { chainId, address, name, symbol, logoUrl, safetyLevel, safetyInfo, feeData } = token
const { chainId, address, name, symbol, logoUrl, safetyLevel, safetyInfo } = token
const currencyId = address ? buildCurrencyId(chainId, address) : buildNativeCurrencyId(chainId as UniverseChainId)
const currencyInfo = useCurrencyInfo(currencyId)
const severity = getTokenWarningSeverity(currencyInfo)
// in mobile search, we only show the warning icon if token is >=Medium severity
const { colorSecondary: warningIconColor } = getWarningIconColors(severity)
const warningIconColor = getWarningIconColorOverride(severity)
const onPress = (): void => {
tokenDetailsNavigation.preload(currencyId)
......@@ -61,7 +60,6 @@ export function SearchTokenItem({ token, searchContext }: SearchTokenItemProps):
logoUrl,
safetyLevel,
safetyInfo,
feeData,
},
}),
)
......
apps/mobile/src/components/explore/search/types.tsx
View file @ be21e483
import { SEARCH_RESULT_HEADER_KEY } from 'src/components/explore/search/constants'
import { SearchResult } from 'uniswap/src/features/search/SearchResult'
export type SearchHeaderKey = 'header'
export type SearchHeader = { type: SearchHeaderKey; title: string; icon?: JSX.Element }
export type SearchResultOrHeader = SearchResult | SearchHeader
// Header type used to render header text instead of SearchResult item
export type SearchResultOrHeader =
| SearchResult
| { type: typeof SEARCH_RESULT_HEADER_KEY; title: string; icon?: JSX.Element }
apps/mobile/src/components/explore/search/utils.test.ts
View file @ be21e483
......@@ -6,7 +6,6 @@ import {
} from 'src/components/explore/search/utils'
import { Chain, ExploreSearchQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
import { getCurrencySafetyInfo } from 'uniswap/src/features/dataApi/utils'
import { SearchResultType } from 'uniswap/src/features/search/SearchResult'
import { amount, ethToken, nftCollection, nftContract, token, tokenMarket } from 'uniswap/src/test/fixtures'
import { createArray } from 'uniswap/src/test/utils'
......@@ -80,10 +79,6 @@ describe(formatTokenSearchResults, () => {
expect(result?.[0]?.symbol).toEqual(searchToken.symbol)
expect(result?.[0]?.logoUrl).toEqual(searchToken.project?.logoUrl)
expect(result?.[0]?.safetyLevel).toEqual(searchToken.project?.safetyLevel)
expect(result?.[0]?.feeData).toEqual(searchToken.feeData)
expect(result?.[0]?.safetyInfo).toEqual(
getCurrencySafetyInfo(searchToken.project?.safetyLevel, searchToken.protectionInfo),
)
})
describe(gqlNFTToNFTCollectionSearchResult, () => {
......
apps/mobile/src/components/explore/search/utils.ts
View file @ be21e483
......@@ -33,7 +33,7 @@ export function formatTokenSearchResults(
return tokensMap
}
const { name, chain, address, symbol, project, market, protectionInfo, feeData } = token
const { name, chain, address, symbol, project, market, protectionInfo } = token
const chainId = fromGraphQLChain(chain)
const shoulderFilterByChain = !!selectedChain
......@@ -55,7 +55,6 @@ export function formatTokenSearchResults(
logoUrl: logoUrl ?? null,
volume1D: market?.volume?.value ?? 0,
safetyInfo: getCurrencySafetyInfo(safetyLevel, protectionInfo),
feeData: feeData ?? null,
}
// For token results that share the same TokenProject id, use the token with highest volume
......
apps/mobile/src/features/openai/OpenAIContext.tsx
View file @ be21e483
......@@ -397,10 +397,7 @@ function _OpenAIContextProvider({ children }: { children: React.ReactNode }): JS
const listener = Linking.addEventListener('url', (event) => {
if (event.url.startsWith('uniswap://openai')) {
const capturedPhrase = decodeURI(event.url.split('uniswap://openai?capturedPhrase=')[1] ?? '')
capturedPhrase &&
sendMessage(capturedPhrase).catch((e) =>
logger.error(e, { tags: { file: 'OpenAIContext', function: 'siriListener' } }),
)
capturedPhrase && sendMessage(capturedPhrase).catch(console.error)
}
})
return listener.remove
......
apps/mobile/src/features/send/SendTokenForm.tsx
View file @ be21e483
......@@ -2,7 +2,7 @@
import { useCallback, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
import { Flex, Text, TouchableArea, useIsShortMobileDevice, useSporeColors } from 'ui/src'
import InfoCircleFilled from 'ui/src/assets/icons/info-circle-filled.svg'
import { AlertCircle } from 'ui/src/components/icons'
import { useDeviceDimensions } from 'ui/src/hooks/useDeviceDimensions'
......@@ -16,7 +16,6 @@ import { MAX_FIAT_INPUT_DECIMALS } from 'uniswap/src/constants/transactions'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import {
DecimalPadCalculateSpace,
DecimalPadCalculatedSpaceId,
DecimalPadInput,
DecimalPadInputRef,
} from 'uniswap/src/features/transactions/DecimalPadInput/DecimalPadInput'
......@@ -43,6 +42,7 @@ const TRANSFER_DIRECTION_BUTTON_BORDER_WIDTH = spacing.spacing4
export function SendTokenForm(): JSX.Element {
const { t } = useTranslation()
const colors = useSporeColors()
const isShortMobileDevice = useIsShortMobileDevice()
const { fullHeight } = useDeviceDimensions()
const { walletNeedsRestore, openWalletRestoreModal } = useTransactionModalContext()
......@@ -220,6 +220,8 @@ export function SendTokenForm(): JSX.Element {
maxDecimals,
})
console.log('truncatedValue in decimal set value', truncatedValue)
if (isFiatInput) {
exactAmountFiatRef.current = truncatedValue
} else {
......@@ -380,11 +382,9 @@ export function SendTokenForm(): JSX.Element {
) : null}
</Flex>
</Flex>
{!nftIn && (
<>
<DecimalPadCalculateSpace id={DecimalPadCalculatedSpaceId.Send} decimalPadRef={decimalPadRef} />
<DecimalPadCalculateSpace decimalPadRef={decimalPadRef} isShortMobileDevice={isShortMobileDevice} />
<Flex
animation="quick"
bottom={0}
......
apps/mobile/src/screens/FiatOnRampScreen.tsx
View file @ be21e483
......@@ -54,7 +54,6 @@ import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { FORAmountEnteredProperties } from 'uniswap/src/features/telemetry/types'
import {
DecimalPadCalculateSpace,
DecimalPadCalculatedSpaceId,
DecimalPadInput,
DecimalPadInputRef,
} from 'uniswap/src/features/transactions/DecimalPadInput/DecimalPadInput'
......@@ -330,8 +329,6 @@ export function FiatOnRampScreen({ navigation }: Props): JSX.Element {
setValue('')
setAmount(0)
valueRef.current = ''
resetSelection({ start: 0 })
setQuoteCurrency(defaultCurrency)
sendAnalyticsEvent(FiatOffRampEventName.FORBuySellToggled, {
......@@ -402,9 +399,7 @@ export function FiatOnRampScreen({ navigation }: Props): JSX.Element {
setShowTokenSelector(true)
}}
/>
<DecimalPadCalculateSpace id={DecimalPadCalculatedSpaceId.FiatOnRamp} decimalPadRef={decimalPadRef} />
<DecimalPadCalculateSpace decimalPadRef={decimalPadRef} isShortMobileDevice={isShortMobileDevice} />
<AnimatedFlex
bottom={0}
exiting={FadeOutDown}
......
apps/mobile/src/screens/Import/RestoreCloudBackupScreen.tsx
View file @ be21e483
......@@ -65,7 +65,7 @@ export function RestoreCloudBackupScreen({ navigation, route: { params } }: Prop
<Text adjustsFontSizeToFit variant="subheading1">
{sanitizeAddressText(shortenAddress(mnemonicId))}
</Text>
<Text adjustsFontSizeToFit color="$neutral2" variant="body3">
<Text adjustsFontSizeToFit color="$neutral2" variant="buttonLabel2">
{localizedDayjs.unix(createdAt).format(FORMAT_DATE_TIME_SHORT)}
</Text>
</Flex>
......
apps/mobile/src/screens/Onboarding/NotificationsSetupScreen.tsx
View file @ be21e483
......@@ -16,6 +16,7 @@ import { ElementName } from 'uniswap/src/features/telemetry/constants'
import i18n from 'uniswap/src/i18n/i18n'
import { OnboardingEntryPoint } from 'uniswap/src/types/onboarding'
import { OnboardingScreens } from 'uniswap/src/types/screens/mobile'
import { isIOS } from 'utilities/src/platform'
import { useOnboardingContext } from 'wallet/src/features/onboarding/OnboardingContext'
import { useNativeAccountExists } from 'wallet/src/features/wallet/hooks'
import { openSettings } from 'wallet/src/utils/linking'
......@@ -73,7 +74,7 @@ export function NotificationsSetupScreen({ navigation, route: { params } }: Prop
title={t('onboarding.notification.title')}
onSkip={navigateToNextScreen}
>
<Flex centered shrink>
<Flex centered shrink py={isIOS ? '$spacing60' : '$spacing16'}>
<NotificationsBackgroundImage />
</Flex>
<Trace logPress element={ElementName.Enable}>
......
apps/mobile/src/screens/Onboarding/SecuritySetupScreen.tsx
View file @ be21e483
import { NativeStackScreenProps } from '@react-navigation/native-stack'
import { BlurView } from 'expo-blur'
import React, { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ActivityIndicator, Alert, Image, Platform, StyleSheet } from 'react-native'
......@@ -17,7 +18,10 @@ import { OnboardingScreen } from 'src/features/onboarding/OnboardingScreen'
import { useCompleteOnboardingCallback } from 'src/features/onboarding/hooks'
import { Button, Flex, useIsDarkMode, useSporeColors } from 'ui/src'
import { SECURITY_SCREEN_BACKGROUND_DARK, SECURITY_SCREEN_BACKGROUND_LIGHT } from 'ui/src/assets'
import FaceIcon from 'ui/src/assets/icons/faceid-thin.svg'
import FingerprintIcon from 'ui/src/assets/icons/fingerprint.svg'
import { Lock } from 'ui/src/components/icons'
import { borderRadii, imageSizes, opacify } from 'ui/src/theme'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { ElementName } from 'uniswap/src/features/telemetry/constants'
import { ImportType } from 'uniswap/src/types/onboarding'
......@@ -31,6 +35,7 @@ export function SecuritySetupScreen({ route: { params } }: Props): JSX.Element {
const { t } = useTranslation()
const colors = useSporeColors()
const dispatch = useDispatch()
const isDarkMode = useIsDarkMode()
const [isLoadingAccount, setIsLoadingAccount] = useState(false)
const [showWarningModal, setShowWarningModal] = useState(false)
......@@ -114,10 +119,27 @@ export function SecuritySetupScreen({ route: { params } }: Props): JSX.Element {
title={t('onboarding.security.title')}
onSkip={onSkipPressed}
>
<Flex centered shrink gap="$spacing16">
<Flex>
<Flex centered shrink gap="$spacing16" my="$spacing12" position="relative" py="$spacing24">
<Flex pt="$spacing24">
<SecurityBackgroundImage />
</Flex>
<Flex
backgroundColor={opacify(35, colors.surface1.val)}
borderColor={opacify(15, colors.white.val)}
borderRadius="$rounded16"
borderWidth={1}
overflow="hidden"
p="$spacing36"
position="absolute"
top={0}
>
<BlurView intensity={isDarkMode ? (isIOS ? 20 : 80) : 40} style={styles.blurView} tint="dark" />
{isTouchIdDevice ? (
<FingerprintIcon color={colors.white.val} height={imageSizes.image48} width={imageSizes.image48} />
) : (
<FaceIcon color={colors.white.val} height={imageSizes.image48} width={imageSizes.image48} />
)}
</Flex>
</Flex>
<Trace logPress element={ElementName.Enable}>
<Button theme="primary" onPress={onPressEnableSecurity}>
......@@ -147,6 +169,10 @@ const SecurityBackgroundImage = (): JSX.Element => {
}
const styles = StyleSheet.create({
blurView: {
...StyleSheet.absoluteFillObject,
borderRadius: borderRadii.rounded16,
},
image: {
height: '100%',
},
......
apps/mobile/src/screens/TokenDetailsScreen.tsx
View file @ be21e483
......@@ -200,7 +200,7 @@ function TokenDetails({
const [showWarningModal, setShowWarningModal] = useState(false)
const [showBuyNativeTokenModal, setShowBuyNativeTokenModal] = useState(false)
const { tokenWarningDismissed } = useDismissedTokenWarnings(
const { tokenWarningDismissed, onDismissTokenWarning } = useDismissedTokenWarnings(
isNativeCurrency ? undefined : { chainId: currencyChainId, address: currencyAddress },
)
......@@ -294,11 +294,12 @@ function TokenDetails({
])
const onAcceptWarning = useCallback(() => {
onDismissTokenWarning()
setShowWarningModal(false)
if (activeTransactionType !== undefined) {
navigateToSwapFlow({ currencyField: activeTransactionType, currencyAddress, currencyChainId })
}
}, [activeTransactionType, currencyAddress, currencyChainId, navigateToSwapFlow])
}, [activeTransactionType, currencyAddress, currencyChainId, onDismissTokenWarning, navigateToSwapFlow])
const openTokenWarningModal = (): void => {
setShowWarningModal(true)
......@@ -344,7 +345,9 @@ function TokenDetails({
</AnimatedFlex>
) : null}
<Flex gap="$spacing16" mb="$spacing8" px="$spacing16">
{tokenProtectionEnabled && <TokenWarningCard currencyInfo={currencyInfo} onPress={openTokenWarningModal} />}
{tokenProtectionEnabled && (
<TokenWarningCard currencyInfo={currencyInfo} onPressCtaButton={openTokenWarningModal} />
)}
{isChainEnabled && (
<TokenBalances
currentChainBalance={currentChainBalance}
......
apps/web/cypress/e2e/redirects.test.ts
View file @ be21e483
......@@ -21,15 +21,3 @@ describe('RedirectExplore', () => {
cy.url().should('match', /\/explore\/tokens\/optimism\/NATIVE/)
})
})
describe('Legacy Pool Redirects', () => {
it('should redirect /pool to /positions', () => {
cy.visit('/pool')
cy.url().should('match', /\/positions/)
})
it('should redirect /pool/:tokenId with chain param to /positions/v3/:chainName/:tokenId', () => {
cy.visit('/pool/123?chain=mainnet')
cy.url().should('match', /\/positions\/v3\/ethereum\/123/)
})
})
apps/web/package.json
View file @ be21e483
......@@ -189,10 +189,10 @@
"@uniswap/permit2-sdk": "1.3.0",
"@uniswap/redux-multicall": "1.1.8",
"@uniswap/router-sdk": "1.14.3",
"@uniswap/sdk-core": "5.9.0",
"@uniswap/sdk-core": "5.8.4",
"@uniswap/smart-order-router": "3.17.3",
"@uniswap/token-lists": "1.0.0-beta.33",
"@uniswap/uniswapx-sdk": "2.1.0-beta.18",
"@uniswap/uniswapx-sdk": "^2.1.0-beta.14",
"@uniswap/universal-router-sdk": "4.5.2",
"@uniswap/v2-core": "1.0.1",
"@uniswap/v2-periphery": "1.1.0-beta.0",
......
apps/web/public/.well-known/apple-app-site-association deleted 100644 → 0
View file @ 35df6944
{
"applinks": {
"details": [
{
"appIDs": [
"JH3UHGZD75.com.uniswap.mobile",
"JH3UHGZD75.com.uniswap.mobile.dev"
],
"components": [
{
"#": "/nfts/asset/*",
"comment": "NFT Item"
},
{
"#": "/nfts/collection/*",
"comment": "NFT Collection"
},
{
"#": "/tokens/*",
"comment": "Token address"
},
{
"#": "/address/*",
"comment": "Wallet address"
},
{
"/": "/nfts/asset/*",
"comment": "NFT Item"
},
{
"/": "/nfts/collection/*",
"comment": "NFT Collection"
},
{
"/": "/tokens/*",
"comment": "Token address"
},
{
"/": "/address/*",
"comment": "Wallet address"
}
]
}
]
},
"webcredentials": {
"apps": [
"JH3UHGZD75.com.uniswap.mobile",
"JH3UHGZD75.com.uniswap.mobile.beta",
"JH3UHGZD75.com.uniswap.mobile.dev"
]
}
}
apps/web/public/.well-known/assetlinks.json
View file @ be21e483
[
{
"relation": [
"delegate_permission/common.handle_all_urls",
"delegate_permission/common.get_login_creds"
],
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.uniswap.mobile",
"sha256_cert_fingerprints": [
"49:D9:3D:5D:FB:AA:64:A4:64:80:85:0F:39:A8:C1:D9:25:D3:D4:BC:8E:6B:1F:45:0C:EA:AF:B1:0C:27:DF:B8",
"F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"
]
"sha256_cert_fingerprints":
["49:D9:3D:5D:FB:AA:64:A4:64:80:85:0F:39:A8:C1:D9:25:D3:D4:BC:8E:6B:1F:45:0C:EA:AF:B1:0C:27:DF:B8", "F9:E9:E3:F0:04:28:66:62:81:44:50:7E:D6:A9:5F:B9:65:39:02:70:1D:13:74:15:D3:E1:A3:1B:D4:38:3A:1F"]
}
},
{
"relation": [
"delegate_permission/common.handle_all_urls",
"delegate_permission/common.get_login_creds"
],
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.uniswap.mobile.beta",
"sha256_cert_fingerprints": [
"75:41:9C:2D:01:4A:88:4E:8D:C6:EF:E5:51:54:28:6B:99:05:31:43:AD:84:B4:EB:39:28:B8:C3:C4:CE:48:E3",
"54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"
]
"sha256_cert_fingerprints":
["75:41:9C:2D:01:4A:88:4E:8D:C6:EF:E5:51:54:28:6B:99:05:31:43:AD:84:B4:EB:39:28:B8:C3:C4:CE:48:E3", "54:4B:62:33:17:9B:5F:A8:E6:5D:D3:A6:E5:9D:80:5F:A5:02:7F:E2:14:B8:C1:7A:AC:4B:8D:E0:65:49:87:41"]
}
},
{
"relation": [
"delegate_permission/common.handle_all_urls",
"delegate_permission/common.get_login_creds"
],
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "com.uniswap.mobile.dev",
"sha256_cert_fingerprints": [
"45:F8:15:02:C5:4F:AD:82:E7:51:F0:9C:D1:CA:77:C8:C9:BF:06:A6:D9:5A:55:4F:9E:B8:5F:81:33:2B:D0:DB",
"02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3",
"FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"
]
"sha256_cert_fingerprints":
["45:F8:15:02:C5:4F:AD:82:E7:51:F0:9C:D1:CA:77:C8:C9:BF:06:A6:D9:5A:55:4F:9E:B8:5F:81:33:2B:D0:DB", "02:E6:1C:76:8C:75:C3:78:C8:8C:FE:7B:2E:8F:4B:E1:FA:47:F2:F6:1A:DB:57:69:4A:41:99:C6:71:2C:AB:E3", "FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C"]
}
}
]
]
\ No newline at end of file
apps/web/public/app-sitemap.xml
View file @ be21e483
......@@ -126,4 +126,16 @@
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://app.uniswap.org/positions/create</loc>
<lastmod>2024-09-17T19:57:27.976Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://app.uniswap.org/positions</loc>
<lastmod>2024-09-17T19:57:27.976Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
</urlset>
apps/web/public/apple-app-site-association
View file @ be21e483
......@@ -42,12 +42,5 @@
]
}
]
},
"webcredentials": {
"apps": [
"JH3UHGZD75.com.uniswap.mobile",
"JH3UHGZD75.com.uniswap.mobile.beta",
"JH3UHGZD75.com.uniswap.mobile.dev"
]
}
}
apps/web/public/csp.json
View file @ be21e483
......@@ -94,6 +94,7 @@
"https://wallet.crypto.com",
"https://web3.1inch.io",
"https://mainnet.era.zksync.io/",
"https://9bxqhlmige.execute-api.us-east-2.amazonaws.com",
"wss://*.uniswap.org",
"wss://relay.walletconnect.com",
"wss://relay.walletconnect.org",
......
apps/web/public/nfts-sitemap.xml
View file @ be21e483
This diff is collapsed.
apps/web/public/pools-sitemap.xml
View file @ be21e483
This diff is collapsed.
apps/web/public/tokens-sitemap.xml
View file @ be21e483
This diff is collapsed.
apps/web/src/components/Charts/ChartHeader.tsx
View file @ be21e483
......@@ -8,6 +8,8 @@ import { EllipsisTamaguiStyle } from 'theme/components'
import { ThemedText } from 'theme/components/text'
import { Flex, Text, styled } from 'ui/src'
import { PriceSource } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { NumberType, useFormatter } from 'utils/formatNumbers'
export type ChartHeaderProtocolInfo = { protocol: PriceSource; value?: number }
......@@ -20,7 +22,7 @@ const ProtocolLegendWrapper = styled(Flex, {
gap: '$gap12',
pointerEvents: 'none',
variants: {
hover: {
isMultichainExploreEnabled: {
true: {
right: 'unset',
p: '$spacing8',
......@@ -39,28 +41,49 @@ const ProtocolLegendWrapper = styled(Flex, {
function ProtocolLegend({ protocolData }: { protocolData?: ChartHeaderProtocolInfo[] }) {
const { formatFiatPrice } = useFormatter()
const theme = useTheme()
const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
return (
<ProtocolLegendWrapper id={PROTOCOL_LEGEND_ELEMENT_ID} hover={true}>
<ProtocolLegendWrapper
id={isMultichainExploreEnabled ? PROTOCOL_LEGEND_ELEMENT_ID : undefined}
isMultichainExploreEnabled={isMultichainExploreEnabled}
>
{protocolData
?.map(({ value, protocol }) => {
const display = value ? formatFiatPrice({ price: value, type: NumberType.ChartFiatValue }) : null
const display = value
? formatFiatPrice({ price: value, type: NumberType.ChartFiatValue })
: isMultichainExploreEnabled
? null
: getProtocolName(protocol)
return (
!!display && (
<Flex row gap={8} justifyContent="flex-end" key={protocol + '_blip'} width="max-content">
<Text variant="body4" textAlign="right" color="$neutral2" lineHeight={12}>
{getProtocolName(protocol)}
</Text>
<Flex
row
gap={isMultichainExploreEnabled ? 8 : 6}
justifyContent="flex-end"
key={protocol + '_blip'}
width={isMultichainExploreEnabled ? 'max-content' : undefined}
>
{isMultichainExploreEnabled ? (
<Text variant="body4" textAlign="right" color="$neutral2" lineHeight={12}>
{getProtocolName(protocol)}
</Text>
) : (
<Text variant="body4" width={80} textAlign="right" lineHeight={12} {...EllipsisTamaguiStyle}>
{display}
</Text>
)}
<Flex
borderRadius="$rounded4"
width={12}
height={12}
backgroundColor={getProtocolColor(protocol, theme)}
/>
<Text variant="body4" textAlign="right" lineHeight={12} {...EllipsisTamaguiStyle}>
{display}
</Text>
{isMultichainExploreEnabled && (
<Text variant="body4" textAlign="right" lineHeight={12} {...EllipsisTamaguiStyle}>
{display}
</Text>
)}
</Flex>
)
)
......@@ -118,6 +141,7 @@ export function ChartHeader({
additionalFields,
}: ChartHeaderProps) {
const isHovered = !!time
const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
return (
<Flex
row
......@@ -136,7 +160,7 @@ export function ChartHeader({
<HeaderTimeDisplay time={time} timePlaceholder={timePlaceholder} />
</Flex>
</Flex>
{isHovered && protocolData && <ProtocolLegend protocolData={protocolData} />}
{((isHovered && protocolData) || !isMultichainExploreEnabled) && <ProtocolLegend protocolData={protocolData} />}
</Flex>
)
}
apps/web/src/components/Charts/SparklineChart/index.tsx
View file @ be21e483
......@@ -4,7 +4,7 @@ import { LoadingBubble } from 'components/Tokens/loading'
import { getChainFromChainUrlParam } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { curveCardinal, scaleLinear } from 'd3'
import { SparklineMap, TopToken } from 'graphql/data/types'
import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
import { PricePoint } from 'graphql/data/util'
import styled, { useTheme } from 'lib/styled-components'
import { memo } from 'react'
......
apps/web/src/components/Charts/StackedLineChart/stacked-area-series/renderer.ts
View file @ be21e483
......@@ -87,11 +87,14 @@ export class StackedAreaSeriesRenderer<TData extends StackedAreaData> implements
const colorsCount = options.colors.length
const isHovered = options.hoveredLogicalIndex && options.hoveredLogicalIndex !== -1
const isMultichainExploreEnabled = !!options.gradients
areaPaths.forEach((areaPath, index) => {
// Modification: determine area fill opacity based on number of lines and hover state
if (areaPaths.length === 1) {
ctx.globalAlpha = 0.12 // single-line charts have low opacity fill
} else if (!isMultichainExploreEnabled) {
ctx.globalAlpha = isHovered ? 0.24 : 1
}
const gradient = options.gradients
......@@ -106,7 +109,7 @@ export class StackedAreaSeriesRenderer<TData extends StackedAreaData> implements
ctx.fill(areaPath)
})
ctx.lineWidth = options.lineWidth
ctx.lineWidth = options.lineWidth * (isMultichainExploreEnabled ? 1 : renderingScope.verticalPixelRatio)
ctx.lineJoin = 'round'
fullLinesMeshed.toReversed().forEach((linePath, index) => {
......@@ -114,7 +117,7 @@ export class StackedAreaSeriesRenderer<TData extends StackedAreaData> implements
const color = options.colors[unreversedIndex % colorsCount]
ctx.strokeStyle = color
ctx.fillStyle = color
ctx.globalAlpha = isHovered ? 0.24 : 1
ctx.globalAlpha = isHovered && isMultichainExploreEnabled ? 0.24 : 1
// Bottom line is just the x-axis, which should not be drawn
if (index !== fullLinesMeshed.length - 1) {
......
apps/web/src/components/Charts/VolumeChart/CustomVolumeChartModel.tsx
View file @ be21e483
......@@ -9,6 +9,7 @@ export type CustomVolumeChartModelParams = {
colors: string[]
headerHeight: number
useThinCrosshair?: boolean
isMultichainExploreEnabled?: boolean
background?: string
}
......@@ -25,6 +26,7 @@ export class CustomVolumeChartModel<TDataType extends CustomHistogramData> exten
this.series = this.api.addCustomSeries(
new CustomHistogramSeries({
colors: params.colors,
isMultichainExploreEnabled: params.isMultichainExploreEnabled,
background: params.background,
}),
)
......
apps/web/src/components/Charts/VolumeChart/custom-histogram-series.tsx
View file @ be21e483
......@@ -23,11 +23,13 @@ export class CustomHistogramSeries<TData extends CustomHistogramData>
{
_renderer: CustomHistogramSeriesRenderer<TData>
_colors: string[]
_isMultichainExploreEnabled?: boolean
_background?: string
constructor(props: CustomHistogramProps) {
this._renderer = new CustomHistogramSeriesRenderer(props)
this._colors = props.colors
this._isMultichainExploreEnabled = props.isMultichainExploreEnabled
this._background = props.background
}
......
apps/web/src/components/Charts/VolumeChart/renderer.tsx
View file @ be21e483
......@@ -57,6 +57,7 @@ function cumulativeBuildUp(data: StackedHistogramData): number[] {
export interface CustomHistogramProps {
colors: string[]
isMultichainExploreEnabled?: boolean
background?: string
}
......@@ -64,10 +65,12 @@ export class CustomHistogramSeriesRenderer<TData extends CustomHistogramData> im
_data: PaneRendererCustomData<Time, TData> | null = null
_options: CustomHistogramSeriesOptions | null = null
_colors: string[]
_isMultichainExploreEnabled?: boolean
_background?: string
constructor(props: CustomHistogramProps) {
this._colors = props.colors
this._isMultichainExploreEnabled = props.isMultichainExploreEnabled
this._background = props.background
}
......@@ -131,11 +134,18 @@ export class CustomHistogramSeriesRenderer<TData extends CustomHistogramData> im
const totalBox = positionsBox(zeroY, stack.ys[stack.ys.length - 1], renderingScope.verticalPixelRatio)
ctx.beginPath()
const isMultichainExploreEnabled = this._isMultichainExploreEnabled
if (this._background) {
ctx.fillStyle = this._background
}
ctx.roundRect(column.left + margin, totalBox.position, width - margin, totalBox.length, 4)
ctx.roundRect(
column.left + margin,
totalBox.position,
width - margin,
totalBox.length,
isMultichainExploreEnabled ? 4 : 8,
)
ctx.fill()
// Modification: draw the stack's boxes atop the total volume bar, resulting in the top and bottom boxes being rounded
......@@ -147,9 +157,9 @@ export class CustomHistogramSeriesRenderer<TData extends CustomHistogramData> im
const color = this._colors[this._colors.length - 1 - index] // color v2, then v3
const stackBoxPositions = positionsBox(previousY, y, renderingScope.verticalPixelRatio)
ctx.fillStyle = color
ctx.globalAlpha = isStackedHistogram && !isHovered ? 0.24 : 1
ctx.globalAlpha = isStackedHistogram && !isHovered && isMultichainExploreEnabled ? 0.24 : 1
ctx.fillRect(column.left + margin, stackBoxPositions.position, width - margin, stackBoxPositions.length)
if (isStackedHistogram && !isHovered) {
if (isStackedHistogram && isMultichainExploreEnabled && !isHovered) {
ctx.globalAlpha = 1
ctx.fillStyle = color
ctx.fillRect(column.left + margin, stackBoxPositions.position, width - margin, 2)
......
apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
View file @ be21e483
......@@ -242,13 +242,18 @@ export default function FeatureFlagModal() {
<FeatureFlagOption flag={FeatureFlags.V2Everywhere} label="Enable V2 Everywhere" />
<FeatureFlagOption flag={FeatureFlags.V4Everywhere} label="Enable V4 Everywhere" />
<FeatureFlagOption flag={FeatureFlags.Realtime} label="Realtime activity updates" />
<FeatureFlagOption flag={FeatureFlags.RestExplore} label="Explore Data from new REST backend" />
<FeatureFlagOption flag={FeatureFlags.MultipleRoutingOptions} label="Enable Multiple Routing Options" />
<FeatureFlagOption flag={FeatureFlags.NavigationHotkeys} label="Navigation hotkeys" />
<FeatureFlagOption flag={FeatureFlags.TokenProtection} label="Warning UX for scam/dangerous tokens" />
<FeatureFlagGroup name="New Chains">
<FeatureFlagOption flag={FeatureFlags.Zora} label="Enable Zora" />
<FeatureFlagOption flag={FeatureFlags.WorldChain} label="Enable World Chain" />
</FeatureFlagGroup>
<FeatureFlagOption flag={FeatureFlags.L2NFTs} label="L2 NFTs" />
<FeatureFlagGroup name="Multichain UX">
<FeatureFlagOption flag={FeatureFlags.MultichainExplore} label="Enable Multichain Explore Page" />
</FeatureFlagGroup>
<FeatureFlagGroup name="Quick routes">
<FeatureFlagOption flag={FeatureFlags.QuickRouteMainnet} label="Enable quick routes for Mainnet" />
<DynamicConfigDropdown
......
apps/web/src/components/Liquidity/FeeTierSearchModal.tsx
View file @ be21e483
......@@ -10,12 +10,11 @@ import { useEffect, useState } from 'react'
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import styled from 'styled-components'
import { ClickableTamaguiStyle, CloseIcon } from 'theme/components'
import { Button, Flex, Text } from 'ui/src'
import { Button, Flex, Input, Text } from 'ui/src'
import { BackArrow } from 'ui/src/components/icons/BackArrow'
import { CheckCircleFilled } from 'ui/src/components/icons/CheckCircleFilled'
import { Plus } from 'ui/src/components/icons/Plus'
import { Search } from 'ui/src/components/icons/Search'
import { AmountInput, numericInputRegex } from 'uniswap/src/components/CurrencyInputPanel/AmountInput'
import { Modal } from 'uniswap/src/components/modals/Modal'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { useTranslation } from 'uniswap/src/i18n'
......@@ -79,17 +78,11 @@ export function FeeTierSearchModal() {
setCreateFeeValue((prev) => {
let newValue = parseFloat(prev)
if (autoDecrementing) {
if (!prev || prev === '') {
return '0'
}
newValue -= 0.01
if (newValue < 0) {
return '0'
}
} else if (autoIncrementing) {
if (!prev || prev === '') {
return '0.01'
}
newValue += 0.01
if (newValue > 100) {
return '100'
......@@ -255,54 +248,19 @@ export function FeeTierSearchModal() {
</Flex>
) : (
<>
<Flex
row
alignItems="center"
py="$padding12"
px="$padding8"
backgroundColor="$surface2"
borderRadius="$rounded24"
gap="$gap8"
>
<Flex row py="$padding12" px="$padding8" backgroundColor="$surface2" borderRadius="$rounded24">
<Search size={20} color="$neutral2" />
<AmountInput
<Input
width="100%"
autoFocus
alignSelf="stretch"
height="100%"
fontWeight="$book"
backgroundColor="$transparent"
borderRadius={0}
borderWidth={0}
textAlign="left"
value={searchValue}
fontFamily="$subHeading"
fontSize={18}
px="$none"
py="$none"
placeholder={t('fee.tier.search.short')}
placeholderTextColor="$neutral3"
onChangeText={(value) => {
if (value === '.') {
setSearchValue('0.')
return
}
// Prevent two decimals
if (value.indexOf('.') !== -1 && value.indexOf('.', value.indexOf('.') + 1) !== -1) {
return
}
// Prevent addition of non-numeric characters to the end of the string
if (!numericInputRegex.test(value)) {
setSearchValue(value.slice(0, -1))
return
}
const newValue = parseFloat(value)
if (newValue > 100) {
setSearchValue('100')
return
}
setSearchValue(newValue >= 0 ? value : '')
placeholderTextColor="$neutral2"
onChange={(event: any) => {
setSearchValue(event.target.value)
}}
value={searchValue}
/>
</Flex>
<Flex width="100%" gap="$gap4" maxHeight={350} overflow="scroll">
......
apps/web/src/components/Liquidity/HookModal.tsx deleted 100644 → 0
View file @ 35df6944
import { FlagWarning, getFlagsFromContractAddress, getFlagWarning } from 'components/Liquidity/utils'
import { GetHelpHeader } from 'components/Modal/GetHelpHeader'
import { useCreatePositionContext } from 'pages/Pool/Positions/create/CreatePositionContext'
import { useMemo, useState } from 'react'
import { CopyHelper } from 'theme/components'
import { Button, Checkbox, Flex, HeightAnimator, Separator, Text, TouchableArea } from 'ui/src'
import { RotatableChevron } from 'ui/src/components/icons/RotatableChevron'
import { Modal } from 'uniswap/src/components/modals/Modal'
import { LearnMoreLink } from 'uniswap/src/components/text/LearnMoreLink'
import { uniswapUrls } from 'uniswap/src/constants/urls'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { useTranslation } from 'uniswap/src/i18n'
import { shortenAddress } from 'uniswap/src/utils/addresses'
function HookWarnings({ flags }: { flags: FlagWarning[] }) {
const { t } = useTranslation()
const [expandedProperties, setExpandedProperties] = useState(false)
const toggleExpandedProperties = () => {
setExpandedProperties((state) => !state)
}
if (!flags.length) {
return null
}
return (
<>
<Separator my="$gap8" />
<TouchableArea onPress={toggleExpandedProperties}>
<Flex row alignItems="center">
<Flex flex={1}>
<Text variant="buttonLabel3" color="$neutral2">
{t('position.addingHook.viewProperties')}
</Text>
</Flex>
<RotatableChevron direction={expandedProperties ? 'up' : 'down'} color="$neutral2" width={16} height={16} />
</Flex>
</TouchableArea>
{expandedProperties && (
<Flex gap="$gap8" mt="$padding16">
{flags.map(({ name, info, dangerous }) => (
<Flex key={name} row>
<Flex flex={1}>
<Text variant="body3" color={dangerous ? '$statusCritical' : '$neutral2'}>
{name}
</Text>
</Flex>
<Flex flexWrap="wrap" width="55%">
<Text variant="body4" color={dangerous ? '$statusCritical' : '$neutral2'}>
{info}
</Text>
</Flex>
</Flex>
))}
</Flex>
)}
</>
)
}
export function HookModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
const { t } = useTranslation()
const [disclaimerChecked, setDisclaimerChecked] = useState(false)
const {
setPositionState,
positionState: { hook },
} = useCreatePositionContext()
const clearHook = () => {
setPositionState((state) => ({
...state,
hook: undefined,
}))
onClose()
}
const onContinue = () => {
if (disclaimerChecked) {
onClose()
}
}
const onDisclaimerChecked = () => {
setDisclaimerChecked((state) => !state)
}
const { flags, hasDangerous } = useMemo(() => {
if (!hook) {
return {
flags: [],
hasDangerous: false,
}
}
let hasDangerous = false
const flagInfos: Record<string, FlagWarning> = {}
getFlagsFromContractAddress(hook).forEach((flag) => {
const warning = getFlagWarning(flag, t)
if (warning?.dangerous) {
hasDangerous = true
}
if (warning?.name) {
flagInfos[warning.name] = warning
}
})
return {
flags: Object.values(flagInfos),
hasDangerous,
}
}, [hook, t])
if (!hook) {
return null
}
// TODO(WEB-5289): match entrance/exit animations with the currency selector
return (
<Modal name={ModalName.Hook} onClose={onClose} isModalOpen={isOpen}>
<Flex gap="$spacing24">
<GetHelpHeader closeModal={onClose} />
<Flex gap="$gap8" alignContent="center" px="$padding20">
<Text variant="subheading1" textAlign="center">
{hasDangerous ? t('position.hook.warningHeader') : t('position.addingHook')}
</Text>
<Text variant="body2" color="$neutral2" textAlign="center">
{hasDangerous ? t('position.hook.warningInfo') : t('position.addingHook.disclaimer')}
</Text>
<LearnMoreLink centered url={uniswapUrls.helpArticleUrls.v4HooksInfo} textVariant="buttonLabel3" />
</Flex>
<HeightAnimator animation="fast">
<Flex borderRadius="$rounded16" backgroundColor="$surface2" py="$gap12" px="$gap16">
<Flex row>
<Flex flex={1}>
<Text variant="body3" color="$neutral2">
{t('common.text.contract')}
</Text>
</Flex>
<CopyHelper toCopy={hook} iconSize={16} iconPosition="right" color="$neutral2">
<Text variant="body3" color="$neutral2">
{shortenAddress(hook)}
</Text>
</CopyHelper>
</Flex>
<HookWarnings flags={flags} />
</Flex>
{hasDangerous && (
<Flex
row
alignItems="center"
gap="$gap12"
borderRadius="$rounded16"
backgroundColor="$surface2"
p="$gap12"
mt="$spacing24"
>
<Checkbox size="$icon.16" checked={disclaimerChecked} onPress={onDisclaimerChecked} />
<Text variant="buttonLabel4" color="$neutral2">
{t('position.hook.disclaimer')}
</Text>
</Flex>
)}
<Flex row gap="$gap8" mt="$spacing24">
<Button size="small" theme="secondary" width="49%" onPress={clearHook}>
{t('position.removeHook')}
</Button>
<Button disabled={!disclaimerChecked} size="small" theme="primary" width="49%" onPress={onContinue}>
{t('common.button.continue')}
</Button>
</Flex>
</HeightAnimator>
</Flex>
</Modal>
)
}
apps/web/src/components/Liquidity/LiquidityPositionCard.tsx
View file @ be21e483
// eslint-disable-next-line no-restricted-imports
import { PositionStatus } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { LiquidityPositionFeeStats } from 'components/Liquidity/LiquidityPositionFeeStats'
import { LiquidityPositionInfo } from 'components/Liquidity/LiquidityPositionInfo'
import { useV3OrV4PositionDerivedInfo } from 'components/Liquidity/hooks'
......@@ -21,7 +20,7 @@ export function LiquidityPositionCard({ liquidityPosition, ...rest }: { liquidit
fiatValue0 && fiatValue1
? formatCurrencyAmount({
value: fiatValue0.add(fiatValue1),
type: NumberType.FiatStandard,
type: NumberType.FiatTokenPrice,
})
: undefined
const v2FormattedUsdValue =
......@@ -33,8 +32,7 @@ export function LiquidityPositionCard({ liquidityPosition, ...rest }: { liquidit
fiatFeeValue0 && fiatFeeValue1
? formatCurrencyAmount({
value: fiatFeeValue0.add(fiatFeeValue1),
type:
liquidityPosition.status === PositionStatus.CLOSED ? NumberType.FiatStandard : NumberType.FiatTokenPrice,
type: NumberType.FiatTokenPrice,
})
: undefined
......
apps/web/src/components/Liquidity/LiquidityPositionInfo.tsx
View file @ be21e483
import { LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
import { BadgeData, LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
import { LiquidityPositionStatusIndicator } from 'components/Liquidity/LiquidityPositionStatusIndicator'
import { PositionInfo } from 'components/Liquidity/types'
import { getProtocolVersionLabel } from 'components/Liquidity/utils'
import { DoubleCurrencyAndChainLogo } from 'components/Logo/DoubleLogo'
import { ZERO_ADDRESS } from 'constants/misc'
import { Flex, Text } from 'ui/src'
import { DocumentList } from 'ui/src/components/icons/DocumentList'
interface LiquidityPositionInfoProps {
positionInfo: PositionInfo
......@@ -25,7 +27,18 @@ export function LiquidityPositionInfo({ positionInfo }: LiquidityPositionInfoPro
{currency0Amount?.currency.symbol} / {currency1Amount?.currency.symbol}
</Text>
<Flex row gap={2} alignItems="center">
<LiquidityPositionInfoBadges size="small" versionLabel={versionLabel} v4hook={v4hook} feeTier={feeTier} />
<LiquidityPositionInfoBadges
size="small"
badges={
[
versionLabel ? { label: versionLabel } : undefined,
v4hook && v4hook !== ZERO_ADDRESS
? { label: v4hook, copyable: true, icon: <DocumentList color="$neutral2" size={16} /> }
: undefined,
feeTier ? { label: `${Number(feeTier) / 10000}%` } : undefined,
].filter(Boolean) as BadgeData[]
}
/>
</Flex>
</Flex>
<LiquidityPositionStatusIndicator status={status} />
......
apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.test.tsx
View file @ be21e483
import { LiquidityPositionInfoBadges } from 'components/Liquidity/LiquidityPositionInfoBadges'
import { render } from 'test-utils/render'
const testBadgeData = [{ label: 'test', copyable: true }, { label: 'test2' }]
describe('LiquidityPositionInfoBadges', () => {
it('should render with default size', () => {
const { getByText } = render(<LiquidityPositionInfoBadges versionLabel="2" feeTier="100" size="default" />)
expect(getByText('2')).toBeInTheDocument()
const { getByText } = render(<LiquidityPositionInfoBadges badges={testBadgeData} size="default" />)
expect(getByText('test')).toBeInTheDocument()
})
it('should render with small size', () => {
const { getByText } = render(<LiquidityPositionInfoBadges versionLabel="2" feeTier="100" size="small" />)
expect(getByText('2')).toBeInTheDocument()
const { getByText } = render(<LiquidityPositionInfoBadges badges={testBadgeData} size="small" />)
expect(getByText('test')).toBeInTheDocument()
})
it('should render with multiple badges', () => {
const { getByText } = render(<LiquidityPositionInfoBadges versionLabel="2" feeTier="100" size="default" />)
expect(getByText('2')).toBeInTheDocument()
expect(getByText('0.01%')).toBeInTheDocument()
const { getByText } = render(<LiquidityPositionInfoBadges badges={testBadgeData} size="default" />)
expect(getByText('test')).toBeInTheDocument()
expect(getByText('test2')).toBeInTheDocument()
})
})
apps/web/src/components/Liquidity/LiquidityPositionInfoBadges.tsx
View file @ be21e483
import { FeeAmount } from '@uniswap/v3-sdk'
import { ZERO_ADDRESS } from 'constants/misc'
import { useMemo } from 'react'
import { CopyHelper } from 'theme/components'
import { styled, Text } from 'ui/src'
import { DocumentList } from 'ui/src/components/icons/DocumentList'
import { isAddress, shortenAddress } from 'utilities/src/addresses'
export const PositionInfoBadge = styled(Text, {
......@@ -46,33 +42,19 @@ function getPlacement(index: number, length: number): 'start' | 'middle' | 'end'
return length === 1 ? 'only' : index === 0 ? 'start' : index === length - 1 ? 'end' : 'middle'
}
interface BadgeData {
export interface BadgeData {
label: string
copyable?: boolean
icon?: JSX.Element
}
export function LiquidityPositionInfoBadges({
versionLabel,
v4hook,
feeTier,
badges,
size = 'default',
}: {
versionLabel?: string
v4hook?: string
feeTier?: string | FeeAmount
badges: BadgeData[]
size: 'small' | 'default'
}): JSX.Element {
const badges = useMemo(() => {
return [
versionLabel ? { label: versionLabel } : undefined,
v4hook && v4hook !== ZERO_ADDRESS
? { label: v4hook, copyable: true, icon: <DocumentList color="$neutral2" size={16} /> }
: undefined,
feeTier ? { label: `${Number(feeTier) / 10000}%` } : undefined,
].filter(Boolean) as BadgeData[]
}, [versionLabel, v4hook, feeTier])
return (
<>
{badges.map(({ label, copyable, icon }, index) => {
......
apps/web/src/components/Liquidity/LiquidityPositionPriceRangeTile.tsx
View file @ be21e483
// eslint-disable-next-line no-restricted-imports
import { PositionStatus } from '@uniswap/client-pools/dist/pools/v1/types_pb'
import { Currency, Price } from '@uniswap/sdk-core'
import { LiquidityPositionStatusIndicator } from 'components/Liquidity/LiquidityPositionStatusIndicator'
import { useGetRangeDisplay } from 'components/Liquidity/hooks'
import { PriceOrdering } from 'components/PositionListItem'
import { useMemo, useState } from 'react'
......@@ -17,6 +19,7 @@ const InnerTile = styled(Flex, {
})
interface LiquidityPositionPriceRangeTileProps {
status?: PositionStatus
priceOrdering: PriceOrdering
token0CurrentPrice: Price<Currency, Currency>
token1CurrentPrice: Price<Currency, Currency>
......@@ -26,6 +29,7 @@ interface LiquidityPositionPriceRangeTileProps {
}
export function LiquidityPositionPriceRangeTile({
status,
priceOrdering,
token0CurrentPrice,
token1CurrentPrice,
......@@ -73,6 +77,7 @@ export function LiquidityPositionPriceRangeTile({
<Text variant="subheading1">
<Trans i18nKey="pool.priceRange" />
</Text>
{status && <LiquidityPositionStatusIndicator status={status} />}
</Flex>
<SegmentedControl
options={controlOptions}
......@@ -82,7 +87,7 @@ export function LiquidityPositionPriceRangeTile({
}}
/>
</Flex>
<Flex row width="100%" gap="$gap12" $lg={{ row: false }}>
<Flex row width="100%" gap="$gap12">
<InnerTile>
<Text variant="subheading2" color="$neutral2">
<Trans i18nKey="pool.minPrice" />
......
apps/web/src/components/Liquidity/types.ts
View file @ be21e483
......@@ -55,7 +55,6 @@ export type V3PositionInfo = BasePositionInfo & {
version: ProtocolVersion.V3
tokenId: string
pool?: V3Pool
poolId?: string
feeTier?: FeeAmount
position?: V3Position
v4hook: undefined
......@@ -65,7 +64,6 @@ type V4PositionInfo = BasePositionInfo & {
version: ProtocolVersion.V4
tokenId: string
pool?: V4Pool
poolId?: string
position?: V4Position
feeTier?: string
v4hook?: string
......
apps/web/src/components/Liquidity/utils.test.ts deleted 100644 → 0
View file @ 35df6944
import { HookFlag, getFlagsFromContractAddress } from 'components/Liquidity/utils'
describe('getFlagsFromContractAddress', () => {
it('should return an empty array for an address with no flags', () => {
const address = '0x1234567890123456789012345678901234560000'
expect(getFlagsFromContractAddress(address)).toEqual([])
})
it('should correctly identify a single flag', () => {
const address = '0x1234567890123456789012345678901234560200'
expect(getFlagsFromContractAddress(address)).toEqual([HookFlag.BeforeRemoveLiquidity])
})
it('should correctly identify multiple flags', () => {
const address = '0x1234567890123456789012345678901234567FFF'
expect(getFlagsFromContractAddress(address)).toEqual([
HookFlag.BeforeRemoveLiquidity,
HookFlag.AfterRemoveLiquidity,
HookFlag.BeforeAddLiquidity,
HookFlag.AfterAddLiquidity,
HookFlag.BeforeSwap,
HookFlag.AfterSwap,
HookFlag.BeforeDonate,
HookFlag.AfterDonate,
HookFlag.BeforeSwapReturnsDelta,
HookFlag.AfterSwapReturnsDelta,
HookFlag.AfterAddLiquidityReturnsDelta,
HookFlag.AfterRemoveLiquidityReturnsDelta,
])
})
it('should correctly identify a mix of flags (case 1)', () => {
const address = '0x123456789012345678901234567890123456789A'
expect(getFlagsFromContractAddress(address)).toEqual([
HookFlag.BeforeAddLiquidity,
HookFlag.BeforeSwap,
HookFlag.AfterDonate,
HookFlag.BeforeSwapReturnsDelta,
HookFlag.AfterAddLiquidityReturnsDelta,
])
})
it('should correctly identify a mix of flags (case 2)', () => {
const address = '0x12345678901234567890123456789012345678C0'
expect(getFlagsFromContractAddress(address)).toEqual([
HookFlag.BeforeAddLiquidity,
HookFlag.BeforeSwap,
HookFlag.AfterSwap,
])
})
it('should correctly identify a mix of flags (case 3)', () => {
const address = '0x123456789012345678901234567890123456780B'
expect(getFlagsFromContractAddress(address)).toEqual([
HookFlag.BeforeAddLiquidity,
HookFlag.BeforeSwapReturnsDelta,
HookFlag.AfterAddLiquidityReturnsDelta,
HookFlag.AfterRemoveLiquidityReturnsDelta,
])
})
it('should correctly identify a mix of flags (case 4)', () => {
const address = '0x0000000000000000000000000000000000002400'
expect(getFlagsFromContractAddress(address)).toEqual([HookFlag.AfterAddLiquidity])
})
})
apps/web/src/components/Liquidity/utils.tsx
View file @ be21e483
......@@ -254,7 +254,6 @@ export function parseRestPosition(position?: RestPosition): PositionInfo | undef
feeTier: parseV3FeeTier(v3Position.feeTier),
version: ProtocolVersion.V3,
pool,
poolId: position.position.value.poolId,
position: sdkPosition,
tickLower: v3Position.tickLower,
tickUpper: v3Position.tickUpper,
......@@ -286,21 +285,19 @@ export function parseRestPosition(position?: RestPosition): PositionInfo | undef
tickUpper: Number(v4Position.tickUpper),
})
: undefined
const poolId = V4Pool.getPoolId(token0, token1, Number(v4Position.feeTier), Number(v4Position.tickSpacing), hook)
return {
status: position.status,
feeTier: v4Position.feeTier,
feeTier: v4Position?.feeTier,
version: ProtocolVersion.V4,
position: sdkPosition,
pool,
poolId,
v4hook: hook,
tokenId: v4Position.tokenId,
tickLower: v4Position.tickLower,
tickUpper: v4Position.tickUpper,
tickSpacing: Number(v4Position.tickSpacing),
currency0Amount: CurrencyAmount.fromRawAmount(token0, v4Position.amount0 ?? 0),
currency1Amount: CurrencyAmount.fromRawAmount(token1, v4Position.amount1 ?? 0),
tickLower: v4Position?.tickLower,
tickUpper: v4Position?.tickUpper,
tickSpacing: Number(v4Position?.tickSpacing),
currency0Amount: CurrencyAmount.fromRawAmount(token0, v4Position?.amount0 ?? 0),
currency1Amount: CurrencyAmount.fromRawAmount(token1, v4Position?.amount1 ?? 0),
token0UncollectedFees: v4Position.token0UncollectedFees,
token1UncollectedFees: v4Position.token1UncollectedFees,
liquidity: v4Position.liquidity,
......@@ -355,86 +352,3 @@ export function calculateInvertedPrice({ price, invert }: { price?: Price<Curren
base: currentPrice?.baseCurrency,
}
}
export enum HookFlag {
BeforeAddLiquidity = 'before-add-liquidity',
AfterAddLiquidity = 'after-add-liquidity',
BeforeRemoveLiquidity = 'before-remove-liquidity',
AfterRemoveLiquidity = 'after-remove-liquidity',
BeforeSwap = 'before-swap',
AfterSwap = 'after-swap',
BeforeDonate = 'before-donate',
AfterDonate = 'after-donate',
BeforeSwapReturnsDelta = 'before-swap-returns-delta',
AfterSwapReturnsDelta = 'after-swap-returns-delta',
AfterAddLiquidityReturnsDelta = 'after-add-liquidity-returns-delta',
AfterRemoveLiquidityReturnsDelta = 'after-remove-liquidity-returns-delta',
}
// The flags are ordered with the dangerous ones on top so they are rendered first
const FLAGS: { [key in HookFlag]: number } = {
[HookFlag.BeforeRemoveLiquidity]: 1 << 9,
[HookFlag.AfterRemoveLiquidity]: 1 << 8,
[HookFlag.BeforeAddLiquidity]: 1 << 11,
[HookFlag.AfterAddLiquidity]: 1 << 10,
[HookFlag.BeforeSwap]: 1 << 7,
[HookFlag.AfterSwap]: 1 << 6,
[HookFlag.BeforeDonate]: 1 << 5,
[HookFlag.AfterDonate]: 1 << 4,
[HookFlag.BeforeSwapReturnsDelta]: 1 << 3,
[HookFlag.AfterSwapReturnsDelta]: 1 << 2,
[HookFlag.AfterAddLiquidityReturnsDelta]: 1 << 1,
[HookFlag.AfterRemoveLiquidityReturnsDelta]: 1 << 0,
}
export function getFlagsFromContractAddress(contractAddress: Address): HookFlag[] {
// Extract the last 4 hexadecimal digits from the address
const last4Hex = contractAddress.slice(-4)
// Convert the hex string to a binary string
const binaryStr = parseInt(last4Hex, 16).toString(2)
// Parse the last 12 bits of the binary string
const relevantBits = binaryStr.slice(-12)
// Determine which flags are active
const activeFlags = Object.entries(FLAGS)
.filter(([, bitPosition]) => (parseInt(relevantBits, 2) & bitPosition) !== 0)
.map(([flag]) => flag as HookFlag)
return activeFlags
}
export interface FlagWarning {
name: string
info: string
dangerous: boolean
}
export function getFlagWarning(flag: HookFlag, t: AppTFunction): FlagWarning | undefined {
switch (flag) {
case HookFlag.BeforeSwap:
case HookFlag.BeforeSwapReturnsDelta:
return {
name: t('common.swap'),
info: t('position.hook.swapWarning'),
dangerous: false,
}
case HookFlag.BeforeAddLiquidity:
case HookFlag.AfterAddLiquidity:
return {
name: t('common.addLiquidity'),
info: t('position.hook.liquidityWarning'),
dangerous: false,
}
case HookFlag.BeforeRemoveLiquidity:
case HookFlag.AfterRemoveLiquidity:
return {
name: t('pool.removeLiquidity'),
info: t('position.hook.removeWarning'),
dangerous: true,
}
}
return undefined
}
apps/web/src/components/Logo/QueryTokenLogo.tsx
View file @ be21e483
......@@ -4,7 +4,7 @@ import { getChainFromChainUrlParam } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
import { TokenQueryData } from 'graphql/data/Token'
import { TopToken } from 'graphql/data/types'
import { TopToken } from 'graphql/data/TopTokens'
import { gqlToCurrency } from 'graphql/data/util'
import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import { useMemo } from 'react'
......
apps/web/src/components/NavBar/ChainSelector/__snapshots__/ChainSelectorRow.test.tsx.snap
View file @ be21e483
......@@ -498,13 +498,6 @@ exports[`ChainSelectorRow should match snapshot for chainId 480 1`] = `
}
.c1 {
grid-column: 2;
grid-row: 1;
font-size: 16px;
font-weight: 485;
}
.c2 {
grid-column: 3;
grid-row: 1;
display: -webkit-box;
......@@ -531,23 +524,10 @@ exports[`ChainSelectorRow should match snapshot for chainId 480 1`] = `
>
<button
class="c0"
data-testid="World Chain-selector"
data-testid="undefined-selector"
>
<img
alt="World Chain logo"
aria-labelledby="titleID"
height="20px"
src="world-chain-logo.png"
style="margin-right: 12px; border-radius: 6px;"
width="20px"
/>
<div
class="c1"
>
World Chain
</div>
<div
class="c2"
/>
</button>
</span>
......
apps/web/src/components/NavBar/SearchBar/SuggestionRow.tsx
View file @ be21e483
......@@ -7,7 +7,6 @@ import Column from 'components/deprecated/Column'
import { useTokenWarning } from 'constants/deprecatedTokenSafety'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { GqlSearchToken } from 'graphql/data/SearchTokens'
import { gqlTokenToCurrencyInfo } from 'graphql/data/types'
import { getTokenDetailsURL, supportedChainIdFromGQLChain } from 'graphql/data/util'
import styled, { css } from 'lib/styled-components'
import { searchGenieCollectionToTokenSearchResult, searchTokenToTokenSearchResult } from 'lib/utils/searchBar'
......@@ -18,14 +17,10 @@ import { Link, useNavigate } from 'react-router-dom'
import { EllipsisStyle, ThemedText } from 'theme/components'
import { Flex } from 'ui/src'
import { Verified } from 'ui/src/components/icons/Verified'
import WarningIcon from 'uniswap/src/components/warnings/WarningIcon'
import { Token, TokenStandard } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { TokenStandard } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { addToSearchHistory } from 'uniswap/src/features/search/searchHistorySlice'
import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
import { InterfaceSearchResultSelectionProperties } from 'uniswap/src/features/telemetry/types'
import { getTokenWarningSeverity } from 'uniswap/src/features/tokens/safetyUtils'
import { Trans, useTranslation } from 'uniswap/src/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { shortenAddress } from 'uniswap/src/utils/addresses'
......@@ -110,15 +105,10 @@ export function SuggestionRow({
const navigate = useNavigate()
const { formatFiatPrice, formatDelta, formatNumberOrString } = useFormatter()
const [brokenCollectionImage, setBrokenCollectionImage] = useState(false)
const tokenProtectionEnabled = useFeatureFlag(FeatureFlags.TokenProtection)
const warning = useTokenWarning(
isToken ? suggestion.address : undefined,
isToken ? supportedChainIdFromGQLChain(suggestion.chain) : UniverseChainId.Mainnet,
)
const tokenWarningSeverity = isToken
? getTokenWarningSeverity(gqlTokenToCurrencyInfo(suggestion as Token)) // casting GqlSearchToken to Token
: undefined
const handleClick = useCallback(() => {
const address =
......@@ -190,23 +180,9 @@ export function SuggestionRow({
/>
)}
<Flex alignItems="flex-start" justifyContent="flex-start" shrink grow>
<Flex
row
gap="$spacing4"
shrink
width="95%"
{...(isToken && tokenProtectionEnabled && { alignItems: 'center' })}
>
<Flex row gap="$spacing4" shrink width="95%">
<PrimaryText lineHeight="24px">{suggestion.name}</PrimaryText>
{isToken ? (
tokenProtectionEnabled ? (
<WarningIcon severity={tokenWarningSeverity} size="$icon.16" />
) : (
<TokenSafetyIcon warning={warning} />
)
) : (
suggestion.isVerified && <Verified size={14} />
)}
{isToken ? <TokenSafetyIcon warning={warning} /> : suggestion.isVerified && <Verified size={14} />}
</Flex>
<Flex row gap="$spacing4">
<ThemedText.SubHeaderSmall lineHeight="20px">
......
apps/web/src/components/NavBar/Tabs/TabsContent.tsx
View file @ be21e483
......@@ -25,6 +25,7 @@ export type TabsItem = MenuItem & {
export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSection[] => {
const { t } = useTranslation()
const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
const isV4EverywhereEnabled = useFeatureFlag(FeatureFlags.V4Everywhere)
const { pathname } = useLocation()
const theme = useTheme()
......@@ -76,7 +77,7 @@ export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSecti
{
label: t('common.transactions'),
quickKey: 'X',
href: '/explore/transactions/ethereum',
href: `/explore/transactions${isMultichainExploreEnabled ? '/ethereum' : ''}`,
internal: true,
},
{ label: t('common.nfts'), quickKey: 'N', href: '/nfts', internal: true },
......@@ -84,7 +85,7 @@ export const useTabsContent = (props?: { includeNftsLink?: boolean }): TabsSecti
},
{
title: t('common.pool'),
href: isV4EverywhereEnabled ? '/positions' : '/pool',
href: '/pool',
isActive: pathname.startsWith('/pool'),
items: [
{
......
apps/web/src/components/NavBar/index.tsx
View file @ be21e483
......@@ -23,6 +23,8 @@ import { useProfilePageState } from 'nft/hooks'
import { ProfilePageStateType } from 'nft/types'
import { BREAKPOINTS } from 'theme'
import { Z_INDEX } from 'theme/zIndex'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlagWithLoading } from 'uniswap/src/features/gating/hooks'
import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
import { INTERFACE_NAV_HEIGHT } from 'uniswap/src/theme/heights'
......@@ -76,12 +78,20 @@ function useShouldHideChainSelector() {
const isSwapPage = useIsSwapPage()
const isLimitPage = useIsLimitPage()
const isExplorePage = useIsExplorePage()
const { value: multichainExploreFlagEnabled, isLoading: isMultichainExploreFlagLoading } = useFeatureFlagWithLoading(
FeatureFlags.MultichainExplore,
)
const baseHiddenPages = isNftPage
const multichainHiddenPages =
isLandingPage || isSendPage || isSwapPage || isLimitPage || baseHiddenPages || isExplorePage
const multichainHiddenPages = isLandingPage || isSendPage || isSwapPage || isLimitPage || baseHiddenPages
const multichainExploreHiddenPages = multichainHiddenPages || isExplorePage
const hideChainSelector =
multichainExploreFlagEnabled || isMultichainExploreFlagLoading
? multichainExploreHiddenPages
: multichainHiddenPages
return multichainHiddenPages
return hideChainSelector
}
export default function Navbar() {
......
apps/web/src/components/Pools/PoolDetails/PoolDetailsHeader.tsx
View file @ be21e483
......@@ -6,7 +6,6 @@ import { ExplorerIcon } from 'components/Icons/ExplorerIcon'
import CurrencyLogo from 'components/Logo/CurrencyLogo'
import { DoubleCurrencyAndChainLogo } from 'components/Logo/DoubleLogo'
import { DetailBubble } from 'components/Pools/PoolDetails/shared'
import { PoolDetailsBadge } from 'components/Pools/PoolTable/PoolTable'
import ShareButton from 'components/Tokens/TokenDetails/ShareButton'
import { ActionButtonStyle, ActionMenuFlyoutStyle } from 'components/Tokens/TokenDetails/shared'
import { LoadingBubble } from 'components/Tokens/loading'
......@@ -22,7 +21,7 @@ import { ChevronRight, ExternalLink as ExternalLinkIcon } from 'react-feather'
import { Link } from 'react-router-dom'
import { ClickableStyle, ClickableTamaguiStyle, EllipsisStyle, ExternalLink, ThemedText } from 'theme/components'
import { textFadeIn } from 'theme/styles'
import { Flex, TouchableArea } from 'ui/src'
import { TouchableArea } from 'ui/src'
import { ArrowUpDown } from 'ui/src/components/icons/ArrowUpDown'
import { BIPS_BASE } from 'uniswap/src/constants/misc'
import { ProtocolVersion, Token } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
......@@ -48,6 +47,12 @@ const HeaderContainer = styled.div`
animation-duration: ${({ theme }) => theme.transition.duration.medium};
`
const Badge = styled(ThemedText.LabelMicro)`
background: ${({ theme }) => theme.surface2};
padding: 2px 6px;
border-radius: 4px;
`
const IconBubble = styled(LoadingBubble)`
width: 32px;
height: 32px;
......@@ -141,17 +146,8 @@ const PoolDetailsTitle = ({
</StyledLink>
</PoolName>
</div>
<Flex row gap="$gap4" alignItems="center">
<PoolDetailsBadge variant="body3" $position="left">
{protocolVersion?.toLowerCase()}
</PoolDetailsBadge>
{/* TODO(WEB-5364): add hook badge when data available, it should have a hover state and link out to the explorer */}
{!!feePercent && (
<PoolDetailsBadge variant="body3" $position="right">
{feePercent}
</PoolDetailsBadge>
)}
</Flex>
{protocolVersion === ProtocolVersion.V2 && <Badge>v2</Badge>}
{!!feePercent && <Badge>{feePercent}</Badge>}
<TouchableArea hoverStyle={{ opacity: 0.8 }} onPress={toggleReversed}>
<ArrowUpDown
{...ClickableTamaguiStyle}
......
apps/web/src/components/Pools/PoolDetails/PoolDetailsStatsButtons.tsx
View file @ be21e483
......@@ -6,7 +6,7 @@ import Column from 'components/deprecated/Column'
import Row from 'components/deprecated/Row'
import { SwapWrapperOuter } from 'components/swap/styled'
import { LoadingBubble } from 'components/Tokens/loading'
import TokenSafetyMessage from 'components/TokenSafety/DeprecatedTokenSafetyMessage'
import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
import { chainIdToBackendChain } from 'constants/chains'
import { getPriorityWarning, StrongWarning, useTokenWarning } from 'constants/deprecatedTokenSafety'
import { useTokenBalancesQuery } from 'graphql/data/apollo/AdaptiveTokenBalancesProvider'
......@@ -16,7 +16,7 @@ import { useAccount } from 'hooks/useAccount'
import { useSwitchChain } from 'hooks/useSwitchChain'
import styled from 'lib/styled-components'
import { Swap } from 'pages/Swap'
import { useCallback, useMemo, useReducer, useState } from 'react'
import { useMemo, useReducer } from 'react'
import { Plus, X } from 'react-feather'
import { useLocation, useNavigate } from 'react-router-dom'
import { BREAKPOINTS } from 'theme'
......@@ -25,15 +25,9 @@ import { opacify } from 'theme/utils'
import { Z_INDEX } from 'theme/zIndex'
import { ArrowUpDown } from 'ui/src/components/icons/ArrowUpDown'
import { Token } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { CurrencyInfo } from 'uniswap/src/features/dataApi/types'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { TokenWarningCard } from 'uniswap/src/features/tokens/TokenWarningCard'
import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal'
import { useCurrencyInfo } from 'uniswap/src/features/tokens/useCurrencyInfo'
import { Trans } from 'uniswap/src/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { currencyId } from 'uniswap/src/utils/currencyId'
import { currencyId } from 'utils/currencyId'
import { NumberType, useFormatter } from 'utils/formatNumbers'
const PoolDetailsStatsButtonsRow = styled(Row)`
......@@ -164,8 +158,6 @@ export function PoolDetailsStatsButtons({ chainId, token0, token1, feeTier, load
const location = useLocation()
const currency0 = token0 && gqlToCurrency(token0)
const currency1 = token1 && gqlToCurrency(token1)
const currencyInfo0 = useCurrencyInfo(currency0 && currencyId(currency0))
const currencyInfo1 = useCurrencyInfo(currency1 && currencyId(currency1))
// Mobile Balance Data
const { data: balanceQuery } = useTokenBalancesQuery()
......@@ -202,9 +194,7 @@ export function PoolDetailsStatsButtons({ chainId, token0, token1, feeTier, load
if (account.chainId !== chainId && chainId) {
await switchChain(chainId)
}
const currency0Address = currency0.isNative ? 'ETH' : currency0.address
const currency1Address = currency1.isNative ? 'ETH' : currency1.address
navigate(`/add/${currency0Address}/${currency1Address}/${feeTier}${tokenId ? `/${tokenId}` : ''}`, {
navigate(`/add/${currencyId(currency0)}/${currencyId(currency1)}/${feeTier}${tokenId ? `/${tokenId}` : ''}`, {
state: { from: location.pathname },
})
}
......@@ -217,15 +207,6 @@ export function PoolDetailsStatsButtons({ chainId, token0, token1, feeTier, load
const token1Warning = useTokenWarning(token1?.address, chainId)
const priorityWarning = getPriorityWarning(token0Warning, token1Warning)
const tokenProtectionEnabled = useFeatureFlag(FeatureFlags.TokenProtection)
const [showWarningModal, setShowWarningModal] = useState(false)
const closeWarningModal = useCallback(() => setShowWarningModal(false), [])
const [warningModalCurrencyInfo, setWarningModalCurrencyInfo] = useState<Maybe<CurrencyInfo>>()
const onWarningCardCtaPressed = useCallback((currencyInfo: Maybe<CurrencyInfo>) => {
setWarningModalCurrencyInfo(currencyInfo)
setShowWarningModal(true)
}, [])
if (loading || !currency0 || !currency1) {
return (
<PoolDetailsStatsButtonsRow data-testid="pdp-buttons-loading-skeleton">
......@@ -301,30 +282,13 @@ export function PoolDetailsStatsButtons({ chainId, token0, token1, feeTier, load
compact
disableTokenInputs={chainId !== account.chainId}
/>
{tokenProtectionEnabled ? (
<>
<TokenWarningCard currencyInfo={currencyInfo0} onPress={() => onWarningCardCtaPressed(currencyInfo0)} />
<TokenWarningCard currencyInfo={currencyInfo1} onPress={() => onWarningCardCtaPressed(currencyInfo1)} />
{warningModalCurrencyInfo && (
// Intentionally duplicative with the TokenWarningModal in the swap component; this one only displays when user clicks "i" Info button on the TokenWarningCard
<TokenWarningModal
currencyInfo0={warningModalCurrencyInfo}
isInfoOnlyWarning
isVisible={showWarningModal}
closeModalOnly={closeWarningModal}
onAcknowledge={closeWarningModal}
/>
)}
</>
) : (
Boolean(priorityWarning) && (
<TokenSafetyMessage
tokenAddress={(priorityWarning === token0Warning ? token0?.address : token1?.address) ?? ''}
warning={priorityWarning ?? StrongWarning}
plural={Boolean(token0Warning && token1Warning)}
tokenSymbol={priorityWarning === token0Warning ? token0?.symbol : token1?.symbol}
/>
)
{Boolean(priorityWarning) && (
<TokenSafetyMessage
tokenAddress={(priorityWarning === token0Warning ? token0?.address : token1?.address) ?? ''}
warning={priorityWarning ?? StrongWarning}
plural={Boolean(token0Warning && token1Warning)}
tokenSymbol={priorityWarning === token0Warning ? token0?.symbol : token1?.symbol}
/>
)}
</SwapModalWrapper>
<Scrim
......
apps/web/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsHeader.test.tsx.snap
View file @ be21e483
......@@ -284,7 +284,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
min-width: 0;
}
.c10 {
.c12 {
box-sizing: border-box;
margin: 0;
min-width: 0;
......@@ -311,7 +311,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
gap: 12px;
}
.c11 {
.c13 {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
......@@ -331,7 +331,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
gap: 8px;
}
.c12 {
.c14 {
display: inline-block;
height: inherit;
}
......@@ -344,6 +344,14 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
letter-spacing: -0.01em;
}
.c10 {
color: #7D7D7D;
-webkit-letter-spacing: -0.01em;
-moz-letter-spacing: -0.01em;
-ms-letter-spacing: -0.01em;
letter-spacing: -0.01em;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
......@@ -403,6 +411,12 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
animation-duration: 250ms;
}
.c11 {
background: #F9F9F9;
padding: 2px 6px;
border-radius: 4px;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
......@@ -509,18 +523,9 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
</div>
</div>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-1316331199 _alignItems-center"
class="c10 c11 css-1m65e73"
>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441158 _lineHeight-222976511 _fontWeight-233016202 _borderTopLeftRadius-4px _borderBottomLeftRadius-4px"
data-disable-theme="true"
/>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441158 _lineHeight-222976511 _fontWeight-233016202 _borderTopRightRadius-4px _borderBottomRightRadius-4px"
data-disable-theme="true"
>
0.05%
</span>
0.05%
</div>
<div
class="_opacity-0hover-0d0t846 _opacity-0active-0d0t7546 _transform-0active-scale11281 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _cursor-pointer"
......@@ -543,7 +548,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
</div>
</div>
<div
class="c10 c11"
class="c12 c13"
width="max-content"
>
<div
......@@ -555,7 +560,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
id="Dropdown"
>
<div
class="c12"
class="c14"
style="width: 100%;"
>
<div>
......@@ -600,7 +605,7 @@ exports[`PoolDetailsHeader renders header text correctly 1`] = `
id="Dropdown"
>
<div
class="c12"
class="c14"
style="width: 100%;"
>
<div>
......
apps/web/src/components/Pools/PoolTable/PoolTable.test.tsx
View file @ be21e483
import 'test-utils/tokens/mocks'
import { ApolloError } from '@apollo/client'
import { Percent } from '@uniswap/sdk-core'
import { TopPoolTable } from 'components/Pools/PoolTable/PoolTable'
import { useTopPools } from 'graphql/data/pools/useTopPools'
import Router from 'react-router-dom'
import { useTopPools } from 'state/explore/topPools'
import { mocked } from 'test-utils/mocked'
import { validParams, validRestPoolToken0, validRestPoolToken1 } from 'test-utils/pools/fixtures'
import { validBEPoolToken0, validBEPoolToken1, validParams } from 'test-utils/pools/fixtures'
import { render, screen } from 'test-utils/render'
import { ProtocolVersion } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
jest.mock('state/explore/topPools')
jest.mock('graphql/data/pools/useTopPools')
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: jest.fn(),
......@@ -22,8 +23,9 @@ describe('PoolTable', () => {
it('renders loading state', () => {
mocked(useTopPools).mockReturnValue({
isLoading: true,
isError: false,
loading: true,
errorV3: undefined,
errorV2: undefined,
topPools: [],
})
......@@ -34,8 +36,9 @@ describe('PoolTable', () => {
it('renders error state', () => {
mocked(useTopPools).mockReturnValue({
isLoading: false,
isError: true,
loading: false,
errorV3: new ApolloError({ errorMessage: 'error fetching data' }),
errorV2: new ApolloError({ errorMessage: 'error fetching data' }),
topPools: [],
})
......@@ -47,10 +50,8 @@ describe('PoolTable', () => {
it('renders data filled state', () => {
const mockData = [
{
id: '1',
chain: 'mainnet',
token0: validRestPoolToken0,
token1: validRestPoolToken1,
token0: validBEPoolToken0,
token1: validBEPoolToken1,
feeTier: 10000,
hash: '0x123',
txCount: 200,
......@@ -64,8 +65,9 @@ describe('PoolTable', () => {
]
mocked(useTopPools).mockReturnValue({
topPools: mockData,
isLoading: false,
isError: false,
loading: false,
errorV3: undefined,
errorV2: undefined,
})
const { asFragment } = render(<TopPoolTable />)
......
apps/web/src/components/Pools/PoolTable/PoolTable.tsx
View file @ be21e483
......@@ -12,9 +12,16 @@ import { EllipsisText } from 'components/Tokens/TokenTable'
import { MAX_WIDTH_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
import { exploreSearchStringAtom } from 'components/Tokens/state'
import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
import { chainIdToBackendChain } from 'constants/chains'
import { PoolSortFields, TablePool } from 'graphql/data/pools/useTopPools'
import { OrderDirection, gqlToCurrency, supportedChainIdFromGQLChain, unwrapToken } from 'graphql/data/util'
import { chainIdToBackendChain, useChainFromUrlParam } from 'constants/chains'
import { useUpdateManualOutage } from 'featureFlags/flags/outageBanner'
import { PoolSortFields, TablePool, useTopPools } from 'graphql/data/pools/useTopPools'
import {
OrderDirection,
getSupportedGraphQlChain,
gqlToCurrency,
supportedChainIdFromGQLChain,
unwrapToken,
} from 'graphql/data/util'
import { useCurrencyInfo } from 'hooks/Tokens'
import useSimplePagination from 'hooks/useSimplePagination'
import { useAtom } from 'jotai'
......@@ -26,6 +33,8 @@ import { PoolStat } from 'state/explore/types'
import { Flex, Text, styled } from 'ui/src'
import { BIPS_BASE } from 'uniswap/src/constants/misc'
import { Chain, ProtocolVersion, Token } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { Trans } from 'uniswap/src/i18n'
import { UniverseChainId } from 'uniswap/src/types/chains'
import { NumberType, useFormatter } from 'utils/formatNumbers'
......@@ -43,23 +52,13 @@ const TableWrapper = styled(Flex, {
maxWidth: MAX_WIDTH_MEDIA_BREAKPOINT,
})
export const PoolDetailsBadge = styled(Text, {
const Badge = styled(Text, {
py: 2,
px: 6,
backgroundColor: '$surface2',
borderRadius: '$rounded6',
variant: 'body4',
color: '$neutral2',
variants: {
$position: {
right: {
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
},
left: {
borderTopLeftRadius: 4,
borderBottomLeftRadius: 4,
},
},
},
})
interface PoolTableValues {
......@@ -94,31 +93,24 @@ function PoolDescription({
chainId: UniverseChainId
protocolVersion?: ProtocolVersion | string
}) {
const isRestPool = token0 && !('id' in token0)
const isRestExploreEnabled = useFeatureFlag(FeatureFlags.RestExplore)
const currencies = [token0 ? gqlToCurrency(token0) : undefined, token1 ? gqlToCurrency(token1) : undefined]
// skip is isRestExploreEnabled
const currencyLogos = [
useCurrencyInfo(currencies?.[0], chainId, isRestPool)?.logoUrl,
useCurrencyInfo(currencies?.[1], chainId, isRestPool)?.logoUrl,
useCurrencyInfo(currencies?.[0], chainId, isRestExploreEnabled)?.logoUrl,
useCurrencyInfo(currencies?.[1], chainId, isRestExploreEnabled)?.logoUrl,
]
const images = [getRestTokenLogo(token0, currencyLogos[0]), getRestTokenLogo(token1, currencyLogos[1])]
const images = isRestExploreEnabled
? [getRestTokenLogo(token0, currencyLogos[0]), getRestTokenLogo(token1, currencyLogos[1])]
: undefined
return (
<Flex row gap="$gap8" alignItems="center">
<PortfolioLogo currencies={currencies} chainId={chainId} images={images} size={28} />
<EllipsisText>
{token0?.symbol}/{token1?.symbol}
</EllipsisText>
<Flex row gap="$gap4" alignItems="center">
<PoolDetailsBadge variant="body4" $position="left">
{protocolVersion.toLowerCase()}
</PoolDetailsBadge>
{/* TODO(WEB-5364): add hook badge when data available, it should have a hover state and link out to the explorer */}
{feeTier && (
<PoolDetailsBadge variant="body4" $position="right">
{feeTier / BIPS_BASE}%
</PoolDetailsBadge>
)}
</Flex>
{protocolVersion === ProtocolVersion.V2 && <Badge>{protocolVersion.toLowerCase()}</Badge>}
{feeTier && <Badge>{feeTier / BIPS_BASE}%</Badge>}
</Flex>
)
}
......@@ -176,6 +168,7 @@ function PoolTableHeader({
}
export const TopPoolTable = memo(function TopPoolTable() {
const chain = getSupportedGraphQlChain(useChainFromUrlParam(), { fallbackToEthereum: true })
const sortMethod = useAtomValue(sortMethodAtom)
const sortAscending = useAtomValue(sortAscendingAtom)
......@@ -186,22 +179,38 @@ export const TopPoolTable = memo(function TopPoolTable() {
resetSortAscending()
}, [resetSortAscending, resetSortMethod])
const { topPools, isLoading, isError } = useRestTopPools({
sortBy: sortMethod,
sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc,
})
const {
topPools: gqlTopPools,
loading: gqlLoading,
errorV3,
errorV2,
} = useTopPools(
{ sortBy: sortMethod, sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc },
chain.id,
)
const combinedError =
errorV2 && errorV3
? new ApolloError({ errorMessage: `Could not retrieve V2 and V3 Top Pools on chain: ${chain.id}` })
: undefined
const allDataStillLoading = gqlLoading && !gqlTopPools.length
useUpdateManualOutage({ chainId: chain.id, errorV3, errorV2 })
const {
topPools: restTopPools,
isLoading: restIsLoading,
isError: restIsError,
} = useRestTopPools({ sortBy: sortMethod, sortDirection: sortAscending ? OrderDirection.Asc : OrderDirection.Desc })
const { page, loadMore } = useSimplePagination()
const isRestExploreEnabled = useFeatureFlag(FeatureFlags.RestExplore)
const { topPools, loading, error } = isRestExploreEnabled
? { topPools: restTopPools?.slice(0, page * TABLE_PAGE_SIZE), loading: restIsLoading, error: restIsError }
: { topPools: gqlTopPools, loading: allDataStillLoading, error: combinedError }
return (
<TableWrapper data-testid="top-pools-explore-table">
<PoolsTable
pools={topPools?.slice(0, page * TABLE_PAGE_SIZE)}
loading={isLoading}
error={isError}
loadMore={loadMore}
maxWidth={1200}
/>
<PoolsTable pools={topPools} loading={loading} error={error} loadMore={loadMore} maxWidth={1200} />
</TableWrapper>
)
})
......
apps/web/src/components/Pools/PoolTable/__snapshots__/PoolTable.test.tsx.snap
View file @ be21e483
......@@ -332,22 +332,12 @@ exports[`PoolTable renders data filled state 1`] = `
>
USDC/ETH
</span>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-1316331199 _alignItems-center"
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _borderTopLeftRadius-1307609936 _borderTopRightRadius-1307609936 _borderBottomRightRadius-1307609936 _borderBottomLeftRadius-1307609936 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202"
data-disable-theme="true"
>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202 _borderTopLeftRadius-4px _borderBottomLeftRadius-4px"
data-disable-theme="true"
>
v3
</span>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202 _borderTopRightRadius-4px _borderBottomRightRadius-4px"
data-disable-theme="true"
>
1%
</span>
</div>
1%
</span>
</div>
</div>
</div>
......
apps/web/src/components/RemoveLiquidity/RemoveLiquidityTxContext.tsx
View file @ be21e483
......@@ -55,7 +55,6 @@ export function RemoveLiquidityTxContextProvider({ children }: PropsWithChildren
action: {
currency0Amount: currency0AmountToRemove,
currency1Amount: currency1AmountToRemove,
liquidityToken: positionInfo.liquidityToken,
},
approvePositionTokenRequest,
txRequest,
......
apps/web/src/components/SwapBottomCard.tsx
View file @ be21e483
......@@ -37,7 +37,7 @@ export function SwapBottomCard() {
const hasViewedBridgingBanner = useSelector(selectHasViewedBridgingBanner)
const bridgingEnabled = useFeatureFlag(FeatureFlags.Bridging)
const isBridgingSupportedChain = useIsBridgingChain(chainId ?? UniverseChainId.Mainnet)
const isBridgingSupported = useIsBridgingChain(chainId ?? UniverseChainId.Mainnet)
const numBridgingChains = useNumBridgingChains()
const handleBridgingDismiss = useCallback(
(shouldNavigate: boolean) => {
......@@ -61,8 +61,7 @@ export function SwapBottomCard() {
return null
}
const isBridgingBannerChain = chainId === null || chainId === UniverseChainId.Mainnet || isBridgingSupportedChain
const shouldShowBridgingBanner = bridgingEnabled && !hasViewedBridgingBanner && isBridgingBannerChain
const shouldShowBridgingBanner = bridgingEnabled && !hasViewedBridgingBanner && isBridgingSupported
const shouldShowLegacyTreatment = !bridgingEnabled
......@@ -85,7 +84,7 @@ export function SwapBottomCard() {
/>
</TouchableArea>
)
} else if (shouldShowLegacyTreatment || !isBridgingSupportedChain) {
} else if (shouldShowLegacyTreatment || !isBridgingSupported) {
return <NetworkAlert chainId={chainId} />
} else {
return null
......
apps/web/src/components/TokenSafety/TokenSafetyIcon.tsx
View file @ be21e483
......@@ -8,7 +8,6 @@ const WarningContainer = styled(Flex, {
justifyContent: 'center',
})
/** @deprecated use WarningIcon from packages/uniswap instead */
export default function TokenSafetyIcon({ warning }: { warning?: Warning }) {
const colors = useSporeColors()
switch (warning?.level) {
......
apps/web/src/components/TokenSafety/DeprecatedTokenSafetyMessage.tsx → apps/web/src/components/TokenSafety/TokenSafetyMessage.tsx
View file @ be21e483
......@@ -47,7 +47,6 @@ type TokenSafetyMessageProps = {
tokenSymbol?: string
}
/** @deprecated Use TokenWarningCard from packages/uniswap instead */
export default function TokenSafetyMessage({
warning,
tokenAddress,
......
apps/web/src/components/Tokens/TokenDetails/index.tsx
View file @ be21e483
......@@ -2,7 +2,7 @@ import { InterfacePageName } from '@uniswap/analytics-events'
import { Currency } from '@uniswap/sdk-core'
import { BreadcrumbNavContainer, BreadcrumbNavLink, CurrentPageBreadcrumb } from 'components/BreadcrumbNav'
import { MobileBottomBar, TDPActionTabs } from 'components/NavBar/MobileBottomBar'
import TokenSafetyMessage from 'components/TokenSafety/DeprecatedTokenSafetyMessage'
import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
import { ActivitySection } from 'components/Tokens/TokenDetails/ActivitySection'
import BalanceSummary, { PageChainBalanceSummary } from 'components/Tokens/TokenDetails/BalanceSummary'
import ChartSection from 'components/Tokens/TokenDetails/ChartSection'
......@@ -21,19 +21,13 @@ import { ScrollDirection, useScroll } from 'hooks/useScroll'
import deprecatedStyled from 'lib/styled-components'
import { Swap } from 'pages/Swap'
import { useTDPContext } from 'pages/TokenDetails/TDPContext'
import { PropsWithChildren, useCallback, useMemo, useState } from 'react'
import { PropsWithChildren, useCallback, useMemo } from 'react'
import { ChevronRight } from 'react-feather'
import { useNavigate } from 'react-router-dom'
import { CurrencyState } from 'state/swap/types'
import { Flex, useIsTouchDevice } from 'ui/src'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { TokenWarningCard } from 'uniswap/src/features/tokens/TokenWarningCard'
import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal'
import { useCurrencyInfo } from 'uniswap/src/features/tokens/useCurrencyInfo'
import { Trans } from 'uniswap/src/i18n'
import { currencyId } from 'uniswap/src/utils/currencyId'
import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
import { getInitialLogoUrl } from 'utils/getInitialLogoURL'
......@@ -86,11 +80,8 @@ function useSwapInitialInputCurrency() {
function TDPSwapComponent() {
const { address, currency, currencyChainId, warning } = useTDPContext()
const tokenProtectionEnabled = useFeatureFlag(FeatureFlags.TokenProtection)
const navigate = useNavigate()
const currencyInfo = useCurrencyInfo(currencyId(currency))
const handleCurrencyChange = useCallback(
(tokens: CurrencyState) => {
const inputCurrencyURLAddress = getCurrencyURLAddress(tokens.inputCurrency)
......@@ -133,9 +124,6 @@ function TDPSwapComponent() {
// Other token to prefill the swap form with
const initialInputCurrency = useSwapInitialInputCurrency()
const [showWarningModal, setShowWarningModal] = useState(false)
const closeWarningModal = useCallback(() => setShowWarningModal(false), [])
return (
<>
<Swap
......@@ -146,23 +134,7 @@ function TDPSwapComponent() {
onCurrencyChange={handleCurrencyChange}
compact
/>
{tokenProtectionEnabled ? (
<>
<TokenWarningCard currencyInfo={currencyInfo} onPress={() => setShowWarningModal(true)} />
{currencyInfo && (
// Intentionally duplicative with the TokenWarningModal in the swap component; this one only displays when user clicks "i" Info button on the TokenWarningCard
<TokenWarningModal
currencyInfo0={currencyInfo}
isInfoOnlyWarning
isVisible={showWarningModal}
closeModalOnly={closeWarningModal}
onAcknowledge={closeWarningModal}
/>
)}
</>
) : (
warning && <TokenSafetyMessage tokenAddress={address} warning={warning} />
)}
{warning && <TokenSafetyMessage tokenAddress={address} warning={warning} />}
</>
)
}
......
apps/web/src/components/Tokens/TokenDetails/tables/__snapshots__/TokenDetailsPoolsTable.test.tsx.snap
View file @ be21e483
......@@ -304,22 +304,12 @@ exports[`TDPPoolTable renders data filled state 1`] = `
>
USDC/ETH
</span>
<div
class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _gap-1316331199 _alignItems-center"
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _borderTopLeftRadius-1307609936 _borderTopRightRadius-1307609936 _borderBottomRightRadius-1307609936 _borderBottomLeftRadius-1307609936 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202"
data-disable-theme="true"
>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202 _borderTopLeftRadius-4px _borderBottomLeftRadius-4px"
data-disable-theme="true"
>
v3
</span>
<span
class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _pt-2px _pb-2px _pr-6px _pl-6px _backgroundColor-568007293 _fontSize-229441127 _lineHeight-222976480 _fontWeight-233016202 _borderTopRightRadius-4px _borderBottomRightRadius-4px"
data-disable-theme="true"
>
1%
</span>
</div>
1%
</span>
</div>
</div>
</div>
......
apps/web/src/components/Tokens/TokenTable/NetworkFilter.tsx
View file @ be21e483
......@@ -6,7 +6,6 @@ import { AllNetworksIcon } from 'components/Tokens/TokenTable/icons'
import {
BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS,
BACKEND_SUPPORTED_CHAINS,
BACKEND_SUPPORTED_TESTNET_CHAINS,
InterfaceGqlChain,
useChainFromUrlParam,
useIsSupportedChainIdCallback,
......@@ -21,7 +20,8 @@ import { useNavigate } from 'react-router-dom'
import { EllipsisTamaguiStyle } from 'theme/components'
import { Flex, FlexProps, ScrollView, Text, styled } from 'ui/src'
import { UNIVERSE_CHAIN_INFO } from 'uniswap/src/constants/chains'
import { useEnabledChains } from 'uniswap/src/features/settings/hooks'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import Trace from 'uniswap/src/features/telemetry/Trace'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { useTranslation } from 'uniswap/src/i18n'
......@@ -54,10 +54,12 @@ const StyledDropdown = {
export default function TableNetworkFilter() {
const [isMenuOpen, toggleMenu] = useState(false)
const isSupportedChainCallback = useIsSupportedChainIdCallback()
const { isTestnetModeEnabled } = useEnabledChains()
const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
const exploreParams = useExploreParams()
const currentChain = getSupportedGraphQlChain(useChainFromUrlParam())
const currentChain = getSupportedGraphQlChain(useChainFromUrlParam(), {
fallbackToEthereum: !isMultichainExploreEnabled,
})
const tab = exploreParams.tab
return (
......@@ -77,7 +79,9 @@ export default function TableNetworkFilter() {
}
internalMenuItems={
<ScrollView px="$spacing8">
<TableNetworkItem display="All networks" toggleMenu={toggleMenu} tab={tab} />
{isMultichainExploreEnabled && (
<TableNetworkItem display="All networks" toggleMenu={toggleMenu} tab={tab} />
)}
{BACKEND_SUPPORTED_CHAINS.map((network) => {
const chainId = supportedChainIdFromGQLChain(network)
const isSupportedChain = isSupportedChainCallback(chainId)
......@@ -92,22 +96,6 @@ export default function TableNetworkFilter() {
/>
) : null
})}
{isTestnetModeEnabled
? BACKEND_SUPPORTED_TESTNET_CHAINS.map((network) => {
const chainId = supportedChainIdFromGQLChain(network)
const isSupportedChain = isSupportedChainCallback(chainId)
const chainInfo = isSupportedChain ? UNIVERSE_CHAIN_INFO[chainId] : undefined
return chainInfo ? (
<TableNetworkItem
key={network}
display={network}
chainInfo={chainInfo}
toggleMenu={toggleMenu}
tab={tab}
/>
) : null
})
: null}
{BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS.map((network) => {
const isSupportedChain = isSupportedChainCallback(network)
const chainInfo = isSupportedChain ? UNIVERSE_CHAIN_INFO[network] : undefined
......@@ -148,10 +136,14 @@ const TableNetworkItem = memo(function TableNetworkItem({
const navigate = useNavigate()
const theme = useTheme()
const { t } = useTranslation()
const isMultichainExploreEnabled = useFeatureFlag(FeatureFlags.MultichainExplore)
const chainId = chainInfo?.id
const exploreParams = useExploreParams()
const currentChain = getSupportedGraphQlChain(useChainFromUrlParam())
const isAllNetworks = display === 'All networks'
const currentChain = getSupportedGraphQlChain(
useChainFromUrlParam(),
isMultichainExploreEnabled ? undefined : { fallbackToEthereum: true },
)
const isAllNetworks = display === 'All networks' && isMultichainExploreEnabled
const isCurrentChain = isAllNetworks
? !currentChain
: currentChain?.backendChain.chain === display && exploreParams.chainName
......
apps/web/src/components/Tokens/TokenTable/index.tsx
View file @ be21e483
......@@ -18,10 +18,10 @@ import {
useSetSortMethod,
} from 'components/Tokens/state'
import { MouseoverTooltip } from 'components/Tooltip'
import { chainIdToBackendChain, getChainFromChainUrlParam } from 'constants/chains'
import { chainIdToBackendChain, getChainFromChainUrlParam, useChainFromUrlParam } from 'constants/chains'
import { NATIVE_CHAIN_ID } from 'constants/tokens'
import { SparklineMap, TopToken } from 'graphql/data/types'
import { OrderDirection, getTokenDetailsURL, unwrapToken } from 'graphql/data/util'
import { SparklineMap, TopToken, useTopTokens } from 'graphql/data/TopTokens'
import { OrderDirection, getSupportedGraphQlChain, getTokenDetailsURL, unwrapToken } from 'graphql/data/util'
import useSimplePagination from 'hooks/useSimplePagination'
import { useAtomValue } from 'jotai/utils'
import { ReactElement, ReactNode, memo, useMemo } from 'react'
......@@ -29,6 +29,8 @@ import { TABLE_PAGE_SIZE, giveExploreStatDefaultValue } from 'state/explore'
import { useTopTokens as useRestTopTokens } from 'state/explore/topTokens'
import { TokenStat } from 'state/explore/types'
import { Flex, Text, styled } from 'ui/src'
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
import { Trans } from 'uniswap/src/i18n'
import { NumberType, useFormatter } from 'utils/formatNumbers'
......@@ -87,19 +89,65 @@ function TokenDescription({ token }: { token: TopToken | TokenStat }) {
}
export const TopTokensTable = memo(function TopTokensTable() {
const { topTokens, tokenSortRank, isLoading, sparklines, isError } = useRestTopTokens()
const chain = getSupportedGraphQlChain(useChainFromUrlParam(), { fallbackToEthereum: true })
const isRestExploreEnabled = useFeatureFlag(FeatureFlags.RestExplore)
const {
tokens: gqlTokens,
tokenSortRank: gqlTokenSortRank,
loadingTokens: gqlLoadingTokens,
sparklines: gqlSparklines,
error: gqlError,
} = useTopTokens(chain.backendChain.chain, isRestExploreEnabled /* skip */)
const {
topTokens: restTopTokens,
tokenSortRank: restTokenSortRank,
isLoading: restIsLoading,
sparklines: restSparklines,
isError: restError,
} = useRestTopTokens()
const { page, loadMore } = useSimplePagination()
const { tokens, tokenSortRank, sparklines, loading, error } = useMemo(() => {
return isRestExploreEnabled
? {
tokens: restTopTokens?.slice(0, page * TABLE_PAGE_SIZE),
tokenSortRank: restTokenSortRank,
loading: restIsLoading,
sparklines: restSparklines,
error: restError,
}
: {
tokens: gqlTokens,
tokenSortRank: gqlTokenSortRank,
loading: gqlLoadingTokens,
sparklines: gqlSparklines,
error: gqlError,
}
}, [
isRestExploreEnabled,
restTopTokens,
page,
restTokenSortRank,
restIsLoading,
restSparklines,
restError,
gqlTokens,
gqlTokenSortRank,
gqlLoadingTokens,
gqlSparklines,
gqlError,
])
return (
<TableWrapper data-testid="top-tokens-explore-table">
<TokenTable
tokens={topTokens?.slice(0, page * TABLE_PAGE_SIZE)}
tokens={tokens}
tokenSortRank={tokenSortRank}
sparklines={sparklines}
loading={isLoading}
loading={loading}
loadMore={loadMore}
error={isError}
error={error}
/>
</TableWrapper>
)
......
apps/web/src/components/TopLevelModals/LaunchModal.tsx
View file @ be21e483
......@@ -81,19 +81,12 @@ export function LaunchModal({
</Flex>
<Flex gap="$gap8" row>
<Trace logPress element={InterfaceElementName.CLOSE_BUTTON}>
<Button
size="small"
theme="secondary"
fontSize="$micro"
fill
flexBasis={0}
onPress={() => setShowModal(false)}
>
<Button size="small" theme="secondary" fontSize="$micro" fill onPress={() => setShowModal(false)}>
{t('common.button.dismiss')}
</Button>
</Trace>
<Trace logPress element={InterfaceElementName.LEARN_MORE_LINK}>
<Button size="small" fontSize="$micro" fill flexBasis={0} onPress={() => openUri(learnMoreUrl)}>
<Button size="small" fontSize="$micro" fill onPress={() => openUri(learnMoreUrl)}>
{t('common.button.learn')}
</Button>
</Trace>
......
apps/web/src/constants/chains.test.ts
View file @ be21e483
import {
BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS,
BACKEND_SUPPORTED_CHAINS,
BACKEND_SUPPORTED_TESTNET_CHAINS,
CHAIN_IDS_TO_NAMES,
CHAIN_ID_TO_BACKEND_NAME,
CHAIN_NAME_TO_CHAIN_ID,
......@@ -176,16 +175,6 @@ test.each(backendSupportedChains)(
},
)
const backendSupportedTestnetChains = [Chain.EthereumSepolia, Chain.AstrochainSepolia] as const
test.each(backendSupportedTestnetChains)(
'BACKEND_SUPPORTED_TESTNET_CHAINS generates the correct chains',
(chain: InterfaceGqlChain) => {
expect(BACKEND_SUPPORTED_TESTNET_CHAINS.includes(chain)).toBe(true)
expect(BACKEND_SUPPORTED_TESTNET_CHAINS.length).toEqual(backendSupportedTestnetChains.length)
},
)
const backendNotyetSupportedChainIds = [] as const
test('BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS array is empty', () => {
......
apps/web/src/constants/chains.ts
View file @ be21e483
......@@ -134,17 +134,6 @@ export const BACKEND_SUPPORTED_CHAINS = Object.keys(UNIVERSE_CHAIN_INFO)
})
.map((key) => UNIVERSE_CHAIN_INFO[parseInt(key) as UniverseChainId].backendChain.chain as InterfaceGqlChain)
export const BACKEND_SUPPORTED_TESTNET_CHAINS = Object.keys(UNIVERSE_CHAIN_INFO)
.filter((key) => {
const chainId = parseInt(key) as UniverseChainId
return (
UNIVERSE_CHAIN_INFO[chainId].backendChain.backendSupported &&
!UNIVERSE_CHAIN_INFO[chainId].backendChain.isSecondaryChain &&
UNIVERSE_CHAIN_INFO[chainId].testnet
)
})
.map((key) => UNIVERSE_CHAIN_INFO[parseInt(key) as UniverseChainId].backendChain.chain as InterfaceGqlChain)
export const BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS = GQL_MAINNET_CHAINS.filter(
(chain) => !BACKEND_SUPPORTED_CHAINS.includes(chain),
).map((chain) => CHAIN_NAME_TO_CHAIN_ID[chain]) as [UniverseChainId]
......
apps/web/src/graphql/data/TopTokens.ts 0 → 100644
View file @ be21e483
import { ApolloError } from '@apollo/client'
import {
exploreSearchStringAtom,
filterTimeAtom,
sortAscendingAtom,
sortMethodAtom,
TokenSortMethod,
} from 'components/Tokens/state'
import {
isPricePoint,
PollingInterval,
PricePoint,
supportedChainIdFromGQLChain,
toHistoryDuration,
unwrapToken,
usePollQueryWhileMounted,
} from 'graphql/data/util'
import useIsWindowVisible from 'hooks/useIsWindowVisible'
import { useAtomValue } from 'jotai/utils'
import { useMemo } from 'react'
import {
Chain,
TopTokens100Query,
useTopTokens100Query,
useTopTokensSparklineQuery,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
const TokenSortMethods = {
[TokenSortMethod.PRICE]: (a: TopToken, b: TopToken) =>
(b?.market?.price?.value ?? 0) - (a?.market?.price?.value ?? 0),
[TokenSortMethod.DAY_CHANGE]: (a: TopToken, b: TopToken) =>
(b?.market?.pricePercentChange1Day?.value ?? 0) - (a?.market?.pricePercentChange1Day?.value ?? 0),
[TokenSortMethod.HOUR_CHANGE]: (a: TopToken, b: TopToken) =>
(b?.market?.pricePercentChange1Hour?.value ?? 0) - (a?.market?.pricePercentChange1Hour?.value ?? 0),
[TokenSortMethod.VOLUME]: (a: TopToken, b: TopToken) =>
(b?.market?.volume?.value ?? 0) - (a?.market?.volume?.value ?? 0),
[TokenSortMethod.FULLY_DILUTED_VALUATION]: (a: TopToken, b: TopToken) =>
(b?.project?.markets?.[0]?.fullyDilutedValuation?.value ?? 0) -
(a?.project?.markets?.[0]?.fullyDilutedValuation?.value ?? 0),
}
function useSortedTokens(tokens: TopTokens100Query['topTokens']) {
const sortMethod = useAtomValue(sortMethodAtom)
const sortAscending = useAtomValue(sortAscendingAtom)
return useMemo(() => {
if (!tokens) {
return undefined
}
const tokenArray = Array.from(tokens).sort(TokenSortMethods[sortMethod])
return sortAscending ? tokenArray.reverse() : tokenArray
}, [tokens, sortMethod, sortAscending])
}
function useFilteredTokens(tokens: TopTokens100Query['topTokens']) {
const filterString = useAtomValue(exploreSearchStringAtom)
const lowercaseFilterString = useMemo(() => filterString.toLowerCase(), [filterString])
return useMemo(() => {
if (!tokens) {
return undefined
}
let returnTokens = tokens
if (lowercaseFilterString) {
returnTokens = returnTokens?.filter((token) => {
const addressIncludesFilterString = token?.address?.toLowerCase().includes(lowercaseFilterString)
const projectNameIncludesFilterString = token?.project?.name?.toLowerCase().includes(lowercaseFilterString)
const nameIncludesFilterString = token?.name?.toLowerCase().includes(lowercaseFilterString)
const symbolIncludesFilterString = token?.symbol?.toLowerCase().includes(lowercaseFilterString)
return (
projectNameIncludesFilterString ||
nameIncludesFilterString ||
symbolIncludesFilterString ||
addressIncludesFilterString
)
})
}
return returnTokens
}, [tokens, lowercaseFilterString])
}
export type SparklineMap = { [key: string]: PricePoint[] | undefined }
export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[number]
interface UseTopTokensReturnValue {
tokens?: readonly TopToken[]
tokenSortRank: Record<string, number>
loadingTokens: boolean
sparklines: SparklineMap
error?: ApolloError
}
export function useTopTokens(chain: Chain, skip?: boolean): UseTopTokensReturnValue {
const chainId = supportedChainIdFromGQLChain(chain)
const duration = toHistoryDuration(useAtomValue(filterTimeAtom))
const isWindowVisible = useIsWindowVisible()
const { data: sparklineQuery } = usePollQueryWhileMounted(
useTopTokensSparklineQuery({
variables: { duration, chain },
skip: !isWindowVisible || skip,
}),
PollingInterval.Slow,
)
const sparklines = useMemo(() => {
const unwrappedTokens = chainId && sparklineQuery?.topTokens?.map((topToken) => unwrapToken(chainId, topToken))
const map: SparklineMap = {}
unwrappedTokens?.forEach((current) => {
if (current?.address !== undefined) {
map[current.address] = current?.market?.priceHistory?.filter(isPricePoint) as PricePoint[]
}
})
return map
}, [chainId, sparklineQuery?.topTokens])
const {
data,
loading: loadingTokens,
error,
} = usePollQueryWhileMounted(
useTopTokens100Query({
variables: { duration, chain },
skip: !isWindowVisible || skip,
}),
PollingInterval.Fast,
)
const unwrappedTokens = useMemo(
() => chainId && data?.topTokens?.map((token) => unwrapToken(chainId, token)),
[chainId, data],
)
const sortedTokens = useSortedTokens(unwrappedTokens)
const tokenSortRank = useMemo(
() =>
sortedTokens?.reduce((acc, cur, i) => {
if (!cur?.address) {
return acc
}
return {
...acc,
[cur.address]: i + 1,
}
}, {}) ?? {},
[sortedTokens],
)
const filteredTokens = useFilteredTokens(sortedTokens)
return useMemo(
() => ({ tokens: filteredTokens, tokenSortRank, loadingTokens, sparklines, error }),
[filteredTokens, tokenSortRank, loadingTokens, sparklines, error],
)
}
apps/web/src/graphql/data/apollo/TokenBalancesProvider.test.tsx
View file @ be21e483
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { fireEvent, screen } from '@testing-library/react'
import { PrefetchBalancesWrapper, useTokenBalancesQuery } from 'graphql/data/apollo/AdaptiveTokenBalancesProvider'
import { useAccount } from 'hooks/useAccount'
import { mocked } from 'test-utils/mocked'
......@@ -7,8 +7,6 @@ import { useOnAssetActivitySubscription } from 'uniswap/src/data/graphql/uniswap
import { FeatureFlags } from 'uniswap/src/features/gating/flags'
import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
// TODO(WEB-5370): Remove this delay + waitFor once we've integrated wallet's refetch logic
jest.setTimeout(10000)
const mockLazyFetch = jest.fn()
const mockBalanceQueryResponse = [
mockLazyFetch,
......@@ -47,17 +45,17 @@ describe('TokenBalancesProvider', () => {
mocked(useAccount).mockReturnValue({ address: '0xaddress1', chainId: 1 } as any)
})
it('TokenBalancesProvider should not fetch balances without calls to useOnAssetActivitySubscription', async () => {
it('TokenBalancesProvider should not fetch balances without calls to useOnAssetActivitySubscription', () => {
render(<div />)
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(0), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(0)
})
describe('useTokenBalancesQuery', () => {
it('should only refetch balances when stale', async () => {
it('should only refetch balances when stale', () => {
const { rerender, unmount } = renderHook(() => useTokenBalancesQuery())
// Rendering useTokenBalancesQuery should trigger a fetch
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
// Rerender to clear staleness
rerender()
......@@ -65,31 +63,31 @@ describe('TokenBalancesProvider', () => {
// Receiving a new value from subscription should trigger a fetch while useTokenBalancesQuery hooks are mounted
triggerSubscriptionUpdate()
rerender()
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(2), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(2)
// Unmounting the hooks should not trigger any fetches
unmount()
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(2), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(2)
// Receiving a new value from subscription should NOT trigger a fetch if no useTokenBalancesQuery hooks are mounted
triggerSubscriptionUpdate()
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(2), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(2)
})
it('should use cached balances across multiple hook calls', async () => {
it('should use cached balances across multiple hook calls', () => {
renderHook(() => ({
hook1: useTokenBalancesQuery(),
hook2: useTokenBalancesQuery(),
}))
// Rendering useTokenBalancesQuery twice should only trigger one fetch
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
})
it('should refetch when account changes', async () => {
it('should refetch when account changes', () => {
const { rerender } = renderHook(() => useTokenBalancesQuery())
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
// Rerender to clear staleness
rerender()
......@@ -98,12 +96,12 @@ describe('TokenBalancesProvider', () => {
mocked(useAccount).mockReturnValue({ address: '0xaddress2', chainId: 1 } as any)
rerender()
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(2), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(2)
})
})
describe('PrefetchBalancesWrapper', () => {
it('should fetch balances when a PrefetchBalancesWrapper is hovered', async () => {
it('should fetch balances when a PrefetchBalancesWrapper is hovered', () => {
const { rerender } = render(
<PrefetchBalancesWrapper>
<div>hi</div>
......@@ -119,17 +117,17 @@ describe('TokenBalancesProvider', () => {
)
// Should not fetch balances before hover
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(0), { timeout: 3500 })
expect(mockLazyFetch).toHaveBeenCalledTimes(0)
// Hovering component should trigger a fetch
fireEvent.mouseEnter(wrappedComponent)
fireEvent.mouseLeave(wrappedComponent)
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 4000 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
// Subsequent hover should not trigger a fetch
fireEvent.mouseEnter(wrappedComponent)
fireEvent.mouseLeave(wrappedComponent)
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 4000 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
// Subsequent hover should trigger a fetch if the subscription has updated
triggerSubscriptionUpdate()
......@@ -138,10 +136,10 @@ describe('TokenBalancesProvider', () => {
<div>hi</div>
</PrefetchBalancesWrapper>,
)
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(1), { timeout: 4000 })
expect(mockLazyFetch).toHaveBeenCalledTimes(1)
fireEvent.mouseEnter(wrappedComponent)
fireEvent.mouseLeave(wrappedComponent)
await waitFor(() => expect(mockLazyFetch).toHaveBeenCalledTimes(2), { timeout: 4000 })
expect(mockLazyFetch).toHaveBeenCalledTimes(2)
})
})
})
apps/web/src/graphql/data/apollo/TokenBalancesProvider.tsx
View file @ be21e483
......@@ -102,37 +102,22 @@ export function TokenBalancesProvider({ children }: PropsWithChildren) {
if (!account.address) {
return
}
// adds a 3 second delay to account for dependency latency after an account update
// TODO(WEB-5370): Remove this delay once we've integrated wallet's refetch logic
setTimeout(
() => {
account.address &&
lazyFetch({
variables: {
ownerAddress: account.address,
chains: gqlChains,
valueModifiers: [
{
ownerAddress: account.address,
includeSpamTokens: valueModifiers.includeSpamTokens,
includeSmallBalances: valueModifiers.includeSmallBalances,
tokenExcludeOverrides: [],
tokenIncludeOverrides: [],
},
],
},
})
lazyFetch({
variables: {
ownerAddress: account.address,
chains: gqlChains,
valueModifiers: [
{
ownerAddress: account.address,
includeSpamTokens: valueModifiers.includeSpamTokens,
includeSmallBalances: valueModifiers.includeSmallBalances,
tokenExcludeOverrides: [],
tokenIncludeOverrides: [],
},
],
},
hasAccountUpdate ? 3000 : 0,
)
}, [
account.address,
hasAccountUpdate,
lazyFetch,
gqlChains,
valueModifiers.includeSpamTokens,
valueModifiers.includeSmallBalances,
])
})
}, [account.address, lazyFetch, valueModifiers, gqlChains])
return (
<AdaptiveTokenBalancesProvider
......
apps/web/src/graphql/data/apollo/client.ts
View file @ be21e483
import { ApolloClient, FieldFunctionOptions, HttpLink, InMemoryCache } from '@apollo/client'
import { Reference, StoreObject, relayStylePagination } from '@apollo/client/utilities'
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
import { Reference, relayStylePagination } from '@apollo/client/utilities'
import { createSubscriptionLink } from 'utilities/src/apollo/SubscriptionLink'
import { splitSubscription } from 'utilities/src/apollo/splitSubscription'
......@@ -47,18 +47,6 @@ export const apolloClient = new ApolloClient({
return address?.toLowerCase() ?? null
},
},
feeData: {
// TODO(API-482): remove this once the backend bug is fixed.
// There's a bug in our graphql backend where `feeData` can incorrectly be `null` for certain queries (`topTokens`).
// This field policy ensures that the cache doesn't get overwritten with `null` values triggering unnecessary re-renders.
merge: ignoreIncomingNullValue,
},
protectionInfo: {
// TODO(API-482): remove this once the backend bug is fixed.
// There's a bug in our graphql backend where `protectionInfo` can incorrectly be `null` for certain queries (`topTokens`).
// This field policy ensures that the cache doesn't get overwritten with `null` values triggering unnecessary re-renders.
merge: ignoreIncomingNullValue,
},
},
},
TokenProject: {
......@@ -97,14 +85,3 @@ export const apolloClient = new ApolloClient({
// This is done after creating the client so that client may be passed to `createSubscriptionLink`.
const subscriptionLink = createSubscriptionLink({ uri: REALTIME_URL, token: REALTIME_TOKEN }, apolloClient)
apolloClient.setLink(splitSubscription(subscriptionLink, httpLink))
function ignoreIncomingNullValue(
existing: Reference | StoreObject,
incoming: Reference | StoreObject,
{ mergeObjects }: FieldFunctionOptions<Record<string, unknown>, Record<string, unknown>>,
): Reference | StoreObject {
if (existing && !incoming) {
return existing
}
return mergeObjects(existing, incoming)
}
apps/web/src/graphql/data/protocolStats.ts 0 → 100644
View file @ be21e483
This diff is collapsed.
apps/web/src/graphql/data/types.ts
View file @ be21e483
import { isSupportedChainId } from 'constants/chains'
import { PricePoint, fiatOnRampToCurrency, gqlToCurrency } from 'graphql/data/util'
import { fiatOnRampToCurrency, gqlToCurrency } from 'graphql/data/util'
import { COMMON_BASES, buildPartialCurrencyInfo } from 'uniswap/src/constants/routing'
import { USDC_OPTIMISM } from 'uniswap/src/constants/tokens'
import {
Token as GqlToken,
ProtectionResult,
SafetyLevel,
TopTokens100Query,
} from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
import { CurrencyInfo, TokenList } from 'uniswap/src/features/dataApi/types'
import { buildCurrencyInfo, getCurrencySafetyInfo } from 'uniswap/src/features/dataApi/utils'
......@@ -83,6 +82,3 @@ export function meldSupportedCurrencyToCurrencyInfo(forCurrency: FORSupportedTok
isSpam: false,
})
}
export type SparklineMap = { [key: string]: PricePoint[] | undefined }
export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[number]
apps/web/src/graphql/data/util.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/hooks/useContract.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/hooks/usePositionTokenURI.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/lib/utils/searchBar.test.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/lib/utils/searchBar.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/Explore/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/LegacyPool/redirects.tsx deleted 100644 → 0
View file @ 35df6944
This diff is collapsed.
apps/web/src/pages/MigrateV3/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/NotFound/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/Pool/Positions/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/Pool/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/RemoveLiquidity/V3.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/RouteDefinitions.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/Swap/SwapForm.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/Swap/index.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/getPositionPageTitle.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/pages/paths.test.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/state/explore/topTokens.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/state/explore/types.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/test-utils/bundle-size-test.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/test-utils/pools/fixtures.ts
View file @ be21e483
This diff is collapsed.
apps/web/src/utils/chains.tsx
View file @ be21e483
This diff is collapsed.
apps/web/src/utils/currencyId.ts
View file @ be21e483
This diff is collapsed.
package.json
View file @ be21e483
This diff is collapsed.
packages/eslint-config/native.js
View file @ be21e483
This diff is collapsed.
packages/ui/README.md
View file @ be21e483
This diff is collapsed.
packages/ui/src/index.ts
View file @ be21e483
This diff is collapsed.
packages/ui/src/loading/Loader.tsx
View file @ be21e483
This diff is collapsed.
packages/uniswap/package.json
View file @ be21e483
This diff is collapsed.
packages/uniswap/src/data/rest/getPair.ts
View file @ be21e483
This diff is collapsed.
packages/uniswap/src/data/rest/getPools.ts
View file @ be21e483
This diff is collapsed.
packages/utilities/package.json
View file @ be21e483
This diff is collapsed.
packages/wallet/package.json
View file @ be21e483
This diff is collapsed.
packages/wallet/src/features/portfolio/fragments.ts deleted 100644 → 0
View file @ 35df6944
This diff is collapsed.
yarn.lock
View file @ be21e483
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment