Merge remote-tracking branch 'origin/koni/dev/issue-1929' into webapp…

…-dev # Conflicts: # packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx # packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx # packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx
Koniverse · Oct 19, 2023 · 89e7af2 · 89e7af2
2 parents 603939c + 7ff7df1
commit 89e7af2
Show file tree

Hide file tree

Showing 19 changed files with 287 additions and 145 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx
@@ -168,7 +168,7 @@ const Component = function ({ className }: Props) {
           return t('Staking confirmation');
         case ExtrinsicType.STAKING_LEAVE_POOL:
         case ExtrinsicType.STAKING_UNBOND:
-          return t('Unbond confirm');
+          return t('Unstaking confirmation');
         case ExtrinsicType.STAKING_WITHDRAW:
           return t('Withdrawal confirm');
         case ExtrinsicType.STAKING_CLAIM_REWARD:

diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx
@@ -83,14 +83,17 @@ const Component: React.FC<Props> = (props: Props) => {
   const [, setFastWithdrawStorage] = useLocalStorage(FAST_WITHDRAW_YIELD_TRANSACTION, DEFAULT_FAST_WITHDRAW_YIELD_PARAMS);
   const [, setClaimStorage] = useLocalStorage(CLAIM_YIELD_TRANSACTION, DEFAULT_CLAIM_YIELD_PARAMS);
 
-  const [{ selectedYieldPoolInfo, selectedYieldPosition }, setSelectedItem] = useState<{ selectedYieldPosition: YieldPositionInfo | undefined, selectedYieldPoolInfo: YieldPoolInfo | undefined }>({ selectedYieldPosition: undefined, selectedYieldPoolInfo: undefined });
+  const [selectedSlug, setSelectedSlug] = useState('');
   const [sortSelection, setSortSelection] = useState<SortKey>(SortKey.TOTAL_VALUE);
   const { filterSelectionMap, onApplyFilter, onChangeFilterOption, onCloseFilterModal, selectedFilters } = useFilterModal(FILTER_MODAL_ID);
   const location = useLocation();
   const { setTitle } = useContext(WebUIContext);
   const [searchInput, setSearchInput] = useState<string>('');
   const [isShowAdditionActionInActionsModal, setShowAdditionActionInActionsModal] = useState<boolean>(false);
 
+  const selectedYieldPosition = useMemo(() => groupYieldPosition.find((item) => item.slug === selectedSlug), [groupYieldPosition, selectedSlug]);
+  const selectedYieldPoolInfo = useMemo((): YieldPoolInfo | undefined => poolInfoMap[selectedSlug], [poolInfoMap, selectedSlug]);
+
   const selectedStakingRewardItem = useMemo(() => {
     let nominationPoolReward: StakingRewardItem | undefined;
 
@@ -122,7 +125,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return [
       {
         desc: true,
-        label: t('Sort by total value'),
+        label: t('Total value staked'),
         value: SortKey.TOTAL_VALUE
       }
     ];
@@ -182,27 +185,23 @@ const Component: React.FC<Props> = (props: Props) => {
 
   const onClickCalculatorBtn = useCallback((item: YieldPositionInfo) => {
     return () => {
-      const poolInfo = poolInfoMap[item.slug];
-
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
       activeModal(STAKING_CALCULATOR_MODAL);
     };
-  }, [activeModal, poolInfoMap]);
+  }, [activeModal]);
 
   const onClickInfoBtn = useCallback((item: YieldPositionInfo) => {
     return () => {
-      const poolInfo = poolInfoMap[item.slug];
-
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
       activeModal(EARNING_INFO_MODAL);
     };
-  }, [activeModal, poolInfoMap]);
+  }, [activeModal]);
 
   const onClickStakeBtn = useCallback((item: YieldPositionInfo) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
 
@@ -222,7 +221,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
 
@@ -246,7 +245,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
 
@@ -270,7 +269,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
 
@@ -294,7 +293,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
 
@@ -336,7 +335,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return () => {
       const poolInfo = poolInfoMap[item.slug];
 
-      setSelectedItem({ selectedYieldPosition: item, selectedYieldPoolInfo: poolInfo });
+      setSelectedSlug(item.slug);
 
       if ([YieldPoolType.NATIVE_STAKING, YieldPoolType.NOMINATION_POOL].includes(poolInfo.type)) {
         activeModal(YIELD_STAKING_DETAIL_MODAL);
@@ -613,7 +612,7 @@ const Component: React.FC<Props> = (props: Props) => {
               size='md'
               weight='fill'
             />
-            <span className='footer-content'>{t('Do you want to add more funds or add funds for other pools?')}</span>
+            <span className='footer-content'>{t('Do you want to add more funds or add funds to other pools')}</span>
           </div>
           <Button
             icon={(
@@ -669,7 +668,7 @@ const Component: React.FC<Props> = (props: Props) => {
         destroyOnClose={true}
         id={TRANSACTION_YIELD_UNSTAKE_MODAL}
         onCancel={handleCloseUnstake}
-        title={t('Unbond')}
+        title={t('Unstake')}
       >
         <Transaction
           modalContent={isWebUI}
@@ -849,6 +848,13 @@ const EarningManagement = styled(Component)<Props>(({ theme: { token } }: Props)
           lineHeight: token.lineHeight
         }
       }
+    },
+
+    '.empty-list': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
     }
   });
 });

diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx
@@ -9,10 +9,10 @@ import EarningInfoModal from '@subwallet/extension-koni-ui/components/Modal/Earn
 import Search from '@subwallet/extension-koni-ui/components/Search';
 import { BN_TEN, CREATE_RETURN, DEFAULT_ROUTER_PATH, DEFAULT_YIELD_PARAMS, EARNING_INFO_MODAL, STAKING_CALCULATOR_MODAL, YIELD_TRANSACTION } from '@subwallet/extension-koni-ui/constants';
 import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
-import { useFilterModal, useTranslation } from '@subwallet/extension-koni-ui/hooks';
+import { useFilterModal, usePreCheckAction, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { isAccountAll } from '@subwallet/extension-koni-ui/utils';
+import { getEarnExtrinsicType, isAccountAll } from '@subwallet/extension-koni-ui/utils';
 import { Icon, ModalContext, SwList } from '@subwallet/react-ui';
 import BigN from 'bignumber.js';
 import CN from 'classnames';
@@ -72,7 +72,7 @@ const Component: React.FC<Props> = (props: Props) => {
     return [
       {
         desc: true,
-        label: t('Sort by total value'),
+        label: t('Total value staked'),
         value: SortKey.TOTAL_VALUE
       },
       {
@@ -88,12 +88,16 @@ const Component: React.FC<Props> = (props: Props) => {
     ];
   }, [t]);
 
-  const [selectedItem, setSelectedItem] = useState<YieldPoolInfo | undefined>(undefined);
+  const preCheckAction = usePreCheckAction(currentAccount?.address, false);
+
+  const [selectedSlug, setSelectedSlug] = useState('');
   const [sortSelection, setSortSelection] = useState<SortKey>(SortKey.TOTAL_VALUE);
   const { filterSelectionMap, onApplyFilter, onChangeFilterOption, onCloseFilterModal, selectedFilters } = useFilterModal(FILTER_MODAL_ID);
   const [, setYieldStorage] = useLocalStorage(YIELD_TRANSACTION, DEFAULT_YIELD_PARAMS);
   const [, setReturnStorage] = useLocalStorage(CREATE_RETURN, DEFAULT_ROUTER_PATH);
 
+  const selectedItem = useMemo((): YieldPoolInfo | undefined => poolInfo[selectedSlug], [poolInfo, selectedSlug]);
+
   const onChangeSortOpt = useCallback((value: string) => {
     setSortSelection(value as SortKey);
   }, []);
@@ -146,14 +150,14 @@ const Component: React.FC<Props> = (props: Props) => {
 
   const onClickCalculatorBtn = useCallback((item: YieldPoolInfo) => {
     return () => {
-      setSelectedItem(item);
+      setSelectedSlug(item.slug);
       activeModal(STAKING_CALCULATOR_MODAL);
     };
   }, [activeModal]);
 
   const onClickInfoBtn = useCallback((item: YieldPoolInfo) => {
     return () => {
-      setSelectedItem(item);
+      setSelectedSlug(item.slug);
       activeModal(EARNING_INFO_MODAL);
     };
   }, [activeModal]);
@@ -164,21 +168,25 @@ const Component: React.FC<Props> = (props: Props) => {
         setReturnStorage('/home/earning/');
         navigate('/welcome');
       } else {
-        setSelectedItem(item);
-        const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
-
-        setYieldStorage({
-          ...DEFAULT_YIELD_PARAMS,
-          method: item.slug,
-          from: address,
-          chain: item.chain,
-          asset: item.inputAssets[0]
-        });
-
-        navigate('/transaction/earn');
+        const callback = () => {
+          setSelectedSlug(item.slug);
+          const address = currentAccount ? isAccountAll(currentAccount.address) ? '' : currentAccount.address : '';
+
+          setYieldStorage({
+            ...DEFAULT_YIELD_PARAMS,
+            method: item.slug,
+            from: address,
+            chain: item.chain,
+            asset: item.inputAssets[0]
+          });
+
+          navigate('/transaction/earn');
+        };
+
+        preCheckAction(callback, getEarnExtrinsicType(item.slug))();
       }
     };
-  }, [currentAccount, isNoAccount, navigate, setReturnStorage, setYieldStorage]);
+  }, [currentAccount, isNoAccount, navigate, preCheckAction, setReturnStorage, setYieldStorage]);
 
   const renderEarningItem = useCallback((item: YieldPoolInfo) => {
     return (
@@ -346,6 +354,13 @@ const EarningOverviewContent = styled(Component)<Props>(({ theme: { token } }: P
       paddingBottom: token.padding
     },
 
+    '.empty-list': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+
     '@media (max-width: 991px)': {
       '.__toolbar-area': {
         position: 'sticky',

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx b/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
@@ -224,12 +224,15 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     }, {} as Record<string, string>);
   }, [accounts]);
 
-  const typeNameMap: Record<string, string> = useMemo(() => ({
+  const typeNameMap: Record<string, string> = useMemo((): Record<ExtrinsicType | 'default' | 'send' | 'received' | 'submitting' | 'processing', string> => ({
     default: t('Transaction'),
     submitting: t('Submitting...'),
     processing: t('Processing...'),
     send: t('Send'),
     received: t('Receive'),
+    [ExtrinsicType.TRANSFER_BALANCE]: t('Send token'),
+    [ExtrinsicType.TRANSFER_TOKEN]: t('Send token'),
+    [ExtrinsicType.TRANSFER_XCM]: t('Send token'),
     [ExtrinsicType.SEND_NFT]: t('NFT'),
     [ExtrinsicType.CROWDLOAN]: t('Crowdloan'),
     [ExtrinsicType.STAKING_JOIN_POOL]: t('Stake'),
@@ -238,18 +241,30 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     [ExtrinsicType.STAKING_UNBOND]: t('Unstake'),
     [ExtrinsicType.STAKING_CLAIM_REWARD]: t('Claim Reward'),
     [ExtrinsicType.STAKING_WITHDRAW]: t('Withdraw'),
+    [ExtrinsicType.STAKING_POOL_WITHDRAW]: t('Withdraw'),
     [ExtrinsicType.STAKING_CANCEL_UNSTAKE]: t('Cancel unstake'),
+    [ExtrinsicType.STAKING_COMPOUNDING]: t('Compound'),
+    [ExtrinsicType.STAKING_CANCEL_COMPOUNDING]: t('Cancel compound'),
     [ExtrinsicType.EVM_EXECUTE]: t('EVM Transaction'),
+    [ExtrinsicType.JOIN_YIELD_POOL]: t('Stake'),
     [ExtrinsicType.MINT_QDOT]: t('Mint qDOT'),
     [ExtrinsicType.MINT_SDOT]: t('Mint sDOT'),
     [ExtrinsicType.MINT_LDOT]: t('Mint LDOT'),
-    [ExtrinsicType.MINT_VDOT]: t('Mint vDOT')
+    [ExtrinsicType.MINT_VDOT]: t('Mint vDOT'),
+    [ExtrinsicType.REDEEM_QDOT]: t('Redeem qDOT'),
+    [ExtrinsicType.REDEEM_SDOT]: t('Redeem sDOT'),
+    [ExtrinsicType.REDEEM_LDOT]: t('Redeem LDOT'),
+    [ExtrinsicType.REDEEM_VDOT]: t('Redeem vDOT'),
+    [ExtrinsicType.UNKNOWN]: t('Unknown')
   }), [t]);
 
-  const typeTitleMap: Record<string, string> = useMemo(() => ({
+  const typeTitleMap: Record<string, string> = useMemo((): Record<ExtrinsicType | 'default' | 'send' | 'received', string> => ({
     default: t('Transaction'),
     send: t('Send token'),
     received: t('Receive token'),
+    [ExtrinsicType.TRANSFER_BALANCE]: t('Send token'),
+    [ExtrinsicType.TRANSFER_TOKEN]: t('Send token'),
+    [ExtrinsicType.TRANSFER_XCM]: t('Send token'),
     [ExtrinsicType.SEND_NFT]: t('NFT transaction'),
     [ExtrinsicType.CROWDLOAN]: t('Crowdloan transaction'),
     [ExtrinsicType.STAKING_JOIN_POOL]: t('Stake transaction'),
@@ -258,12 +273,21 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     [ExtrinsicType.STAKING_UNBOND]: t('Unbond transaction'),
     [ExtrinsicType.STAKING_CLAIM_REWARD]: t('Claim Reward transaction'),
     [ExtrinsicType.STAKING_WITHDRAW]: t('Withdraw transaction'),
+    [ExtrinsicType.STAKING_POOL_WITHDRAW]: t('Withdraw transaction'),
     [ExtrinsicType.STAKING_CANCEL_UNSTAKE]: t('Cancel unstake transaction'),
+    [ExtrinsicType.STAKING_COMPOUNDING]: t('Compound transaction'),
+    [ExtrinsicType.STAKING_CANCEL_COMPOUNDING]: t('Cancel compound transaction'),
     [ExtrinsicType.EVM_EXECUTE]: t('EVM Transaction'),
+    [ExtrinsicType.JOIN_YIELD_POOL]: t('Stake transaction'),
     [ExtrinsicType.MINT_QDOT]: t('Mint qDOT transaction'),
     [ExtrinsicType.MINT_SDOT]: t('Mint sDOT transaction'),
     [ExtrinsicType.MINT_LDOT]: t('Mint LDOT transaction'),
-    [ExtrinsicType.MINT_VDOT]: t('Mint vDOT transaction')
+    [ExtrinsicType.MINT_VDOT]: t('Mint vDOT transaction'),
+    [ExtrinsicType.REDEEM_QDOT]: t('Redeem qDOT transaction'),
+    [ExtrinsicType.REDEEM_SDOT]: t('Redeem sDOT transaction'),
+    [ExtrinsicType.REDEEM_LDOT]: t('Redeem LDOT transaction'),
+    [ExtrinsicType.REDEEM_VDOT]: t('Redeem vDOT transaction'),
+    [ExtrinsicType.UNKNOWN]: t('Unknown transaction')
   }), [t]);
 
   // Fill display data to history list