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

src/components/BuyProgressBar/index.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react'
+import { Box, HStack, Circle, Text } from 'native-base'
+
+export type BuyStep = 1 | 2 | 3
+
+interface BuyProgressBarProps {
+    currentStep: BuyStep
+    isLoading?: boolean
+}
+
+const BuyProgressBar: React.FC<BuyProgressBarProps> = ({ currentStep, isLoading = false }) => {
+    const [animatedWidth, setAnimatedWidth] = useState(0)
+
+    const steps = [
+        { number: 1, label: 'Buy cUSD' },
+        { number: 2, label: 'We swap cUSD to G$' },
+        { number: 3, label: 'Done' },
+    ]
+
+    // Handle animated progress line
+    useEffect(() => {
+        if (isLoading && currentStep > 1) {
+            // 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'
+    }
+
+    const getCircleProps = (status: string) => {
+        const baseProps = {
+            size: '12',
+            mb: 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+        }
+
+        switch (status) {
+            case 'completed':
+                return { ...baseProps, bg: 'blue.500' }
+            case 'active':
+                return { ...baseProps, bg: 'blue.500' }
+            case 'loading':
+                return {
+                    ...baseProps,
+                    bg: 'blue.500',
+                    borderWidth: 3,
+                    borderColor: 'blue.200',
+                    animation: 'pulse 2s infinite',
+                }
+            default:
+                return { ...baseProps, bg: 'gray.300' }
+        }
+    }
+
+    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,141 @@
+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'
+
+const ErrorModal = () => (
+    <View>
+        <Text>Something went wrong.</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, { refresh: 1 })
+    const cusdBalance = useTokenBalance(cusd, gdHelperAddress, { refresh: 1 })
+
+    const { showModal, Modal } = useModal()
+
+    const [step, setStep] = useState(0)
+
+    /**
+     * callback to get event from onramper iframe
+     */
+    const callback = useCallback(async (event: WebViewMessageEvent) => {
+        if ((event.nativeEvent.data as any).title === 'success') {
+            await AsyncStorage.setItem('gdOnrampSuccess', 'true')
+            //start the stepper
+            setStep(2)
+        }
+    }, [])
+
+    const triggerSwap = async () => {
+        if (swapLock.current) return //prevent from useEffect retriggering this
+        swapLock.current = true
+
+        try {
+            setStep(3)
+            //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) {
+                    console.log('deploying helper...')
+                    swapTx = createAndSwap(minAmount)
+                } else {
+                    swapTx = swap(minAmount)
+                }
+
+                setStep(4)
+                // after tx sent progress the stepper
+                const res = await swapTx
+                console.log('swap tx res:', res)
+                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
+            onEvents('buy_success')
+        } catch (e: any) {
+            console.log('swap error:', e.message, e)
+            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')
+            console.log('starting swap:', cusdBalance?.toString(), celoBalance?.toString())
+            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} />
+        </>
+    )
+}