feat: add swap step timer

packages/widget/package.json

@@ -24,6 +24,7 @@
     "react-query": "^4.0.0-beta.7",
     "react-resize-detector": "^7.0.0",
     "react-router-dom": "^6.3.0",
+    "react-timer-hook": "^3.0.5",
     "react-virtual": "^2.10.4"
   },
   "eslintConfig": {

packages/widget/src/pages/SwappingPage/StepTimer.tsx

@@ -0,0 +1,22 @@
+import { useTimer } from 'react-timer-hook';
+
+export const StepTimer: React.FC<{ expiryTimestamp: Date }> = ({
+  expiryTimestamp,
+}) => {
+  const {
+    seconds,
+    minutes,
+    hours,
+    days,
+    isRunning,
+    start,
+    pause,
+    resume,
+    restart,
+  } = useTimer({
+    expiryTimestamp,
+    onExpire: () => console.warn('onExpire called'),
+  });
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{`${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`}</>;
+};

yarn.lock

@@ -11052,6 +11052,11 @@ react-router@6.3.0:
   dependencies:
     history "^5.2.0"
 
+react-timer-hook@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-timer-hook/-/react-timer-hook-3.0.5.tgz#a8d930f99b180cd88da245965a26a17df3e7457b"
+  integrity sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"