diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res
index 5e649003a..58fd16ccb 100644
--- a/src/components/ButtonGroupIp.res
+++ b/src/components/ButtonGroupIp.res
@@ -1,4 +1,3 @@
-external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 open SelectBox
 @react.component
 let make = (
@@ -9,7 +8,7 @@ let make = (
   ~isSeparate=false,
   ~buttonSize=?,
 ) => {
-  let onChange = str => input.onChange(str->strToFormEvent)
+  let onChange = str => input.onChange(str->Identity.stringToFormReactEvent)
   let buttonState = {isDisabled ? Button.Disabled : Button.Normal}
 
   let buttons =
diff --git a/src/components/CsvFileUpload.res b/src/components/CsvFileUpload.res
index 30629d66a..03548e79e 100644
--- a/src/components/CsvFileUpload.res
+++ b/src/components/CsvFileUpload.res
@@ -1,12 +1,6 @@
 type t
-
 type formData
-external formDataToStr: t => string = "%identity"
-
-external toString: 't => string = "%identity"
-external toRef: 'a => 't = "%identity"
 @new external formData: unit => t = "FormData"
-
 @send external append: (t, string, 'a) => unit = "append"
 @send external delete: (t, string) => unit = "delete"
 @send external get: (t, string) => 'k = "get"
diff --git a/src/components/CustomCharts/HighchartBarChart.res b/src/components/CustomCharts/HighchartBarChart.res
index 81a46ab95..5d5c409c2 100644
--- a/src/components/CustomCharts/HighchartBarChart.res
+++ b/src/components/CustomCharts/HighchartBarChart.res
@@ -1,5 +1,3 @@
-external objToJson: {..} => Js.Json.t = "%identity"
-
 module RawBarChart = {
   @react.component
   let make = (~options: Js.Json.t) => {
@@ -59,7 +57,7 @@ module HighBarChart1D = {
         },
         "series": barSeries,
         "legend": {"enabled": false},
-      }->objToJson
+      }->Identity.genericObjectOrRecordToJson
       barOption
     }, (barSeries, gridLineColor))
     if barSeries->Js.Array2.length > 0 {
diff --git a/src/components/CustomCharts/LineChartUtils.res b/src/components/CustomCharts/LineChartUtils.res
index fa44abd58..11075cee5 100644
--- a/src/components/CustomCharts/LineChartUtils.res
+++ b/src/components/CustomCharts/LineChartUtils.res
@@ -1,8 +1,8 @@
 external legendItemAsBool: Highcharts.legendItem => Highcharts.element = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
 
 open LogicUtils
 open Highcharts
+open Identity
 let defaultColor = "#7cb5ec"
 let legendColor = [
   defaultColor,
@@ -804,7 +804,7 @@ let legendItemStyle = (theme: ThemeProvider.theme, legendFontFamilyClass, legend
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "rgba(53, 64, 82, 0.8)",
@@ -813,7 +813,7 @@ let legendItemStyle = (theme: ThemeProvider.theme, legendFontFamilyClass, legend
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
@@ -831,7 +831,7 @@ let legendHiddenStyle = (
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "rgba(53, 64, 82, 0.2)",
@@ -840,7 +840,7 @@ let legendHiddenStyle = (
       "fontWeight": "500",
       "fontFamily": legendFontFamilyClass,
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
@@ -853,7 +853,7 @@ let chartTitleStyle = (theme: ThemeProvider.theme) => {
       "fontWeight": "500",
       "fontFamily": "IBM Plex Sans",
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   | Light =>
     {
       "color": "#354052",
@@ -861,7 +861,7 @@ let chartTitleStyle = (theme: ThemeProvider.theme) => {
       "fontWeight": "500",
       "fontFamily": "IBM Plex Sans",
       "fontStyle": "normal",
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
 }
 
diff --git a/src/components/DatePicker.res b/src/components/DatePicker.res
index 83f694b19..f77716bb1 100644
--- a/src/components/DatePicker.res
+++ b/src/components/DatePicker.res
@@ -1,5 +1,3 @@
-external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
-
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
diff --git a/src/components/DistributionDonut/DistributionDonut.res b/src/components/DistributionDonut/DistributionDonut.res
index 6a056d565..4611f2a6e 100644
--- a/src/components/DistributionDonut/DistributionDonut.res
+++ b/src/components/DistributionDonut/DistributionDonut.res
@@ -1,5 +1,3 @@
-external objToJson: {..} => Js.Json.t = "%identity"
-
 type dataPoint = {y: int, name: string}
 
 module LegendField = {
@@ -50,6 +48,7 @@ let make = (
   ~data: array<Js.Json.t>,
   ~getGroupBasedData: (array<Js.Json.t>, string) => array<dataPoint>,
 ) => {
+  open Identity
   let (groupBy, setGroupBy) = React.useState(_ => "")
   let (groupBasedData, setGroupBasedData) = React.useState((_): array<dataPoint> => [])
   let getDonutOptions = (_): Js.Json.t => {
@@ -58,37 +57,37 @@ let make = (
         "text": Js.Json.null,
         "align": "center",
         "margin": 0,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "colors": colors,
       "credits": {
         "enabled": false,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "subtitle": {
         "useHTML": true,
         "text": getSubtilteHtml(groupBasedData),
         "floating": true,
         "verticalAlign": "middle",
         "y": 10,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "legend": {
         "enabled": false,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "chart": {
         "backgroundColor": Js.Json.null,
         "className": "h-60",
         "height": 260,
         "width": 260,
         "borderColor": Js.Json.null,
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "tooltip": {
         "valueDecimals": 0,
         "valueSuffix": "",
-      }->objToJson,
+      }->genericObjectOrRecordToJson,
       "plotOptions": {
         "series": {
           "animation": {
             "duration": 0,
-          }->objToJson,
+          }->genericObjectOrRecordToJson,
           "borderWidth": 5,
           "colorByPoint": true,
           "type": "pie",
@@ -101,23 +100,23 @@ let make = (
             "style": {
               "fontWeight": "bold",
               "fontSize": "16px",
-            }->objToJson,
+            }->genericObjectOrRecordToJson,
             "connectorWidth": 0,
-          }->objToJson,
-        }->objToJson,
-      }->objToJson,
+          }->genericObjectOrRecordToJson,
+        }->genericObjectOrRecordToJson,
+      }->genericObjectOrRecordToJson,
       "series": [
         {
           "color": "black",
           "type": "pie",
           "name": tooltipTitle,
           "data": Js.Array.map(
-            (d: dataPoint): Js.Json.t => {"y": d.y, "name": d.name}->objToJson,
+            (d: dataPoint): Js.Json.t => {"y": d.y, "name": d.name}->genericObjectOrRecordToJson,
             groupBasedData,
           ),
-        }->objToJson,
+        }->genericObjectOrRecordToJson,
       ],
-    }->objToJson
+    }->genericObjectOrRecordToJson
   }
   React.useEffect1(() => {
     setGroupBy(_ =>
diff --git a/src/components/ExportTable.res b/src/components/ExportTable.res
index 67a0f834f..452db359a 100644
--- a/src/components/ExportTable.res
+++ b/src/components/ExportTable.res
@@ -1,4 +1,3 @@
-external convertToStrDict: 't => Js.Json.t = "%identity"
 @react.component
 let make = (
   ~title: string,
@@ -11,7 +10,7 @@ let make = (
   let actualDataOrig =
     tableData
     ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-    ->Js.Array2.map(convertToStrDict)
+    ->Js.Array2.map(Identity.genericTypeToJson)
 
   let headerNames = visibleColumns->Belt.Array.keepMap(head => {
     let item = head->getHeading
diff --git a/src/components/HSwitchSingleStatWidget.res b/src/components/HSwitchSingleStatWidget.res
index f6a4ffa04..1a3666ad9 100644
--- a/src/components/HSwitchSingleStatWidget.res
+++ b/src/components/HSwitchSingleStatWidget.res
@@ -17,6 +17,7 @@ let make = (
   ~statThreshold: Js.Dict.t<float>=Js.Dict.empty(),
   ~isHomePage=false,
 ) => {
+  open Identity
   let (updateKey, setUpdateKey) = React.useState(_ => false)
 
   let sortedData = React.useMemo1(() => {
@@ -85,21 +86,21 @@ let make = (
           "height": (isHomePage ? "80" : "50")->Some,
           "width": isHomePage ? None : Some("105"),
           "events": None,
-        }->LineChartUtils.objToJson,
+        }->genericObjectOrRecordToJson,
       ),
       title: {
         "text": "",
         "style": Js.Json.object_(Js.Dict.empty()),
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       credits: {
         "enabled": false,
       },
       legend: {
         "enabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       tooltip: {
         "enabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       plotOptions: Some(
         {
           "area": {
@@ -114,7 +115,7 @@ let make = (
               },
             },
             "lineWidth": 3,
-          }->LineChartUtils.objToJson,
+          }->genericObjectOrRecordToJson,
           "boxplot": {
             "visible": false,
           },
@@ -129,21 +130,24 @@ let make = (
               "legendItemClick": None,
               "mouseOver": Some(""),
             }),
-          }->LineChartUtils.objToJson,
-        }->LineChartUtils.objToJson,
+          }->genericObjectOrRecordToJson,
+        }->genericObjectOrRecordToJson,
       ),
       xAxis: {
         "type": "datetime",
         "zoomEnabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       yAxis: {
         "tickPositioner": None,
         "plotLines": None,
         "visible": false,
-        "title": {"text": "", "style": Js.Json.object_(Js.Dict.empty())}->LineChartUtils.objToJson,
+        "title": {
+          "text": "",
+          "style": Js.Json.object_(Js.Dict.empty()),
+        }->genericObjectOrRecordToJson,
         "labels": {"formatter": None, "enabled": false, "useHTML": false}->Some,
         "zoomEnabled": false,
-      }->LineChartUtils.objToJson,
+      }->genericObjectOrRecordToJson,
       series: [
         {
           color: Some(strokeColor),
diff --git a/src/components/HighchartFunnelChart.res b/src/components/HighchartFunnelChart.res
index 8367ffff4..7f006d707 100644
--- a/src/components/HighchartFunnelChart.res
+++ b/src/components/HighchartFunnelChart.res
@@ -1,6 +1,5 @@
 open Highcharts
 open LogicUtils
-external objToJson: {..} => Js.Json.t = "%identity"
 type options = {x: int}
 type tooltipPoints = {
   name: string,
@@ -50,7 +49,7 @@ let make = (
             ->Belt.Array.get(0)
             ->Belt.Option.getWithDefault("")}${opacity}`,
           "color": `${chartColors->Belt.Array.get(0)->Belt.Option.getWithDefault("")}`,
-        }->LineChartUtils.objToJson
+        }->Identity.genericObjectOrRecordToJson
       }),
       "area",
     )
@@ -70,7 +69,7 @@ let make = (
         {
           "name": key,
           "y": item->Js.Nullable.return,
-        }->LineChartUtils.objToJson
+        }->Identity.genericObjectOrRecordToJson
       })
       let values = {
         "name": key,
@@ -78,7 +77,7 @@ let make = (
         "color": chartColors->Belt.Array.get(chartItemIndex),
         "pointPlacement": "on",
         "legendIndex": chartItemIndex,
-      }->LineChartUtils.objToJson
+      }->Identity.genericObjectOrRecordToJson
       if zonesFor1D->Js.Array2.length !== 0 {
         Js.Array2.concat(
           values->getDictFromJsonObject->Js.Dict.entries,
@@ -102,12 +101,12 @@ let make = (
           "backgroundColor": Js.Nullable.null,
           "events": None,
           "marginBottom": 50,
-        }->objToJson,
+        }->Identity.genericObjectOrRecordToJson,
       ),
       title: {
         "text": "",
         "style": Js.Json.object_(Js.Dict.empty()),
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       credits: {
         "enabled": false,
       },
@@ -129,13 +128,13 @@ let make = (
         "style": {
           "color": theme === Light ? "rgba(246, 248, 249, 1)" : "rgba(25, 26, 26, 1)",
         },
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       plotOptions: Some(
         {
           "area": {
             "inverted": true,
             "lineWidth": 2,
-          }->objToJson,
+          }->Identity.genericObjectOrRecordToJson,
           "boxplot": {
             "visible": false,
           },
@@ -153,12 +152,12 @@ let make = (
               "legendItemClick": None,
               "mouseOver": Some(""),
             }),
-          }->objToJson,
-        }->objToJson,
+          }->Identity.genericObjectOrRecordToJson,
+        }->Identity.genericObjectOrRecordToJson,
       ),
       legend: {
         "enabled": false,
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       xAxis: {
         "visible": true,
         "lineWidth": 0,
@@ -175,7 +174,7 @@ let make = (
           },
         },
         "categories": categories,
-      }->objToJson,
+      }->Identity.genericObjectOrRecordToJson,
       yAxis: {
         "title": "",
         "max": maxValueForTheDataSet,
@@ -195,8 +194,8 @@ let make = (
             "letterSpacing": "1px",
             "color": theme === Light ? "#4B5468" : "rgba(246, 248, 249, 0.25)",
           },
-        }->objToJson,
-      }->objToJson,
+        }->Identity.genericObjectOrRecordToJson,
+      }->Identity.genericObjectOrRecordToJson,
       series: chartData,
     }
   }, (dataSet, categories, formatter))
diff --git a/src/components/InputFields.res b/src/components/InputFields.res
index c6743ee56..d784b24dd 100644
--- a/src/components/InputFields.res
+++ b/src/components/InputFields.res
@@ -12,7 +12,6 @@ type comboCustomInputRecord = {
 }
 
 module DOBPicker = {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make = (
     ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -154,7 +153,6 @@ module DOBPicker = {
   }
 }
 module NumericArrayInput = {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make = (~input: ReactFinalForm.fieldRenderPropsInput, ~placeholder) => {
     let (localValue, setLocalValue) = React.useState(() => input.value)
@@ -173,7 +171,7 @@ module NumericArrayInput = {
             value->Js.Json.string
           }
           setLocalValue(_ => value)
-          input.onChange(value->jsonToForm)
+          input.onChange(value->Identity.jsonToFormReactEvent)
         },
       }
     }, (input, localValue, setLocalValue))
diff --git a/src/components/InputFields.resi b/src/components/InputFields.resi
index 9b4cc6ce2..548a553cf 100644
--- a/src/components/InputFields.resi
+++ b/src/components/InputFields.resi
@@ -5,7 +5,6 @@ type customInputFn = (
 type comboCustomInputFn = array<ReactFinalForm.fieldRenderProps> => React.element
 type comboCustomInputRecord = {fn: comboCustomInputFn, names: array<string>}
 module DOBPicker: {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make: (
     ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -16,7 +15,6 @@ module DOBPicker: {
   ) => React.element
 }
 module NumericArrayInput: {
-  external jsonToForm: Js.Json.t => ReactEvent.Form.t = "%identity"
   @react.component
   let make: (~input: ReactFinalForm.fieldRenderPropsInput, ~placeholder: string) => React.element
 }
diff --git a/src/components/RedirectSearchInput.res b/src/components/RedirectSearchInput.res
index b97607155..2cb6408c6 100644
--- a/src/components/RedirectSearchInput.res
+++ b/src/components/RedirectSearchInput.res
@@ -1,5 +1,3 @@
-external toReactForm: Js.Json.t => ReactEvent.Form.t = "%identity"
-
 module SearchInput = {
   @react.component
   let make = (
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 2454906fc..6e36e5bcd 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -434,7 +434,6 @@ let makeOptions = (options: array<string>): array<dropdownOption> => {
 }
 
 module BaseSelect = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make = (
     ~showSelectAll=true,
@@ -554,7 +553,8 @@ module BaseSelect = {
         }
         onSelect(data)
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -577,7 +577,8 @@ module BaseSelect = {
 
       onSelect(newValues)
       switch onBlur {
-      | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+      | Some(fn) =>
+        "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
       | None => ()
       }
     }
@@ -942,8 +943,6 @@ module BaseSelect = {
 }
 
 module BaseSelectButton = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -985,7 +984,8 @@ module BaseSelectButton = {
         setAssignButtonState(_ => true)
 
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -1105,8 +1105,6 @@ module BaseSelectButton = {
   }
 }
 module BaseRadio = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -1184,7 +1182,8 @@ module BaseRadio = {
         }
         setSearchString(_ => "")
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -1362,8 +1361,6 @@ module BaseRadio = {
 }
 
 module CustomUISearchOptionUI = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~showDropDown=false,
@@ -1415,7 +1412,8 @@ module CustomUISearchOptionUI = {
         }
         setSearchString(_ => "")
         switch onBlur {
-        | Some(fn) => "blur"->Webapi.Dom.FocusEvent.make->toReactFocusEv->fn
+        | Some(fn) =>
+          "blur"->Webapi.Dom.FocusEvent.make->Identity.webAPIFocusEventToReactEventFocus->fn
         | None => ()
         }
       }
@@ -2115,8 +2113,6 @@ module BaseDropdown = {
 }
 
 module InfraSelectBox = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~options: array<dropdownOption>,
@@ -2186,8 +2182,6 @@ module InfraSelectBox = {
 }
 
 module ChipFilterSelectBox = {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
-
   @react.component
   let make = (
     ~options: array<dropdownOption>,
diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi
index c35d29b27..d51532307 100644
--- a/src/components/SelectBox.resi
+++ b/src/components/SelectBox.resi
@@ -76,7 +76,6 @@ type opt = {name_: string}
 let makeUpdatedOptions: (array<string>, array<string>) => array<dropdownOption>
 let makeOptions: array<string> => array<dropdownOption>
 module BaseSelect: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showSelectAll: bool=?,
@@ -133,7 +132,6 @@ module BaseSelect: {
   ) => React.element
 }
 module BaseSelectButton: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -158,7 +156,6 @@ module BaseSelectButton: {
   ) => React.element
 }
 module BaseRadio: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -197,7 +194,6 @@ module BaseRadio: {
   ) => React.element
 }
 module CustomUISearchOptionUI: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~showDropDown: bool=?,
@@ -298,7 +294,6 @@ module BaseDropdown: {
   ) => React.element
 }
 module InfraSelectBox: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~options: array<dropdownOption>,
@@ -312,7 +307,6 @@ module InfraSelectBox: {
   ) => React.element
 }
 module ChipFilterSelectBox: {
-  external toReactFocusEv: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t = "%identity"
   @react.component
   let make: (
     ~options: array<dropdownOption>,
diff --git a/src/components/form/MultipleTextInput.res b/src/components/form/MultipleTextInput.res
index 82e0744b5..ae847738a 100644
--- a/src/components/form/MultipleTextInput.res
+++ b/src/components/form/MultipleTextInput.res
@@ -27,7 +27,7 @@ module Tag = {
     }
   }
 }
-external toForm: Js.Array2.t<string> => ReactEvent.Form.t = "%identity"
+
 @react.component
 let make = (
   ~input: ReactFinalForm.fieldRenderPropsInput,
@@ -49,7 +49,7 @@ let make = (
   }, [input.value])
 
   let setTags = tags => {
-    tags->toForm->input.onChange
+    tags->Identity.arrayOfGenericTypeToFormReactEvent->input.onChange
   }
 
   let (text, setText) = React.useState(_ => "")
diff --git a/src/components/form/SelectBoxCard.res b/src/components/form/SelectBoxCard.res
index 6033b9a67..a91ae97d2 100644
--- a/src/components/form/SelectBoxCard.res
+++ b/src/components/form/SelectBoxCard.res
@@ -1,6 +1,5 @@
 module CustomViewSection = {
   external formEventToInt: ReactEvent.Form.t => int = "%identity"
-  external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
   external jsonArrToa: array<Js.Json.t> => array<'a> = "%identity"
 
   @react.component
@@ -60,7 +59,7 @@ module CustomViewSection = {
               ->ignore
             }
           }
-          onChange(finalArr->arrToFormEvent)
+          onChange(finalArr->Identity.arrayOfGenericTypeToFormReactEvent)
         },
       }
       input
diff --git a/src/entities/analytics/EulerAnalyticsLogUtils.res b/src/entities/analytics/EulerAnalyticsLogUtils.res
index 03a1740dc..8fe7d7585 100644
--- a/src/entities/analytics/EulerAnalyticsLogUtils.res
+++ b/src/entities/analytics/EulerAnalyticsLogUtils.res
@@ -2,7 +2,6 @@
 external location: {..} = "location"
 external toJson: exn => Js.Json.t = "%identity"
 external toExn: string => exn = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
 
 let useAddLogsAroundFetch = () => {
   let addLogsAroundFetch = (~setStatusDict=?, ~logTitle, fetchPromise) => {
diff --git a/src/genericUtils/Identity.res b/src/genericUtils/Identity.res
index b23176438..008ac1180 100644
--- a/src/genericUtils/Identity.res
+++ b/src/genericUtils/Identity.res
@@ -10,3 +10,7 @@ external formReactEventToBool: ReactEvent.Form.t => bool = "%identity"
 external genericObjectOrRecordToJson: {..} => Js.Json.t = "%identity"
 external genericTypeToDictOfJson: 't => Js.Dict.t<Js.Json.t> = "%identity"
 external formReactEventToArrayOfString: ReactEvent.Form.t => array<string> = "%identity"
+external jsonToFormReactEvent: Js.Json.t => ReactEvent.Form.t = "%identity"
+external arrayOfGenericTypeToFormReactEvent: array<'a> => ReactEvent.Form.t = "%identity"
+external webAPIFocusEventToReactEventFocus: Webapi.Dom.FocusEvent.t => ReactEvent.Focus.t =
+  "%identity"
diff --git a/src/libraries/Highcharts.res b/src/libraries/Highcharts.res
index 6f0b19fb4..6da586eb3 100644
--- a/src/libraries/Highcharts.res
+++ b/src/libraries/Highcharts.res
@@ -50,8 +50,6 @@ external makeSomethingSeries: (~\"type": string, ~something: (float, int, string
 let x = makeAreaSeries(~\"type"="hello", ~something=false)
 let y = makeSomethingSeries(~\"type"="hello", ~something=(2., 1, "heloo"))
 
-external makeAttribute: {..} => Js.Json.t = "%identity"
-
 type gridLine = {attr: (. Js.Json.t) => unit}
 type pos
 type tick = {
diff --git a/src/libraries/SankeyHighcharts.res b/src/libraries/SankeyHighcharts.res
index a680a6bdc..e32490914 100644
--- a/src/libraries/SankeyHighcharts.res
+++ b/src/libraries/SankeyHighcharts.res
@@ -205,9 +205,9 @@ let init = (data: array<(string, string, int, int, int)>, nodes) => {
             "fontStyle": "normal",
             "fontWeight": 600,
           },
-        }->LineChartUtils.objToJson,
+        }->Identity.genericObjectOrRecordToJson,
         "connectEnds": false,
-      }->LineChartUtils.objToJson,
+      }->Identity.genericObjectOrRecordToJson,
     ],
     "chart": {
       "height": 698,
@@ -225,7 +225,7 @@ let init = (data: array<(string, string, int, int, int)>, nodes) => {
       "valueDecimals": 2,
       "backgroundColor": theme === Dark ? "white" : "black",
     },
-  }->LineChartUtils.objToJson
+  }->Identity.genericObjectOrRecordToJson
   options
 }
 
diff --git a/src/screens/HyperSwitch/Analytics/Analytics.res b/src/screens/HyperSwitch/Analytics/Analytics.res
index 2be798615..e4ee6760e 100644
--- a/src/screens/HyperSwitch/Analytics/Analytics.res
+++ b/src/screens/HyperSwitch/Analytics/Analytics.res
@@ -1,6 +1,3 @@
-external toString: option<Js.Json.t> => string = "%identity"
-external convertToStrDict: 't => Js.Json.t = "%identity"
-external sankeyTest: string => SankeyCharts.sankeyEntity = "%identity"
 @get external keyCode: 'a => int = "keyCode"
 type window
 @val external window: window = "window"
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 86954f45b..076b6c8cd 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -3,7 +3,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open LogicUtils
 
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external toWasm: Js.Dict.t<Js.Json.t> => RoutingTypes.wasmModule = "%identity"
 
 let defaultRule = {
@@ -240,7 +239,7 @@ module RuleBasedUI = {
     let (rules, setRules) = React.useState(_ => ruleInput.value->getArrayFromJson([]))
 
     React.useEffect1(() => {
-      ruleInput.onChange(rules->arrToFormEvent)
+      ruleInput.onChange(rules->Identity.arrayOfGenericTypeToFormReactEvent)
       None
     }, [rules])
 
@@ -250,13 +249,13 @@ module RuleBasedUI = {
         ? existingRules[index]->Belt.Option.getWithDefault(defaultRule->Identity.genericTypeToJson)
         : defaultRule->Identity.genericTypeToJson
       let newRules = existingRules->Js.Array2.concat([newRule])
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     let removeRule = index => {
       let existingRules = ruleInput.value->getArrayFromJson([])
       let newRules = existingRules->Array.filterWithIndex((_, i) => i !== index)
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     <div className="flex flex-col my-5">
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 61ef2af65..10d32844e 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -2,7 +2,6 @@ open AdvancedRoutingTypes
 open AdvancedRoutingUtils
 open FormRenderer
 
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module LogicalOps = {
@@ -398,12 +397,21 @@ module MakeRuleField = {
     let onPlusClick = _ => {
       if plusBtnEnabled {
         let toAdd = Js.Dict.empty()
-        conditionsInput.onChange(Js.Array2.concat(fields, [toAdd->Js.Json.object_])->arrToFormEvent)
+        conditionsInput.onChange(
+          Js.Array2.concat(
+            fields,
+            [toAdd->Js.Json.object_],
+          )->Identity.arrayOfGenericTypeToFormReactEvent,
+        )
       }
     }
 
     let onCrossClick = index => {
-      conditionsInput.onChange(fields->Array.filterWithIndex((_, i) => index !== i)->arrToFormEvent)
+      conditionsInput.onChange(
+        fields
+        ->Array.filterWithIndex((_, i) => index !== i)
+        ->Identity.arrayOfGenericTypeToFormReactEvent,
+      )
     }
 
     <div className="flex flex-wrap items-center">
diff --git a/src/screens/HyperSwitch/SDKPayment/SDKPage.res b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
index a4712dd51..4c37a06ed 100644
--- a/src/screens/HyperSwitch/SDKPayment/SDKPage.res
+++ b/src/screens/HyperSwitch/SDKPayment/SDKPage.res
@@ -1,5 +1,4 @@
 let h3Leading2Style = HSwitchUtils.getTextClass(~textVariant=H3, ~h3TextVariant=Leading_2, ())
-external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 
 module SDKConfiguarationFields = {
   open MerchantAccountUtils
@@ -55,7 +54,8 @@ module SDKConfiguarationFields = {
               ev => {
                 let eventValueToInt =
                   ev->Identity.formReactEventToString->LogicUtils.getIntFromString(0)
-                let valInCents = (eventValueToInt * 100)->string_of_int->strToFormEvent
+                let valInCents =
+                  (eventValueToInt * 100)->string_of_int->Identity.stringToFormReactEvent
                 input.onChange(valInCents)
               }
             },
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index 96183969f..fc7e3f54f 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -1,6 +1,5 @@
 open RoutingTypes
 external toWasm: Js.Dict.t<Js.Json.t> => wasmModule = "%identity"
-external arrToFormEvent: array<'a> => ReactEvent.Form.t = "%identity"
 
 module ActiveRulePreview = {
   open LogicUtils
@@ -42,20 +41,20 @@ module Configure3DSRule = {
     let ruleInput = ReactFinalForm.useField("algorithm.rules").input
     let (rules, setRules) = React.useState(_ => ruleInput.value->LogicUtils.getArrayFromJson([]))
     React.useEffect1(() => {
-      ruleInput.onChange(rules->arrToFormEvent)
+      ruleInput.onChange(rules->Identity.arrayOfGenericTypeToFormReactEvent)
       None
     }, [rules])
     let addRule = (index, _copy) => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
       let newRule = existingRules[index]->Belt.Option.getWithDefault(Js.Json.null)
       let newRules = existingRules->Js.Array2.concat([newRule])
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     let removeRule = index => {
       let existingRules = ruleInput.value->LogicUtils.getArrayFromJson([])
       let newRules = existingRules->Array.filterWithIndex((_, i) => i !== index)
-      ruleInput.onChange(newRules->arrToFormEvent)
+      ruleInput.onChange(newRules->Identity.arrayOfGenericTypeToFormReactEvent)
     }
 
     <div>
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
index e4a35f44d..e0af3a513 100644
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
@@ -1,8 +1,3 @@
-external toString: option<Js.Json.t> => string = "%identity"
-external convertToStrDict: 't => Js.Json.t = "%identity"
-external objToJson: {..} => Js.Json.t = "%identity"
-external toJson: exn => Js.Json.t = "%identity"
-external toRespJson: Fetch.Response.t => Js.Json.t = "%identity"
 @get external keyCode: 'a => int = "keyCode"
 
 type window
@@ -887,7 +882,7 @@ module FiltersComponent = {
               filteredTabKeys->Js.Array2.includes(dimension)
             })
             ->Js.Json.array,
-          }->LineChartUtils.objToJson,
+          }->Identity.genericObjectOrRecordToJson,
         )
       | None => None
       }
@@ -1090,7 +1085,7 @@ module DownloadCsv = {
     let actualDataOrig =
       tableData
       ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-      ->Js.Array2.map(convertToStrDict)
+      ->Js.Array2.map(Identity.genericTypeToJson)
 
     let headerNames = visibleColumns->Belt.Array.keepMap(head => {
       let item = head->getHeading
@@ -1512,7 +1507,7 @@ module ErrorModalContent = {
         "credits": {
           "enabled": false,
         },
-      }->objToJson
+      }->Identity.genericObjectOrRecordToJson
     }, (chartData, categoryData, colName, theme))
     if showModalBarChart == "Table" {
       <div className="-mt-6">