- remove unusued backendSwapUrl

- fix animated progress
GoodDollar · Nov 9, 2023 · 736295f · 736295f
1 parent 4c2d9b4
commit 736295f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 30 deletions.
diff --git a/packages/good-design/src/apps/onramp/GdOnramperWidget.tsx b/packages/good-design/src/apps/onramp/GdOnramperWidget.tsx
@@ -21,7 +21,6 @@ interface IGdOnramperProps {
   onEvents: (action: string, error?: string) => void;
   selfSwap?: boolean;
   withSwap?: boolean;
-  backendSwapUrl?: string;
   donateOrExecTo?: string;
   callData?: string;
 }
@@ -31,7 +30,6 @@ export const GdOnramperWidget = ({
   onEvents = noop,
   selfSwap = false,
   withSwap = true,
-  backendSwapUrl = undefined,
   donateOrExecTo = undefined,
   callData = "0x"
 }: IGdOnramperProps) => {
@@ -42,7 +40,6 @@ export const GdOnramperWidget = ({
   const { createAndSwap, swap, swapState, createState, gdHelperAddress, triggerSwapTx } = useBuyGd({
     donateOrExecTo,
     callData,
-    backendSwapUrl,
     withSwap
   });
 

diff --git a/packages/good-design/src/apps/onramp/Onramper.tsx b/packages/good-design/src/apps/onramp/Onramper.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect } from "react";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
 import { WebView, WebViewMessageEvent } from "react-native-webview";
 import { Box, Circle, HStack, Stack, Text, VStack } from "native-base";
 import { isMobile as deviceDetect } from "@gooddollar/web3sdk-v2";
@@ -10,13 +10,47 @@ import { BaseButton } from "../../core";
 
 export type OnramperCallback = (event: WebViewMessageEvent) => void;
 
-const StepsProgress = ({ step }: { step: number }) => (
-  <HStack w="90%" position="absolute" left="30" display="flex" justifyContent="center">
-    <CentreBox h="50" w="238" position="absolute">
-      <AnimatedProgress startValue={step < 1 ? 0 : step < 2 ? 1 : step <= 3 ? 50 : 100} />
-    </CentreBox>
-  </HStack>
-);
+const useStepValues = (step: number) => {
+  const [endValue, setEndValue] = useState(0);
+  const [startValue, setStartValue] = useState(0);
+  const lastStep = useRef(step);
+
+  const stepValues = [0, 0, 50, 50, 100];
+
+  useEffect(() => {
+    let intervalId: any;
+    if (step > 0) {
+      intervalId = setInterval(() => {
+        setEndValue(stepValues[step]);
+
+        if (lastStep.current < step) {
+          lastStep.current = step;
+          setStartValue(endValue);
+        }
+      }, 1000);
+    } else {
+      setEndValue(0);
+      setStartValue(-1);
+      lastStep.current = 0;
+    }
+
+    return () => clearInterval(intervalId);
+  }, [step, endValue]);
+
+  return { startValue, endValue };
+};
+
+const StepsProgress = ({ step }: { step: number }) => {
+  const { startValue, endValue } = useStepValues(step);
+
+  return (
+    <HStack w="90%" position="absolute" left="30" display="flex" justifyContent="center">
+      <CentreBox h="50" w="238" position="absolute">
+        <AnimatedProgress startValue={startValue} endValue={endValue} />
+      </CentreBox>
+    </HStack>
+  );
+};
 
 const Stepper = memo(({ step = 0 }: { step: number }) => (
   <VStack direction={"row"} mb={6} justifyContent="center" justifyItems="center" position="relative">

diff --git a/packages/good-design/src/core/animated/AnimatedProgress.tsx b/packages/good-design/src/core/animated/AnimatedProgress.tsx
@@ -1,14 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { Animated, Platform } from "react-native";
 import { View } from "native-base";
 
 import { withTheme } from "../../theme/hoc/withTheme";
 
-interface ITestAnimatedProps {
+interface IAnimatedProps {
   containerStyles?: object;
   progressStyles?: object;
   progressBar?: object;
   startValue: number;
+  endValue: number;
 }
 
 export const theme = {
@@ -35,11 +36,8 @@ export const theme = {
 
 // based on 3 steps progress bar
 const AnimatedProgress = withTheme({ name: "AnimatedProgress" })(
-  ({ containerStyles, progressStyles, progressBar, startValue }: ITestAnimatedProps) => {
+  ({ containerStyles, progressStyles, progressBar, startValue, endValue }: IAnimatedProps) => {
     const progressAnim = useRef(new Animated.Value(0)).current;
-    const animValueRef = useRef(0);
-    // resetValue used for when in progress, and startValue is reset to 0 else the progress width will stay on last startvalue
-    const [resetValue, setResetValue] = useState<number | undefined>(undefined);
 
     useEffect(() => {
       const progressBlock = Animated.sequence([
@@ -49,26 +47,20 @@ const AnimatedProgress = withTheme({ name: "AnimatedProgress" })(
           useNativeDriver: Platform.OS !== "web"
         }),
         Animated.timing(progressAnim, {
-          toValue: startValue ?? 0,
+          toValue: endValue ?? 0,
           duration: 1000,
           useNativeDriver: Platform.OS !== "web"
         })
       ]);
 
-      if (!startValue) {
-        setResetValue(0);
-        Animated.loop(progressBlock).reset();
-      } else if (startValue > animValueRef.current) {
-        setResetValue(undefined);
+      if (endValue > startValue) {
         Animated.loop(progressBlock).start();
       }
-
-      animValueRef.current = startValue;
-    }, [startValue]);
+    }, [startValue, endValue]);
 
     const progressWidth = progressAnim.interpolate({
-      inputRange: [resetValue ?? animValueRef.current, 100],
-      outputRange: [`${resetValue ?? animValueRef.current}%`, "100%"],
+      inputRange: [startValue, 100],
+      outputRange: [`${startValue}%`, "100%"],
       extrapolate: "clamp"
     });
 

diff --git a/yarn.lock b/yarn.lock
@@ -3935,7 +3935,7 @@ __metadata:
 
 "@gooddollar/web3sdk-v2@file:.yalc/@gooddollar/web3sdk-v2::locator=%40gooddollar%2Fgood-design%40workspace%3Apackages%2Fgood-design":
   version: 0.2.4-beta.cfb84f0
-  resolution: "@gooddollar/web3sdk-v2@file:.yalc/@gooddollar/web3sdk-v2#.yalc/@gooddollar/web3sdk-v2::hash=9fa3a1&locator=%40gooddollar%2Fgood-design%40workspace%3Apackages%2Fgood-design"
+  resolution: "@gooddollar/web3sdk-v2@file:.yalc/@gooddollar/web3sdk-v2#.yalc/@gooddollar/web3sdk-v2::hash=118511&locator=%40gooddollar%2Fgood-design%40workspace%3Apackages%2Fgood-design"
   dependencies:
     "@amplitude/analytics-browser": ^1.6.4
     "@amplitude/analytics-react-native": ^0.7.0
@@ -3981,7 +3981,7 @@ __metadata:
     "@react-native-async-storage/async-storage": 1.17.10
     react-native: "*"
     react-native-web: "*"
-  checksum: b59f6fa2f6ddec572b41f07ef74e8be2c8f364714ecd7e3ca000ac0ea48874b845b3a8cc73f81187c8730be448302fb455fe9bf51fce219070e110203213f2c6
+  checksum: c15969d9c48b9a327d673ebe89e83d97676f8419d79c3de99501235b0c7bfa44a9e3818178c2127c79b04bcb1909ab33dc347a17b59961ef6571219934fbc66d
   languageName: node
   linkType: hard