feat: wallet UI claim rewards (#2115)

- new Wallet UI for claiming reward: voting reward and gas refund reward
  + refactor claiming reward hooks to be reuseable
- integrate gas refund cycle API
- update texts & images change
- refactor Icon sprite: add type
- fix Solana loop call on load page init
- add Mixpanel event for gas refund
- fix BE's gasRefundPerCentage -> gasRefundPercentage
- fix gas refund claim transaction alert & transaction informations
- fix wallet popup restrict to only able to drag inside of screen
- reload claim reward info after claimed
- refactor gas refund use swr => rtk
- fix remove some duplicated rtk middleware

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]: summaryClaim,
   [TRANSACTION_TYPE.KYBERDAO_CLAIM]: summary1Token,
   [TRANSACTION_TYPE.KYBERDAO_UNDELEGATE]: summaryDelegateDao,
   [TRANSACTION_TYPE.KYBERDAO_MIGRATE]: summary2Token,

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>

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>

src/components/SwapForm/SwapModal/SwapDetails/index.tsx

@@ -78,7 +78,7 @@ export default function SwapDetails({
   const theme = useTheme()
   const isDarkMode = useIsDarkMode()
   const { slippage, routeSummary } = useSwapFormContext()
-  const { gasRefundPerCentage } = useGasRefundTier()
+  const { gasRefundPercentage } = useGasRefundTier()
 
   const currencyIn = routeSummary?.parsedAmountIn?.currency
   const currencyOut = routeSummary?.parsedAmountOut?.currency
@@ -358,7 +358,7 @@ export default function SwapDetails({
               lineHeight="16px"
               style={{ pointerEvents: 'none' }}
             >
-              <Trans>{gasRefundPerCentage * 100}% Refund</Trans>
+              <Trans>{gasRefundPercentage ? gasRefundPercentage * 100 : '--'}% Refund</Trans>
             </ButtonLight>
           </RowBetween>
         )}

src/components/SwapForm/TradeSummary.tsx

@@ -148,7 +148,7 @@ type Props = {
 const TradeSummary: React.FC<Props> = ({ routeSummary, slippage }) => {
   const { account, chainId } = useActiveWeb3React()
   const theme = useTheme()
-  const { gasRefundPerCentage } = useGasRefundTier()
+  const { gasRefundPercentage } = useGasRefundTier()
   const [expanded, setExpanded] = useState(true)
   const [alreadyVisible, setAlreadyVisible] = useState(false)
   const { parsedAmountOut, priceImpact, gasUsd } = routeSummary || {}
@@ -285,9 +285,14 @@ 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>
+                  <Trans>{account ? gasRefundPercentage * 100 : '--'}% Refund</Trans>
                 </ButtonLight>
               </NavLink>
             </RowBetween>

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>

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)' }} />