From 78ba8561e85e7dbf9f7257337b155265295d7392 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Tue, 11 Jun 2024 12:51:46 +0530
Subject: [PATCH 1/4] fix: two shimmers issue fixed (#424)

---
 src/PaymentElement.res                 | 15 ++++++--
 src/orca-log-catcher/ErrorBoundary.res | 53 +++++++++++++++-----------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index ea40f6166..fd4941143 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -9,6 +9,7 @@ let cardsToRender = (width: int) => {
 }
 @react.component
 let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mode) => {
+  let divRef = React.useRef(Nullable.null)
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
   let {
     showCardFormByDefault,
@@ -25,7 +26,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
-  let setPaymentMethodListValue = Recoil.useSetRecoilState(PaymentUtils.paymentMethodListValue)
+  let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
+    PaymentUtils.paymentMethodListValue,
+  )
   let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
@@ -368,9 +371,15 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     {switch paymentMethodList {
-    | LoadError(_) => React.null
+    | LoadError(_) =>
+      <RenderIf condition={paymentMethodListValue.payment_methods->Array.length === 0}>
+        <ErrorBoundary.ErrorTextAndImage divRef level={Top} />
+      </RenderIf>
     | _ =>
-      <RenderIf condition={paymentOptions->Array.length == 0 && walletOptions->Array.length == 0}>
+      <RenderIf
+        condition={!displaySavedPaymentMethods &&
+        paymentOptions->Array.length == 0 &&
+        walletOptions->Array.length == 0}>
         <PaymentElementShimmer />
       </RenderIf>
     }}
diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
index 16c13f715..44e2818a9 100644
--- a/src/orca-log-catcher/ErrorBoundary.res
+++ b/src/orca-log-catcher/ErrorBoundary.res
@@ -92,6 +92,35 @@ let errorIcon = {
   </svg>
 }
 
+module ErrorTextAndImage = {
+  @react.component
+  let make = (~divRef, ~level) => {
+    let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+    let message = switch level {
+    | Top => "We'll be back with you shortly :)"
+    | _ => "Try another payment method :)"
+    }
+
+    <div
+      ref={divRef->ReactDOM.Ref.domRef}
+      style={
+        color: themeObj.colorPrimary,
+        backgroundColor: themeObj.colorBackground,
+        borderRadius: themeObj.borderRadius,
+        borderColor: themeObj.borderColor,
+      }
+      className="flex  items-center">
+      <div className="flex flex-row  items-center m-6">
+        <div style={marginLeft: "1rem"}> {errorIcon} </div>
+        <div className="flex flex-col items-center justify-center" style={marginLeft: "3rem"}>
+          <div> {"Oops, something went wrong!"->React.string} </div>
+          <div className="text-sm"> {message->React.string} </div>
+        </div>
+      </div>
+    </div>
+  }
+}
+
 module ErrorCard = {
   @react.component
   let make = (~error: Sentry.ErrorBoundary.fallbackArg, ~level) => {
@@ -134,7 +163,6 @@ module ErrorCard = {
     })
 
     let (divH, setDivH) = React.useState(_ => 0.0)
-    let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
     let (keys, _setKeys) = Recoil.useRecoilState(RecoilAtoms.keys)
     let {iframeId} = keys
     let divRef = React.useRef(Nullable.null)
@@ -164,30 +192,9 @@ module ErrorCard = {
       None
     }, (divH, iframeId))
 
-    let message = switch level {
-    | Top => "We'll be back with you shortly :)"
-    | _ => "Try another payment method :)"
-    }
     switch level {
     | RequestButton => React.null
-    | _ =>
-      <div
-        ref={divRef->ReactDOM.Ref.domRef}
-        style={
-          color: themeObj.colorPrimary,
-          backgroundColor: themeObj.colorBackground,
-          borderRadius: themeObj.borderRadius,
-          borderColor: themeObj.borderColor,
-        }
-        className="flex  items-center">
-        <div className="flex flex-row  items-center m-6">
-          <div style={marginLeft: "1rem"}> {errorIcon} </div>
-          <div className="flex flex-col items-center justify-center" style={marginLeft: "3rem"}>
-            <div> {"Oops, something went wrong!"->React.string} </div>
-            <div className="text-sm"> {message->React.string} </div>
-          </div>
-        </div>
-      </div>
+    | _ => <ErrorTextAndImage divRef level />
     }
   }
 }

From 24f72972e7faa45edc77f7e75248ca9c8f3334d8 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Tue, 11 Jun 2024 12:52:12 +0530
Subject: [PATCH 2/4] feat: crypto currency network added (#403)

Co-authored-by: Pritish Budhiraja <1805317@kiit.ac.in>
---
 src/Components/CryptoCurrencyNetworks.res | 41 +++++++++++++++++++++
 src/Components/DynamicFields.res          |  3 +-
 src/LocaleStrings/ArabicLocale.res        |  1 +
 src/LocaleStrings/CatalanLocale.res       |  1 +
 src/LocaleStrings/DeutschLocale.res       |  1 +
 src/LocaleStrings/DutchLocale.res         |  1 +
 src/LocaleStrings/EnglishGBLocale.res     |  1 +
 src/LocaleStrings/EnglishLocale.res       |  1 +
 src/LocaleStrings/FrenchBelgiumLocale.res |  1 +
 src/LocaleStrings/FrenchLocale.res        |  1 +
 src/LocaleStrings/HebrewLocale.res        |  1 +
 src/LocaleStrings/ItalianLocale.res       |  1 +
 src/LocaleStrings/JapaneseLocale.res      |  1 +
 src/LocaleStrings/LocaleStringTypes.res   |  1 +
 src/LocaleStrings/PolishLocale.res        |  1 +
 src/LocaleStrings/PortugueseLocale.res    |  1 +
 src/LocaleStrings/RussianLocale.res       |  1 +
 src/LocaleStrings/SpanishLocale.res       |  1 +
 src/LocaleStrings/SwedishLocale.res       |  1 +
 src/Payments/CardPayment.res              |  5 +--
 src/Payments/PaymentMethodsRecord.res     | 44 +++--------------------
 src/Payments/PaymentMethodsWrapper.res    |  1 -
 src/Utilities/DynamicFieldsUtils.res      | 14 ++++++++
 src/Utilities/PaymentBody.res             | 12 ++-----
 src/Utilities/RecoilAtoms.res             |  1 +
 src/Utilities/Utils.res                   | 25 +++++++++++++
 26 files changed, 109 insertions(+), 54 deletions(-)
 create mode 100644 src/Components/CryptoCurrencyNetworks.res

diff --git a/src/Components/CryptoCurrencyNetworks.res b/src/Components/CryptoCurrencyNetworks.res
new file mode 100644
index 000000000..339532361
--- /dev/null
+++ b/src/Components/CryptoCurrencyNetworks.res
@@ -0,0 +1,41 @@
+@react.component
+let make = () => {
+  open DropdownField
+  let currencyVal = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCurrency)
+  let {config, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
+    RecoilAtoms.cryptoCurrencyNetworks,
+  )
+
+  let dropdownOptions =
+    Utils.currencyNetworksDict
+    ->Dict.get(currencyVal)
+    ->Option.getOr([])
+    ->Array.map(item => {
+      label: Utils.toSpacedUpperCase(~str=item, ~delimiter="_"),
+      value: item,
+    })
+
+  let initialValue = (
+    dropdownOptions
+    ->Array.get(0)
+    ->Option.getOr({
+      label: "",
+      value: "",
+    })
+  ).value
+
+  React.useEffect(() => {
+    setCryptoCurrencyNetworks(_ => initialValue)
+    None
+  }, [initialValue])
+
+  <DropdownField
+    appearance=config.appearance
+    fieldName=localeString.currencyNetwork
+    value=cryptoCurrencyNetworks
+    setValue=setCryptoCurrencyNetworks
+    disabled=false
+    options=dropdownOptions
+  />
+}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index deeded0eb..a3b3bedd4 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -326,7 +326,6 @@ let make = (
           key={`outside-billing-${index->Int.toString}`}
           className="flex flex-col w-full place-content-between"
           style={
-            marginTop: index !== 0 || paymentMethod === "card" ? themeObj.spacingGridColumn : "",
             gridColumnGap: themeObj.spacingGridRow,
           }>
           {switch item {
@@ -457,6 +456,7 @@ let make = (
                 optionalRequiredFields={Some(requiredFields)}
               />
             </>
+          | CryptoCurrencyNetworks => <CryptoCurrencyNetworks />
           | Email
           | InfoElement
           | Country
@@ -760,6 +760,7 @@ let make = (
                 | ShippingAddressPincode
                 | ShippingAddressState
                 | ShippingAddressCountry(_)
+                | CryptoCurrencyNetworks
                 | None => React.null
                 }}
               </div>
diff --git a/src/LocaleStrings/ArabicLocale.res b/src/LocaleStrings/ArabicLocale.res
index c952cdd4e..bdf32a8c7 100644
--- a/src/LocaleStrings/ArabicLocale.res
+++ b/src/LocaleStrings/ArabicLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `انتهت صلاحية هذه البطاقة`,
   cardHeader: `معلومات البطاقة`,
   cardBrandConfiguredErrorText: str => `${str} غير مدعوم في الوقت الحالي.`,
+  currencyNetwork: `شبكات العملات`,
 }
diff --git a/src/LocaleStrings/CatalanLocale.res b/src/LocaleStrings/CatalanLocale.res
index 06c279d3e..199727a5a 100644
--- a/src/LocaleStrings/CatalanLocale.res
+++ b/src/LocaleStrings/CatalanLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Aquesta targeta ha caducat`,
   cardHeader: `Informació de la targeta`,
   cardBrandConfiguredErrorText: str => `${str} no està suportat en aquest moment.`,
+  currencyNetwork: `Xarxes de Monedes`,
 }
diff --git a/src/LocaleStrings/DeutschLocale.res b/src/LocaleStrings/DeutschLocale.res
index f1e0d7535..fffa1f758 100644
--- a/src/LocaleStrings/DeutschLocale.res
+++ b/src/LocaleStrings/DeutschLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Diese Karte ist abgelaufen`,
   cardHeader: `Kartendaten`,
   cardBrandConfiguredErrorText: str => `${str} wird derzeit nicht unterstützt.`,
+  currencyNetwork: `Währungsnetzwerke`,
 }
diff --git a/src/LocaleStrings/DutchLocale.res b/src/LocaleStrings/DutchLocale.res
index 60688a7ae..801798a9a 100644
--- a/src/LocaleStrings/DutchLocale.res
+++ b/src/LocaleStrings/DutchLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Deze kaart is verlopen`,
   cardHeader: `Kaartinformatie`,
   cardBrandConfiguredErrorText: str => `${str} wordt op dit moment niet ondersteund.`,
+  currencyNetwork: `Valutanetwerken`,
 }
diff --git a/src/LocaleStrings/EnglishGBLocale.res b/src/LocaleStrings/EnglishGBLocale.res
index ebfc40916..3497e1cbe 100644
--- a/src/LocaleStrings/EnglishGBLocale.res
+++ b/src/LocaleStrings/EnglishGBLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }
diff --git a/src/LocaleStrings/EnglishLocale.res b/src/LocaleStrings/EnglishLocale.res
index a767ba0ae..441decd77 100644
--- a/src/LocaleStrings/EnglishLocale.res
+++ b/src/LocaleStrings/EnglishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `This card has expired`,
   cardHeader: `Card information`,
   cardBrandConfiguredErrorText: str => `${str} is not supported at the moment.`,
+  currencyNetwork: `Currency Networks`,
 }
diff --git a/src/LocaleStrings/FrenchBelgiumLocale.res b/src/LocaleStrings/FrenchBelgiumLocale.res
index 7d7bbe031..25e945f50 100644
--- a/src/LocaleStrings/FrenchBelgiumLocale.res
+++ b/src/LocaleStrings/FrenchBelgiumLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }
diff --git a/src/LocaleStrings/FrenchLocale.res b/src/LocaleStrings/FrenchLocale.res
index 6c228de17..c2e6bc157 100644
--- a/src/LocaleStrings/FrenchLocale.res
+++ b/src/LocaleStrings/FrenchLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Cette carte a expiré`,
   cardHeader: `Informations de carte`,
   cardBrandConfiguredErrorText: str => `${str} n'est pas pris en charge pour le moment.`,
+  currencyNetwork: `Réseaux Monétaires`,
 }
diff --git a/src/LocaleStrings/HebrewLocale.res b/src/LocaleStrings/HebrewLocale.res
index 46908a925..0f182ef42 100644
--- a/src/LocaleStrings/HebrewLocale.res
+++ b/src/LocaleStrings/HebrewLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `הכרטיס הזה פג תוקף`,
   cardHeader: `מידע כרטיס`,
   cardBrandConfiguredErrorText: str => `${str} לא נתמך כרגע.`,
+  currencyNetwork: `רשתות מטבעות`,
 }
diff --git a/src/LocaleStrings/ItalianLocale.res b/src/LocaleStrings/ItalianLocale.res
index ea3d27bcc..5df1b174a 100644
--- a/src/LocaleStrings/ItalianLocale.res
+++ b/src/LocaleStrings/ItalianLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Questa carta è scaduta`,
   cardHeader: `Informazioni sulla carta`,
   cardBrandConfiguredErrorText: str => `${str} non è supportato al momento.`,
+  currencyNetwork: `Reti Valutarie`,
 }
diff --git a/src/LocaleStrings/JapaneseLocale.res b/src/LocaleStrings/JapaneseLocale.res
index 273f802f7..3c373cc64 100644
--- a/src/LocaleStrings/JapaneseLocale.res
+++ b/src/LocaleStrings/JapaneseLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `このカードは期限切れです`,
   cardHeader: `カード情報`,
   cardBrandConfiguredErrorText: str => `${str} は現在サポートされていません。`,
+  currencyNetwork: `通貨ネットワーク`,
 }
diff --git a/src/LocaleStrings/LocaleStringTypes.res b/src/LocaleStrings/LocaleStringTypes.res
index 2cc7306f9..4c1c5628e 100644
--- a/src/LocaleStrings/LocaleStringTypes.res
+++ b/src/LocaleStrings/LocaleStringTypes.res
@@ -73,4 +73,5 @@ type localeStrings = {
   cardExpiredText: string,
   cardHeader: string,
   cardBrandConfiguredErrorText: string => string,
+  currencyNetwork: string,
 }
diff --git a/src/LocaleStrings/PolishLocale.res b/src/LocaleStrings/PolishLocale.res
index 10b7760d4..71c21edb1 100644
--- a/src/LocaleStrings/PolishLocale.res
+++ b/src/LocaleStrings/PolishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Ta karta wygasła`,
   cardHeader: `Informacje o karcie`,
   cardBrandConfiguredErrorText: str => `${str} nie jest obecnie obsługiwany.`,
+  currencyNetwork: `Sieci Walutowe`,
 }
diff --git a/src/LocaleStrings/PortugueseLocale.res b/src/LocaleStrings/PortugueseLocale.res
index 771abe47e..bf3301e19 100644
--- a/src/LocaleStrings/PortugueseLocale.res
+++ b/src/LocaleStrings/PortugueseLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Este cartão expirou`,
   cardHeader: `Informações do cartão`,
   cardBrandConfiguredErrorText: str => `${str} não é suportado no momento.`,
+  currencyNetwork: `Redes de Moeda`,
 }
diff --git a/src/LocaleStrings/RussianLocale.res b/src/LocaleStrings/RussianLocale.res
index 2036de7f7..502ab080e 100644
--- a/src/LocaleStrings/RussianLocale.res
+++ b/src/LocaleStrings/RussianLocale.res
@@ -86,4 +86,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardHeader: `Информация о карте`,
   cardBrandConfiguredErrorText: str =>
     `${str} в данный момент не поддерживается.`,
+  currencyNetwork: `Валютные сети`,
 }
diff --git a/src/LocaleStrings/SpanishLocale.res b/src/LocaleStrings/SpanishLocale.res
index 1dd1f5440..f1459dd1b 100644
--- a/src/LocaleStrings/SpanishLocale.res
+++ b/src/LocaleStrings/SpanishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Esta tarjeta ha caducado`,
   cardHeader: `Información de la tarjeta`,
   cardBrandConfiguredErrorText: str => `${str} no está soportado en este momento.`,
+  currencyNetwork: `Redes de Divisas`,
 }
diff --git a/src/LocaleStrings/SwedishLocale.res b/src/LocaleStrings/SwedishLocale.res
index 33398aae8..3b34c0376 100644
--- a/src/LocaleStrings/SwedishLocale.res
+++ b/src/LocaleStrings/SwedishLocale.res
@@ -82,4 +82,5 @@ let localeStrings: LocaleStringTypes.localeStrings = {
   cardExpiredText: `Detta kort har gått ut`,
   cardHeader: `Kortinformation`,
   cardBrandConfiguredErrorText: str => `${str} stöds inte för tillfället.`,
+  currencyNetwork: `Valutanätverk`,
 }
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index 6f3cfe39a..abd90fb4d 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -229,7 +229,7 @@ let make = (
   <div className="animate-slowShow">
     <RenderIf condition={showFields || isBancontact}>
       <div className="flex flex-col" style={gridGap: themeObj.spacingGridColumn}>
-        <div className="w-full">
+        <div className="flex flex-col w-full" style={gridGap: themeObj.spacingGridColumn}>
           <RenderIf condition={innerLayout === Compressed}>
             <div
               style={
@@ -263,9 +263,6 @@ let make = (
             <div
               className="flex flex-row w-full place-content-between"
               style={
-                marginTop: {
-                  innerLayout === Spaced ? themeObj.spacingGridColumn : ""
-                },
                 gridColumnGap: {innerLayout === Spaced ? themeObj.spacingGridRow : ""},
               }>
               <div className={innerLayout === Spaced ? "w-[45%]" : "w-[50%]"}>
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index 8b69abc58..d5197e904 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -34,6 +34,7 @@ type paymentMethodsFields =
   | ShippingAddressPincode
   | ShippingAddressState
   | ShippingAddressCountry(array<string>)
+  | CryptoCurrencyNetworks
 
 let getPaymentMethodsFieldsOrder = paymentMethodField => {
   switch paymentMethodField {
@@ -47,10 +48,11 @@ let getPaymentMethodsFieldsOrder = paymentMethodField => {
   | AddressLine2 => 5
   | AddressCity => 6
   | AddressState => 7
-  | AddressCountry(_) => 8
-  | AddressPincode => 9
   | StateAndCity => 7
+  | AddressCountry(_) => 8
   | CountryAndPincode(_) => 8
+  | AddressPincode => 9
+  | CryptoCurrencyNetworks => 10
   | InfoElement => 99
   | _ => 3
   }
@@ -546,6 +548,7 @@ let getPaymentMethodsFieldTypeFromString = (str, isBancontact) => {
   | ("user_shipping_address_city", _) => ShippingAddressCity
   | ("user_shipping_address_pincode", _) => ShippingAddressPincode
   | ("user_shipping_address_state", _) => ShippingAddressState
+  | ("user_crypto_currency_network", _) => CryptoCurrencyNetworks
   | _ => None
   }
 }
@@ -1061,40 +1064,3 @@ let getCardNetwork = (~paymentMethodType, ~cardBrand) => {
   ->Array.get(0)
   ->Option.getOr(defaultCardNetworks)
 }
-
-let paymentMethodFieldToStrMapper = (field: paymentMethodsFields) => {
-  switch field {
-  | Email => "Email"
-  | FullName => "FullName"
-  | InfoElement => "InfoElement"
-  | Country => "Country"
-  | Bank => "Bank"
-  | SpecialField(_) => "SpecialField"
-  | None => "None"
-  | BillingName => "BillingName"
-  | PhoneNumber => "PhoneNumber"
-  | AddressLine1 => "AddressLine1"
-  | AddressLine2 => "AddressLine2"
-  | AddressCity => "AddressCity"
-  | StateAndCity => "StateAndCity"
-  | CountryAndPincode(_) => "CountryAndPincode"
-  | AddressPincode => "AddressPincode"
-  | AddressState => "AddressState"
-  | AddressCountry(_) => "AddressCountry"
-  | BlikCode => "BlikCode"
-  | Currency(_) => "Currency"
-  | CardNumber => "CardNumber"
-  | CardExpiryMonth => "CardExpiryMonth"
-  | CardExpiryYear => "CardExpiryYear"
-  | CardExpiryMonthAndYear => "CardExpiryMonthAndYear"
-  | CardCvc => "CardCvc"
-  | CardExpiryAndCvc => "CardExpiryAndCvc"
-  | ShippingName => "ShippingName"
-  | ShippingAddressLine1 => "ShippingAddressLine1"
-  | ShippingAddressLine2 => "ShippingAddressLine2"
-  | ShippingAddressCity => "ShippingAddressCity"
-  | ShippingAddressPincode => "ShippingAddressPincode"
-  | ShippingAddressState => "ShippingAddressState"
-  | ShippingAddressCountry(_) => "ShippingAddressCountry"
-  }
-}
diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res
index 38b3bff28..f0377ad50 100644
--- a/src/Payments/PaymentMethodsWrapper.res
+++ b/src/Payments/PaymentMethodsWrapper.res
@@ -83,7 +83,6 @@ let make = (~paymentType: CardThemeType.mode, ~paymentMethodName: string) => {
               phoneNumber.countryCode->Option.getOr("") ++ phoneNumber.value,
             ),
             ~paymentExperience=paymentFlow,
-            ~currency,
           )
           ->Dict.fromArray
           ->JSON.Encode.object
diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
index 1a0e770fe..13b62e520 100644
--- a/src/Utilities/DynamicFieldsUtils.res
+++ b/src/Utilities/DynamicFieldsUtils.res
@@ -125,6 +125,7 @@ let useRequiredFieldsEmptyAndValid = (
   let setAreRequiredFieldsValid = Recoil.useSetRecoilState(areRequiredFieldsValid)
   let setAreRequiredFieldsEmpty = Recoil.useSetRecoilState(areRequiredFieldsEmpty)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
 
   let fieldsArrWithBillingAddress = fieldsArr->addBillingAddressIfUseBillingAddress(billingAddress)
 
@@ -149,6 +150,7 @@ let useRequiredFieldsEmptyAndValid = (
       | AddressPincode => postalCode.value !== ""
       | AddressState => state.value !== ""
       | BlikCode => blikCode.value !== ""
+      | CryptoCurrencyNetworks => cryptoCurrencyNetworks !== ""
       | Currency(currencyArr) => currency !== "" || currencyArr->Array.length === 0
       | CardNumber => isCardValid->Option.getOr(false)
       | CardExpiryMonth
@@ -185,6 +187,7 @@ let useRequiredFieldsEmptyAndValid = (
       | AddressPincode => postalCode.value === ""
       | AddressState => state.value === ""
       | BlikCode => blikCode.value === ""
+      | CryptoCurrencyNetworks => cryptoCurrencyNetworks === ""
       | Currency(currencyArr) => currency === "" && currencyArr->Array.length > 0
       | CardNumber => cardNumber === ""
       | CardExpiryMonth =>
@@ -261,6 +264,9 @@ let useSetInitialRequiredFields = (
     logger,
   )
   let (currency, setCurrency) = Recoil.useLoggedRecoilState(userCurrency, "currency", logger)
+  let (cryptoCurrencyNetworks, setCryptoCurrencyNetworks) = Recoil.useRecoilState(
+    cryptoCurrencyNetworks,
+  )
 
   React.useEffect(() => {
     let getNameValue = (item: PaymentMethodsRecord.required_fields) => {
@@ -353,6 +359,10 @@ let useSetInitialRequiredFields = (
         if value !== "" && selectedBank === "" {
           setSelectedBank(_ => value)
         }
+      | CryptoCurrencyNetworks =>
+        if value !== "" && cryptoCurrencyNetworks === "" {
+          setCryptoCurrencyNetworks(_ => value)
+        }
       | SpecialField(_)
       | InfoElement
       | CardNumber
@@ -399,6 +409,7 @@ let useRequiredFieldsBody = (
   let selectedBank = Recoil.useRecoilValueFromAtom(userBank)
   let currency = Recoil.useRecoilValueFromAtom(userCurrency)
   let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let cryptoCurrencyNetworks = Recoil.useRecoilValueFromAtom(cryptoCurrencyNetworks)
 
   let getFieldValueFromFieldType = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
     switch fieldType {
@@ -434,6 +445,7 @@ let useRequiredFieldsBody = (
     | CardExpiryYear =>
       let (_, year) = CardUtils.getExpiryDates(cardExpiry)
       year
+    | CryptoCurrencyNetworks => cryptoCurrencyNetworks
     | CardCvc => cvcNumber
     | StateAndCity
     | CountryAndPincode(_)
@@ -526,6 +538,7 @@ let useRequiredFieldsBody = (
     cardExpiry,
     cvcNumber,
     selectedBank,
+    cryptoCurrencyNetworks,
   ])
 }
 
@@ -538,6 +551,7 @@ let isFieldTypeToRenderOutsideBilling = (fieldType: PaymentMethodsRecord.payment
   | CardExpiryMonthAndYear
   | CardCvc
   | CardExpiryAndCvc
+  | CryptoCurrencyNetworks
   | Currency(_) => true
   | _ => false
   }
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index dc6b4c4d3..9e3d6fad3 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -547,16 +547,11 @@ let applePayThirdPartySdkBody = (~connectors) => [
   ),
 ]
 
-let cryptoBody = (~currency) => [
+let cryptoBody = [
   ("payment_method", "crypto"->JSON.Encode.string),
   ("payment_method_type", "crypto_currency"->JSON.Encode.string),
   ("payment_experience", "redirect_to_url"->JSON.Encode.string),
-  (
-    "payment_method_data",
-    [
-      ("crypto", [("pay_currency", currency->JSON.Encode.string)]->Utils.getJsonFromArrayOfJson),
-    ]->Utils.getJsonFromArrayOfJson,
-  ),
+  ("payment_method_data", []->Utils.getJsonFromArrayOfJson),
 ]
 
 let afterpayRedirectionBody = () => [
@@ -1055,11 +1050,10 @@ let getPaymentBody = (
   ~blikCode,
   ~paymentExperience: PaymentMethodsRecord.paymentFlow=RedirectToURL,
   ~phoneNumber,
-  ~currency,
 ) =>
   switch paymentMethodType {
   | "afterpay_clearpay" => afterpayRedirectionBody()
-  | "crypto_currency" => cryptoBody(~currency)
+  | "crypto_currency" => cryptoBody
   | "sofort" => sofortBody(~country, ~name=fullName, ~email)
   | "ideal" => iDealBody(~name=fullName, ~bankName=bank)
   | "eps" => epsBody(~name=fullName, ~bankName=bank)
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index 40beb7a88..ace9a1639 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -53,6 +53,7 @@ let userBlikCode = Recoil.atom("userBlikCode", defaultFieldValues)
 let fieldsComplete = Recoil.atom("fieldsComplete", false)
 let isManualRetryEnabled = Recoil.atom("isManualRetryEnabled", false)
 let userCurrency = Recoil.atom("userCurrency", "")
+let cryptoCurrencyNetworks = Recoil.atom("cryptoCurrencyNetworks", "")
 let isShowOrPayUsing = Recoil.atom("isShowOrPayUsing", false)
 let areRequiredFieldsValid = Recoil.atom("areRequiredFieldsValid", true)
 let areRequiredFieldsEmpty = Recoil.atom("areRequiredFieldsEmpty", false)
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index b7714e427..b1f9af103 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -1282,3 +1282,28 @@ let getStateNameFromStateCodeAndCountry = (list: JSON.t, stateCode: string, coun
 }
 
 let removeHyphen = str => str->String.replaceRegExp(%re("/-/g"), "")
+
+let currencyNetworksDict =
+  [
+    ("BTC", ["bitcoin", "bnb_smart_chain"]),
+    ("LTC", ["litecoin", "bnb_smart_chain"]),
+    ("ETH", ["ethereum", "bnb_smart_chain"]),
+    ("XRP", ["ripple", "bnb_smart_chain"]),
+    ("XLM", ["stellar", "bnb_smart_chain"]),
+    ("BCH", ["bitcoin_cash", "bnb_smart_chain"]),
+    ("ADA", ["cardano", "bnb_smart_chain"]),
+    ("SOL", ["solana", "bnb_smart_chain"]),
+    ("SHIB", ["ethereum", "bnb_smart_chain"]),
+    ("TRX", ["tron", "bnb_smart_chain"]),
+    ("DOGE", ["dogecoin", "bnb_smart_chain"]),
+    ("BNB", ["bnb_smart_chain"]),
+    ("USDT", ["ethereum", "tron", "bnb_smart_chain"]),
+    ("USDC", ["ethereum", "tron", "bnb_smart_chain"]),
+    ("DAI", ["ethereum", "bnb_smart_chain"]),
+  ]->Dict.fromArray
+
+let toSpacedUpperCase = (~str, ~delimiter) =>
+  str
+  ->String.toUpperCase
+  ->String.split(delimiter)
+  ->Array.joinWith(" ")

From d88240a1d82408d4ebb0c6a1fd5ca4733da5043e Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <pritish.budhiraja@gmail.com>
Date: Tue, 11 Jun 2024 12:52:41 +0530
Subject: [PATCH 3/4] refactor: belt function removal (#422)

---
 src/BrowserSpec.res                          |  6 +--
 src/CardUtils.res                            | 13 +++--
 src/Components/AccordionContainer.res        |  6 +--
 src/Components/Loader.res                    |  4 +-
 src/Components/SavedMethods.res              |  2 +-
 src/Components/SurchargeUtils.res            |  2 +-
 src/PaymentOptions.res                       |  4 +-
 src/Payments/ApplePay.res                    |  4 +-
 src/Payments/GPay.res                        |  2 +-
 src/Payments/PayPal.res                      |  2 +-
 src/Payments/PaymentRequestButtonElement.res |  4 +-
 src/Payments/PreMountLoader.res              |  6 +--
 src/Payments/QRCodeDisplay.res               |  7 ++-
 src/Types/PaymentConfirmTypes.res            |  2 +-
 src/Types/PaymentType.res                    |  4 +-
 src/Types/PaypalSDKTypes.res                 |  8 ++--
 src/Utilities/ErrorUtils.res                 |  2 +-
 src/Utilities/PaymentHelpers.res             |  2 +-
 src/Utilities/Utils.res                      | 16 +++----
 src/orca-loader/Elements.res                 | 50 ++++++++++----------
 src/orca-loader/Hyper.res                    |  4 +-
 src/orca-log-catcher/ErrorBoundary.res       |  2 +-
 src/orca-log-catcher/OrcaLogger.res          | 16 +++----
 23 files changed, 83 insertions(+), 85 deletions(-)

diff --git a/src/BrowserSpec.res b/src/BrowserSpec.res
index 967bf789d..29343a2cb 100644
--- a/src/BrowserSpec.res
+++ b/src/BrowserSpec.res
@@ -32,9 +32,9 @@ let broswerInfo = () => {
           "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8"->JSON.Encode.string,
         ),
         ("language", navigator.language->JSON.Encode.string),
-        ("color_depth", colorDepth->Belt.Int.toFloat->JSON.Encode.float),
-        ("screen_height", screen.height->Belt.Int.toFloat->JSON.Encode.float),
-        ("screen_width", screen.width->Belt.Int.toFloat->JSON.Encode.float),
+        ("color_depth", colorDepth->Int.toFloat->JSON.Encode.float),
+        ("screen_height", screen.height->Int.toFloat->JSON.Encode.float),
+        ("screen_width", screen.width->Int.toFloat->JSON.Encode.float),
         ("time_zone", date.getTimezoneOffset()->JSON.Encode.float),
         ("java_enabled", true->JSON.Encode.bool),
         ("java_script_enabled", true->JSON.Encode.bool),
diff --git a/src/CardUtils.res b/src/CardUtils.res
index 39a0441d6..e8dc50657 100644
--- a/src/CardUtils.res
+++ b/src/CardUtils.res
@@ -71,8 +71,8 @@ type options = {timeZone: string}
 type dateTimeFormat = {resolvedOptions: unit => options}
 @val @scope("Intl") external dateTimeFormat: unit => dateTimeFormat = "DateTimeFormat"
 
-let toInt = val => val->Belt.Int.fromString->Option.getOr(0)
-let toString = val => val->Belt.Int.toString
+let toInt = val => val->Int.fromString->Option.getOr(0)
+let toString = val => val->Int.toString
 
 let getQueryParamsDictforKey = (searchParams, keyName) => {
   let dict = Dict.make()
@@ -206,7 +206,7 @@ let getExpiryDates = val => {
   let date = Date.make()->Date.toISOString
   let (month, year) = splitExpiryDates(val)
   let (_, currentYear) = getCurrentMonthAndYear(date)
-  let prefix = currentYear->Belt.Int.toString->String.slice(~start=0, ~end=2)
+  let prefix = currentYear->Int.toString->String.slice(~start=0, ~end=2)
   (month, `${prefix}${year}`)
 }
 let formatExpiryToTwoDigit = expiry => {
@@ -269,7 +269,7 @@ let getCardBrand = cardNumber => {
         isin
         ->String.replaceRegExp(%re("/[^\d]/g"), "")
         ->String.substring(~start=0, ~end=6)
-        ->Belt.Int.fromString
+        ->Int.fromString
         ->Option.getOr(0)
 
       let range = cardRanges->Array.map(cardRange => {
@@ -317,12 +317,11 @@ let calculateLuhn = value => {
     ->Array.map(item => {
       let val = item->toInt
       let double = val * 2
-      let str = double->Belt.Int.toString
+      let str = double->Int.toString
       let arr = str->String.split("")
 
       switch (arr[0], arr[1]) {
-      | (Some(first), Some(second)) if double > 9 =>
-        (first->toInt + second->toInt)->Belt.Int.toString
+      | (Some(first), Some(second)) if double > 9 => (first->toInt + second->toInt)->Int.toString
       | _ => str
       }
     })
diff --git a/src/Components/AccordionContainer.res b/src/Components/AccordionContainer.res
index 3a9ba173d..9f99ecb2e 100644
--- a/src/Components/AccordionContainer.res
+++ b/src/Components/AccordionContainer.res
@@ -19,7 +19,7 @@ module Loader = {
           : ""
         <div
           className={`AccordionItem flex flex-row gap-3 animate-pulse cursor-default place-items-center`}
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           style={
             minWidth: "80px",
             minHeight: "60px",
@@ -131,7 +131,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
         let isActive = payOption.paymentMethodName == selectedOption
         let borderRadiusStyle = getBorderRadiusStyleForCardOptionDetails(i)
         <Accordion
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           paymentOption=payOption
           isActive
           checkoutEle
@@ -149,7 +149,7 @@ let make = (~paymentOptions: array<string>, ~checkoutEle: React.element) => {
           let isActive = payOption.paymentMethodName == selectedOption
           let borderRadiusStyle = getBorderRadiusStyleForDropDownOptionDetails(i)
           <Accordion
-            key={i->Belt.Int.toString}
+            key={i->Int.toString}
             paymentOption=payOption
             isActive
             checkoutEle
diff --git a/src/Components/Loader.res b/src/Components/Loader.res
index b14c7b117..b3188c667 100644
--- a/src/Components/Loader.res
+++ b/src/Components/Loader.res
@@ -10,10 +10,10 @@ let make = (~showText=true) => {
           size=52
           style={
             animation: "slowShow 1.5s ease-in-out infinite",
-            animationDelay: {((i + 1) * 180)->Belt.Int.toString ++ "ms"},
+            animationDelay: {((i + 1) * 180)->Int.toString ++ "ms"},
           }
           name=item
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
         />
       })
       ->React.array}
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index eae7aad23..a7c6f6fbc 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -60,7 +60,7 @@ let make = (
       }
       let isActive = paymentTokenVal == obj.paymentToken
       <SavedCardItem
-        key={i->Belt.Int.toString}
+        key={i->Int.toString}
         setPaymentToken
         isActive
         paymentItem=obj
diff --git a/src/Components/SurchargeUtils.res b/src/Components/SurchargeUtils.res
index 54fbaae22..e97445d4b 100644
--- a/src/Components/SurchargeUtils.res
+++ b/src/Components/SurchargeUtils.res
@@ -90,7 +90,7 @@ let useOneClickWalletsMessageGetter = (~paymentMethodListValue) => {
           </>
         let msgToConcat = if index === 0 {
           myMsg
-        } else if index === oneClickWalletsArr->Belt.Array.length - 1 {
+        } else if index === oneClickWalletsArr->Array.length - 1 {
           <>
             {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)}
             {myMsg}
diff --git a/src/PaymentOptions.res b/src/PaymentOptions.res
index d128cd832..c57a487da 100644
--- a/src/PaymentOptions.res
+++ b/src/PaymentOptions.res
@@ -12,7 +12,7 @@ module TabLoader = {
       ->Array.mapWithIndex((_, i) => {
         <div
           className={`Tab flex flex-col gap-3 animate-pulse cursor-default`}
-          key={i->Belt.Int.toString}
+          key={i->Int.toString}
           style={
             minWidth: "5rem",
             overflowWrap: "hidden",
@@ -118,7 +118,7 @@ let make = (
       {cardOptionDetails
       ->Array.mapWithIndex((payOption, i) => {
         let isActive = payOption.paymentMethodName == selectedOption
-        <TabCard key={i->Belt.Int.toString} paymentOption=payOption isActive />
+        <TabCard key={i->Int.toString} paymentOption=payOption isActive />
       })
       ->React.array}
       <TabLoader cardShimmerCount />
diff --git a/src/Payments/ApplePay.res b/src/Payments/ApplePay.res
index 3471ba4c6..2cf65d806 100644
--- a/src/Payments/ApplePay.res
+++ b/src/Payments/ApplePay.res
@@ -288,12 +288,12 @@ let make = (~sessionObj: option<JSON.t>) => {
 
           let billingContact =
             dict
-            ->getDictfromDict("applePayBillingContact")
+            ->getDictFromDict("applePayBillingContact")
             ->ApplePayTypes.billingContactItemToObjMapper
 
           let shippingContact =
             dict
-            ->getDictfromDict("applePayShippingContact")
+            ->getDictFromDict("applePayShippingContact")
             ->ApplePayTypes.shippingContactItemToObjMapper
 
           let requiredFieldsBody = DynamicFieldsUtils.getApplePayRequiredFields(
diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res
index b904b0456..95c0308e8 100644
--- a/src/Payments/GPay.res
+++ b/src/Payments/GPay.res
@@ -277,7 +277,7 @@ let make = (~sessionObj: option<SessionsType.token>, ~thirdPartySessionObj: opti
 
   <RenderIf condition={isRenderGooglePayButton}>
     <div
-      style={height: `${height->Belt.Int.toString}px`}
+      style={height: `${height->Int.toString}px`}
       id="google-pay-button"
       className={`w-full flex flex-row justify-center rounded-md`}
     />
diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res
index 35caa351a..63386baf3 100644
--- a/src/Payments/PayPal.res
+++ b/src/Payments/PayPal.res
@@ -86,7 +86,7 @@ let make = () => {
     style={
       display: "inline-block",
       color: textColor,
-      height: `${height->Belt.Int.toString}px`,
+      height: `${height->Int.toString}px`,
       borderRadius: "2px",
       width: "100%",
       backgroundColor: buttonColor,
diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
index aa8ac6b0a..2814f9901 100644
--- a/src/Payments/PaymentRequestButtonElement.res
+++ b/src/Payments/PaymentRequestButtonElement.res
@@ -65,8 +65,8 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     {walletOptions
     ->Array.mapWithIndex((item, i) => {
       <ErrorBoundary
-        level={ErrorBoundary.RequestButton} key={`${item}-${i->Belt.Int.toString}-request-button`}>
-        <React.Suspense fallback={<WalletShimmer />} key={i->Belt.Int.toString}>
+        level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
+        <React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}>
           {switch clientSecret {
           | Some(_) =>
             switch item->paymentMode {
diff --git a/src/Payments/PreMountLoader.res b/src/Payments/PreMountLoader.res
index 3b531e00b..c22273856 100644
--- a/src/Payments/PreMountLoader.res
+++ b/src/Payments/PreMountLoader.res
@@ -73,11 +73,11 @@ let make = (~sessionId, ~publishableKey, ~clientSecret, ~endpoint) => {
     | _ => JSON.Encode.null
     }
     let dict = json->Utils.getDictFromJson
-    if dict->Dict.get("sendPaymentMethodsResponse")->Belt.Option.isSome {
+    if dict->Dict.get("sendPaymentMethodsResponse")->Option.isSome {
       paymentMethodsResponse->sendPromiseData("payment_methods")
-    } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Belt.Option.isSome {
+    } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Option.isSome {
       customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
-    } else if dict->Dict.get("sendSessionTokensResponse")->Belt.Option.isSome {
+    } else if dict->Dict.get("sendSessionTokensResponse")->Option.isSome {
       sessionTokensResponse->sendPromiseData("session_tokens")
     }
   }
diff --git a/src/Payments/QRCodeDisplay.res b/src/Payments/QRCodeDisplay.res
index 50ca3262e..8dd6eb9fc 100644
--- a/src/Payments/QRCodeDisplay.res
+++ b/src/Payments/QRCodeDisplay.res
@@ -44,7 +44,7 @@ let make = () => {
           Dict.set(headers, x, val->getStringFromJson(""))
         })
         let expiryTime =
-          metaDataDict->getString("expiryTime", "")->Belt.Float.fromString->Option.getOr(0.0)
+          metaDataDict->getString("expiryTime", "")->Float.fromString->Option.getOr(0.0)
         let timeExpiry = expiryTime -. Date.now()
         if timeExpiry > 0.0 && timeExpiry < 900000.0 {
           setExpiryTime(_ => timeExpiry)
@@ -121,9 +121,8 @@ let make = () => {
   }
 
   let expiryString = React.useMemo(() => {
-    let minutes = (expiryTime /. 60000.0)->Belt.Float.toInt->Belt.Int.toString
-    let seconds =
-      mod(expiryTime->Belt.Float.toInt, 60000)->Belt.Int.toString->String.slice(~start=0, ~end=2)
+    let minutes = (expiryTime /. 60000.0)->Float.toInt->Int.toString
+    let seconds = mod(expiryTime->Float.toInt, 60000)->Int.toString->String.slice(~start=0, ~end=2)
     let seconds = seconds->String.length == 1 ? `${seconds}0` : seconds
     `${minutes}:${seconds}`
   }, [expiryTime])
diff --git a/src/Types/PaymentConfirmTypes.res b/src/Types/PaymentConfirmTypes.res
index f16088dbb..67f703cd9 100644
--- a/src/Types/PaymentConfirmTypes.res
+++ b/src/Types/PaymentConfirmTypes.res
@@ -163,7 +163,7 @@ let getNextAction = (dict, str) => {
         ->Option.flatMap(JSON.Decode.object)
         ->Option.map(json => json->getVoucherDetails)
       },
-      next_action_data: Some(json->getDictfromDict("next_action_data")->JSON.Encode.object),
+      next_action_data: Some(json->getDictFromDict("next_action_data")->JSON.Encode.object),
     }
   })
   ->Option.getOr(defaultNextAction)
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index 4bf8b4ac5..afbf6d5fa 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -951,7 +951,7 @@ let getConfirmParams = dict => {
 let getSdkHandleConfirmPaymentProps = dict => {
   handleConfirm: dict->getBool("handleConfirm", false),
   buttonText: ?dict->getOptionString("buttonText"),
-  confirmParams: dict->getDictfromDict("confirmParams")->getConfirmParams,
+  confirmParams: dict->getDictFromDict("confirmParams")->getConfirmParams,
 }
 
 let itemToObjMapper = (dict, logger) => {
@@ -1011,7 +1011,7 @@ let itemToObjMapper = (dict, logger) => {
     showCardFormByDefault: getBool(dict, "showCardFormByDefault", true),
     billingAddress: getBillingAddress(dict, "billingAddress", logger),
     sdkHandleConfirmPayment: dict
-    ->getDictfromDict("sdkHandleConfirmPayment")
+    ->getDictFromDict("sdkHandleConfirmPayment")
     ->getSdkHandleConfirmPaymentProps,
     paymentMethodsHeaderText: ?getOptionString(dict, "paymentMethodsHeaderText"),
     savedPaymentMethodsHeaderText: ?getOptionString(dict, "savedPaymentMethodsHeaderText"),
diff --git a/src/Types/PaypalSDKTypes.res b/src/Types/PaypalSDKTypes.res
index ce66bbc22..c525de989 100644
--- a/src/Types/PaypalSDKTypes.res
+++ b/src/Types/PaypalSDKTypes.res
@@ -126,11 +126,11 @@ let getShippingDetails = shippingAddressOverrideObj => {
 }
 
 let paypalShippingDetails = purchaseUnit => {
-  let shippingAddress = purchaseUnit->Utils.getDictfromDict("shipping")
-  let payee = purchaseUnit->Utils.getDictfromDict("payee")
+  let shippingAddress = purchaseUnit->Utils.getDictFromDict("shipping")
+  let payee = purchaseUnit->Utils.getDictFromDict("payee")
 
-  let address = shippingAddress->Utils.getDictfromDict("address")
-  let name = shippingAddress->Utils.getDictfromDict("name")
+  let address = shippingAddress->Utils.getDictFromDict("address")
+  let name = shippingAddress->Utils.getDictFromDict("name")
 
   let recipientName = name->Utils.getOptionString("full_name")
   let line1 = address->Utils.getOptionString("address_line_1")
diff --git a/src/Utilities/ErrorUtils.res b/src/Utilities/ErrorUtils.res
index 86dd2e683..04d64221e 100644
--- a/src/Utilities/ErrorUtils.res
+++ b/src/Utilities/ErrorUtils.res
@@ -173,7 +173,7 @@ let unknownPropValueWarning = (
 let valueOutRangeWarning = (num: int, dictType, range, ~logger: OrcaLogger.loggerMake) => {
   manageErrorWarning(
     VALUE_OUT_OF_RANGE,
-    ~dynamicStr=`${num->Belt.Int.toString} value in ${dictType} Expected value between ${range}`,
+    ~dynamicStr=`${num->Int.toString} value in ${dictType} Expected value between ${range}`,
     ~logger: OrcaLogger.loggerMake,
     (),
   )
diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
index 5eb36fd76..26f8f9c89 100644
--- a/src/Utilities/PaymentHelpers.res
+++ b/src/Utilities/PaymentHelpers.res
@@ -609,7 +609,7 @@ let rec intentCall = (
                     ("paymentIntentId", clientSecret->JSON.Encode.string),
                     ("publishableKey", confirmParam.publishableKey->JSON.Encode.string),
                     ("headers", headerObj->JSON.Encode.object),
-                    ("expiryTime", expiryTime->Belt.Float.toString->JSON.Encode.string),
+                    ("expiryTime", expiryTime->Float.toString->JSON.Encode.string),
                     ("url", url.href->JSON.Encode.string),
                   ]->Dict.fromArray
                 handleLogging(
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index b1f9af103..dd475b9f4 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -55,8 +55,8 @@ let getInt = (dict, key, default: int) => {
   dict
   ->Dict.get(key)
   ->Option.flatMap(JSON.Decode.float)
-  ->Option.getOr(default->Belt.Int.toFloat)
-  ->Belt.Float.toInt
+  ->Option.getOr(default->Int.toFloat)
+  ->Float.toInt
 }
 
 let getFloatFromString = (str, default) => str->Float.fromString->Option.getOr(default)
@@ -148,7 +148,7 @@ let getDictFromJson = (json: JSON.t) => {
   json->JSON.Decode.object->Option.getOr(Dict.make())
 }
 
-let getDictfromDict = (dict, key) => {
+let getDictFromDict = (dict, key) => {
   dict->getJsonObjectFromDict(key)->getDictFromJson
 }
 
@@ -172,7 +172,7 @@ let getNumberWithWarning = (dict, key, ~logger, default) => {
   switch dict->Dict.get(key) {
   | Some(val) =>
     switch val->JSON.Decode.float {
-    | Some(val) => val->Belt.Float.toInt
+    | Some(val) => val->Float.toInt
     | None =>
       manageErrorWarning(TYPE_INT_ERROR, ~dynamicStr=key, ~logger, ())
       default
@@ -361,7 +361,7 @@ let rec transformKeys = (json: JSON.t, to: case) => {
         }
         (key->toCase, val->JSON.Encode.string)
       }
-    | Number(val) => (key->toCase, val->Belt.Float.toString->JSON.Encode.string)
+    | Number(val) => (key->toCase, val->Float.toString->JSON.Encode.string)
     | _ => (key->toCase, value)
     }
     x
@@ -631,14 +631,14 @@ let addSize = (str: string, value: float, unit: sizeunit) => {
       arr
       ->Array.slice(~start=0, ~end={arr->Array.length - unitInString->String.length})
       ->Array.joinWith("")
-      ->Belt.Float.fromString
+      ->Float.fromString
       ->Option.getOr(0.0)
-    (val +. value)->Belt.Float.toString ++ unitInString
+    (val +. value)->Float.toString ++ unitInString
   } else {
     str
   }
 }
-let toInt = val => val->Belt.Int.fromString->Option.getOr(0)
+let toInt = val => val->Int.fromString->Option.getOr(0)
 
 let validateRountingNumber = str => {
   if str->String.length != 9 {
diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
index 4142b429b..2865b6c4e 100644
--- a/src/orca-loader/Elements.res
+++ b/src/orca-loader/Elements.res
@@ -481,19 +481,19 @@ let make = (
           let dict = json->getDictFromJson
           switch dict->Dict.get("applePayButtonClicked") {
           | Some(val) =>
-            if val->JSON.Decode.bool->Belt.Option.getWithDefault(false) {
+            if val->JSON.Decode.bool->Option.getOr(false) {
               let applePaySessionTokenData =
                 dict
                 ->Dict.get("applePayPresent")
                 ->Belt.Option.flatMap(JSON.Decode.object)
-                ->Belt.Option.getWithDefault(Dict.make())
+                ->Option.getOr(Dict.make())
 
               let isDelayedSessionToken =
                 applePaySessionTokenData
                 ->Dict.get("delayed_session_token")
-                ->Belt.Option.getWithDefault(JSON.Encode.null)
+                ->Option.getOr(JSON.Encode.null)
                 ->JSON.Decode.bool
-                ->Belt.Option.getWithDefault(false)
+                ->Option.getOr(false)
 
               if isDelayedSessionToken {
                 logger.setLogInfo(
@@ -506,9 +506,9 @@ let make = (
                 let connector =
                   applePaySessionTokenData
                   ->Dict.get("connector")
-                  ->Belt.Option.getWithDefault(JSON.Encode.null)
+                  ->Option.getOr(JSON.Encode.null)
                   ->JSON.Decode.string
-                  ->Belt.Option.getWithDefault("")
+                  ->Option.getOr("")
 
                 switch connector {
                 | "trustpay" =>
@@ -521,27 +521,27 @@ let make = (
                   let secrets =
                     applePaySessionTokenData
                     ->Dict.get("session_token_data")
-                    ->Belt.Option.getWithDefault(JSON.Encode.null)
+                    ->Option.getOr(JSON.Encode.null)
                     ->JSON.Decode.object
-                    ->Belt.Option.getWithDefault(Dict.make())
+                    ->Option.getOr(Dict.make())
                     ->Dict.get("secrets")
-                    ->Belt.Option.getWithDefault(JSON.Encode.null)
+                    ->Option.getOr(JSON.Encode.null)
 
                   let paymentRequest =
                     applePaySessionTokenData
                     ->Dict.get("payment_request_data")
                     ->Belt.Option.flatMap(JSON.Decode.object)
-                    ->Belt.Option.getWithDefault(Dict.make())
+                    ->Option.getOr(Dict.make())
                     ->ApplePayTypes.jsonToPaymentRequestDataType
 
                   let payment =
                     secrets
                     ->JSON.Decode.object
-                    ->Belt.Option.getWithDefault(Dict.make())
+                    ->Option.getOr(Dict.make())
                     ->Dict.get("payment")
-                    ->Belt.Option.getWithDefault(JSON.Encode.null)
+                    ->Option.getOr(JSON.Encode.null)
                     ->JSON.Decode.string
-                    ->Belt.Option.getWithDefault("")
+                    ->Option.getOr("")
 
                   try {
                     let trustpay = trustPayApi(secrets)
@@ -722,7 +722,7 @@ let make = (
                 let sessionsArr =
                   json
                   ->JSON.Decode.object
-                  ->Belt.Option.getWithDefault(Dict.make())
+                  ->Option.getOr(Dict.make())
                   ->SessionsType.getSessionsTokenJson("session_token")
 
                 let applePayPresent = sessionsArr->Array.find(item => {
@@ -733,10 +733,10 @@ let make = (
                       x->Dict.get("wallet_name")
                     })
                     ->Belt.Option.flatMap(JSON.Decode.string)
-                    ->Belt.Option.getWithDefault("")
+                    ->Option.getOr("")
                   x === "apple_pay" || x === "applepay"
                 })
-                if !(applePayPresent->Belt.Option.isSome) {
+                if !(applePayPresent->Option.isSome) {
                   let msg =
                     [("applePaySessionObjNotPresent", true->JSON.Encode.bool)]->Dict.fromArray
                   mountedIframeRef->Window.iframePostMessage(msg)
@@ -749,7 +749,7 @@ let make = (
                       x->Dict.get("wallet_name")
                     })
                     ->Belt.Option.flatMap(JSON.Decode.string)
-                    ->Belt.Option.getWithDefault("")
+                    ->Option.getOr("")
                   x === "google_pay" || x === "googlepay"
                 })
 
@@ -759,7 +759,7 @@ let make = (
                 let (json, applePayPresent, googlePayPresent) = res
                 if (
                   componentType->getIsComponentTypeForPaymentElementCreate &&
-                    applePayPresent->Belt.Option.isSome
+                    applePayPresent->Option.isSome
                 ) {
                   //do operations here
                   let processPayment = (
@@ -784,15 +784,15 @@ let make = (
                       dict->Dict.get("applePayPaymentRequest"),
                     ) {
                     | (Some(val), Some(paymentRequest)) =>
-                      if val->JSON.Decode.bool->Belt.Option.getWithDefault(false) {
+                      if val->JSON.Decode.bool->Option.getOr(false) {
                         let isDelayedSessionToken =
                           applePayPresent
                           ->Belt.Option.flatMap(JSON.Decode.object)
-                          ->Belt.Option.getWithDefault(Dict.make())
+                          ->Option.getOr(Dict.make())
                           ->Dict.get("delayed_session_token")
-                          ->Belt.Option.getWithDefault(JSON.Encode.null)
+                          ->Option.getOr(JSON.Encode.null)
                           ->JSON.Decode.bool
-                          ->Belt.Option.getWithDefault(false)
+                          ->Option.getOr(false)
                         if !isDelayedSessionToken {
                           logger.setLogInfo(
                             ~value="Normal Session Token Flow",
@@ -818,9 +818,9 @@ let make = (
                             let merchantSession =
                               applePayPresent
                               ->Belt.Option.flatMap(JSON.Decode.object)
-                              ->Belt.Option.getWithDefault(Dict.make())
+                              ->Option.getOr(Dict.make())
                               ->Dict.get("session_token_data")
-                              ->Belt.Option.getWithDefault(Dict.make()->JSON.Encode.object)
+                              ->Option.getOr(Dict.make()->JSON.Encode.object)
                               ->transformKeys(CamelCase)
                             ssn.completeMerchantValidation(merchantSession)
                           }
@@ -865,7 +865,7 @@ let make = (
                 }
                 if (
                   componentType->getIsComponentTypeForPaymentElementCreate &&
-                  googlePayPresent->Belt.Option.isSome &&
+                  googlePayPresent->Option.isSome &&
                   wallets.googlePay === Auto
                 ) {
                   let dict = json->getDictFromJson
diff --git a/src/orca-loader/Hyper.res b/src/orca-loader/Hyper.res
index 22349cf94..45e741b28 100644
--- a/src/orca-loader/Hyper.res
+++ b/src/orca-loader/Hyper.res
@@ -87,7 +87,7 @@ let make = (publishableKey, options: option<JSON.t>, analyticsInfo: option<JSON.
       analyticsInfo->Option.flatMap(JSON.Decode.object)->Option.getOr(Dict.make())
     let sessionID =
       analyticsInfoDict->getString("sessionID", "hyp_" ++ Utils.generateRandomString(8))
-    let sdkTimestamp = analyticsInfoDict->getString("timeStamp", Date.now()->Belt.Float.toString)
+    let sdkTimestamp = analyticsInfoDict->getString("timeStamp", Date.now()->Float.toString)
     let logger = OrcaLogger.make(
       ~sessionId=sessionID,
       ~source=Loader,
@@ -151,7 +151,7 @@ let make = (publishableKey, options: option<JSON.t>, analyticsInfo: option<JSON.
         hyperMethod
       }
     | None =>
-      let loaderTimestamp = Date.now()->Belt.Float.toString
+      let loaderTimestamp = Date.now()->Float.toString
 
       {
         () => {
diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
index 44e2818a9..12661cf98 100644
--- a/src/orca-log-catcher/ErrorBoundary.res
+++ b/src/orca-log-catcher/ErrorBoundary.res
@@ -137,7 +137,7 @@ module ErrorCard = {
       if enableLogging && ["DEBUG", "INFO", "WARN", "ERROR"]->Array.includes(loggingLevel) {
         let errorLog: OrcaLogger.logFile = {
           logType: ERROR,
-          timestamp: Date.now()->Belt.Float.toString,
+          timestamp: Date.now()->Float.toString,
           sessionId: "",
           source: "orca-elements",
           version: GlobalVars.repoVersion,
diff --git a/src/orca-log-catcher/OrcaLogger.res b/src/orca-log-catcher/OrcaLogger.res
index 1c2852210..aa94918f7 100644
--- a/src/orca-log-catcher/OrcaLogger.res
+++ b/src/orca-log-catcher/OrcaLogger.res
@@ -613,7 +613,7 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
       }
     | _ => 0.
     }
-    latency > 0. ? latency->Belt.Float.toString : ""
+    latency > 0. ? latency->Float.toString : ""
   }
 
   let setLogInfo = (
@@ -633,8 +633,8 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
     | Some(lat) => lat->Float.toString
     | None => calculateLatencyHook(~eventName, ())
     }
-    let localTimestamp = timestamp->Option.getOr(Date.now()->Belt.Float.toString)
-    let localTimestampFloat = localTimestamp->Belt.Float.fromString->Option.getOr(Date.now())
+    let localTimestamp = timestamp->Option.getOr(Date.now()->Float.toString)
+    let localTimestampFloat = localTimestamp->Float.fromString->Option.getOr(Date.now())
     {
       logType,
       timestamp: localTimestamp,
@@ -684,8 +684,8 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
     let eventNameStr = eventName->eventNameToStrMapper
     let firstEvent = events.contents->Dict.get(eventNameStr)->Option.isNone
     let latency = calculateLatencyHook(~eventName, ~apiLogType, ())
-    let localTimestamp = timestamp->Option.getOr(Date.now()->Belt.Float.toString)
-    let localTimestampFloat = localTimestamp->Belt.Float.fromString->Option.getOr(Date.now())
+    let localTimestamp = timestamp->Option.getOr(Date.now()->Float.toString)
+    let localTimestampFloat = localTimestamp->Float.fromString->Option.getOr(Date.now())
     {
       logType,
       timestamp: localTimestamp,
@@ -737,8 +737,8 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
     | Some(lat) => lat->Float.toString
     | None => calculateLatencyHook(~eventName, ())
     }
-    let localTimestamp = timestamp->Option.getOr(Date.now()->Belt.Float.toString)
-    let localTimestampFloat = localTimestamp->Belt.Float.fromString->Option.getOr(Date.now())
+    let localTimestamp = timestamp->Option.getOr(Date.now()->Float.toString)
+    let localTimestampFloat = localTimestamp->Float.fromString->Option.getOr(Date.now())
     {
       logType,
       timestamp: localTimestamp,
@@ -775,7 +775,7 @@ let make = (~sessionId=?, ~source: source, ~clientSecret=?, ~merchantId=?, ~meta
     {
       logType: INFO,
       eventName,
-      timestamp: Date.now()->Belt.Float.toString,
+      timestamp: Date.now()->Float.toString,
       sessionId: sessionId.contents,
       source: sourceString,
       version: GlobalVars.repoVersion,

From 7429831f65efddc928ec3368b4affdf707251b56 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 11 Jun 2024 07:24:13 +0000
Subject: [PATCH 4/4] chore(release): 0.62.0 [skip ci]

# [0.62.0](https://github.com/juspay/hyperswitch-web/compare/v0.61.2...v0.62.0) (2024-06-11)

### Bug Fixes

* two shimmers issue fixed ([#424](https://github.com/juspay/hyperswitch-web/issues/424)) ([78ba856](https://github.com/juspay/hyperswitch-web/commit/78ba8561e85e7dbf9f7257337b155265295d7392))

### Features

* crypto currency network added ([#403](https://github.com/juspay/hyperswitch-web/issues/403)) ([24f7297](https://github.com/juspay/hyperswitch-web/commit/24f72972e7faa45edc77f7e75248ca9c8f3334d8))
---
 CHANGELOG.md      | 12 ++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c042c90e..f7c28f4ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [0.62.0](https://github.com/juspay/hyperswitch-web/compare/v0.61.2...v0.62.0) (2024-06-11)
+
+
+### Bug Fixes
+
+* two shimmers issue fixed ([#424](https://github.com/juspay/hyperswitch-web/issues/424)) ([78ba856](https://github.com/juspay/hyperswitch-web/commit/78ba8561e85e7dbf9f7257337b155265295d7392))
+
+
+### Features
+
+* crypto currency network added ([#403](https://github.com/juspay/hyperswitch-web/issues/403)) ([24f7297](https://github.com/juspay/hyperswitch-web/commit/24f72972e7faa45edc77f7e75248ca9c8f3334d8))
+
 ## [0.61.2](https://github.com/juspay/hyperswitch-web/compare/v0.61.1...v0.61.2) (2024-06-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index e32e6f424..2c08b49a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "orca-payment-page",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orca-payment-page",
-      "version": "0.61.2",
+      "version": "0.62.0",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudfront": "^3.414.0",
diff --git a/package.json b/package.json
index 6950ca73a..a63479079 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.61.2",
+  "version": "0.62.0",
   "main": "index.js",
   "private": true,
   "dependencies": {