feat: add tooltip to pools and refactor loans tooltip (#1424)

* feat: add tooltip to pools and refactor loans tooltip

* fix: code review

* fix: code reivew

---------

Co-authored-by: Thomas Jeatt <[email protected]>

src/assets/locales/en/translation.json

@@ -147,6 +147,11 @@
   "claim_rewards": "Claim Rewards",
   "tx_fees": "Tx fees",
   "view_subscan": "View Subscan",
+  "apr_breakdown": "APR Breakdown",
+  "apy_breakdown": "APY Breakdown",
+  "earned": "Earned",
+  "rewards_apr": "Rewards APR",
+  "rewards_apr_ticker": "Rewards APR {{ticker}}",
   "wallet": "Wallet",
   "navigation": {
     "btc": "BTC",
@@ -590,6 +595,9 @@
     "action_liquidation_risk": "{{action}} this amount will increase your LTV, thus also increasing the risk of liquidation.",
     "no_loan_positions": "No {{loanType}} positions",
     "your_loan_positions_will_show_here": "Your {{loanType}} positions will show here",
+    "owed": "Owed",
+    "lend_apy_ticker": "Lend APY {{ticker}}",
+    "borrow_apy_ticker": "Borrow APY {{ticker}}",
     "borrowed": "Borrowed",
     "supplied": "Supplied",
     "total_supplied": "Total Supplied",
@@ -603,7 +611,8 @@
       "pool_name": "Pool Name",
       "add_liquidity": "Add Liquidity",
       "remove_liquidity": "Remove Liquidity",
-      "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please."
+      "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please.",
+      "trading_fee_apr": "Trading Fee APR"
     },
     "swap": "Swap",
     "select_token": "Select Token",

src/components/ApyDetails/ApyDetails.tsx

@@ -0,0 +1,10 @@
+import { Dl, DlProps } from '@/component-library';
+
+type ApyDetailsProps = DlProps;
+
+const ApyDetails = ({ direction = 'column', gap = 'spacing2', ...props }: ApyDetailsProps): JSX.Element => {
+  return <Dl direction={direction} gap={gap} {...props} />;
+};
+
+export { ApyDetails };
+export type { ApyDetailsProps };

src/components/ApyDetails/ApyDetailsGroup.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import { Dd, Dl, DlGroup, DlGroupProps, Dt } from '@/component-library';
+
+type Props = {
+  title: ReactNode;
+};
+
+type InheritAttrs = Omit<DlGroupProps, keyof Props>;
+
+type ApyDetailsGroupProps = Props & InheritAttrs;
+
+const ApyDetailsGroup = ({
+  direction = 'column',
+  gap = 'spacing1',
+  alignItems = 'flex-start',
+  title,
+  children,
+  ...props
+}: ApyDetailsGroupProps): JSX.Element => (
+  <DlGroup direction={direction} gap={gap} alignItems={alignItems} {...props}>
+    <Dt weight='bold' color='primary'>
+      {title}
+    </Dt>
+    <Dd>
+      <Dl direction='column' alignItems='flex-start' gap='spacing0'>
+        {children}
+      </Dl>
+    </Dd>
+  </DlGroup>
+);
+
+export { ApyDetailsGroup };
+export type { ApyDetailsGroupProps };

src/components/ApyDetails/ApyDetailsGroupItem.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+import { Dd, DlGroup, DlGroupProps, Dt } from '@/component-library';
+
+type Props = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+type InheritAttrs = Omit<DlGroupProps, keyof Props | 'children'>;
+
+type ApyDetailsGroupItemProps = Props & InheritAttrs;
+
+const ApyDetailsGroupItem = ({
+  gap = 'spacing1',
+  wrap = 'wrap',
+  label,
+  value,
+  ...props
+}: ApyDetailsGroupItemProps): JSX.Element => (
+  <DlGroup wrap={wrap} gap={gap} {...props}>
+    <Dd weight='medium' color='tertiary'>
+      {label}:
+    </Dd>
+    <Dt weight='medium' color='primary'>
+      {value}
+    </Dt>
+  </DlGroup>
+);
+
+export { ApyDetailsGroupItem };
+export type { ApyDetailsGroupItemProps };

src/components/ApyDetails/index.tsx

@@ -0,0 +1,6 @@
+export type { ApyDetailsProps } from './ApyDetails';
+export { ApyDetails } from './ApyDetails';
+export type { ApyDetailsGroupProps } from './ApyDetailsGroup';
+export { ApyDetailsGroup } from './ApyDetailsGroup';
+export type { ApyDetailsGroupItemProps } from './ApyDetailsGroupItem';
+export { ApyDetailsGroupItem } from './ApyDetailsGroupItem';