feat: wallet UI claim rewards

KyberNetwork · Jul 27, 2023 · 254a328 · 254a328
1 parent 922c45f
commit 254a328
Show file tree

Hide file tree

Showing 33 changed files with 812 additions and 665 deletions.
diff --git a/src/assets/svg/dollar.svg b/src/assets/svg/dollar.svg
diff --git a/src/assets/svg/sprite.svg b/src/assets/svg/sprite.svg
diff --git a/src/components/Announcement/Popups/TransactionPopup.tsx b/src/components/Announcement/Popups/TransactionPopup.tsx
@@ -166,6 +166,7 @@ const SUMMARY: { [type in TRANSACTION_TYPE]: SummaryFunction } = {
   [TRANSACTION_TYPE.CANCEL_LIMIT_ORDER]: summaryCancelLimitOrder,
   [TRANSACTION_TYPE.TRANSFER_TOKEN]: summaryTransferToken,
 
+  [TRANSACTION_TYPE.KYBERDAO_CLAIM_GAS_REFUND]: summary1Token, //todo namgold
   [TRANSACTION_TYPE.KYBERDAO_CLAIM]: summary1Token,
   [TRANSACTION_TYPE.KYBERDAO_UNDELEGATE]: summaryDelegateDao,
   [TRANSACTION_TYPE.KYBERDAO_MIGRATE]: summary2Token,

diff --git a/src/components/Header/groups/KyberDaoGroup.tsx b/src/components/Header/groups/KyberDaoGroup.tsx
@@ -45,7 +45,14 @@ const KyberDAONavGroup = () => {
               <VoteIcon />
               <Trans>Vote</Trans>
             </StyledNavLink>
-            <StyledNavLink id="knc-utility" to={APP_PATHS.KYBERDAO_KNC_UTILITY} style={{ gap: '4px' }}>
+            <StyledNavLink
+              id="knc-utility"
+              to={APP_PATHS.KYBERDAO_KNC_UTILITY}
+              style={{ gap: '4px' }}
+              onClick={() => {
+                mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'KyberDAO_tab' })
+              }}
+            >
               <KyberLogo width={16} height={16} />
               <Trans>KNC Utility</Trans>
             </StyledNavLink>

diff --git a/src/components/Icons/Icon.tsx b/src/components/Icons/Icon.tsx
@@ -1,21 +1,24 @@
 import React from 'react'
 
 import sprite from 'assets/svg/sprite.svg'
+import { ICON_ID } from 'constants/index'
 
 export default function Icon({
   id,
   size,
   style,
+  color,
   ...rest
 }: {
-  id: string
+  id: ICON_ID
   size?: number | string
+  color?: string
   style?: React.CSSProperties
   title?: string
 }) {
   return (
     <div style={style} {...rest}>
-      <svg width={size || 24} height={size || 24} display="block">
+      <svg width={size || 24} height={size || 24} display="block" color={color}>
         <use href={`${sprite}#${id}`} width={size || 24} height={size || 24} />
       </svg>
     </div>

diff --git a/src/components/SwapForm/TradeSummary.tsx b/src/components/SwapForm/TradeSummary.tsx
@@ -285,7 +285,12 @@ const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
                   </MouseoverTooltip>
                 </TextDashed>
               </RowFixed>
-              <NavLink to={APP_PATHS.KYBERDAO_KNC_UTILITY}>
+              <NavLink
+                to={APP_PATHS.KYBERDAO_KNC_UTILITY}
+                onClick={() => {
+                  mixpanelHandler(MIXPANEL_TYPE.GAS_REFUND_SOURCE_CLICK, { source: 'Swap_page_more_info' })
+                }}
+              >
                 <ButtonLight padding="0px 8px" width="fit-content" fontSize={10} fontWeight={500} lineHeight="16px">
                   <Trans>{account ? gasRefundPerCentage * 100 : '--'}% Refund</Trans>
                 </ButtonLight>

diff --git a/src/components/WalletPopup/AccountInfo/ActionButtonGroup.tsx b/src/components/WalletPopup/AccountInfo/ActionButtonGroup.tsx
@@ -6,6 +6,7 @@ import { ReactComponent as DollarIcon } from 'assets/svg/dollar.svg'
 import { ButtonLight } from 'components/Button'
 import SendIcon from 'components/Icons/SendIcon'
 import { ClickHandlerProps } from 'components/WalletPopup/AccountInfo'
+import useTheme from 'hooks/useTheme'
 
 const ActionButton = styled(ButtonLight)`
   flex: 0 1 105px;
@@ -17,6 +18,7 @@ type Props = {
   className?: string
 } & ClickHandlerProps
 const ActionButtonGroup: React.FC<Props> = ({ onClickBuy, onClickReceive, onClickSend, className, disabledSend }) => {
+  const theme = useTheme()
   return (
     <Flex
       className={className}
@@ -26,7 +28,7 @@ const ActionButtonGroup: React.FC<Props> = ({ onClickBuy, onClickReceive, onClic
       }}
     >
       <ActionButton onClick={onClickBuy}>
-        <DollarIcon />
+        <DollarIcon color={theme.primary} />
         <Text as="span" marginLeft="7px">
           <Trans>Buy</Trans>
         </Text>

diff --git a/src/components/WalletPopup/AccountInfo/MinimalActionButtonGroup.tsx b/src/components/WalletPopup/AccountInfo/MinimalActionButtonGroup.tsx
@@ -5,6 +5,7 @@ import { ReactComponent as DollarIcon } from 'assets/svg/dollar.svg'
 import { ButtonLight } from 'components/Button'
 import SendIcon from 'components/Icons/SendIcon'
 import { ClickHandlerProps } from 'components/WalletPopup/AccountInfo'
+import useTheme from 'hooks/useTheme'
 
 const MinimalActionButton = styled(ButtonLight)`
   flex: 0 0 36px;
@@ -23,6 +24,7 @@ const MinimalActionButtonGroup: React.FC<Props> = ({
   className,
   disabledSend,
 }) => {
+  const theme = useTheme()
   return (
     <Flex
       className={className}
@@ -33,7 +35,7 @@ const MinimalActionButtonGroup: React.FC<Props> = ({
       }}
     >
       <MinimalActionButton onClick={onClickBuy}>
-        <DollarIcon width={'24px'} height={'24px'} />
+        <DollarIcon width={'24px'} height={'24px'} color={theme.primary} />
       </MinimalActionButton>
       <MinimalActionButton onClick={onClickReceive}>
         <SendIcon size={14} style={{ transform: 'rotate(180deg)' }} />

diff --git a/src/components/WalletPopup/AccountInfo/Settings.tsx b/src/components/WalletPopup/AccountInfo/Settings.tsx