@ssa-ui-kit/templates 2.28.3 → 2.29.0

package/dist/index.js

@@ -4073,6 +4073,205 @@ const KeeperRunsWithLoader = ({
     ...props
   })
 });
+;// ./src/projects/fintech/components/MarginInfo/styles.ts
+
+function MarginInfo_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+const Table = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt10"
+} : 0)( true ? {
+  name: "b6wrti",
+  styles: "display:flex;flex-direction:column;width:100%"
+} : 0);
+const TableHeader = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt9"
+} : 0)( true ? {
+  name: "261bi6",
+  styles: "display:flex;flex-direction:row;align-items:center;margin-bottom:5px"
+} : 0);
+const HeaderRow = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt8"
+} : 0)( true ? {
+  name: "1cdny4y",
+  styles: "display:flex;flex-direction:row;gap:16px;flex:1;justify-content:flex-start"
+} : 0);
+const HeaderLabel = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt7"
+} : 0)( true ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : 0);
+const HeaderCell = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt6"
+} : 0)("font-size:14px;font-weight:600;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";flex:1;text-align:left;margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
+const TableBody = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt5"
+} : 0)( true ? {
+  name: "1xc5zxn",
+  styles: "display:flex;flex-direction:column;gap:6px"
+} : 0);
+const TableRow = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt4"
+} : 0)("display:flex;flex-direction:row;align-items:center;background:", ({
+  theme
+}) => theme.colors.greyLighter, ";border-radius:8px;padding:5px 7px;" + ( true ? "" : 0));
+const RowLabel = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt3"
+} : 0)("font-size:13px;font-weight:600;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";flex:1;" + ( true ? "" : 0));
+const RowCells = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt2"
+} : 0)( true ? {
+  name: "z08xak",
+  styles: "display:flex;flex-direction:row;gap:16px;flex:2;justify-content:flex-start"
+} : 0);
+const Cell = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1squpxt1"
+} : 0)("font-size:13px;font-weight:400;color:", ({
+  theme
+}) => theme.colors.greyDarker, ";flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
+const ButtonsWrapper = /*#__PURE__*/base_default()(core_namespaceObject.Wrapper,  true ? {
+  target: "e1squpxt0"
+} : 0)( true ? {
+  name: "1qxwwz4",
+  styles: "display:flex;flex-direction:row;gap:12px;width:100%;margin-top:auto"
+} : 0);
+const baseButtonStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;display:flex;justify-content:center;height:34px;font-size:14px;font-weight:500;color:", theme.colors.white, ";border:none;border-radius:8px;cursor:pointer;&:disabled{background:", theme.colors.grey, ";cursor:not-allowed;}&>span,&>*{color:inherit;}" + ( true ? "" : 0),  true ? "" : 0);
+const BorrowButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseButtonStyles(theme), ";background:linear-gradient(\n    247deg,\n    ", theme.colors.blueLighter, " 14.71%,\n    ", theme.colors.blue, " 85.29%\n  );&:hover{background:linear-gradient(\n      247deg,\n      ", theme.colors.blueButtonHoverGradientFrom, " 14.71%,\n      ", theme.colors.blueButtonHoverGradientTo, " 85.29%\n    );box-shadow:0 4px 12px ", theme.colors.blueLighter40, ";}&:active{background:", theme.colors.blueButtonActive, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const RepayButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseButtonStyles(theme), ";background:linear-gradient(\n    99.26deg,\n    ", theme.colors.green, " -7.01%,\n    ", theme.colors.greenLighter, " 92.87%\n  );&:hover{background:linear-gradient(\n      99.26deg,\n      ", theme.colors.greenDark, " -7.01%,\n      ", theme.colors.green, " 92.87%\n    );box-shadow:0 4px 12px ", theme.colors.green40, ";}&:active{background:", theme.colors.greenDark, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const widgetCardStyles =  true ? {
+  name: "1fx6k7",
+  styles: "grid-area:margin-info"
+} : 0;
+const wrapperStyles =  true ? {
+  name: "1fx6k7",
+  styles: "grid-area:margin-info"
+} : 0;
+const headerStyles =  true ? {
+  name: "1ykowef",
+  styles: "margin-bottom:0"
+} : 0;
+const contentStyles =  true ? {
+  name: "4rbiyk",
+  styles: "display:flex;flex-direction:column;max-width:initial;height:100%"
+} : 0;
+;// ./src/projects/fintech/components/MarginInfo/MarginInfo.tsx
+function MarginInfo_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+const MarginInfo = ({
+  multiplier,
+  base,
+  quote,
+  baseBorrowed,
+  baseInterestRate,
+  baseTotalInterest,
+  quoteBorrowed,
+  quoteInterestRate,
+  quoteTotalInterest,
+  showInterestRate = false,
+  disableBorrow = false,
+  disableRepay = false,
+  onBorrow,
+  onRepay
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const theme = (0,react_namespaceObject.useTheme)();
+  const title = multiplier ? `${t('marginInfo.title')} (x${multiplier})` : t('marginInfo.title');
+  return (0,jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ClassNames, {
+    children: ({
+      css
+    }) => (0,jsx_runtime_namespaceObject.jsxs)(WidgetCard, {
+      title: title,
+      css: widgetCardStyles,
+      wrapperClassName: css(wrapperStyles),
+      headerClassName: css(headerStyles),
+      contentClassName: css(contentStyles),
+      children: [(0,jsx_runtime_namespaceObject.jsxs)(Table, {
+        children: [(0,jsx_runtime_namespaceObject.jsx)(TableHeader, {
+          children: (0,jsx_runtime_namespaceObject.jsxs)(HeaderRow, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)(HeaderLabel, {}), (0,jsx_runtime_namespaceObject.jsx)(HeaderCell, {
+              children: base
+            }), (0,jsx_runtime_namespaceObject.jsx)(HeaderCell, {
+              children: quote
+            })]
+          })
+        }), (0,jsx_runtime_namespaceObject.jsxs)(TableBody, {
+          children: [(0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
+              children: "Borrowed"
+            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
+              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: baseBorrowed
+              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: quoteBorrowed
+              })]
+            })]
+          }), showInterestRate && (0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
+              children: "Interest Rate"
+            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
+              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: baseInterestRate
+              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: quoteInterestRate
+              })]
+            })]
+          }), (0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
+            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
+              children: "Total Interest"
+            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
+              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: baseTotalInterest
+              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
+                children: quoteTotalInterest
+              })]
+            })]
+          })]
+        })]
+      }), (0,jsx_runtime_namespaceObject.jsxs)(ButtonsWrapper, {
+        children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
+          variant: "custom",
+          css: BorrowButton(theme),
+          onClick: onBorrow,
+          isDisabled: disableBorrow || !onBorrow,
+          text: "Borrow"
+        }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
+          variant: "custom",
+          css: RepayButton(theme),
+          onClick: onRepay,
+          isDisabled: disableRepay || !onRepay,
+          text: "Repay"
+        })]
+      })]
+    })
+  });
+};
+var MarginInfo_ref =  true ? {
+  name: "1fx6k7",
+  styles: "grid-area:margin-info"
+} : 0;
+const MarginInfoWithLoader = ({
+  isFetching,
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsx)(WithWidgetLoader, {
+  title: 'marginInfo.title',
+  css: MarginInfo_ref,
+  isFetching: isFetching,
+  children: (0,jsx_runtime_namespaceObject.jsx)(MarginInfo, {
+    ...props
+  })
+});
 ;// ./src/projects/fintech/pages/BotPage/components/InformationTab/styles.ts
 
 const infoCardWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;display:flex;flex-direction:column;align-items:flex-start;width:max-content;min-width:100%;background:", theme.colors.greyLighter, ";padding:4px 10px;border-radius:6px;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none;user-select:none;&::before{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;box-shadow:0 10px 40px 0 ", theme.colors.greyShadow, ";content:'';}&:active{background:", theme.colors.white, ";&::before{border-radius:6px;box-shadow:0 10px 40px 0 ", theme.colors.greyShadow24, ";}}" + ( true ? "" : 0),  true ? "" : 0);
@@ -8037,9 +8236,9 @@ const WidgetsCustomLayoutTemplate = /*#__PURE__*/(/* unused pure expression or s
 
 const WidgetLayoutDashboard = /*#__PURE__*/base_default()(WidgetsLayoutTemplate,  true ? {
   target: "e1uw7r3m0"
-} : 0)("grid-template-rows:repeat(12, 215px);grid-template-areas:'balance balance' 'max max' 'funds-place-order roles' 'hourly bots' 'weighted-mean-prices-btc weighted-mean-prices-eth' 'orders orders' 'turnover turnover' 'pnl pnl' 'cumulative cumulative' 'rebalancing rebalancing' 'positions profitability' 'keeper-runs keeper-runs';", ({
+} : 0)("grid-template-rows:repeat(12, 215px);grid-template-areas:'balance balance' 'max max' 'funds-place-order roles' 'hourly bots' 'weighted-mean-prices-btc weighted-mean-prices-eth' 'orders orders' 'turnover turnover' 'pnl pnl' 'cumulative cumulative' 'rebalancing rebalancing' 'positions profitability' 'keeper-runs margin-info';", ({
   theme
-}) => theme.mediaQueries.md, "{grid-template-columns:calc(36% - 7px) calc(14% - 7px) calc(25% - 7px) calc(25% - 7px);grid-template-rows:repeat(6, 215px);grid-template-areas:'balance max funds-place-order roles' 'hourly bots weighted-mean-prices-btc weighted-mean-prices-eth' 'orders orders pnl pnl' 'turnover turnover cumulative cumulative' 'rebalancing rebalancing positions profitability' 'keeper-runs keeper-runs . .';margin-bottom:20px;}" + ( true ? "" : 0));
+}) => theme.mediaQueries.md, "{grid-template-columns:calc(36% - 7px) calc(14% - 7px) calc(25% - 7px) calc(25% - 7px);grid-template-rows:repeat(6, 215px);grid-template-areas:'balance max funds-place-order roles' 'hourly bots weighted-mean-prices-btc weighted-mean-prices-eth' 'orders orders pnl pnl' 'turnover turnover cumulative cumulative' 'rebalancing rebalancing positions profitability' 'keeper-runs keeper-runs margin-info margin-info';margin-bottom:20px;}" + ( true ? "" : 0));
 ;// ./src/projects/fintech/pages/Dashboard/FinTechDashboard.tsx
 function FinTechDashboard_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -8318,7 +8517,44 @@ const FinTechDashboard = () => {
         data: graphsData,
         period: period,
         isFetching: isGraphStatLoading
-      }, "keeperRuns")]
+      }, "keeperRuns"), (0,jsx_runtime_namespaceObject.jsx)(MarginInfoWithLoader, {
+        multiplier: 3,
+        base: "USDT",
+        quote: "BTC",
+        baseBorrowed: (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: ["100 ", (0,jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "USD"
+          }), " \u22480.000000001 ", (0,jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "BTC"
+          }), " (x2)"]
+        }),
+        baseInterestRate: "5.2%",
+        baseTotalInterest: (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: ["25 ", (0,jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "USDT"
+          }), " (x1.5)"]
+        }),
+        quoteBorrowed: (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: ["\u22480.000000001 ", (0,jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "BTC"
+          })]
+        }),
+        quoteInterestRate: "4.8%",
+        quoteTotalInterest: (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+          children: ["0.0024 ", (0,jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "BTC"
+          })]
+        }),
+        disableBorrow: false,
+        disableRepay: false,
+        onBorrow: () => {
+          alert('Borrow action triggered');
+        },
+        onRepay: () => {
+          alert('Repay action triggered');
+        },
+        isFetching: isStatLoading
+      })]
     })]
   });
 };