Skip to content

Commit b850217

Browse files
windatangwindatang
committed
Merge remote-tracking branch 'origin/released'
1 parent 9a1bdc9 commit b850217

File tree

7 files changed

+525
-193
lines changed

7 files changed

+525
-193
lines changed

‎packages/common-resources/static-resources/src/i18n/en_US/tables.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,4 +246,7 @@ export default {
246246
labelAprFee: "Protocol APR:",
247247
labelAprEvent: "Activity APR:",
248248
label24Rewards: "24h Rewards",
249+
labelRewardFee: "Fees:",
250+
labelRewardReward: "Rewards:",
251+
labelRewardExtra: "Extra Rewards:",
249252
};

‎packages/common-resources/static-resources/src/loopring-interface/CoinInterface.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
} from "../constant";
88
import * as sdk from "@loopring-web/loopring-sdk";
99
import React from "react";
10-
import { TokenInfo } from "@loopring-web/loopring-sdk";
1110

1211
export type CoinKey<R> = keyof R;
1312
export type PairKey<P> = keyof P;
@@ -134,8 +133,8 @@ export type DeFiCalcData<T> = {
134133
};
135134

136135
export type DualCalcData<R, B = IBData<any>> = sdk.CalDualResult & {
137-
sellToken?: TokenInfo;
138-
buyToken?: TokenInfo;
136+
sellToken?: sdk.TokenInfo;
137+
buyToken?: sdk.TokenInfo;
139138
coinSell: B;
140139
dualViewInfo: R;
141140
balance: { [key: string]: sdk.DualBalance };
@@ -281,13 +280,13 @@ export type MyAmmLP<T> = {
281280
rewardToken2?: CoinInfo<T> | undefined;
282281
rewardDollar?: number | undefined;
283282
totalLpAmount?: number | undefined;
284-
285283
feeA24: number | undefined;
286284
feeB24: number | undefined;
287285
feeDollar24: number | undefined;
288286
reward24: number | undefined;
289287
reward224: number | undefined;
290288
rewardDollar24: number | undefined;
289+
extraRewards24: Array<sdk.TokenVolumeV3> | undefined;
291290
};
292291

293292
export type TradeFloat = {

‎packages/component-lib/src/components/block/AmmPairDetail.tsx‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { Avatar, Box, Typography } from "@mui/material";
2+
import React from "react";
3+
24
import {
35
EmptyValueTag,
46
getValuePrecisionThousand,
7+
myLog,
58
SoursURL,
69
} from "@loopring-web/common-resources";
710
import { CoinSource, useSettings } from "../../stores";
811
import { AvatarCoin } from "../basic-lib";
912
import { WithTranslation, withTranslation } from "react-i18next";
13+
import styled from "@emotion/styled";
1014

1115
export const AmmPairDetail = ({
1216
coinA,
@@ -283,3 +287,204 @@ export const AmmAPRDetail = withTranslation("tables")(
283287
);
284288
}
285289
) as (props: { self?: number; event?: number; fee?: number }) => JSX.Element;
290+
291+
const TypographyStyle = styled(Typography)`
292+
.rewardItem:not(:last-child) {
293+
&:after {
294+
display: inline-flex;
295+
content: "+";
296+
padding: 0 ${({ theme }) => theme.unit + "px"};
297+
}
298+
}
299+
` as typeof Typography;
300+
type AmmPairDetailProps = {
301+
feeA: number | undefined;
302+
feeB: number | undefined;
303+
rewards: Array<{ tokenSymbol: string; amount: number | undefined }>;
304+
extraRewards: Array<{ tokenSymbol: string; amount: number | undefined }>;
305+
tokenMap: { [key: string]: any };
306+
coinA: string;
307+
coinB: string;
308+
};
309+
export const AmmRewardsDetail = withTranslation("tables")(
310+
({
311+
feeA,
312+
feeB,
313+
rewards,
314+
extraRewards,
315+
tokenMap,
316+
coinA,
317+
coinB,
318+
t,
319+
}: AmmPairDetailProps & WithTranslation) => {
320+
// labelRewardFee
321+
// labelRewardReward
322+
// labelRewardExtra
323+
myLog("coinB", coinB);
324+
return (
325+
<Box padding={1.5} paddingLeft={1}>
326+
<Typography
327+
component={"span"}
328+
display={"flex"}
329+
flexDirection={"row"}
330+
justifyContent={"space-between"}
331+
alignItems={"center"}
332+
style={{ textTransform: "capitalize" }}
333+
color={"textPrimary"}
334+
>
335+
<Typography
336+
component={"span"}
337+
color={"var(--color-text-primary)"}
338+
variant={"body2"}
339+
marginLeft={1 / 2}
340+
height={20}
341+
lineHeight={"20px"}
342+
>
343+
{t("labelRewardFee")}
344+
</Typography>
345+
346+
<TypographyStyle
347+
component={"span"}
348+
color={"var(--color-text-primary)"}
349+
variant={"body2"}
350+
height={20}
351+
marginLeft={10}
352+
lineHeight={"20px"}
353+
>
354+
<Typography component={"span"} className={"rewardItem"}>
355+
{(feeA
356+
? getValuePrecisionThousand(
357+
feeA,
358+
tokenMap[coinA].precision,
359+
tokenMap[coinA].precision,
360+
tokenMap[coinA].precision,
361+
true
362+
)
363+
: EmptyValueTag) + ` ${coinA}`}
364+
</Typography>
365+
<Typography component={"span"} className={"rewardItem"}>
366+
{(feeB
367+
? getValuePrecisionThousand(
368+
feeB,
369+
tokenMap[coinB].precision,
370+
tokenMap[coinB].precision,
371+
tokenMap[coinB].precision,
372+
true
373+
)
374+
: EmptyValueTag) + ` ${coinB}`}
375+
</Typography>
376+
</TypographyStyle>
377+
</Typography>
378+
<Typography
379+
component={"span"}
380+
display={"flex"}
381+
flexDirection={"row"}
382+
justifyContent={"space-between"}
383+
alignItems={"center"}
384+
style={{ textTransform: "capitalize" }}
385+
color={"textPrimary"}
386+
>
387+
<Typography
388+
component={"span"}
389+
color={"var(--color-text-primary)"}
390+
variant={"body2"}
391+
marginLeft={1 / 2}
392+
height={20}
393+
lineHeight={"20px"}
394+
>
395+
{t("labelRewardReward")}
396+
</Typography>
397+
<TypographyStyle
398+
component={"span"}
399+
color={"var(--color-text-primary)"}
400+
variant={"body2"}
401+
height={20}
402+
marginLeft={10}
403+
lineHeight={"20px"}
404+
>
405+
{rewards.length ? (
406+
<>
407+
{rewards.map((item: any, index: number) => {
408+
return (
409+
<React.Fragment key={item.id + index}>
410+
{item?.amount ? (
411+
<Typography component={"span"} className={"rewardItem"}>
412+
{getValuePrecisionThousand(
413+
item.amount,
414+
tokenMap[item.symbol].precision,
415+
tokenMap[item.symbol].precision,
416+
tokenMap[item.symbol].precision,
417+
true
418+
)` ${coinA}`}{" "}
419+
</Typography>
420+
) : (
421+
<></>
422+
)}
423+
</React.Fragment>
424+
);
425+
})}
426+
</>
427+
) : (
428+
EmptyValueTag
429+
)}
430+
</TypographyStyle>
431+
</Typography>
432+
<Typography
433+
component={"span"}
434+
display={"flex"}
435+
flexDirection={"row"}
436+
justifyContent={"space-between"}
437+
alignItems={"center"}
438+
style={{ textTransform: "capitalize" }}
439+
color={"textPrimary"}
440+
>
441+
<Typography
442+
component={"span"}
443+
color={"var(--color-text-primary)"}
444+
variant={"body2"}
445+
marginLeft={1 / 2}
446+
height={20}
447+
lineHeight={"20px"}
448+
>
449+
{t("labelRewardExtra")}
450+
</Typography>
451+
452+
<TypographyStyle
453+
component={"span"}
454+
color={"var(--color-text-primary)"}
455+
variant={"body2"}
456+
height={20}
457+
marginLeft={10}
458+
lineHeight={"20px"}
459+
>
460+
{extraRewards.length ? (
461+
<>
462+
{extraRewards.map((item: any, index: number) => {
463+
return (
464+
<React.Fragment key={item.id + index}>
465+
{item?.amount ? (
466+
<Typography component={"span"} className={"rewardItem"}>
467+
{getValuePrecisionThousand(
468+
item.amount,
469+
tokenMap[item.symbol].precision,
470+
tokenMap[item.symbol].precision,
471+
tokenMap[item.symbol].precision,
472+
true
473+
)` ${coinA}`}{" "}
474+
</Typography>
475+
) : (
476+
<></>
477+
)}
478+
</React.Fragment>
479+
);
480+
})}
481+
</>
482+
) : (
483+
EmptyValueTag
484+
)}
485+
</TypographyStyle>
486+
</Typography>
487+
</Box>
488+
);
489+
}
490+
) as (props: AmmPairDetailProps) => JSX.Element;

‎packages/component-lib/src/components/tableList/myPoolTable/Interface.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ export type MyPoolTableProps<R> = {
2828
filter: { searchValue: string };
2929
handleFilterChange: (props: { searchValue: string }) => void;
3030
forexMap: ForexMap<Currency>;
31+
idIndex: { [key: string]: string };
3132
tokenMap: LoopringMap<TokenInfo & { tradePairs: Array<CoinKey<R>> }>;
33+
tokenPrices: { [key in keyof R]: number };
3234
allowTrade?: any;
3335
tableHeight?: number;
3436
showFilter?: boolean;

0 commit comments

Comments
 (0)