feat: redemption widget - manage callbacks (#594)

* allow to predefined a country code

* feat: define several callback URL at the different steps of redemption process

* fix ERC20test address on local environment

* deal with callbacks response for RedemptionSubmitted and RedemptionConfirmed

* take PR remarks into account

packages/common/src/mappings.ts

@@ -94,7 +94,7 @@ export const chainIdToDefaultTokens = new Map<ChainId, Token[]>([
       {
         symbol: "TETH",
         name: "testErc20",
-        address: "0x998abeb3E57409262aE5b751f60747921B33613E",
+        address: "0x851356ae760d987E095750cCeb3bC6014560891C",
         decimals: "18"
       }
     ]

packages/react-kit/src/components/form/CountrySelect.tsx

@@ -1,7 +1,7 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import { useField, useFormikContext } from "formik";
 import { GlobeHemisphereWest } from "phosphor-react";
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useState, useEffect } from "react";
 import type { Country as CountryCode } from "react-phone-number-input";
 import PhoneInput from "react-phone-number-input";
 import Select, { components } from "react-select";
@@ -112,13 +112,22 @@ type Props = InputProps & {
 
 export function CountrySelect({ name, countries, ...props }: Props) {
   const { status } = useFormikContext();
-  const [, meta, helpers] = useField(name);
+  const [initialized, setInitialized] = useState<boolean>(false);
+  const [field, meta, helpers] = useField(name);
   const errorText = meta.error || status?.[name];
   const errorMessage = errorText && meta.touched ? errorText : "";
   const displayError =
     typeof errorMessage === typeof "string" && errorMessage !== "";
   const [phone, setPhone] = useState<string | undefined>(undefined);
   const [countryCode, setCountryCode] = useState<CountryCode | undefined>();
+
+  useEffect(() => {
+    if (!initialized && field.value) {
+      setCountryCode(field.value as CountryCode);
+      setInitialized(true);
+    }
+  }, [field.value, initialized]); // eslint-disable-line
+
   return (
     <>
       <PhoneWrapper>