feat(onramp): cta

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,4 +1,5 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
 import { Permit2Variant, usePermit2Flag } from 'featureFlags/flags/permit2'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { useAtomValue, useUpdateAtom } from 'jotai/utils'
@@ -208,6 +209,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.permit2}
         label="Permit 2 / Universal Router"
       />
+      <FeatureFlagOption
+        variant={BaseVariant}
+        value={useFiatOnrampFlag()}
+        featureFlag={FeatureFlag.fiatOnramp}
+        label="Fiat on-ramp"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -4,6 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { getConnection } from 'connection/utils'
 import { getChainInfoOrDefault } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
+import { BaseVariant } from 'featureFlags'
+import { useFiatOnrampFlag } from 'featureFlags/flags/fiatOnramp'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useStablecoinPrice from 'hooks/useStablecoinPrice'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
@@ -11,7 +13,7 @@ import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hoo
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useMemo } from 'react'
-import { Copy, ExternalLink, Power } from 'react-feather'
+import { Copy, CreditCard, ExternalLink, Power } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useCurrencyBalanceString } from 'state/connection/hooks'
@@ -28,6 +30,10 @@ import { ButtonEmphasis, ButtonSize, ThemeButton } from '../Button'
 import StatusIcon from '../Identicon/StatusIcon'
 import IconButton, { IconHoverText } from './IconButton'
 
+const BuyCryptoButton = styled(ThemeButton)`
+  margin-top: 12px;
+`
+
 const WalletButton = styled(ThemeButton)`
   border-radius: 12px;
   padding-top: 10px;
@@ -137,7 +143,7 @@ const AuthenticatedHeader = () => {
   } = getChainInfoOrDefault(chainId ? chainId : SupportedChainId.MAINNET)
   const navigate = useNavigate()
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
-
+  const fiatOnrampFlag = useFiatOnrampFlag()
   const setSellPageState = useProfilePageState((state) => state.setProfilePageState)
   const resetSellAssets = useSellAsset((state) => state.reset)
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
@@ -215,6 +221,11 @@ const AuthenticatedHeader = () => {
         >
           <Trans>View and sell NFTs</Trans>
         </ProfileButton>
+        {fiatOnrampFlag === BaseVariant.Enabled && (
+          <BuyCryptoButton size={ButtonSize.medium} emphasis={ButtonEmphasis.medium} onClick={openNftModal}>
+            <CreditCard /> <Trans>Buy crypto</Trans>
+          </BuyCryptoButton>
+        )}
         {isUnclaimed && (
           <UNIButton onClick={openClaimModal} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
             <Trans>Claim</Trans> {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} <Trans>reward</Trans>

src/featureFlags/flags/featureFlags.ts

@@ -1,4 +1,5 @@
 export enum FeatureFlag {
+  fiatOnramp = 'fiatOnramp',
   traceJsonRpc = 'traceJsonRpc',
   permit2 = 'permit2',
 }

src/featureFlags/flags/fiatOnramp.ts

@@ -0,0 +1,5 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useFiatOnrampFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.fiatOnramp)
+}