Skip to content

Commit a5a9043

Browse files
author
mark
committed
# This is a combination of 8 commits.
# This is the 1st commit message: DEX-2357 [SDK] Support RWA markets add RWA hooks > `useRwaSymbolsInfo`,`useRwaSymbolsInfoStore`,`useGetRwaSymbolInfo` update markets, support RWA tab/tabView/Cell add locale fileds export GradientText add RWA api result type update readme, add config env part DEX-2357 [SDK] Support RWA markets apps/storybook/src/stories/base/icon/icon.stories.tsx > update icon storybook packages/i18n > update i18n packages/ui > add new icon(NewsFill) other > add countdown for symbolFullBar > add widgets DEX-2357 [SDK] Support RWA markets position cell add RWA status view DEX-2357 [SDK] Support RWA markets OrderEntry ui # Conflicts: # packages/i18n/locales/de.json # packages/i18n/locales/en.json # packages/i18n/locales/es.json # packages/i18n/locales/fr.json # packages/i18n/locales/id.json # packages/i18n/locales/it.json # packages/i18n/locales/ja.json # packages/i18n/locales/ko.json # packages/i18n/locales/nl.json # packages/i18n/locales/pl.json # packages/i18n/locales/pt.json # packages/i18n/locales/ru.json # packages/i18n/locales/tr.json # packages/i18n/locales/uk.json # packages/i18n/locales/vi.json # packages/i18n/locales/zh.json # packages/i18n/src/locale/module/common.ts # This is the commit message #2: DEX-2357 [SDK] Support RWA markets modify isCurrentlyTrading logic update RWA tooltip countdown display # This is the commit message #3: DEX-2357 [SDK] Support RWA markets packages/trading/src/components/desktop/dataList/dataList.ui.tsx > fix warning issue packages/ui/src/toast/Toaster.tsx > update toast.custom packages/ui/src/icon/newsFill.tsx > update svg path packages/trading/src/components/desktop/notify/rwaNotification.tsx > RWA outside markets notify view packages/trading/src/components/base/countdown.tsx > coudown view packages/trading/src/pages/trading/trading.ui.mobile.tsx packages/markets/src/components/symbolInfoBar/symbolInfoBar.script.ts packages/markets/src/components/symbolInfoBar/symbolInfoBar.ui.tsx > add RWA status and RWA countdown alert packages/markets/src/components/symbolInfoBarFull/rwaTooltip.tsx > adapter mWeb packages/i18n > add new keys # This is the commit message #4: DEX-2357 [SDK] Support RWA markets packages/trading/src/pages/trading/trading.ui.mobile.tsx > update mWeb RWA status bar # This is the commit message #5: DEX-2357 [SDK] Support RWA markets add lose i18n # This is the commit message #6: DEX-2357 [SDK] Support RWA markets add RWA tab for mWeb markets # This is the commit message #7: DEX-2357 [SDK] Support RWA markets close outside markets hours alert # This is the commit message #8: fix RWA tooltip click DEX-2357 add initial margin input add locales DEX-2357 fix margin input DEX-2357 add initial margin input locales and RWA status bar
1 parent aaab870 commit a5a9043

File tree

69 files changed

+1965
-335
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1965
-335
lines changed

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,33 @@ Start building with Orderly SDKs using these ready-to-use templates:
4646
- [Remix Template](https://github.com/OrderlyNetwork/orderly-js-sdk-remix-template)
4747

4848
- [Create React App Template](https://github.com/OrderlyNetwork/orderly-js-sdk-cra-template)
49+
50+
## Env config
51+
52+
- env
53+
54+
config env: dev, qa, staging, prod
55+
56+
- networkId
57+
58+
mainnet/testnet
59+
60+
- brokerId
61+
62+
set your broker id
63+
64+
- brokerName
65+
66+
set broker name
67+
68+
- theme
69+
70+
orderly/custom
71+
72+
- usePrivy
73+
74+
true/false
75+
76+
```
77+
http://localhost:5173/en/perp/PERP_ETH_USDC?env=prod&networkId=mainnet&brokerId=demo&broderName=Orderly&theme=orderly&usePrivy=false
78+
```

‎apps/storybook/src/stories/base/icon/icon.stories.tsx‎

Lines changed: 146 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,39 @@ import {
4848
CaretLeftIcon,
4949
PlusIcon,
5050
CaretRightIcon,
51+
// 新增的图标
52+
CalendarMinusIcon,
53+
ReduceIcon,
54+
ArrowLeftRightSquareFill,
55+
ArrowRightUpSquareFillIcon,
56+
AssetIcon,
57+
BarChartIcon,
58+
BattleIcon,
59+
OrderlyIcon,
60+
EsOrderlyIcon,
61+
InfoCircleIcon,
62+
WalletIcon,
63+
TraderMobileIcon,
64+
AffiliateIcon,
65+
TradingRewardsIcon,
66+
PortfolioActiveIcon,
67+
PortfolioInactiveIcon,
68+
TradingActiveIcon,
69+
TradingIcon,
70+
TradingInactiveIcon,
71+
LeaderboardActiveIcon,
72+
LeaderboardInactiveIcon,
73+
MarketsActiveIcon,
74+
MarketsInactiveIcon,
75+
EmptyStateIcon,
76+
VectorIcon,
77+
SwapHorizIcon,
78+
PeopleIcon,
79+
PersonIcon,
80+
TradingLeftNavIcon,
81+
VaultsIcon,
82+
LeftNavVaultsIcon,
83+
NewsFillIcon,
5184
} from "@orderly.network/ui";
5285

5386
const meta: Meta<typeof Icon> = {
@@ -94,53 +127,122 @@ const meta: Meta<typeof Icon> = {
94127
export default meta;
95128
type Story = StoryObj<typeof meta>;
96129

130+
// 图标配置数组，包含图标组件和名称
131+
const iconConfigs = [
132+
// 基础图标
133+
{ component: CloseIcon, name: "CloseIcon" },
134+
{ component: CheckIcon, name: "CheckIcon" },
135+
{ component: ChevronDownIcon, name: "ChevronDownIcon" },
136+
{ component: ChevronUpIcon, name: "ChevronUpIcon" },
137+
{ component: ChevronLeftIcon, name: "ChevronLeftIcon" },
138+
{ component: ChevronRightIcon, name: "ChevronRightIcon" },
139+
{ component: CaretUpIcon, name: "CaretUpIcon" },
140+
{ component: CaretDownIcon, name: "CaretDownIcon" },
141+
{ component: CaretLeftIcon, name: "CaretLeftIcon" },
142+
{ component: CaretRightIcon, name: "CaretRightIcon" },
143+
{ component: SettingIcon, name: "SettingIcon" },
144+
{ component: SettingFillIcon, name: "SettingFillIcon" },
145+
{ component: PlusIcon, name: "PlusIcon" },
146+
{ component: ReduceIcon, name: "ReduceIcon" },
147+
148+
// 填充图标
149+
{ component: CloseSquareFillIcon, name: "CloseSquareFillIcon" },
150+
{ component: CloseCircleFillIcon, name: "CloseCircleFillIcon" },
151+
{ component: CheckedCircleFillIcon, name: "CheckedCircleFillIcon" },
152+
{ component: CheckedSquareFillIcon, name: "CheckedSquareFillIcon" },
153+
{ component: CheckSquareEmptyIcon, name: "CheckSquareEmptyIcon" },
154+
{ component: CircleOutlinedIcon, name: "CircleOutlinedIcon" },
155+
{ component: SquareOutlinedIcon, name: "SquareOutlinedIcon" },
156+
{ component: ExclamationFillIcon, name: "ExclamationFillIcon" },
157+
{ component: QuestionFillIcon, name: "QuestionFillIcon" },
158+
{ component: InfoCircleIcon, name: "InfoCircleIcon" },
159+
160+
// 箭头图标
161+
{ component: ArrowLeftRightIcon, name: "ArrowLeftRightIcon" },
162+
{ component: ArrowDownUpIcon, name: "ArrowDownUpIcon" },
163+
{ component: ArrowUpSquareFillIcon, name: "ArrowUpSquareFillIcon" },
164+
{ component: ArrowDownSquareFillIcon, name: "ArrowDownSquareFillIcon" },
165+
{ component: ArrowLeftRightSquareFill, name: "ArrowLeftRightSquareFill" },
166+
{ component: ArrowRightUpSquareFillIcon, name: "ArrowRightUpSquareFillIcon" },
167+
{ component: ArrowUpShortIcon, name: "ArrowUpShortIcon" },
168+
{ component: ArrowDownShortIcon, name: "ArrowDownShortIcon" },
169+
{ component: ArrowLeftShortIcon, name: "ArrowLeftShortIcon" },
170+
{ component: ArrowRightShortIcon, name: "ArrowRightShortIcon" },
171+
172+
// 功能图标
173+
{ component: FeeTierIcon, name: "FeeTierIcon" },
174+
{ component: EditIcon, name: "EditIcon" },
175+
{ component: EyeIcon, name: "EyeIcon" },
176+
{ component: EyeCloseIcon, name: "EyeCloseIcon" },
177+
{ component: ShareIcon, name: "ShareIcon" },
178+
{ component: RefreshIcon, name: "RefreshIcon" },
179+
{ component: CopyIcon, name: "CopyIcon" },
180+
{ component: CalendarIcon, name: "CalendarIcon" },
181+
{ component: CalendarMinusIcon, name: "CalendarMinusIcon" },
182+
{ component: ServerFillIcon, name: "ServerFillIcon" },
183+
{ component: TokenIcon, name: "TokenIcon" },
184+
{ component: ChainIcon, name: "ChainIcon" },
185+
{ component: WalletIcon, name: "WalletIcon" },
186+
187+
// 排序图标
188+
{ component: SortingAscIcon, name: "SortingAscIcon" },
189+
{ component: SortingDescIcon, name: "SortingDescIcon" },
190+
{ component: SortingIcon, name: "SortingIcon" },
191+
192+
// 应用图标
193+
{ component: OrderlyIcon, name: "OrderlyIcon" },
194+
{ component: EsOrderlyIcon, name: "EsOrderlyIcon" },
195+
{ component: AssetIcon, name: "AssetIcon" },
196+
{ component: BarChartIcon, name: "BarChartIcon" },
197+
{ component: BattleIcon, name: "BattleIcon" },
198+
{ component: TraderMobileIcon, name: "TraderMobileIcon" },
199+
{ component: AffiliateIcon, name: "AffiliateIcon" },
200+
{ component: TradingRewardsIcon, name: "TradingRewardsIcon" },
201+
202+
// 导航图标
203+
{ component: PortfolioActiveIcon, name: "PortfolioActiveIcon" },
204+
{ component: PortfolioInactiveIcon, name: "PortfolioInactiveIcon" },
205+
{ component: TradingActiveIcon, name: "TradingActiveIcon" },
206+
{ component: TradingIcon, name: "TradingIcon" },
207+
{ component: TradingInactiveIcon, name: "TradingInactiveIcon" },
208+
{ component: TradingLeftNavIcon, name: "TradingLeftNavIcon" },
209+
{ component: LeaderboardActiveIcon, name: "LeaderboardActiveIcon" },
210+
{ component: LeaderboardInactiveIcon, name: "LeaderboardInactiveIcon" },
211+
{ component: MarketsActiveIcon, name: "MarketsActiveIcon" },
212+
{ component: MarketsInactiveIcon, name: "MarketsInactiveIcon" },
213+
{ component: VaultsIcon, name: "VaultsIcon" },
214+
{ component: LeftNavVaultsIcon, name: "LeftNavVaultsIcon" },
215+
216+
// 其他图标
217+
{ component: EmptyStateIcon, name: "EmptyStateIcon" },
218+
{ component: VectorIcon, name: "VectorIcon" },
219+
{ component: SwapHorizIcon, name: "SwapHorizIcon" },
220+
{ component: PeopleIcon, name: "PeopleIcon" },
221+
{ component: PersonIcon, name: "PersonIcon" },
222+
{ component: NewsFillIcon, name: "NewsFillIcon" },
223+
];
224+
97225
export const Icons: Story = {
98226
render: (args) => {
99227
return (
100-
<Box width={"800px"} height={"600px"}>
101-
<Flex gap={3} wrap={"wrap"}>
102-
<CloseIcon {...args} />
103-
<CheckIcon {...args} />
104-
<ChevronDownIcon {...args} />
105-
<ChevronUpIcon {...args} />
106-
<CaretUpIcon {...args} />
107-
<CaretDownIcon {...args} />
108-
<CaretLeftIcon {...args} />
109-
<CaretRightIcon {...args} />
110-
<ChevronLeftIcon {...args} />
111-
<ChevronRightIcon {...args} />
112-
<SettingIcon {...args} />
113-
<SettingFillIcon {...args} />
114-
<CloseSquareFillIcon {...args} />
115-
<CloseCircleFillIcon {...args} />
116-
<CheckedCircleFillIcon {...args} />
117-
<CheckedSquareFillIcon {...args} />
118-
<CheckSquareEmptyIcon {...args} />
119-
<PlusIcon {...args} />
120-
<CircleOutlinedIcon {...args} />
121-
<SquareOutlinedIcon {...args} />
122-
<ExclamationFillIcon {...args} />
123-
<QuestionFillIcon {...args} />
124-
<ArrowLeftRightIcon {...args} />
125-
<ArrowDownUpIcon {...args} />
126-
<ArrowUpSquareFillIcon {...args} />
127-
<ArrowDownSquareFillIcon {...args} />
128-
<FeeTierIcon {...args} />
129-
<EditIcon {...args} />
130-
<EyeIcon {...args} />
131-
<ShareIcon {...args} />
132-
<EyeCloseIcon {...args} />
133-
<RefreshIcon {...args} />
134-
<CalendarIcon {...args} />
135-
<CopyIcon {...args} />
136-
<ServerFillIcon {...args} />
137-
<SortingAscIcon {...args} />
138-
<SortingDescIcon {...args} />
139-
<ArrowUpShortIcon {...args} />
140-
<ArrowDownShortIcon {...args} />
141-
<ArrowLeftShortIcon {...args} />
142-
<ArrowRightShortIcon {...args} />
143-
<SortingIcon {...args} />
228+
<Box width={"100%"} height={"800px"} style={{ overflow: "auto" }}>
229+
<Flex gap={4} wrap={"wrap"} p={4}>
230+
{iconConfigs.map(({ component: IconComponent, name }) => (
231+
<Flex
232+
key={name}
233+
direction={"column"}
234+
itemAlign={"center"}
235+
gap={2}
236+
p={3}
237+
className="oui-bg-base-9 oui-rounded-md"
238+
style={{
239+
minWidth: "120px",
240+
}}
241+
>
242+
<IconComponent {...(args as any)} />
243+
{name}
244+
</Flex>
245+
))}
144246
</Flex>
145247
</Box>
146248
);

‎packages/hooks/src/orderly/appStore.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export type AppState = {
2727
accountInfo?: API.AccountInfo;
2828
// positions: API.PositionExt[];
2929
symbolsInfo?: Record<string, API.SymbolExt>;
30+
rwaSymbolsInfo?: Record<string, API.RwaSymbol>;
3031
fundingRates?: Record<string, API.FundingRate>;
3132
portfolio: Portfolio;
3233
appState: AppStatus;
@@ -37,6 +38,7 @@ export type AppActions = {
3738
setAccountInfo: (accountInfo: API.AccountInfo) => void;
3839
// setPositions: (positions: API.PositionExt[]) => void;
3940
setSymbolsInfo: (symbolsInfo: Record<string, API.SymbolExt>) => void;
41+
setRwaSymbolsInfo: (rwaSymbolsInfo: Record<string, API.RwaSymbol>) => void;
4042
setFundingRates: (fundingRates: Record<string, API.FundingRate>) => void;
4143
updateAppStatus: (key: keyof AppStatus, value: boolean) => void;
4244
updatePortfolio: (
@@ -114,6 +116,15 @@ export const useAppStore = create<
114116
// "setSymbolsInfo"
115117
);
116118
},
119+
setRwaSymbolsInfo: (rwaSymbolsInfo: Record<string, API.RwaSymbol>) => {
120+
set(
121+
(state) => {
122+
state.rwaSymbolsInfo = rwaSymbolsInfo;
123+
},
124+
false,
125+
// "setRwaSymbolsInfo"
126+
);
127+
},
117128
setFundingRates: (fundingRates: Record<string, API.FundingRate>) => {
118129
set(
119130
(state) => {

‎packages/hooks/src/orderly/orderlyHooks.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,5 +115,6 @@ export { useStorageLedgerAddress } from "./useStorageLedgerAddress";
115115
export { useTokensInfo, useTokenInfo } from "./useTokensInfo/tokensInfo.store";
116116

117117
export { useSymbolsInfoStore } from "./useSymbolsInfo";
118+
export * from "./useRwaSymbolsInfo";
118119
export { useFundingRatesStore } from "./useFundingRates";
119120
export { usePortfolio } from "./appStore";

‎packages/hooks/src/orderly/useMarkets.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { OrderlyContext } from "../orderlyContext";
55
import { useEventEmitter } from "../useEventEmitter";
66
import { MarketStoreKey } from "./useMarket";
77
import { useMarketsStream } from "./useMarketsStream";
8+
import { RwaSymbolsInfo, useRwaSymbolsInfo } from "./useRwaSymbolsInfo";
89
import { SymbolsInfo, useSymbolsInfo } from "./useSymbolsInfo";
910

1011
export enum MarketsType {
1112
FAVORITES,
1213
RECENT,
1314
ALL,
15+
RWA,
1416
NEW_LISTING,
1517
}
1618

@@ -93,6 +95,9 @@ export type MarketsItem = {
9395
openInterest: number;
9496
isFavorite: boolean;
9597
leverage?: number;
98+
isRwa: boolean;
99+
rwaNextOpen?: number;
100+
rwaNextClose?: number;
96101
};
97102

98103
export type MarketsStore = ReturnType<typeof useMarketsStore>;
@@ -293,6 +298,7 @@ export const useMarkets = (
293298
): [MarketsItem[], MarketsStore] => {
294299
const { data: futures } = useMarketsStream();
295300
const symbolsInfo = useSymbolsInfo();
301+
const rwaSymbolsInfo = useRwaSymbolsInfo();
296302

297303
const [markets, setMarkets] = useState<MarketsItem[]>([]);
298304

@@ -301,7 +307,7 @@ export const useMarkets = (
301307
const { favorites, recent, newListing } = store;
302308

303309
useEffect(() => {
304-
const markets = addFieldToMarkets(futures, symbolsInfo);
310+
const markets = addFieldToMarkets(futures, symbolsInfo, rwaSymbolsInfo);
305311
const filterList = filterMarkets({
306312
markets,
307313
favorites,
@@ -324,9 +330,13 @@ export const useMarkets = (
324330
const addFieldToMarkets = (
325331
futures: WSMessage.Ticker[] | null,
326332
symbolsInfo: SymbolsInfo,
333+
rwaSymbolsInfo: RwaSymbolsInfo,
327334
) => {
328335
return (futures || [])?.map((item: any) => {
329336
const info = symbolsInfo[item.symbol];
337+
const rwaInfo = !rwaSymbolsInfo.isNil
338+
? rwaSymbolsInfo[item.symbol]()
339+
: null;
330340

331341
return {
332342
...item,
@@ -340,6 +350,9 @@ const addFieldToMarkets = (
340350
close: item["24h_close"],
341351
open: item["24h_open"],
342352
}),
353+
isRwa: !!rwaInfo,
354+
rwaNextOpen: rwaInfo?.next_open,
355+
rwaNextClose: rwaInfo?.next_close,
343356
} as MarketsItem;
344357
});
345358
};
@@ -361,6 +374,8 @@ const filterMarkets = (params: {
361374

362375
if (type === MarketsType.ALL) {
363376
curData = markets;
377+
} else if (type === MarketsType.RWA) {
378+
curData = markets.filter((item) => item.isRwa);
364379
} else if (type === MarketsType.NEW_LISTING) {
365380
curData = markets
366381
.filter((item) => isNewListing(item.created_time))

‎packages/hooks/src/orderly/usePublicDataObserver.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const publicQueryOptions = {
1313
};
1414

1515
export const usePublicDataObserver = () => {
16-
const { setSymbolsInfo, setFundingRates } = useAppStore(
16+
const { setSymbolsInfo, setFundingRates, setRwaSymbolsInfo } = useAppStore(
1717
(state) => state.actions,
1818
);
1919

@@ -58,6 +58,32 @@ export const usePublicDataObserver = () => {
5858
},
5959
});
6060

61+
/**
62+
* symbol config
63+
*/
64+
useQuery<Record<string, API.RwaSymbol>>(`/v1/public/rwa/info`, {
65+
...publicQueryOptions,
66+
onSuccess(data: API.RwaSymbol[]) {
67+
if (!data || !data?.length) {
68+
return {};
69+
}
70+
const obj: Record<string, API.RwaSymbol> = {};
71+
72+
for (let index = 0; index < data.length; index++) {
73+
const item = data[index];
74+
const arr = item.symbol.split("_");
75+
obj[item.symbol] = {
76+
...item,
77+
base: arr[1],
78+
quote: arr[2],
79+
type: arr[0],
80+
name: `${arr[1]}-${arr[0]}`,
81+
};
82+
}
83+
setRwaSymbolsInfo(obj);
84+
},
85+
});
86+
6187
/**
6288
* funding rates
6389
*/

0 commit comments

Comments
 (0)