fix: feedback button ui (#1770)

RabbyHub · Sep 22, 2023 · e26bbf9 · e26bbf9
1 parent 3ef8ccb
commit e26bbf9
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 63 deletions.
diff --git a/src/ui/views/Approval/components/AddChain/UnsupportedAlert.tsx b/src/ui/views/Approval/components/AddChain/UnsupportedAlert.tsx
@@ -1,14 +1,14 @@
 import { Button } from 'antd';
 import React from 'react';
 import { ReactComponent as IconInfo } from '@/ui/assets/add-chain/info.svg';
-import { ReactComponent as IconEmail } from '@/ui/assets/add-chain/email.svg';
-import { noop, useApproval, useWallet } from '@/ui/utils';
+import { useApproval, useWallet } from '@/ui/utils';
 import { useTranslation } from 'react-i18next';
 import { Footer } from './style';
 import { AddEthereumChainParams } from './type';
 import IconUnknown from '@/ui/assets/token-default.svg';
 import clsx from 'clsx';
 import { useAccount } from '@/ui/store-hooks';
+import { NoActionBody } from '../NoActionAlert/NoActionBody';
 
 interface Props {
   data: AddEthereumChainParams;
@@ -80,32 +80,12 @@ export const UnsupportedAlert: React.FC<Props> = ({ data }) => {
             <IconInfo className="w-14" />
             <span>{t('page.switchChain.chainNotSupportYet')}</span>
           </div>
-          <div className="h-1 bg-r-neutral-line w-full my-12" />
-          <div className="leading-[16px]">
-            {isRequested ? (
-              <div className="text-r-neutral-foot">
-                {requestedCount > 1
-                  ? t('page.switchChain.requestsReceivedPlural', {
-                      count: requestedCount,
-                    })
-                  : t('page.switchChain.requestsReceived')}
-              </div>
-            ) : (
-              <div
-                className={clsx(
-                  'gap-x-6 flex items-center justify-center',
-                  'cursor-pointer hover:opacity-70',
-                  isRequesting ? 'opacity-70' : ''
-                )}
-                onClick={isRequesting ? noop : handleRequest}
-              >
-                <IconEmail className="w-16" />
-                <span className="text-r-blue-default">
-                  {t('page.switchChain.requestRabbyToSupport')}
-                </span>
-              </div>
-            )}
-          </div>
+          <NoActionBody
+            requestedCount={requestedCount}
+            handleRequest={handleRequest}
+            isRequested={isRequested}
+            isRequesting={isRequesting}
+          />
         </div>
       </div>
       <Footer className="justify-center">

diff --git a/src/ui/views/Approval/components/NoActionAlert/NoActionAlert.tsx b/src/ui/views/Approval/components/NoActionAlert/NoActionAlert.tsx
@@ -2,10 +2,9 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import IconAlert from '@/ui/assets/sign/tx/alert.svg';
 import React from 'react';
-import clsx from 'clsx';
-import { ReactComponent as IconEmail } from '@/ui/assets/add-chain/email.svg';
 import { useAccount } from '@/ui/store-hooks';
-import { noop, useWallet } from '@/ui/utils';
+import { useWallet } from '@/ui/utils';
+import { NoActionBody } from './NoActionBody';
 
 const NoActionAlertStyled = styled.div`
   display: flex;
@@ -79,31 +78,12 @@ export const NoActionAlert: React.FC<Props> = ({ data }) => {
         <img src={IconAlert} className="icon icon-alert" />
         {t('page.signTx.sigCantDecode')}
       </div>
-      <div className="h-1 bg-r-neutral-line w-full my-12" />
-      <div className="leading-[16px]">
-        {isRequested ? (
-          <div className="text-r-neutral-foot">
-            {requestedCount > 1
-              ? t('page.switchChain.requestsReceivedPlural', {
-                  count: requestedCount,
-                })
-              : t('page.switchChain.requestsReceived')}
-          </div>
-        ) : (
-          <div
-            className={clsx(
-              'gap-x-6 flex items-center justify-center',
-              'cursor-pointer hover:opacity-70'
-            )}
-            onClick={isRequesting ? noop : handleRequest}
-          >
-            <IconEmail className="w-16" />
-            <span className="text-r-blue-default">
-              {t('page.switchChain.requestRabbyToSupport')}
-            </span>
-          </div>
-        )}
-      </div>
+      <NoActionBody
+        requestedCount={requestedCount}
+        handleRequest={handleRequest}
+        isRequested={isRequested}
+        isRequesting={isRequesting}
+      />
     </NoActionAlertStyled>
   );
 };
diff --git a/src/ui/views/Approval/components/NoActionAlert/NoActionBody.tsx b/src/ui/views/Approval/components/NoActionAlert/NoActionBody.tsx
@@ -0,0 +1,61 @@
+import { noop } from '@/ui/utils';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as IconEmail } from '@/ui/assets/add-chain/email.svg';
+import React from 'react';
+import { Loading3QuartersOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
+import clsx from 'clsx';
+
+interface Props {
+  isRequested?: boolean;
+  requestedCount: number;
+  isRequesting?: boolean;
+  handleRequest(): void;
+}
+export const NoActionBody: React.FC<Props> = ({
+  isRequested,
+  requestedCount,
+  isRequesting,
+  handleRequest,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="h-[0.5px] bg-r-neutral-line w-full my-12" />
+      <div className="leading-[16px]">
+        {isRequested ? (
+          <div className="text-r-neutral-foot">
+            {requestedCount > 1
+              ? t('page.switchChain.requestsReceivedPlural', {
+                  count: requestedCount,
+                })
+              : t('page.switchChain.requestsReceived')}
+          </div>
+        ) : (
+          <div
+            className={clsx(
+              'gap-x-6 flex items-center justify-center',
+              'cursor-pointer hover:opacity-70',
+              isRequesting && 'opacity-70'
+            )}
+            onClick={isRequesting ? noop : handleRequest}
+          >
+            {isRequesting ? (
+              <Spin
+                indicator={
+                  <Loading3QuartersOutlined style={{ fontSize: 16 }} spin />
+                }
+              />
+            ) : (
+              <IconEmail className="w-16" />
+            )}
+            <span className="text-r-blue-default">
+              {t('page.switchChain.requestRabbyToSupport')}
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/src/ui/views/Dashboard/components/TokenDetailPopup/TokenDetail.tsx b/src/ui/views/Dashboard/components/TokenDetailPopup/TokenDetail.tsx
@@ -238,15 +238,18 @@ const TokenDetail = ({
                 {splitNumberByStep((tokenWithAmount.amount || 0)?.toFixed(8))}
               </div>
             </TooltipWithMagnetArrow>
-            <div
-              className="balance-value-usd truncate"
+            <TooltipWithMagnetArrow
               title={(tokenWithAmount.amount * token.price || 0).toString()}
+              className="rectangle w-[max-content]"
+              placement="bottom"
             >
-              ≈ $
-              {splitNumberByStep(
-                (tokenWithAmount.amount * token.price || 0)?.toFixed(2)
-              )}
-            </div>
+              <div className="balance-value-usd truncate">
+                ≈ $
+                {splitNumberByStep(
+                  (tokenWithAmount.amount * token.price || 0)?.toFixed(2)
+                )}
+              </div>
+            </TooltipWithMagnetArrow>
           </div>
         </div>