feat: implement Buy G$ page with 3-step progress bar and responsive Onramper widget

src/components/BuyProgressBar/index.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { Box, HStack, Circle, Text } from 'native-base'
+
+export type BuyStep = 1 | 2 | 3
+
+export interface StepConfig {
+    number: number
+    label: string
+}
+
+interface BuyProgressBarProps {
+    currentStep: BuyStep
+    isLoading?: boolean
+    steps?: StepConfig[]
+}
+
+const BuyProgressBar: React.FC<BuyProgressBarProps> = ({
+    currentStep,
+    isLoading = false,
+    steps = [
+        { number: 1, label: 'Buy cUSD' },
+        { number: 2, label: 'We swap cUSD to G$' },
+        { number: 3, label: 'Done' },
+    ],
+}) => {
+    const [animatedWidth, setAnimatedWidth] = useState(0)
+
+    // Handle animated progress line
+    useEffect(() => {
+        if (isLoading && currentStep >= 1) {
+            // Explicitly reset animatedWidth to 0 at the start of a new loading phase
+            setAnimatedWidth(0)
+            // Animate progress line when loading
+            let progress = 0
+            const interval = setInterval(() => {
+                progress += 2
+                if (progress <= 100) {
+                    setAnimatedWidth(progress)
+                } else {
+                    clearInterval(interval)
+                }
+            }, 50) // 50ms intervals for smooth animation
+
+            return () => clearInterval(interval)
+        } else {
+            // Set to 100% if not loading (completed state)
+            setAnimatedWidth(100)
+        }
+    }, [isLoading, currentStep])
+
+    const getStepStatus = (stepNumber: number) => {
+        // Step 1 should ALWAYS be blue (active when current, completed when past)
+        if (stepNumber === 1) {
+            if (currentStep === 1) {
+                return isLoading ? 'loading' : 'active'
+            } else {
+                return 'completed' // Step 1 is completed when we're on step 2 or 3
+            }
+        }
+        // Steps 2 and 3 follow normal logic
+        if (stepNumber < currentStep) return 'completed'
+        if (stepNumber === currentStep) return isLoading ? 'loading' : 'active'
+        return 'pending'
+    }
+
+    // Memoize circle props objects to avoid recreation on every render
+    const circlePropsMap = useMemo(
+        () => ({
+            completed: {
+                size: '12',
+                mb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+                bg: 'blue.500',
+            },
+            active: {
+                size: '12',
+                mb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+                bg: 'blue.500',
+            },
+            loading: {
+                size: '12',
+                mb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+                bg: 'blue.500',
+                borderWidth: 3,
+                borderColor: 'blue.200',
+                animation: 'pulse 2s infinite',
+            },
+            pending: {
+                size: '12',
+                mb: 2,
+                justifyContent: 'center',
+                alignItems: 'center',
+                bg: 'gray.300',
+            },
+        }),
+        []
+    )
+
+    const getCircleProps = (status: string) => {
+        return circlePropsMap[status as keyof typeof circlePropsMap] || circlePropsMap.pending
+    }
+
+    const getLineProps = (stepNumber: number, lineIndex: number) => {
+        // Line between step 1 and 2 (lineIndex = 0)
+        if (lineIndex === 0) {
+            if (currentStep === 1 && isLoading) {
+                // Animation state: "1 Blue with progress bar animation"
+                return {
+                    bg: 'blue.500',
+                    width: `${animatedWidth}%`,
+                    transition: 'width 0.1s ease-out',
+                }
+            } else if (currentStep >= 2) {
+                // Static line when step 2 or higher
+                return {
+                    bg: 'blue.500',
+                    width: '100%',
+                }
+            }
+        }
+
+        // Line between step 2 and 3 (lineIndex = 1)
+        if (lineIndex === 1) {
+            if (currentStep === 2 && isLoading) {
+                // Animation state: "2 Blue with progress bar animation"
+                return {
+                    bg: 'blue.500',
+                    width: `${animatedWidth}%`,
+                    transition: 'width 0.1s ease-out',
+                }
+            } else if (currentStep >= 3) {
+                // Static line when step 3
+                return {
+                    bg: 'blue.500',
+                    width: '100%',
+                }
+            }
+        }
+
+        // Default: gray line (not active)
+        return {
+            bg: 'gray.300',
+            width: '100%',
+        }
+    }
+
+    const getTextColor = (status: string) => {
+        return status === 'pending' ? 'gray.500' : 'black'
+    }
+
+    return (
+        <Box width="100%" mb={6} mt={4} data-testid="custom-progress-bar">
+            <HStack justifyContent="space-between" alignItems="flex-start" position="relative">
+                {steps.map((step, index) => {
+                    const status = getStepStatus(step.number)
+
+                    return (
+                        <React.Fragment key={step.number}>
+                            <Box alignItems="center" flex={1} position="relative">
+                                <Circle {...getCircleProps(status)}>
+                                    <Text color="white" fontWeight="bold" fontSize="md">
+                                        {step.number}
+                                    </Text>
+                                </Circle>
+                                <Text
+                                    textAlign="center"
+                                    fontSize="sm"
+                                    color={getTextColor(status)}
+                                    fontFamily="subheading"
+                                    maxWidth="120px"
+                                    lineHeight="tight"
+                                >
+                                    {step.label}
+                                </Text>
+                            </Box>
+
+                            {index < steps.length - 1 && (
+                                <Box
+                                    position="absolute"
+                                    top="6"
+                                    left={`${33.33 * (index + 1) - 16.67}%`}
+                                    right={`${66.67 - 33.33 * (index + 1) + 16.67}%`}
+                                    height="2px"
+                                    bg="gray.300"
+                                    zIndex={-1}
+                                >
+                                    <Box height="100%" {...getLineProps(step.number + 1, index)} borderRadius="1px" />
+                                </Box>
+                            )}
+                        </React.Fragment>
+                    )
+                })}
+            </HStack>
+        </Box>
+    )
+}
+
+export { BuyProgressBar }

src/components/CustomGdOnramperWidget/CustomGdOnramperWidget.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useEthers, useEtherBalance, useTokenBalance } from '@usedapp/core'
+import { WebViewMessageEvent } from 'react-native-webview'
+import { AsyncStorage, useBuyGd } from '@gooddollar/web3sdk-v2'
+import { noop } from 'lodash'
+
+import { useModal } from '@gooddollar/good-design/dist/hooks/useModal'
+import { View, Text } from 'native-base'
+import { WalletAndChainGuard } from '@gooddollar/good-design'
+import { useSignWalletModal } from '@gooddollar/good-design/dist/hooks/useSignWalletModal'
+import { CustomOnramper } from './CustomOnramper'
+
+interface ErrorModalProps {
+    message?: string
+}
+
+const ErrorModal: React.FC<ErrorModalProps> = ({ message = 'Something went wrong.' }) => (
+    <View>
+        <Text>{message}</Text>
+    </View>
+)
+
+interface ICustomGdOnramperProps {
+    onEvents: (action: string, data?: any, error?: string) => void
+    selfSwap?: boolean
+    withSwap?: boolean
+    donateOrExecTo?: string
+    callData?: string
+    apiKey?: string
+}
+
+export const CustomGdOnramperWidget = ({
+    onEvents = noop,
+    selfSwap = false,
+    withSwap = true,
+    donateOrExecTo = undefined,
+    callData = '0x',
+    apiKey = undefined,
+}: ICustomGdOnramperProps) => {
+    const cusd = '0x765de816845861e75a25fca122bb6898b8b1282a'
+    const { account, library } = useEthers()
+    const swapLock = useRef(false)
+
+    const { createAndSwap, swap, swapState, createState, gdHelperAddress, triggerSwapTx } = useBuyGd({
+        donateOrExecTo,
+        callData,
+        withSwap,
+    })
+
+    const { SignWalletModal } = useSignWalletModal()
+
+    const celoBalance = useEtherBalance(gdHelperAddress)
+    const cusdBalance = useTokenBalance(cusd, gdHelperAddress)
+
+    const { showModal, Modal } = useModal()
+
+    const [step, setStep] = useState(0)
+
+    /**
+     * callback to get event from onramper iframe
+     * Optimized to avoid unnecessary parsing and improve error handling
+     */
+    const callback = useCallback(
+        async (event: WebViewMessageEvent) => {
+            const rawData = event.nativeEvent?.data
+            if (!rawData) return
+
+            let eventData
+            try {
+                // Only parse if it's a string, otherwise use directly
+                eventData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
+            } catch (error) {
+                // Silent fail for invalid JSON - expected for non-JSON messages
+                return
+            }
+
+            // Early return if no valid event data
+            if (!eventData?.type && !eventData?.title) return
+
+            // Handle different Onramper event types
+            switch (eventData.type || eventData.title) {
+                case 'initiated':
+                case 'opened':
+                    // User opened/interacted with the widget
+                    onEvents('widget_clicked')
+                    break
+                case 'success':
+                    await AsyncStorage.setItem('gdOnrampSuccess', 'true')
+                    setStep(2)
+                    break
+                default:
+                    break
+            }
+        },
+        [onEvents]
+    )
+
+    const triggerSwap = async () => {
+        if (swapLock.current) return //prevent from useEffect retriggering this
+        swapLock.current = true
+
+        try {
+            setStep(3)
+            // Emit swap_started event to animate progress bar step 2
+            onEvents('swap_started')
+
+            //user sends swap tx
+            if (selfSwap && gdHelperAddress && library && account) {
+                const minAmount = 0 // we let contract use oracle for minamount, we might calculate it for more precision in the future
+                const code = await library.getCode(gdHelperAddress)
+                let swapTx
+                if (code.length <= 2) {
+                    swapTx = createAndSwap(minAmount)
+                } else {
+                    swapTx = swap(minAmount)
+                }
+
+                setStep(4)
+                // after tx sent progress the stepper
+                const res = await swapTx
+                if (res?.status !== 1) throw Error('reverted')
+            } else {
+                if (account) {
+                    //or backends sends swap tx
+                    setStep(4)
+                    const tx = await triggerSwapTx()
+
+                    if (!tx?.ok) throw Error('reverted')
+                }
+            }
+            // when done set stepper at final step
+            setStep(5)
+            swapLock.current = false
+            // Emit swap_completed event to move progress bar to step 3
+            onEvents('swap_completed')
+            onEvents('buy_success')
+        } catch (e: any) {
+            swapLock.current = false // Reset lock on error
+            showModal()
+            onEvents('buygd_swap_failed', e.message)
+            setStep(0)
+        }
+    }
+
+    // when the helper contract has some balance we trigger the swap
+    useEffect(() => {
+        if (cusdBalance?.gt(0) || celoBalance?.gt(0)) {
+            void AsyncStorage.removeItem('gdOnrampSuccess')
+            // Emit funds_received event to update progress bar to step 2
+            onEvents('funds_received')
+            triggerSwap().catch((e) => {
+                showModal()
+                onEvents('buygd_swap_failed', e.message)
+            })
+        }
+    }, [celoBalance, cusdBalance])
+
+    return (
+        <>
+            <Modal body={<ErrorModal />} _modalContainer={{ paddingBottom: 18, paddingLeft: 18, paddingRight: 18 }} />
+            <WalletAndChainGuard validChains={[42220]}>
+                <CustomOnramper
+                    onEvent={callback}
+                    targetWallet={gdHelperAddress || ''}
+                    step={step}
+                    setStep={setStep}
+                    targetNetwork="CELO"
+                    widgetParams={{ onlyCryptos: 'CUSD_CELO', isAddressEditable: false }}
+                    onGdEvent={onEvents}
+                    apiKey={apiKey}
+                />
+            </WalletAndChainGuard>
+            <SignWalletModal txStatus={swapState?.status} />
+            <SignWalletModal txStatus={createState?.status} />
+        </>
+    )
+}