Some UI improvements on IbcHistoryView

chainapsis · Jul 27, 2023 · 43577b5 · 43577b5
1 parent 448404d
commit 43577b5
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 44 deletions.
diff --git a/packages/extension/src/components/icon/check-circle.tsx b/packages/extension/src/components/icon/check-circle.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import { IconProps } from "./types";
+
+export const CheckCircleIcon: FunctionComponent<IconProps> = ({
+  width = "1.5rem",
+  height = "1.5rem",
+  color,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill={color || "currentColor"}
+        d="M8.833 13.833l5.875-5.875-1.166-1.166L8.833 11.5 6.458 9.125l-1.166 1.167 3.541 3.541zm1.167 4.5a8.11 8.11 0 01-3.25-.656 8.43 8.43 0 01-2.646-1.781 8.41 8.41 0 01-1.78-2.646A8.13 8.13 0 011.666 10a8.11 8.11 0 01.656-3.25 8.428 8.428 0 011.781-2.646 8.41 8.41 0 012.646-1.78A8.13 8.13 0 0110 1.666a8.11 8.11 0 013.25.656 8.429 8.429 0 012.646 1.781 8.421 8.421 0 011.781 2.646 8.1 8.1 0 01.656 3.25 8.11 8.11 0 01-.656 3.25 8.43 8.43 0 01-1.781 2.646 8.422 8.422 0 01-2.646 1.781 8.102 8.102 0 01-3.25.656z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/extension/src/components/icon/index.tsx b/packages/extension/src/components/icon/index.tsx
@@ -36,3 +36,4 @@ export * from "./tree";
 export * from "./warning";
 export * from "./document-text";
 export * from "./x-mark";
+export * from "./check-circle";
diff --git a/packages/extension/src/pages/main/components/ibc-history-view/index.tsx b/packages/extension/src/pages/main/components/ibc-history-view/index.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import {
   GetIBCTransferHistories,
@@ -20,11 +20,19 @@ import {
   Subtitle3,
   Subtitle4,
 } from "../../../../components/typography";
-import { XMarkIcon } from "../../../../components/icon";
+import {
+  CheckCircleIcon,
+  LoadingIcon,
+  XMarkIcon,
+} from "../../../../components/icon";
 import { useStore } from "../../../../stores";
 import { CoinPretty } from "@keplr-wallet/unit";
 import { IChainInfoImpl } from "@keplr-wallet/stores";
 import { ChainImageFallback } from "../../../../components/image";
+import { IconProps } from "../../../../components/icon/types";
+import { useSpringValue, animated, easings } from "@react-spring/web";
+import { defaultSpringConfig } from "../../../../styles/spring";
+import { VerticalCollapseTransition } from "../../../../components/transition/vertical-collapse";
 
 export const IbcHistoryView: FunctionComponent<{
   isNotReady: boolean;
@@ -34,13 +42,18 @@ export const IbcHistoryView: FunctionComponent<{
     const fn = () => {
       const requester = new InExtensionMessageRequester();
       const msg = new GetIBCTransferHistories();
-      requester.sendMessage(BACKGROUND_PORT, msg).then((histories) => {
-        setHistories(histories);
+      requester.sendMessage(BACKGROUND_PORT, msg).then((newHistories) => {
+        setHistories((histories) => {
+          if (JSON.stringify(histories) !== JSON.stringify(newHistories)) {
+            return newHistories;
+          }
+          return histories;
+        });
       });
     };
 
     fn();
-    const interval = setInterval(fn, 3000);
+    const interval = setInterval(fn, 1000);
 
     return () => {
       clearInterval(interval);
@@ -101,17 +114,32 @@ const IbcHistoryViewItem: FunctionComponent<{
     >
       <YAxis>
         <XAxis alignY="center">
-          {
-            // TODO: Add icon here.
-          }
+          {!historyCompleted ? (
+            <LoadingIcon
+              width="1.25rem"
+              height="1.25rem"
+              color={ColorPalette.white}
+            />
+          ) : (
+            <CheckCircleIcon
+              width="1.25rem"
+              height="1.25rem"
+              color={ColorPalette["green-400"]}
+            />
+          )}
+
+          <Gutter size="0.5rem" />
+
           <Subtitle4
             color={
               theme.mode === "light"
                 ? ColorPalette["gray-700"]
                 : ColorPalette["gray-10"]
             }
           >
-            IBC Transfer in Progress
+            {!historyCompleted
+              ? "IBC Transfer in Progress"
+              : "IBC Transfer Successful"}
           </Subtitle4>
           <div
             style={{
@@ -206,6 +234,24 @@ const IbcHistoryViewItem: FunctionComponent<{
                     key={i}
                     chainInfo={chainInfo}
                     completed={completed}
+                    notCompletedBlink={(() => {
+                      if (completed) {
+                        return false;
+                      }
+
+                      if (i === 0 && !completed) {
+                        return true;
+                      }
+
+                      if (!history.txFulfilled) {
+                        return false;
+                      }
+
+                      const firstNotCompletedIndex =
+                        history.ibcHistory.findIndex((item) => !item.completed);
+
+                      return i - 1 === firstNotCompletedIndex;
+                    })()}
                     isLast={chainIds.length - 1 === i}
                   />
                 );
@@ -214,61 +260,126 @@ const IbcHistoryViewItem: FunctionComponent<{
           </XAxis>
         </Box>
 
-        {!historyCompleted ? (
-          <React.Fragment>
-            <Gutter size="1rem" />
-            <Box
-              height="1px"
-              backgroundColor={
-                theme.mode === "light"
-                  ? ColorPalette["gray-50"]
-                  : ColorPalette["gray-500"]
-              }
+        <VerticalCollapseTransition collapsed={historyCompleted}>
+          <Gutter size="1rem" />
+          <Box
+            height="1px"
+            backgroundColor={
+              theme.mode === "light"
+                ? ColorPalette["gray-50"]
+                : ColorPalette["gray-500"]
+            }
+          />
+          <Gutter size="1rem" />
+
+          <XAxis alignY="center">
+            <Subtitle3>Estimated Duration</Subtitle3>
+            <div
+              style={{
+                flex: 1,
+              }}
             />
-            <Gutter size="1rem" />
-
-            <XAxis alignY="center">
-              <Subtitle3>Estimated Duration</Subtitle3>
-              <div
-                style={{
-                  flex: 1,
-                }}
-              />
-              <Body2>
-                ~{history.ibcHistory.filter((h) => !h.completed).length} min
-              </Body2>
-            </XAxis>
-
-            <Gutter size="1rem" />
-
-            <Caption2>
-              You may close the extension while the transfer is in progress.
-            </Caption2>
-          </React.Fragment>
-        ) : null}
+            <Body2>
+              ~
+              {Math.max(
+                history.ibcHistory.filter((h) => !h.completed).length,
+                1
+              )}{" "}
+              min
+            </Body2>
+          </XAxis>
+
+          <Gutter size="1rem" />
+
+          <Caption2>
+            You may close the extension while the transfer is in progress.
+          </Caption2>
+        </VerticalCollapseTransition>
       </YAxis>
     </Box>
   );
 });
 
+const ChainImageFallbackAnimated = animated(ChainImageFallback);
+
 const IbcHistoryViewItemChainImage: FunctionComponent<{
   chainInfo: IChainInfoImpl;
 
   completed: boolean;
+  notCompletedBlink: boolean;
   isLast: boolean;
-}> = ({ chainInfo, completed, isLast }) => {
+}> = ({ chainInfo, completed, notCompletedBlink, isLast }) => {
+  const opacity = useSpringValue(completed ? 1 : 0.33333, {
+    config: defaultSpringConfig,
+  });
+
+  useEffect(() => {
+    if (completed) {
+      opacity.start(1);
+    } else if (notCompletedBlink) {
+      opacity.start({
+        loop: {
+          reverse: true,
+        },
+        from: 0.33333,
+        to: 0.66666,
+        config: {
+          easing: easings.easeOutSine,
+          duration: 600,
+        },
+      });
+    } else {
+      opacity.start(0.33333);
+    }
+  }, [completed, notCompletedBlink, opacity]);
+
   return (
     <XAxis alignY="center">
-      <ChainImageFallback
+      <ChainImageFallbackAnimated
         style={{
           width: "2rem",
           height: "2rem",
-          opacity: completed ? 1 : 0.33333,
+          opacity,
         }}
         src={chainInfo.chainSymbolImageUrl}
         alt="chain image"
       />
-      {!isLast ? <Gutter size="0.25rem" /> : null}
+      {!isLast ? (
+        <React.Fragment>
+          <Gutter size="0.25rem" />
+          <ArrowRightIcon
+            width="0.75rem"
+            height="0.75rem"
+            color={ColorPalette.white}
+          />
+          <Gutter size="0.25rem" />
+        </React.Fragment>
+      ) : null}
     </XAxis>
   );
 };
+
+export const ArrowRightIcon: FunctionComponent<IconProps> = ({
+  width = "1.5rem",
+  height = "1.5rem",
+  color,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 12 12"
+    >
+      <path
+        fill="none"
+        stroke={color || "currentColor"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.198"
+        d="M6.75 2.25L10.5 6m0 0L6.75 9.75M10.5 6h-9"
+      />
+    </svg>
+  );
+};