diff --git a/components/account/AccountTabs.tsx b/components/account/AccountTabs.tsx index e8b5a6ed..8573e0a5 100644 --- a/components/account/AccountTabs.tsx +++ b/components/account/AccountTabs.tsx @@ -23,7 +23,7 @@ const AccountTabs = () => { setActiveTab(v)} - values={['balances', 'activity', 'swap:swap-history']} + values={['balances', 'activity:activity', 'swap:swap-history']} showBorders /> @@ -37,7 +37,7 @@ const TabContent = ({ activeTab }: { activeTab: string }) => { switch (activeTab) { case 'balances': return - case 'activity': + case 'activity:activity': return case 'swap:swap-history': return diff --git a/components/account/ActivityFeed.tsx b/components/account/ActivityFeed.tsx index 8319e3f0..38258b63 100644 --- a/components/account/ActivityFeed.tsx +++ b/components/account/ActivityFeed.tsx @@ -1,9 +1,6 @@ import { IconButton } from '@components/shared/Button' import { ArrowLeftIcon } from '@heroicons/react/20/solid' -import mangoStore, { - DepositWithdrawFeedItem, - LiquidationFeedItem, -} from '@store/mangoStore' +import mangoStore, { LiquidationFeedItem } from '@store/mangoStore' import dayjs from 'dayjs' import useLocalStorageState from 'hooks/useLocalStorageState' import { useTranslation } from 'next-i18next' @@ -45,8 +42,7 @@ const ActivityDetails = ({ activity: LiquidationFeedItem setShowActivityDetail: (x: any) => void }) => { - console.log(activity) - const { t } = useTranslation(['common', 'activity']) + const { t } = useTranslation(['common', 'activity', 'settings']) const [preferredExplorer] = useLocalStorageState( PREFERRED_EXPLORER_KEY, EXPLORERS[0] @@ -70,9 +66,9 @@ const ActivityDetails = ({ > -

Liquidation Details

+

{t('activity:liquidation-details')}

-
+

{t('date')}

@@ -84,29 +80,34 @@ const ActivityDetails = ({

{t('activity:asset-liquidated')}

-

- {`${formatDecimal( - asset_amount - )} ${asset_symbol} at ${formatFixedDecimals(asset_price, true)}`} +

+ {formatDecimal(asset_amount)}{' '} + {asset_symbol} + + at + {' '} + {formatFixedDecimals(asset_price, true)}

-

+

{formatFixedDecimals(asset_price * asset_amount, true)}

{t('activity:asset-returned')}

-

- {`${formatDecimal( - liab_amount - )} ${liab_symbol} at ${formatFixedDecimals(liab_price, true)}`} +

+ {formatDecimal(liab_amount)}{' '} + {liab_symbol} + + at + {' '} + {formatFixedDecimals(liab_price, true)}

-

+

{formatFixedDecimals(liab_price * liab_amount, true)}

- {/*

{t('transaction')}

*/} { const { t } = useTranslation(['common', 'activity']) const { connected } = useWallet() - // const activityFeed = mangoStore((s) => s.activityFeed.feed) const actions = mangoStore((s) => s.actions) const [offset, setOffset] = useState(0) const [preferredExplorer] = useLocalStorageState( PREFERRED_EXPLORER_KEY, EXPLORERS[0] ) + const { width } = useViewport() + const showTableView = width ? width > breakpoints.md : false const handleShowMore = useCallback(() => { const mangoAccount = mangoStore.getState().mangoAccount.current @@ -42,28 +47,31 @@ const ActivityFeedTable = ({ const getCreditAndDebit = (activity: any) => { const { activity_type } = activity - let credit = '0' - let debit = '0' + let credit = { value: '0', symbol: '' } + let debit = { value: '0', symbol: '' } if (activity_type === 'liquidate_token_with_token') { const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } = activity.activity_details if (side === 'liqee') { - credit = `${formatDecimal(liab_amount)} ${liab_symbol}` - debit = `${formatDecimal(asset_amount)} ${asset_symbol}` + credit = { value: formatDecimal(liab_amount), symbol: liab_symbol } + debit = { + value: formatDecimal(asset_amount * -1), + symbol: asset_symbol, + } } else { - credit = `${formatDecimal(asset_amount)} ${asset_symbol}` - debit = `${formatDecimal(liab_amount)} ${liab_symbol}` + credit = { value: formatDecimal(asset_amount), symbol: asset_symbol } + debit = { value: formatDecimal(liab_amount * -1), symbol: liab_symbol } } } if (activity_type === 'deposit') { const { symbol, quantity } = activity.activity_details - credit = `${formatDecimal(quantity)} ${symbol}` - debit = '0' + credit = { value: formatDecimal(quantity), symbol } + debit = { value: '0', symbol: '' } } if (activity_type === 'withdraw') { const { symbol, quantity } = activity.activity_details - credit = '0' - debit = `${formatDecimal(quantity)} ${symbol}` + credit = { value: '0', symbol: '' } + debit = { value: formatDecimal(quantity * -1), symbol } } return { credit, debit } } @@ -82,7 +90,8 @@ const ActivityFeedTable = ({ } if (activity_type === 'deposit' || activity_type === 'withdraw') { const { usd_equivalent } = activity.activity_details - value = usd_equivalent + value = + activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent } return value } @@ -90,92 +99,122 @@ const ActivityFeedTable = ({ return connected ? ( activityFeed.length ? ( <> - - - - - - - - - - - - - {activityFeed.map((activity: any, i: number) => { - const { activity_type, block_datetime } = activity - const { signature } = activity.activity_details - const isLiquidation = - activity_type === 'liquidate_token_with_token' - const activityName = isLiquidation ? 'liquidation' : activity_type - const amounts = getCreditAndDebit(activity) - const value = getValue(activity) - return ( - handleShowActivityDetails(activity) - : undefined - } - > - - - - - - + + + + + + + + + + + {activityFeed.map((activity: any, i: number) => { + const { activity_type, block_datetime } = activity + const { signature } = activity.activity_details + const isLiquidation = + activity_type === 'liquidate_token_with_token' + const activityName = isLiquidation + ? 'liquidation' + : activity_type + const amounts = getCreditAndDebit(activity) + const value = getValue(activity) + return ( + handleShowActivityDetails(activity) + : undefined + } + > + + + + + + - - ) - })} - -
{t('date')} - {t('activity:activity')} - {t('activity:credit')}{t('activity:debit')} - {t('activity:activity-value')} - {t('explorer')}
-

- {dayjs(block_datetime).format('ddd D MMM')} -

-

- {dayjs(block_datetime).format('h:mma')} -

-
{capitalize(activityName)}{amounts.credit}{amounts.debit} - {formatFixedDecimals(value, true)} - - {activity_type !== 'liquidate_token_with_token' ? ( -
- - +
{t('date')} + {t('activity:activity')} + + {t('activity:credit')} + + {t('activity:debit')} + + {t('activity:activity-value')} + {t('explorer')}
+

+ {dayjs(block_datetime).format('ddd D MMM')} +

+

+ {dayjs(block_datetime).format('h:mma')} +

+
+ {t(`activity:${activityName}`)} + + {amounts.credit.value}{' '} + + {amounts.credit.symbol} + + + {amounts.debit.value}{' '} + + {amounts.debit.symbol} + + + {formatFixedDecimals(value, true)} + + {activity_type !== 'liquidate_token_with_token' ? ( +
+ -
- -
- -
-
- ) : ( -
- -
- )} -
+
+
+ +
+
+ +
+ ) : ( +
+ +
+ )} + + + ) + })} + + + ) : ( +
+ {activityFeed.map((activity: any, i: number) => ( + + ))} +
+ )} {activityFeed.length % 25 === 0 ? (
Show More @@ -197,3 +236,156 @@ const ActivityFeedTable = ({ } export default ActivityFeedTable + +const MobileActivityFeedItem = ({ + activity, + getValue, +}: { + activity: any + getValue: (x: any) => number +}) => { + const { t } = useTranslation(['common', 'activity']) + const [expandActivityDetails, setExpandActivityDetails] = useState(false) + const [preferredExplorer] = useLocalStorageState( + PREFERRED_EXPLORER_KEY, + EXPLORERS[0] + ) + const { activity_type, block_datetime } = activity + const { signature } = activity.activity_details + const isLiquidation = activity_type === 'liquidate_token_with_token' + const activityName = isLiquidation ? 'liquidation' : activity_type + const value = getValue(activity) + return ( +
+
+
+

+ {dayjs(block_datetime).format('ddd D MMM')} +

+

+ {dayjs(block_datetime).format('h:mma')} +

+
+
+
+

+ {t(`activity:${activityName}`)} +

+

+ {isLiquidation ? ( + formatFixedDecimals(value, true) + ) : ( + <> + + {activity.activity_details.quantity} + + + {activity.activity_details.symbol} + + + )} +

+
+ {isLiquidation ? ( + setExpandActivityDetails((prev) => !prev)} + > + + + ) : ( + +
+ +
+
+ )} +
+
+ +
+
+

{t('activity:asset-liquidated')}

+

+ {formatDecimal(activity.activity_details.asset_amount)}{' '} + + {activity.activity_details.asset_symbol} + + + at + {' '} + {formatFixedDecimals(activity.activity_details.asset_price, true)} +

+

+ {formatFixedDecimals( + activity.activity_details.asset_price * + activity.activity_details.asset_amount, + true + )} +

+
+
+

{t('activity:asset-returned')}

+

+ {formatDecimal(activity.activity_details.liab_amount)}{' '} + + {activity.activity_details.liab_symbol} + + + at + {' '} + {formatFixedDecimals(activity.activity_details.liab_price, true)} +

+

+ {formatFixedDecimals( + activity.activity_details.liab_price * + activity.activity_details.liab_amount, + true + )} +

+
+ +
+
+
+ ) +} diff --git a/pages/index.tsx b/pages/index.tsx index c86ec942..da6ac547 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,6 +10,7 @@ export async function getStaticProps({ locale }: { locale: string }) { 'close-account', 'profile', 'swap', + 'activity', ])), }, } diff --git a/public/locales/en/activity.json b/public/locales/en/activity.json new file mode 100644 index 00000000..bc2384d8 --- /dev/null +++ b/public/locales/en/activity.json @@ -0,0 +1,12 @@ +{ + "activity": "Activity", + "activity-value": "Activity Value", + "asset-liquidated": "Asset Liquidated", + "asset-returned": "Asset Returned", + "credit": "Credit", + "debit": "Debit", + "deposit": "Deposit", + "liquidation": "Liquidation", + "liquidation-details": "Liquidation Details", + "withdraw": "Withdraw" +} \ No newline at end of file diff --git a/public/locales/en/common.json b/public/locales/en/common.json index b2b0fd8a..280d1a7b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -40,6 +40,7 @@ "disconnect": "Disconnect", "edit-account": "Edit Account", "edit-profile-image": "Edit Profile Image", + "explorer": "Explorer", "fee": "Fee", "fees": "Fees", "free-collateral": "Free Collateral", diff --git a/public/locales/es/activity.json b/public/locales/es/activity.json new file mode 100644 index 00000000..bc2384d8 --- /dev/null +++ b/public/locales/es/activity.json @@ -0,0 +1,12 @@ +{ + "activity": "Activity", + "activity-value": "Activity Value", + "asset-liquidated": "Asset Liquidated", + "asset-returned": "Asset Returned", + "credit": "Credit", + "debit": "Debit", + "deposit": "Deposit", + "liquidation": "Liquidation", + "liquidation-details": "Liquidation Details", + "withdraw": "Withdraw" +} \ No newline at end of file diff --git a/public/locales/es/common.json b/public/locales/es/common.json index b2b0fd8a..280d1a7b 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -40,6 +40,7 @@ "disconnect": "Disconnect", "edit-account": "Edit Account", "edit-profile-image": "Edit Profile Image", + "explorer": "Explorer", "fee": "Fee", "fees": "Fees", "free-collateral": "Free Collateral", diff --git a/public/locales/zh/activity.json b/public/locales/zh/activity.json new file mode 100644 index 00000000..bc2384d8 --- /dev/null +++ b/public/locales/zh/activity.json @@ -0,0 +1,12 @@ +{ + "activity": "Activity", + "activity-value": "Activity Value", + "asset-liquidated": "Asset Liquidated", + "asset-returned": "Asset Returned", + "credit": "Credit", + "debit": "Debit", + "deposit": "Deposit", + "liquidation": "Liquidation", + "liquidation-details": "Liquidation Details", + "withdraw": "Withdraw" +} \ No newline at end of file diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index b2b0fd8a..280d1a7b 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -40,6 +40,7 @@ "disconnect": "Disconnect", "edit-account": "Edit Account", "edit-profile-image": "Edit Profile Image", + "explorer": "Explorer", "fee": "Fee", "fees": "Fees", "free-collateral": "Free Collateral", diff --git a/public/locales/zh_tw/activity.json b/public/locales/zh_tw/activity.json new file mode 100644 index 00000000..bc2384d8 --- /dev/null +++ b/public/locales/zh_tw/activity.json @@ -0,0 +1,12 @@ +{ + "activity": "Activity", + "activity-value": "Activity Value", + "asset-liquidated": "Asset Liquidated", + "asset-returned": "Asset Returned", + "credit": "Credit", + "debit": "Debit", + "deposit": "Deposit", + "liquidation": "Liquidation", + "liquidation-details": "Liquidation Details", + "withdraw": "Withdraw" +} \ No newline at end of file diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json index b2b0fd8a..280d1a7b 100644 --- a/public/locales/zh_tw/common.json +++ b/public/locales/zh_tw/common.json @@ -40,6 +40,7 @@ "disconnect": "Disconnect", "edit-account": "Edit Account", "edit-profile-image": "Edit Profile Image", + "explorer": "Explorer", "fee": "Fee", "fees": "Fees", "free-collateral": "Free Collateral",