Feature/ux improvement

package.json

@@ -8,6 +8,9 @@
   "dependencies": {
     "@apollo/client": "^3.2.4",
     "@terra-dev/wallet-types": "^3.7.0",
+    "@terra-money/log-finder": "^1.1.6",
+    "@terra-money/log-finder-ruleset": "^3.0.0",
+    "@terra-money/react-base-components": "^2.0.0",
     "@terra-money/terra.js": "^3.0.4",
     "@terra-money/wallet-provider": "^3.7.1",
     "@testing-library/jest-dom": "^5.11.4",

src/components/LatestBlock.tsx

@@ -30,7 +30,7 @@ const Indicator = styled.div<{ status?: "success" | "error" }>`
 `
 
 const Label = styled.div`
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 14px;
   font-weight: normal;
   font-stretch: normal;

src/components/Warning.module.scss

@@ -4,16 +4,17 @@
 .component {
   @include flex;
   flex-direction: column;
-  width: 100%;
+  width: calc(100% - 32px);
   max-width: 490px;
   border-radius: 20px;
   font-family: $font-family-swap;
   background-color: white;
+  margin: 0 auto;
 }
 
 .title {
   margin-top: 30px;
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 20px;
   font-weight: bold;
   font-stretch: normal;
@@ -27,7 +28,7 @@
 .spread {
   margin-top: 30px;
   margin-bottom: 10px;
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 18px;
   font-weight: bold;
   font-stretch: normal;
@@ -40,7 +41,7 @@
 
 .message {
   margin-bottom: 30px;
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 18px;
   font-weight: normal;
   font-stretch: normal;
@@ -57,7 +58,7 @@
   margin-bottom: 30px;
   padding: 14px 65px;
   border-radius: 10px;
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 16px;
   font-weight: bold;
   font-stretch: normal;

src/forms/ConfirmDetails.module.scss

@@ -2,32 +2,29 @@
 @import "src/styles/variables.module";
 
 .item {
-  border-top: 1px solid #b5b5b5;
-  padding-top: 10px;
-  padding-bottom: 13px;
+  display: block;
 }
 
-.item:last-child {
-  border-bottom: 1px solid #b5b5b5;
+.item:first-child {
+  border-top: 1px solid #b5b5b5;
+  margin-top: 36px;
+  padding-top: 4px;
 }
 
 .article {
   @include flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .title,
 .content {
   flex: 1;
   display: flex;
-  margin-top: 6px;
 }
 
 .title {
   color: #5c5c5c;
   font-size: 14px;
-  font-weight: 600;
-  padding-top: 5px;
 }
 
 .content {
@@ -44,7 +41,7 @@
   flex: 3;
   justify-content: flex-end;
   color: #4360e5;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 34px;
   text-align: right;
   white-space: pre-line;
@@ -56,38 +53,19 @@
   justify-content: flex-end;
 }
 
-.title1,
 .content1 {
-}
-
-.title1 {
   color: #5c5c5c;
   font-size: 14px;
-  font-weight: 600;
-}
-
-.content1 {
-  color: #5c5c5c;
-  font-size: 22px;
   font-weight: bold;
   text-align: right;
   white-space: pre-line;
   word-break: break-all;
   align-self: flex-end;
 }
 
-.title2 {
-  margin-top: 6px;
-  color: #5c5c5c;
-  font-size: 14px;
-  font-weight: normal;
-  align-self: flex-end;
-}
-
 .content2 {
   color: #5c5c5c;
   font-size: 14px;
-  line-height: 28px;
   font-weight: 600;
   text-align: right;
   white-space: pre-line;

src/forms/ConfirmDetails.tsx

@@ -50,14 +50,12 @@ const displayStr = (content: any, index: number) => {
 const ConfirmDetails = ({ contents, result }: Props) =>
   !contents ? null : (
     <ul className={styles.list}>
-      {contents.map((contentArray, index) => (
-        <li className={styles.item} key={index}>
-          {contentArray.map(({ title, content }, index) => (
-            <article className={styles.article}>
-              <h2 className={index === 0 ? styles.title : styles.title2}>
-                {title}
-              </h2>
-              {displayStr(content, index)}
+      {contents.map((contentArray, i) => (
+        <li className={styles.item} key={i}>
+          {contentArray.map(({ title, content }, j) => (
+            <article key={`${i}-${j}`} className={styles.article}>
+              <b className={styles.title}>{title}</b>
+              {displayStr(content, j)}
             </article>
           ))}
         </li>

src/forms/Result.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import classNames from "classnames/bind"
 
 import { MAX_TX_POLLING_RETRY, TX_POLLING_INTERVAL } from "constants/constants"
@@ -22,6 +22,16 @@ import {
 import axios from "rest/request"
 import { AxiosError } from "axios"
 
+import { useMemo } from "react"
+import {
+  createActionRuleSet,
+  createLogMatcherForActions,
+  getTxCanonicalMsgs,
+} from "@terra-money/log-finder-ruleset"
+import { SwapTxInfo as ISwapTxInfo } from "types/swapTx"
+import { TxInfo } from "@terra-money/terra.js"
+import { TxDescription } from "@terra-money/react-base-components"
+import { useLCDClient } from "@terra-money/wallet-provider"
 export interface ResultProps {
   response?: TxResult
   error?:
@@ -44,10 +54,22 @@ enum STATUS {
 }
 
 const Result = ({ response, error, onFailure, parserKey }: ResultProps) => {
+  const network = useNetwork()
+  const { config } = useLCDClient()
+
   const txHash = response?.result?.txhash ?? ""
   const raw_log = response?.result?.raw_log ?? ""
   /* polling */
-  const [txInfo, setTxInfo] = useState<SwapTxInfo>()
+  const [txInfo, setTxInfo] = useState<ISwapTxInfo>()
+
+  const matchedMsg = useMemo(() => {
+    if (!txInfo || !network?.name) {
+      return undefined
+    }
+    const actionRules = createActionRuleSet(network?.name)
+    const logMatcher = createLogMatcherForActions(actionRules)
+    return getTxCanonicalMsgs(txInfo as unknown as TxInfo, logMatcher)
+  }, [network, txInfo])
 
   const [status, setStatus] = useState<STATUS>(STATUS.LOADING)
   const { fcd } = useNetwork()
@@ -119,7 +141,36 @@ const Result = ({ response, error, onFailure, parserKey }: ResultProps) => {
 
   const content = {
     [STATUS.SUCCESS]: txInfo && (
-      <SwapTxInfo txInfo={txInfo} parserKey={parserKey} />
+      <>
+        <div style={{ textAlign: "center", marginTop: 16 }}>
+          <div>
+            {response?.msgs?.map((_, index) => {
+              const msgInfo = matchedMsg?.[index]
+
+              return (
+                <>
+                  {msgInfo
+                    ?.filter((msg) => !!msg?.transformed?.canonicalMsg)
+                    .map((msg) =>
+                      msg?.transformed?.canonicalMsg?.map((str) => (
+                        <div style={{ color: "#5c5c5c", fontSize: 18 }}>
+                          <TxDescription
+                            network={{ ...config, name: network?.name }}
+                            config={{ printCoins: 3 }}
+                          >
+                            {str}
+                          </TxDescription>
+                        </div>
+                      ))
+                    )}
+                  <br />
+                </>
+              )
+            })}
+          </div>
+        </div>
+        <SwapTxInfo txInfo={txInfo} parserKey={parserKey} />
+      </>
     ),
     [STATUS.LOADING]: (
       <div>

src/forms/SwapForm.tsx

@@ -48,7 +48,6 @@ import useAutoRouter from "rest/useAutoRouter"
 import { useLCDClient } from "layouts/WalletConnectProvider"
 import { useContractsAddress } from "hooks/useContractsAddress"
 import WarningModal from "components/Warning"
-import { AxiosError } from "axios"
 
 enum Key {
   value1 = "value1",
@@ -353,9 +352,9 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
   const simulationContents = useMemo(() => {
     if (
       !(
-        formData[Key.value1] &&
+        Number(formData[Key.value1]) &&
         formData[Key.symbol1] &&
-        formData[Key.value2] &&
+        Number(formData[Key.value2]) &&
         (type !== Type.WITHDRAW ? formData[Key.symbol2] : true)
       )
     ) {
@@ -849,11 +848,11 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
       try {
         settingsModal.close()
 
-        if (!profitableQuery?.msg) {
-          return
-        }
         let msgs: any = {}
         if (type === Type.SWAP) {
+          if (!profitableQuery?.msg) {
+            return
+          }
           msgs = getMsgs(profitableQuery?.msg, {
             amount: `${value1}`,
             minimumReceived: profitableQuery
@@ -920,8 +919,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
           return
         }
       } catch (error) {
-        console.error((error as AxiosError).message)
-
+        console.error(error)
         setResult(error as any)
       }
     },
@@ -1173,7 +1171,7 @@ const SwapForm = ({ type, tabs }: { type: Type; tabs: TabViewProps }) => {
               focused={selectToken2.isOpen}
               isLoading={
                 type === Type.SWAP &&
-                !!formData[Key.value1] &&
+                !!Number(formData[Key.value1]) &&
                 !!from &&
                 !!to &&
                 isAutoRouterLoading

src/forms/SwapResultContents.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { SwapAttribute } from "types/swapTx"
 import useSwapResults from "../hooks/useSwapResults"
 import ConfirmDetails from "./ConfirmDetails"
 

src/forms/SwapToken.module.scss

@@ -89,7 +89,7 @@ $name: 14px;
 .verified {
   width: 40px;
   height: auto;
-  font-family: OpenSans;
+  font-family: "Open Sans", arial, sans-serif;
   font-size: 10px;
   font-weight: 600;
   font-stretch: normal;