574 send nft wrapper

src/Components/Collectibles/CollectiblesSendActionButton.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from "react"
 import { useI18nContext } from "~i18n"
 import { Routes } from "~Navigation"
 import { CollectiblesActionButton } from "./CollectiblesActionButton"
+import { useFeatureFlags } from "~Components"
 
 type Props = {
     address: string
@@ -13,14 +14,22 @@ export const CollectiblesSendActionButton = ({ address, tokenId, onClose }: Prop
     const { LL } = useI18nContext()
 
     const nav = useNavigation()
+    const { betterWorldFeature } = useFeatureFlags()
 
     const onPress = useCallback(async () => {
         onClose()
+        if (betterWorldFeature.balanceScreen?.send?.enabled) {
+            nav.navigate(Routes.SEND_NFT, {
+                contractAddress: address,
+                tokenId,
+            })
+            return
+        }
         nav.navigate(Routes.INSERT_ADDRESS_SEND, {
             contractAddress: address,
             tokenId,
         })
-    }, [address, nav, onClose, tokenId])
+    }, [address, nav, onClose, tokenId, betterWorldFeature.balanceScreen?.send?.enabled])
 
     return (
         <CollectiblesActionButton

src/Components/Reusable/Send/01-Amount/Hooks/useDefaultToken.ts

@@ -5,10 +5,10 @@ import { useNonVechainTokensBalance } from "~Hooks/useNonVechainTokensBalance"
 import { useSendableTokensWithBalance } from "~Hooks/useSendableTokensWithBalance"
 import { useTokenWithCompleteInfo } from "~Hooks/useTokenWithCompleteInfo"
 import { BalanceUtils, BigNutils } from "~Utils"
-import { useSendContext } from "../../Provider"
+import { useTokenSendContext } from "../../Provider"
 
 export const useDefaultToken = () => {
-    const { flowState } = useSendContext()
+    const { flowState } = useTokenSendContext()
     const availableTokens = useSendableTokensWithBalance()
 
     const vetInfo = useTokenWithCompleteInfo(VET)

src/Components/Reusable/Send/01-Amount/SelectAmountSendComponent.spec.tsx

@@ -5,7 +5,7 @@ import { FungibleTokenWithBalance } from "~Model"
 import { TestWrapper } from "~Test"
 
 import { useExchangeRate } from "~Api/Coingecko"
-import { useSendContext } from "../Provider"
+import { useSendContext, useTokenSendContext } from "../Provider"
 import { useDefaultToken } from "./Hooks"
 
 import { SelectAmountSendComponent } from "./SelectAmountSendComponent"
@@ -15,6 +15,7 @@ const mockSetFlowState = jest.fn()
 jest.mock("../Provider", () => ({
     ...jest.requireActual("../Provider"),
     useSendContext: jest.fn(),
+    useTokenSendContext: jest.fn(),
 }))
 
 jest.mock("~Api/Coingecko", () => ({
@@ -72,11 +73,17 @@ const mockVTHOToken: FungibleTokenWithBalance = {
 const goToNext = jest.fn()
 
 const setupMockContext = (token: FungibleTokenWithBalance = mockVETToken) => {
-    ;(useSendContext as jest.Mock).mockReturnValue({
-        flowState: { token, amount: "0", fiatAmount: "", address: "", amountInFiat: false },
+    const mockContextValue = {
+        flowState: { type: "token", token, amount: "0", fiatAmount: "", address: "", amountInFiat: false },
         setFlowState: mockSetFlowState,
         goToNext,
-    })
+        step: "selectAmount" as const,
+        goToPrevious: jest.fn(),
+        EnteringAnimation: jest.fn(),
+        ExitingAnimation: jest.fn(),
+    }
+    ;(useTokenSendContext as jest.Mock).mockReturnValue(mockContextValue)
+    ;(useSendContext as jest.Mock).mockReturnValue(mockContextValue)
     jest.mocked(useDefaultToken).mockReturnValue(token)
 }
 
@@ -217,6 +224,7 @@ describe("SelectAmountSendComponent", () => {
         // setFlowState is called with a function, so we need to call it to get the result
         if (typeof lastCall === "function") {
             const result = lastCall({
+                type: "token",
                 token: mockVETToken,
                 amount: "0",
                 fiatAmount: "",

src/Components/Reusable/Send/01-Amount/SelectAmountSendComponent.tsx

@@ -13,7 +13,7 @@ import { selectCurrency, selectCurrencyFormat, useAppSelector } from "~Storage/R
 import { BigNutils } from "~Utils"
 import { getDecimalSeparator } from "~Utils/BigNumberUtils/BigNumberUtils"
 import { formatFullPrecision } from "~Utils/StandardizedFormatting"
-import { useSendContext } from "../Provider"
+import { useTokenSendContext } from "../Provider"
 import { SendContent } from "../Shared"
 import { SelectAmountConversionToggle } from "./Components/SelectAmountConversionToggle"
 import { SelectAmountInput } from "./Components/SelectAmountInput"
@@ -26,7 +26,7 @@ const MAX_FIAT_DECIMALS = 2
 const MAX_TOKEN_DECIMALS = 5
 
 export const SelectAmountSendComponent = () => {
-    const { setFlowState, goToNext, flowState } = useSendContext()
+    const { setFlowState, goToNext, flowState } = useTokenSendContext()
     const { formatLocale } = useFormatFiat()
 
     const bottomSheetRef = useRef<BottomSheetModalMethods>(null)

src/Components/Reusable/Send/02-Receiver/ReceiverScreen.tsx

@@ -69,6 +69,8 @@ export const ReceiverScreen = () => {
 
     const disabled = useMemo(() => !selectedAddress || !AddressUtils.isValid(selectedAddress), [selectedAddress])
 
+    const isTokenFlow = flowState.type === "token"
+
     return (
         <SendContent>
             <SendContent.Header />
@@ -84,7 +86,7 @@ export const ReceiverScreen = () => {
                 />
             </SendContent.Container>
             <SendContent.Footer>
-                <SendContent.Footer.Back />
+                {isTokenFlow && <SendContent.Footer.Back />}
                 <SendContent.Footer.Next action={goToNext} disabled={disabled} />
             </SendContent.Footer>
         </SendContent>

src/Components/Reusable/Send/03-SummarySend/Components/TokenReceiverCard.tsx

@@ -3,12 +3,12 @@ import { Animated } from "react-native"
 import { useFormatFiat } from "~Hooks/useFormatFiat"
 import { BigNutils } from "~Utils"
 import { formatFullPrecision } from "~Utils/StandardizedFormatting"
-import { useSendContext } from "../../Provider"
+import { useTokenSendContext } from "../../Provider"
 import { useCurrentExchangeRate } from "../Hooks"
 import { DetailsContainer } from "./DetailsContainer"
 
 export const TokenReceiverCard = () => {
-    const { flowState } = useSendContext()
+    const { flowState } = useTokenSendContext()
     const { formatLocale } = useFormatFiat()
 
     const { data: exchangeRate } = useCurrentExchangeRate()

src/Components/Reusable/Send/03-SummarySend/Components/TransactionAlert.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react-native"
 import React, { ComponentProps, useEffect } from "react"
 import { FungibleTokenWithBalance } from "~Model"
 import { TestWrapper } from "~Test"
-import { SendContextProvider, useSendContext } from "../../Provider/SendContextProvider"
+import { SendContextProvider, useTokenSendContext } from "../../Provider/SendContextProvider"
 import { useCurrentExchangeRate } from "../Hooks"
 import { TransactionAlert } from "./TransactionAlert"
 
@@ -39,10 +39,11 @@ const InitializeSendFlow: React.FC<{ children: React.ReactNode; token: FungibleT
     children,
     token,
 }) => {
-    const { setFlowState } = useSendContext()
+    const { setFlowState } = useTokenSendContext()
 
     useEffect(() => {
         setFlowState({
+            type: "token",
             token,
             amount: "1.234",
             address: "0xreceiver",

src/Components/Reusable/Send/03-SummarySend/Components/TransactionAlert.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react"
 import { AlertInline, BaseView } from "~Components"
 import { AlertStatus } from "~Components/Reusable/Alert/utils/AlertConfigs"
 import { useI18nContext } from "~i18n"
-import { useSendContext } from "../../Provider"
+import { useTokenSendContext } from "../../Provider"
 import { useCurrentExchangeRate } from "../Hooks"
 
 type Props = {
@@ -12,7 +12,7 @@ type Props = {
 
 export const TransactionAlert = ({ txError, hasGasAdjustment }: Props) => {
     const { LL } = useI18nContext()
-    const { flowState } = useSendContext()
+    const { flowState } = useTokenSendContext()
     const [priceUpdated, setPriceUpdated] = useState(false)
     const { data: exchangeRate } = useCurrentExchangeRate()
 

src/Components/Reusable/Send/03-SummarySend/Hooks/useCurrentExchangeRate.ts

@@ -1,11 +1,11 @@
 import { useMemo } from "react"
 import { getCoinGeckoIdBySymbol, useExchangeRate } from "~Api/Coingecko"
-import { useSendContext } from "../../Provider"
+import { useTokenSendContext } from "../../Provider"
 import { selectCurrency, useAppSelector } from "~Storage/Redux"
 
 export const useCurrentExchangeRate = () => {
     const currency = useAppSelector(selectCurrency)
-    const { flowState } = useSendContext()
+    const { flowState } = useTokenSendContext()
 
     const exchangeRateId = useMemo(
         () => (flowState.token ? getCoinGeckoIdBySymbol[flowState.token.symbol] : undefined),

src/Components/Reusable/Send/03-SummarySend/SummaryScreen.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { StyleSheet } from "react-native"
 import Animated from "react-native-reanimated"
 import { BaseView } from "~Components"
-import { useSendContext } from "~Components/Reusable/Send"
+import { useTokenSendContext } from "~Components/Reusable/Send"
 import { VTHO } from "~Constants"
 import { useThemedStyles, useTransactionScreen } from "~Hooks"
 import { useI18nContext } from "~i18n"
@@ -17,7 +17,7 @@ import { useTransactionCallbacks } from "./Hooks"
 export const SummaryScreen = () => {
     const { LL } = useI18nContext()
     const { styles } = useThemedStyles(baseStyles)
-    const { flowState, setFlowState } = useSendContext()
+    const { flowState, setFlowState } = useTokenSendContext()
     const [txError, setTxError] = useState(false)
     const originalAmount = useRef(flowState.amount)
 

src/Components/Reusable/Send/Provider/SendContextProvider.spec.tsx

@@ -21,6 +21,7 @@ describe("SendContextProvider", () => {
         })
 
         expect(result.current.flowState).toMatchObject({
+            type: "token",
             token: undefined,
             amount: "0",
             fiatAmount: "",
@@ -34,15 +35,18 @@ describe("SendContextProvider", () => {
         })
 
         result.current.setFlowState({
+            type: "token",
             token: VETWithBalance,
             amount: "1",
             address: "0x1234567890123456789012345678901234567890",
         })
 
-        expect(result.current.flowState.token).not.toBeUndefined()
-        expect(result.current.flowState.token?.symbol).toEqual(VETWithBalance.symbol)
-        expect(result.current.flowState.amount).toBe("1")
-        expect(result.current.flowState.address).toBe("0x1234567890123456789012345678901234567890")
+        if (result.current.flowState.type === "token") {
+            expect(result.current.flowState.token).not.toBeUndefined()
+            expect(result.current.flowState.token?.symbol).toEqual(VETWithBalance.symbol)
+            expect(result.current.flowState.amount).toBe("1")
+            expect(result.current.flowState.address).toBe("0x1234567890123456789012345678901234567890")
+        }
     })
 
     it("should update the step", () => {

src/Components/Reusable/Send/Provider/SendContextProvider.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useCallback, useContext, useMemo, useState } from "react"
 import { EntryAnimationsValues, ExitAnimationsValues, LayoutAnimation, useSharedValue } from "react-native-reanimated"
-import { FungibleTokenWithBalance } from "~Model"
+import { FungibleTokenWithBalance, NonFungibleToken } from "~Model"
 import {
     EnteringFromLeftAnimation,
     EnteringFromRightAnimation,
@@ -9,7 +9,8 @@ import { ExitingToLeftAnimation, ExitingToRightAnimation } from "~Screens/Flows/
 
 export type SendFlowStep = "insertAddress" | "selectAmount" | "summary"
 
-type SendFlowState = {
+export type SendFlowState = {
+    type: "token"
     token?: FungibleTokenWithBalance
     amount?: string
     fiatAmount?: string
@@ -22,17 +23,23 @@ type SendFlowState = {
     amountInFiat?: boolean
 }
 
-type SendContextType = {
-    flowState: SendFlowState
-    setFlowState: React.Dispatch<React.SetStateAction<SendFlowState>>
+export type SendNFTFlowState = {
+    type: "nft"
+    nft: NonFungibleToken
+    address?: string
+}
+
+export type SendContextType<T = SendFlowState | SendNFTFlowState> = {
+    flowState: T
+    setFlowState: React.Dispatch<React.SetStateAction<T>>
     step: SendFlowStep
     goToNext: () => void
     goToPrevious: () => void
     EnteringAnimation: (values: EntryAnimationsValues) => LayoutAnimation
     ExitingAnimation: (values: ExitAnimationsValues) => LayoutAnimation
 }
 
-const SendContext = React.createContext<SendContextType | undefined>(undefined)
+export const SendContext = React.createContext<SendContextType<any> | undefined>(undefined)
 
 type SendContextProviderProps = PropsWithChildren<{
     initialToken?: FungibleTokenWithBalance
@@ -43,6 +50,7 @@ const ORDER: SendFlowStep[] = ["selectAmount", "insertAddress", "summary"]
 export const SendContextProvider = ({ children, initialToken }: SendContextProviderProps) => {
     const [step, setStep] = useState<SendFlowStep>("selectAmount")
     const [flowState, setFlowState] = useState<SendFlowState>({
+        type: "token",
         token: initialToken,
         amount: "0",
         fiatAmount: "",
@@ -111,7 +119,7 @@ export const SendContextProvider = ({ children, initialToken }: SendContextProvi
         [nextStep.value, previousStep.value],
     )
 
-    const contextValue: SendContextType = useMemo(
+    const contextValue: SendContextType<SendFlowState> = useMemo(
         () => ({
             flowState,
             setFlowState,
@@ -132,5 +140,13 @@ export const useSendContext = () => {
     if (!context) {
         throw new Error("useSendContext must be used within a SendContextProvider")
     }
-    return context
+    return context as SendContextType<SendFlowState | SendNFTFlowState>
+}
+
+export const useTokenSendContext = () => {
+    return useSendContext() as SendContextType<SendFlowState>
+}
+
+export const useNFTSendContext = () => {
+    return useSendContext() as SendContextType<SendNFTFlowState>
 }