@orderly.network/trading-leaderboard 2.0.8-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +172 -0
  2. package/dist/index.d.ts +172 -0
  3. package/dist/index.js +34 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +17 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/dist/styles.css +1 -0
  8. package/package.json +48 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,172 @@
1
+ import * as react from 'react';
2
+ import { FC, PropsWithChildren } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import * as _orderly_network_ui from '@orderly.network/ui';
5
+ import { TableSort } from '@orderly.network/ui';
6
+
7
+ type CampaignsWidgetProps = {
8
+ className?: string;
9
+ style?: React.CSSProperties;
10
+ };
11
+ declare const CampaignsWidget: FC<CampaignsWidgetProps>;
12
+
13
+ type Campaign = {
14
+ title: string;
15
+ description: string;
16
+ image: string;
17
+ startTime: Date | string;
18
+ endTime: Date | string;
19
+ href: string | {
20
+ /** learn more url */
21
+ learnMore: string;
22
+ /** trading url, if provided, will override default trading now button url */
23
+ trading: string;
24
+ };
25
+ };
26
+ /**
27
+ * Trading leaderboard provider state
28
+ */
29
+ type TradingLeaderboardState = {
30
+ /** campaigns config, if not provided, will not show campaigns section */
31
+ campaigns?: Campaign[];
32
+ /** background src, it can be a image resource or video resource */
33
+ backgroundSrc?: string;
34
+ href?: {
35
+ /** default trading now button url */
36
+ trading: string;
37
+ };
38
+ };
39
+ /**
40
+ * Trading leaderboard context
41
+ */
42
+ declare const TradingLeaderboardContext: react.Context<TradingLeaderboardState>;
43
+ type TradingLeaderboardProviderProps = PropsWithChildren<TradingLeaderboardState>;
44
+ declare const TradingLeaderboardProvider: (props: TradingLeaderboardProviderProps) => react_jsx_runtime.JSX.Element;
45
+ declare const useTradingLeaderboardContext: () => TradingLeaderboardState;
46
+
47
+ type CampaignsScriptReturn = ReturnType<typeof useCampaignsScript>;
48
+ type CategorizedCampaigns = {
49
+ ongoing: Campaign[];
50
+ past: Campaign[];
51
+ future: Campaign[];
52
+ };
53
+ type TEmblaApi = {
54
+ scrollTo?: (index: number) => void;
55
+ };
56
+ type CategoryKey = keyof CategorizedCampaigns;
57
+ declare function useCampaignsScript(): {
58
+ options: {
59
+ label: string;
60
+ value: CategoryKey;
61
+ }[];
62
+ currentCampaigns: {
63
+ displayTime: string;
64
+ learnMoreUrl: string;
65
+ tradingUrl: string;
66
+ title: string;
67
+ description: string;
68
+ image: string;
69
+ startTime: Date | string;
70
+ endTime: Date | string;
71
+ href: string | {
72
+ learnMore: string;
73
+ trading: string;
74
+ };
75
+ }[];
76
+ category: keyof CategorizedCampaigns;
77
+ onCategoryChange: (value: string) => void;
78
+ tradingUrl: string | undefined;
79
+ isMobile: boolean;
80
+ emblaRef: <ViewportElement extends HTMLElement>(instance: ViewportElement | null) => void;
81
+ emblaApi: TEmblaApi;
82
+ scrollIndex: number;
83
+ enableScroll: boolean;
84
+ };
85
+
86
+ type CampaignsProps = {
87
+ className?: string;
88
+ style?: React.CSSProperties;
89
+ } & CampaignsScriptReturn;
90
+ declare const Campaigns: FC<CampaignsProps>;
91
+
92
+ type TradingData = {
93
+ account_id: string;
94
+ address: string;
95
+ broker_fee: number;
96
+ date: string;
97
+ perp_maker_volume: number;
98
+ perp_taker_volume: number;
99
+ perp_volume: number;
100
+ total_fee: number;
101
+ };
102
+ type TradingListScriptReturn = ReturnType<typeof useTradingListScript>;
103
+ declare const FilterDays: readonly [7, 14, 30, 90];
104
+ type TFilterDays = (typeof FilterDays)[number];
105
+ type DateRange = {
106
+ from?: Date;
107
+ to?: Date;
108
+ };
109
+ declare function useTradingListScript(): {
110
+ pagination: _orderly_network_ui.PaginationMeta;
111
+ dateRange: DateRange;
112
+ filterDay: 7 | 14 | 30 | 90 | null;
113
+ updateFilterDay: (day: TFilterDays) => void;
114
+ filterItems: any;
115
+ onFilter: (filter: {
116
+ name: string;
117
+ value: any;
118
+ }) => void;
119
+ initialSort: TableSort;
120
+ onSort: (sort?: TableSort) => void;
121
+ dataSource: {
122
+ rank: string | number;
123
+ account_id: string;
124
+ address: string;
125
+ broker_fee: number;
126
+ date: string;
127
+ perp_maker_volume: number;
128
+ perp_taker_volume: number;
129
+ perp_volume: number;
130
+ total_fee: number;
131
+ }[] | null;
132
+ isLoading: boolean;
133
+ searchValue: string;
134
+ onSearchValueChange: (value: string) => void;
135
+ clearSearchValue: () => void;
136
+ isMobile: boolean;
137
+ sentinelRef: react.MutableRefObject<HTMLDivElement | null>;
138
+ dataList: TradingData[];
139
+ };
140
+
141
+ type TradingListProps = {
142
+ style?: React.CSSProperties;
143
+ className?: string;
144
+ } & TradingListScriptReturn;
145
+ declare const TradingList: FC<TradingListProps>;
146
+
147
+ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
148
+ declare const TradingListWidget: FC<TradingListWidgetProps>;
149
+
150
+ type LeaderboardScriptReturn = ReturnType<typeof useLeaderboardScript>;
151
+ type LeaderboardScriptOptions = {
152
+ backgroundSrc?: string;
153
+ campaigns?: Campaign[];
154
+ };
155
+ declare function useLeaderboardScript(options: LeaderboardScriptOptions): {
156
+ backgroundSrc: string | undefined;
157
+ isVideo: boolean;
158
+ showCampaigns: boolean;
159
+ isMobile: boolean;
160
+ canTrading: boolean;
161
+ };
162
+
163
+ type LeaderboardProps = {
164
+ style?: React.CSSProperties;
165
+ className?: string;
166
+ } & LeaderboardScriptReturn;
167
+ declare const Leaderboard: FC<LeaderboardProps>;
168
+
169
+ type LeaderboardWidgetProps = TradingLeaderboardProviderProps & Pick<LeaderboardProps, "style" | "className">;
170
+ declare const LeaderboardWidget: FC<LeaderboardWidgetProps>;
171
+
172
+ export { type Campaign, Campaigns, type CampaignsProps, CampaignsWidget, Leaderboard, type LeaderboardProps, LeaderboardWidget, type LeaderboardWidgetProps, TradingLeaderboardContext, TradingLeaderboardProvider, type TradingLeaderboardProviderProps, type TradingLeaderboardState, TradingList, type TradingListProps, TradingListWidget, type TradingListWidgetProps, useCampaignsScript, useLeaderboardScript, useTradingLeaderboardContext, useTradingListScript };
package/dist/index.d.ts ADDED
@@ -0,0 +1,172 @@
1
+ import * as react from 'react';
2
+ import { FC, PropsWithChildren } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import * as _orderly_network_ui from '@orderly.network/ui';
5
+ import { TableSort } from '@orderly.network/ui';
6
+
7
+ type CampaignsWidgetProps = {
8
+ className?: string;
9
+ style?: React.CSSProperties;
10
+ };
11
+ declare const CampaignsWidget: FC<CampaignsWidgetProps>;
12
+
13
+ type Campaign = {
14
+ title: string;
15
+ description: string;
16
+ image: string;
17
+ startTime: Date | string;
18
+ endTime: Date | string;
19
+ href: string | {
20
+ /** learn more url */
21
+ learnMore: string;
22
+ /** trading url, if provided, will override default trading now button url */
23
+ trading: string;
24
+ };
25
+ };
26
+ /**
27
+ * Trading leaderboard provider state
28
+ */
29
+ type TradingLeaderboardState = {
30
+ /** campaigns config, if not provided, will not show campaigns section */
31
+ campaigns?: Campaign[];
32
+ /** background src, it can be a image resource or video resource */
33
+ backgroundSrc?: string;
34
+ href?: {
35
+ /** default trading now button url */
36
+ trading: string;
37
+ };
38
+ };
39
+ /**
40
+ * Trading leaderboard context
41
+ */
42
+ declare const TradingLeaderboardContext: react.Context<TradingLeaderboardState>;
43
+ type TradingLeaderboardProviderProps = PropsWithChildren<TradingLeaderboardState>;
44
+ declare const TradingLeaderboardProvider: (props: TradingLeaderboardProviderProps) => react_jsx_runtime.JSX.Element;
45
+ declare const useTradingLeaderboardContext: () => TradingLeaderboardState;
46
+
47
+ type CampaignsScriptReturn = ReturnType<typeof useCampaignsScript>;
48
+ type CategorizedCampaigns = {
49
+ ongoing: Campaign[];
50
+ past: Campaign[];
51
+ future: Campaign[];
52
+ };
53
+ type TEmblaApi = {
54
+ scrollTo?: (index: number) => void;
55
+ };
56
+ type CategoryKey = keyof CategorizedCampaigns;
57
+ declare function useCampaignsScript(): {
58
+ options: {
59
+ label: string;
60
+ value: CategoryKey;
61
+ }[];
62
+ currentCampaigns: {
63
+ displayTime: string;
64
+ learnMoreUrl: string;
65
+ tradingUrl: string;
66
+ title: string;
67
+ description: string;
68
+ image: string;
69
+ startTime: Date | string;
70
+ endTime: Date | string;
71
+ href: string | {
72
+ learnMore: string;
73
+ trading: string;
74
+ };
75
+ }[];
76
+ category: keyof CategorizedCampaigns;
77
+ onCategoryChange: (value: string) => void;
78
+ tradingUrl: string | undefined;
79
+ isMobile: boolean;
80
+ emblaRef: <ViewportElement extends HTMLElement>(instance: ViewportElement | null) => void;
81
+ emblaApi: TEmblaApi;
82
+ scrollIndex: number;
83
+ enableScroll: boolean;
84
+ };
85
+
86
+ type CampaignsProps = {
87
+ className?: string;
88
+ style?: React.CSSProperties;
89
+ } & CampaignsScriptReturn;
90
+ declare const Campaigns: FC<CampaignsProps>;
91
+
92
+ type TradingData = {
93
+ account_id: string;
94
+ address: string;
95
+ broker_fee: number;
96
+ date: string;
97
+ perp_maker_volume: number;
98
+ perp_taker_volume: number;
99
+ perp_volume: number;
100
+ total_fee: number;
101
+ };
102
+ type TradingListScriptReturn = ReturnType<typeof useTradingListScript>;
103
+ declare const FilterDays: readonly [7, 14, 30, 90];
104
+ type TFilterDays = (typeof FilterDays)[number];
105
+ type DateRange = {
106
+ from?: Date;
107
+ to?: Date;
108
+ };
109
+ declare function useTradingListScript(): {
110
+ pagination: _orderly_network_ui.PaginationMeta;
111
+ dateRange: DateRange;
112
+ filterDay: 7 | 14 | 30 | 90 | null;
113
+ updateFilterDay: (day: TFilterDays) => void;
114
+ filterItems: any;
115
+ onFilter: (filter: {
116
+ name: string;
117
+ value: any;
118
+ }) => void;
119
+ initialSort: TableSort;
120
+ onSort: (sort?: TableSort) => void;
121
+ dataSource: {
122
+ rank: string | number;
123
+ account_id: string;
124
+ address: string;
125
+ broker_fee: number;
126
+ date: string;
127
+ perp_maker_volume: number;
128
+ perp_taker_volume: number;
129
+ perp_volume: number;
130
+ total_fee: number;
131
+ }[] | null;
132
+ isLoading: boolean;
133
+ searchValue: string;
134
+ onSearchValueChange: (value: string) => void;
135
+ clearSearchValue: () => void;
136
+ isMobile: boolean;
137
+ sentinelRef: react.MutableRefObject<HTMLDivElement | null>;
138
+ dataList: TradingData[];
139
+ };
140
+
141
+ type TradingListProps = {
142
+ style?: React.CSSProperties;
143
+ className?: string;
144
+ } & TradingListScriptReturn;
145
+ declare const TradingList: FC<TradingListProps>;
146
+
147
+ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
148
+ declare const TradingListWidget: FC<TradingListWidgetProps>;
149
+
150
+ type LeaderboardScriptReturn = ReturnType<typeof useLeaderboardScript>;
151
+ type LeaderboardScriptOptions = {
152
+ backgroundSrc?: string;
153
+ campaigns?: Campaign[];
154
+ };
155
+ declare function useLeaderboardScript(options: LeaderboardScriptOptions): {
156
+ backgroundSrc: string | undefined;
157
+ isVideo: boolean;
158
+ showCampaigns: boolean;
159
+ isMobile: boolean;
160
+ canTrading: boolean;
161
+ };
162
+
163
+ type LeaderboardProps = {
164
+ style?: React.CSSProperties;
165
+ className?: string;
166
+ } & LeaderboardScriptReturn;
167
+ declare const Leaderboard: FC<LeaderboardProps>;
168
+
169
+ type LeaderboardWidgetProps = TradingLeaderboardProviderProps & Pick<LeaderboardProps, "style" | "className">;
170
+ declare const LeaderboardWidget: FC<LeaderboardWidgetProps>;
171
+
172
+ export { type Campaign, Campaigns, type CampaignsProps, CampaignsWidget, Leaderboard, type LeaderboardProps, LeaderboardWidget, type LeaderboardWidgetProps, TradingLeaderboardContext, TradingLeaderboardProvider, type TradingLeaderboardProviderProps, type TradingLeaderboardState, TradingList, type TradingListProps, TradingListWidget, type TradingListWidgetProps, useCampaignsScript, useLeaderboardScript, useTradingLeaderboardContext, useTradingListScript };
package/dist/index.js ADDED
@@ -0,0 +1,34 @@
1
+ 'use strict';
2
+
3
+ var ui = require('@orderly.network/ui');
4
+ var i18n = require('@orderly.network/i18n');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var rt = require('embla-carousel-react');
8
+ var dateFns = require('date-fns');
9
+ var hooks = require('@orderly.network/hooks');
10
+ var reactApp = require('@orderly.network/react-app');
11
+ var uiConnector = require('@orderly.network/ui-connector');
12
+ var types = require('@orderly.network/types');
13
+ var trading = require('@orderly.network/trading');
14
+
15
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
+
17
+ var rt__default = /*#__PURE__*/_interopDefault(rt);
18
+
19
+ var V=25,q=6,xe=e=>e.currentCampaigns.length===0?null:jsxRuntime.jsxs(ui.Box,{width:"100%",intensity:900,p:3,className:ui.cn("oui-mobile-trading-leaderboard-campaigns oui-rounded-[20px]",e.className),style:e.style,children:[jsxRuntime.jsx(He,{...e}),jsxRuntime.jsx(ui.Box,{r:"xl",mt:3,ref:e.enableScroll?e.emblaRef:void 0,className:ui.cn("oui-w-full oui-min-w-0 oui-overflow-hidden","oui-select-none oui-cursor-pointer"),children:jsxRuntime.jsx(ui.Flex,{children:e.currentCampaigns.map(t=>jsxRuntime.jsx(je,{campaign:t},t.title))})}),e.enableScroll&&jsxRuntime.jsx(Je,{style:{width:V*e.currentCampaigns.length},list:e.currentCampaigns,scrollIndex:e.scrollIndex,scrollTo:e.emblaApi?.scrollTo})]}),He=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",children:[jsxRuntime.jsx(ui.Text,{size:"base",intensity:80,children:t("tradingLeaderboard.campaigns")}),jsxRuntime.jsx(ui.Select.options,{size:"xs",value:e.category,onValueChange:e.onCategoryChange,options:e.options,classNames:{trigger:"oui-w-[--radix-select-content-available-width]"}})]})},je=({campaign:e})=>{let{title:t,description:o,image:r,displayTime:l,learnMoreUrl:u,tradingUrl:n}=e,{t:a}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Box,{intensity:800,r:"xl",className:"oui-flex-[0_0_100%]",children:[jsxRuntime.jsx("img",{className:"oui-w-full oui-h-[calc((100vw-48px)/2)] oui-rounded-t-xl oui-object-fill",src:r,alt:t}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",justify:"between",direction:"column",height:"100%",p:4,gapY:3,className:"oui-font-semibold",children:[jsxRuntime.jsxs(ui.Flex,{direction:"column",itemAlign:"start",gapY:1,children:[jsxRuntime.jsx(ui.Text,{size:"sm",children:t}),jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:54,children:l}),jsxRuntime.jsx(ui.Text,{size:"2xs",intensity:36,children:o})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",gapX:3,children:[jsxRuntime.jsx(ui.Button,{variant:"outlined",color:"secondary",fullWidth:true,size:"md",onClick:()=>{window.open(u,"_blank");},children:a("tradingLeaderboard.learnMore")}),jsxRuntime.jsx(ui.Button,{size:"md",fullWidth:true,onClick:()=>{window.open(n,"_self");},children:a("tradingLeaderboard.tradeNow")})]})]})]})},Je=e=>{let{style:t,scrollIndex:o,list:r}=e;return jsxRuntime.jsxs(ui.Flex,{mt:3,r:"full",height:q,className:ui.cn("oui-bg-line oui-mx-auto oui-relative"),style:e.style,children:[r.map((l,u)=>jsxRuntime.jsx(ui.Box,{width:V,height:q,onClick:()=>{e.scrollTo?.(u);},r:"full",className:"oui-cursor-pointer"},u)),jsxRuntime.jsx(ui.Box,{width:V,height:q,r:"full",className:ui.cn("oui-absolute oui-left-0 oui-top-0","oui-transition-all oui-duration-300","oui-bg-primary"),style:{transform:`translateX(${o*V}px)`}})]})};var Ce=react.createContext({}),he=e=>jsxRuntime.jsx(Ce.Provider,{value:{campaigns:e.campaigns,href:e.href,backgroundSrc:e.backgroundSrc},children:e.children}),Se=()=>react.useContext(Ce);var $=e=>({from:dateFns.subDays(new Date,e-1),to:new Date}),T=e=>dateFns.format(e,"yyyy-MM-dd");function Z(e){let t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];typeof e=="string"&&(e=new Date(e));let o=e.getUTCFullYear(),r=t[e.getUTCMonth()],l=e.getUTCDate(),u=String(e.getUTCHours()).padStart(2,"0"),n=String(e.getUTCMinutes()).padStart(2,"0");return `${r} ${l}, ${o} ${u}:${n}`}function te(){let{t:e}=i18n.useTranslation(),{campaigns:t=[],href:o}=Se(),[r,l]=react.useState("ongoing"),{isMobile:u}=ui.useScreen(),n=react.useMemo(()=>{let g=new Date;return t.reduce((s,p)=>{let D=new Date(p.startTime),f=new Date(p.endTime);return g>=D&&g<=f?s.ongoing.push(p):g>f?s.past.push(p):s.future.push(p),s},{ongoing:[],past:[],future:[]})},[t]),a=react.useMemo(()=>[{label:e("tradingLeaderboard.ongoing"),value:"ongoing"},{label:e("tradingLeaderboard.past"),value:"past"},{label:e("tradingLeaderboard.future"),value:"future"}].filter(s=>n[s.value].length>0),[n,e]),i=react.useMemo(()=>n[r].map(s=>{let{startTime:p,endTime:D}=s,f,I=o?.trading;return typeof s.href=="object"?(f=s.href.learnMore,I=s.href.trading):f=s.href,{...s,displayTime:`${Z(p)} - ${Z(D)} UTC`,learnMoreUrl:f,tradingUrl:I}}),[n,r,o]);react.useEffect(()=>{let s=["ongoing","future","past"].find(p=>n[p].length>0);s&&l(s);},[n]);let C=g=>{l(g);},[N,j]=react.useState(0),[J,m]=rt__default.default({loop:false,slidesToScroll:"auto"});return react.useEffect(()=>{m?.on("select",()=>{j(m?.selectedScrollSnap());});},[m]),{options:a,currentCampaigns:i,category:r,onCategoryChange:C,tradingUrl:o?.trading,isMobile:u,emblaRef:J,emblaApi:m,scrollIndex:N,enableScroll:i?.length>1}}var re=e=>e.currentCampaigns.length===0?null:jsxRuntime.jsxs(ui.Box,{width:"100%",intensity:900,p:5,pr:2,height:288,className:ui.cn("oui-trading-leaderboard-campaigns oui-rounded-[20px]",e.className),style:e.style,children:[jsxRuntime.jsx(it,{...e}),jsxRuntime.jsx(ui.Box,{mt:5,r:"xl",className:ui.cn("oui-overflow-y-auto","oui-custom-scrollbar"),children:jsxRuntime.jsx(ui.Flex,{gapY:5,height:200,direction:"column",r:"xl",className:"oui-pr-1.5",children:e.currentCampaigns.map(t=>jsxRuntime.jsx(nt,{campaign:t},t.title))})})]}),it=e=>{let{t}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{justify:"between",itemAlign:"center",pr:3,children:[jsxRuntime.jsx(ui.Text,{size:"xl",children:t("tradingLeaderboard.campaigns")}),jsxRuntime.jsx(ui.Select.options,{size:"xs",value:e.category,onValueChange:e.onCategoryChange,options:e.options,classNames:{trigger:"oui-w-[--radix-select-content-available-width]"}})]})},nt=({campaign:e})=>{let{title:t,description:o,image:r,displayTime:l,learnMoreUrl:u,tradingUrl:n}=e,{t:a}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{intensity:800,r:"xl",children:[jsxRuntime.jsx("img",{className:"oui-w-[400px] oui-h-[200px] oui-rounded-l-xl oui-object-fill",src:r,alt:t}),jsxRuntime.jsxs(ui.Flex,{itemAlign:"start",justify:"between",direction:"column",height:"100%",p:5,className:"oui-font-semibold oui-flex-1",children:[jsxRuntime.jsxs(ui.Flex,{gap:1,direction:"column",itemAlign:"start",children:[jsxRuntime.jsx(ui.Text,{size:"xl",children:t}),jsxRuntime.jsx(ui.Text,{size:"sm",intensity:36,children:o})]}),jsxRuntime.jsxs(ui.Flex,{justify:"between",width:"100%",children:[jsxRuntime.jsx(ui.Text,{size:"xs",intensity:54,children:l}),jsxRuntime.jsxs(ui.Flex,{gap:3,children:[jsxRuntime.jsx(ui.Button,{variant:"outlined",color:"secondary",size:"md",onClick:()=>{window.open(u,"_blank");},children:a("tradingLeaderboard.learnMore")}),jsxRuntime.jsx(ui.Button,{size:"md",onClick:()=>{window.open(n,"_self");},children:a("tradingLeaderboard.tradeNow")})]})]})]})]})};var _=e=>{let t=te();return t.isMobile?jsxRuntime.jsx(xe,{...t,className:e.className,style:e.style}):jsxRuntime.jsx(re,{...t,className:e.className,style:e.style})};function De(e,t){let o=react.useRef(),r=react.useRef(t);r.current=t,react.useEffect(()=>{let l={root:null,rootMargin:"0px",threshold:0},u=n=>{n.forEach(a=>{a.isIntersecting&&r.current?.();});};return o.current=new IntersectionObserver(u,l),()=>{o.current?.disconnect();}},[]),react.useEffect(()=>{e.current&&o.current?.observe(e.current);},[e.current]);}var Me=[7,14,30,90];function ie(){let[e,t]=react.useState(""),[o]=react.useState({sortKey:"perp_volume",sort:"desc"}),[r,l]=react.useState(o),[u,n]=react.useState([]),{isMobile:a}=ui.useScreen(),{dateRange:i,filterDay:C,updateFilterDay:N,filterItems:j,onFilter:J}=gt(),{page:m,pageSize:g,setPage:s,parsePagination:p}=ui.usePagination({pageSize:50}),D=()=>{let d=new URLSearchParams;if(d.set("page",m.toString()),d.set("size",g.toString()),d.set("aggregateBy","ACCOUNT"),r){let X=r.sort==="asc"?"ascending":"descending";d.set("sort",`${X}_${r.sortKey}`);}return e&&d.set("address",e),i.from&&d.set("start_date",T(i.from)),i.to&&d.set("end_date",T(i.to)),`/v1/volume/broker/daily?${d.toString()}`},{data:f,isLoading:I}=hooks.usePrivateQuery(D(),{formatter:d=>d,revalidateOnFocus:false}),A=react.useMemo(()=>{let d=f?.rows||[],X=f?.meta.total||0;return r?.sortKey,d?.map((Ge,Q)=>{let B=Q+1;return e?B="-":r?.sortKey==="perp_volume"&&r?.sort==="asc"?B=X-(m-1)*g-Q:r?.sortKey==="perp_volume"&&r?.sort==="desc"&&(B=(m-1)*g+Q+1),{...Ge,rank:B}})},[f,r,m,g,e]);react.useEffect(()=>{a&&n(m===1?A:d=>[...d,...A]);},[A,a,m]);let pe=react.useRef(null),fe=react.useMemo(()=>p(f?.meta),[p,f]);De(pe,()=>{!I&&a&&m<(fe?.pageTotal||0)&&s(m+1);});let $e=d=>{t(d);},Ee=react.useCallback(()=>{t("");},[]),Ke=react.useCallback(d=>{l(d||o);},[o]);react.useEffect(()=>{e&&s(1);},[e]),react.useEffect(()=>{i.to&&i.from&&s(1);},[i]);let Oe=reactApp.useDataTap(A);return {pagination:fe,dateRange:i,filterDay:C,updateFilterDay:N,filterItems:j,onFilter:J,initialSort:o,onSort:Ke,dataSource:Oe,isLoading:I,searchValue:e,onSearchValueChange:$e,clearSearchValue:Ee,isMobile:a,sentinelRef:pe,dataList:u}}var gt=()=>{let[e,t]=react.useState(90),[o,r]=react.useState($(90)),l=a=>{t(a),r($(a));},u=a=>{if(a.name==="dateRange"){let i=a.value;if(r(i),i.from&&i.to){let C=Math.abs(dateFns.differenceInDays(i.from,i.to))+1,N=$(C);T(N.from)===T(i.from)&&T(N.to)===T(i.to)?t(C):t(null);}}};return {filterItems:react.useMemo(()=>[{type:"range",name:"dateRange",value:o,max:90}],[o]),onFilter:u,dateRange:o,filterDay:e,updateFilterDay:l}};var K=()=>{let{t:e}=i18n.useTranslation();return [{title:e("tradingLeaderboard.rank"),dataIndex:"rank",width:50,render:t=>jsxRuntime.jsx(ui.Box,{width:20,className:"oui-text-center",children:t})},{title:e("common.address"),dataIndex:"address",render:t=>jsxRuntime.jsx(ui.Text.formatted,{rule:"address",children:t}),width:100},{title:e("tradingLeaderboard.tradingVolume"),dataIndex:"perp_volume",onSort:true,render:t=>jsxRuntime.jsx(ui.Text.numeral,{prefix:"$",rule:"price",dp:2,children:t}),width:120}]};var le=e=>{let t=K(),{t:o}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Flex,{direction:"column",width:"100%",itemAlign:"start",intensity:900,r:"2xl",px:4,style:e.style,className:ui.cn("oui-trading-leaderboard-trading-list",e.className),children:[jsxRuntime.jsxs(ui.Flex,{width:"100%",justify:"between",itemAlign:"center",mt:2,className:ui.cn("oui-trading-leaderboard-trading-filter","oui-border-b oui-border-line"),children:[jsxRuntime.jsxs(ui.Flex,{gap:3,children:[e.filterItems.length>0&&jsxRuntime.jsx(ui.DataFilter,{items:e.filterItems,onFilter:r=>{e.onFilter(r);},className:"oui-h-[53px] oui-border-none"}),Me.map(r=>jsxRuntime.jsxs("button",{className:"oui-relative oui-px-2 oui-py-[2px] oui-text-sm",children:[jsxRuntime.jsx("div",{className:"oui-z-10",children:jsxRuntime.jsx(ui.Text.gradient,{color:e.filterDay===r?"brand":void 0,className:e.filterDay!==r?"oui-text-base-contrast-54":"",children:`${r}D`})}),jsxRuntime.jsx("div",{className:"oui-gradient-primary oui-opacity-[.12] oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0 oui-rounded",onClick:()=>{e.updateFilterDay(r);}})]},r))]}),jsxRuntime.jsx(ui.Input,{value:e.searchValue,onValueChange:e.onSearchValueChange,placeholder:o("common.address.search.placeholder"),className:ui.cn("oui-trading-leaderboard-trading-search-input","oui-w-[240px]"),size:"sm",prefix:jsxRuntime.jsx(ui.Box,{pl:3,pr:1,children:jsxRuntime.jsx(Tt,{className:"oui-text-base-contrast-36"})}),suffix:e.searchValue&&jsxRuntime.jsx(ui.Box,{mr:2,children:jsxRuntime.jsx(ui.CloseCircleFillIcon,{size:14,className:"oui-text-base-contrast-36 oui-cursor-pointer",onClick:e.clearSearchValue})}),autoComplete:"off"})]}),jsxRuntime.jsx(uiConnector.AuthGuardDataTable,{loading:e.isLoading,id:"oui-trading-leaderboard-trading-table",columns:t,initialSort:e.initialSort,onSort:e.onSort,bordered:true,dataSource:e.dataSource,generatedRowKey:r=>r.address,manualPagination:true,manualSorting:true,pagination:e.pagination,classNames:{root:"!oui-h-[calc(100%_-_53px_-_8px)]"},onRow:(r,l)=>({className:ui.cn("oui-h-[48px]")})})]})},Tt=e=>jsxRuntime.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",...e,children:jsxRuntime.jsx("path",{d:"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7"})});var Ae=e=>{let t=K();return jsxRuntime.jsxs(ui.Flex,{direction:"column",width:"100%",itemAlign:"start",intensity:900,r:"2xl",px:4,style:e.style,className:ui.cn("oui-mobile-trading-leaderboard-trading-list",e.className),children:[jsxRuntime.jsx(ui.Flex,{width:"100%",justify:"between",itemAlign:"center",className:ui.cn("oui-mobile-trading-leaderboard-trading-filter"),children:e.filterItems.length>0&&jsxRuntime.jsx(ui.DataFilter,{items:e.filterItems,onFilter:o=>{e.onFilter(o);},className:"oui-h-[40px] oui-border-none"})}),jsxRuntime.jsx(uiConnector.AuthGuardDataTable,{classNames:{root:"oui-pb-4",body:"oui-text-2xs",scroll:"oui-overflow-y-hidden oui-h-full"},loading:e.isLoading,id:"oui-trading-leaderboard-trading-table",columns:t,initialSort:e.initialSort,onSort:e.onSort,dataSource:e.dataList,generatedRowKey:o=>o.address,manualPagination:true,manualSorting:true,onRow:(o,r)=>({className:ui.cn("oui-h-[30px]")})}),jsxRuntime.jsx("div",{ref:e.sentinelRef,className:"oui-relative oui-invisible oui-h-[1px] oui-top-[-300px]"}),e.isLoading&&e.dataList.length>0&&jsxRuntime.jsx(ui.Flex,{itemAlign:"center",justify:"center",width:"100%",height:40,children:jsxRuntime.jsx(ui.Spinner,{size:"sm"})})]})};var z=e=>{let t=ie();return t.isMobile?jsxRuntime.jsx(Ae,{...t,...e}):jsxRuntime.jsx(le,{...t,...e})};function kt(e){let t=e?.split(".").pop();return ["mp4","webm","avi","ogg"].includes(t??"")}function ce(e){let{backgroundSrc:t,campaigns:o=[]}=e,{isMobile:r}=ui.useScreen(),{state:l}=hooks.useAccount(),{wrongNetwork:u,disabledConnect:n}=reactApp.useAppContext(),a=react.useMemo(()=>o?.length>0,[o]),i=!u&&!n&&(l.status>=types.AccountStatusEnum.EnableTrading||l.status===types.AccountStatusEnum.EnableTradingWithoutConnected),C=react.useMemo(()=>kt(t),[t]);return {backgroundSrc:t,isVideo:C,showCampaigns:a,isMobile:r,canTrading:i}}var me=e=>{let t=()=>{let o="linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)";if(e.isVideo)return jsxRuntime.jsxs("div",{className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full"),children:[jsxRuntime.jsx("div",{style:{backgroundImage:o,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full")}),jsxRuntime.jsxs("video",{autoPlay:true,loop:true,muted:true,className:ui.cn("oui-border-none oui-outline-none oui-bg-transparent","oui-w-full oui-h-full","oui-object-cover","oui-opacity-50"),children:[jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/mp4"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/webm"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/ogg"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/avi"}),"Your browser does not support the video tag."]})]});if(e.backgroundSrc)return jsxRuntime.jsx("div",{style:{backgroundImage:`${o}, url(${e.backgroundSrc}) `,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full","oui-opacity-50")})};return jsxRuntime.jsxs("div",{style:e.style,className:ui.cn("oui-h-full oui-mix-blend-screen",e.className),children:[t(),jsxRuntime.jsxs(ui.Flex,{direction:"column",gapY:5,height:"100%",className:ui.cn("oui-trading-leaderboard oui-relative","oui-max-w-[1040px] oui-px-3 oui-mx-auto "),children:[e.showCampaigns&&jsxRuntime.jsx(_,{}),jsxRuntime.jsx(z,{className:ui.cn(e.showCampaigns?"oui-h-[calc(100%_-_288px_-_20px)]":"oui-h-full")})]})]})};var Ue=e=>{let t=()=>{let o="linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)";if(e.isVideo)return jsxRuntime.jsxs("div",{className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full"),children:[jsxRuntime.jsx("div",{style:{backgroundImage:o,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full")}),jsxRuntime.jsxs("video",{playsInline:true,"webkit-playsinline":true,autoPlay:true,loop:true,muted:true,className:ui.cn("oui-border-none oui-outline-none oui-bg-transparent oui-pointer-events-none","oui-w-full oui-h-full","oui-object-cover","oui-opacity-50"),children:[jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/mp4"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/webm"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/ogg"}),jsxRuntime.jsx("source",{src:e.backgroundSrc,type:"video/avi"}),"Your browser does not support the video tag."]})]});if(e.backgroundSrc)return jsxRuntime.jsx("div",{style:{backgroundImage:`${o}, url(${e.backgroundSrc}) `,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:ui.cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full","oui-opacity-50")})};return jsxRuntime.jsxs("div",{style:{paddingBottom:"calc(64px + env(safe-area-inset-bottom))"},className:ui.cn("oui-grid oui-grid-rows-[auto,1fr,auto] oui-h-screen oui-gap-1 oui-relative oui-bg-base-10","oui-relative oui-h-full oui-mix-blend-screen",e.className),children:[t(),jsxRuntime.jsxs(ui.Flex,{direction:"column",gapY:3,height:"100%",px:3,pt:3,pb:3,className:ui.cn("oui-trading-leaderboard-mobile oui-overflow-y-auto oui-custom-scrollbar","oui-relative oui-h-[calc(100vh_-_64px)]"),children:[e.showCampaigns&&jsxRuntime.jsx(_,{}),jsxRuntime.jsx(z,{className:ui.cn(!e.canTrading&&"oui-h-full")}),jsxRuntime.jsx("div",{className:"oui-fixed oui-left-0 oui-right-0 oui-bottom-0",children:jsxRuntime.jsx(trading.BottomNavBarWidget,{})})]})]})};var _t=e=>{let t=ce({backgroundSrc:e.backgroundSrc,campaigns:e.campaigns});return jsxRuntime.jsx(he,{campaigns:e.campaigns,href:e.href,children:t.isMobile?jsxRuntime.jsx(Ue,{...t}):jsxRuntime.jsx(me,{...t,className:e.className,style:e.style})})};
20
+
21
+ exports.Campaigns = re;
22
+ exports.CampaignsWidget = _;
23
+ exports.Leaderboard = me;
24
+ exports.LeaderboardWidget = _t;
25
+ exports.TradingLeaderboardContext = Ce;
26
+ exports.TradingLeaderboardProvider = he;
27
+ exports.TradingList = le;
28
+ exports.TradingListWidget = z;
29
+ exports.useCampaignsScript = te;
30
+ exports.useLeaderboardScript = ce;
31
+ exports.useTradingLeaderboardContext = Se;
32
+ exports.useTradingListScript = ie;
33
+ //# sourceMappingURL=out.js.map
34
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/campaigns/campaigns.mobile.ui.tsx","../src/components/campaigns/campaigns.script.ts","../src/components/provider/index.tsx","../src/utils.ts","../src/components/campaigns/campaigns.ui.tsx","../src/components/campaigns/widget.tsx","../src/components/tradingList/tradingList.script.ts","../src/hooks/useEndReached.ts","../src/components/tradingList/tradingList.ui.tsx","../src/components/tradingList/column.tsx","../src/components/tradingList/tradingList.mobile.ui.tsx","../src/components/tradingList/widget.tsx","../src/page/leaderboard/leaderboard.script.ts","../src/page/leaderboard/leaderboard.ui.tsx","../src/page/leaderboard/leaderboard.mobile.ui.tsx","../src/page/leaderboard/widget.tsx"],"names":["cn","Box","Text","Flex","Button","Select","useTranslation","jsx","jsxs","scrollIndicatorWidth","scrollIndicatorHeight","MobileCampaigns","props","Header","campaign","CampaignItem","ScrollIndicator","title","description","image","displayTime","learnMoreUrl","tradingUrl","t","style","scrollIndex","list","item","index","useEffect","useMemo","useState","useScreen","useEmblaCarousel","createContext","useContext","TradingLeaderboardContext","TradingLeaderboardProvider","useTradingLeaderboardContext","format","subDays","getDateRange","offsetDay","formatDateRange","date","formatCampaignDate","monthNames","year","month","day","hours","minutes","useCampaignsScript","campaigns","href","category","setCategory","isMobile","filterCampaigns","now","acc","startTime","endTime","options","currentCampaigns","firstAvailableCategory","onCategoryChange","value","setScrollIndex","emblaRef","emblaApi","Campaigns","CampaignsWidget","state","useCallback","useRef","usePrivateQuery","usePagination","differenceInDays","useDataTap","useEndReached","sentinelRef","onEndReached","observer","cb","handleObserver","entries","entry","FilterDays","useTradingListScript","searchValue","setSearchValue","initialSort","sort","setSort","dataList","setDataList","dateRange","filterDay","updateFilterDay","filterItems","onFilter","useFilter","page","pageSize","setPage","parsePagination","getKey","searchParams","prefix","data","isLoading","res","dataSource","total","rank","prev","pagination","onSearchValueChange","clearSearchValue","onSort","_data","setFilterDay","setDateRange","filter","newDateRange","CloseCircleFillIcon","DataFilter","Input","AuthGuardDataTable","useTradingListColumns","TradingList","column","SearchIcon","record","Spinner","MobileTradingList","TradingListWidget","useAccount","AccountStatusEnum","useAppContext","isVideoSrc","src","extension","useLeaderboardScript","backgroundSrc","wrongNetwork","disabledConnect","showCampaigns","canTrading","isVideo","Leaderboard","renderBackground","linearGradient","BottomNavBarWidget","MobileLeaderboardWidget","LeaderboardWidget"],"mappings":"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","sourcesContent":["import { FC } from \"react\";\nimport { cn, Box, Text, Flex, Button, Select } from \"@orderly.network/ui\";\nimport { CampaignsScriptReturn, CurrentCampaigns } from \"./campaigns.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type CampaignsProps = {\n className?: string;\n style?: React.CSSProperties;\n} & CampaignsScriptReturn;\n\nconst scrollIndicatorWidth = 25;\nconst scrollIndicatorHeight = 6;\n\nexport const MobileCampaigns: FC<CampaignsProps> = (props) => {\n if (props.currentCampaigns.length === 0) {\n return null;\n }\n\n return (\n <Box\n width=\"100%\"\n intensity={900}\n p={3}\n className={cn(\n \"oui-mobile-trading-leaderboard-campaigns oui-rounded-[20px]\",\n props.className\n )}\n style={props.style}\n >\n <Header {...props} />\n <Box\n r=\"xl\"\n mt={3}\n ref={props.enableScroll ? props.emblaRef : undefined}\n className={cn(\n \"oui-w-full oui-min-w-0 oui-overflow-hidden\",\n \"oui-select-none oui-cursor-pointer\"\n )}\n >\n <Flex>\n {props.currentCampaigns.map((campaign) => {\n return <CampaignItem key={campaign.title} campaign={campaign} />;\n })}\n </Flex>\n </Box>\n {props.enableScroll && (\n <ScrollIndicator\n style={{\n width: scrollIndicatorWidth * props.currentCampaigns.length,\n }}\n list={props.currentCampaigns}\n scrollIndex={props.scrollIndex}\n scrollTo={props.emblaApi?.scrollTo}\n />\n )}\n </Box>\n );\n};\n\nconst Header: FC<CampaignsScriptReturn> = (props) => {\n const { t } = useTranslation();\n\n return (\n <Flex justify=\"between\" itemAlign=\"center\">\n <Text size=\"base\" intensity={80}>\n {t(\"tradingLeaderboard.campaigns\")}\n </Text>\n <Select.options\n size={\"xs\"}\n value={props.category}\n onValueChange={props.onCategoryChange}\n options={props.options}\n classNames={{\n // set the width of the trigger to the width of the content\n trigger: \"oui-w-[--radix-select-content-available-width]\",\n }}\n />\n </Flex>\n );\n};\n\nconst CampaignItem: FC<{ campaign: CurrentCampaigns }> = ({ campaign }) => {\n const { title, description, image, displayTime, learnMoreUrl, tradingUrl } =\n campaign;\n const { t } = useTranslation();\n\n return (\n <Box intensity={800} r=\"xl\" className=\"oui-flex-[0_0_100%]\">\n <img\n className=\"oui-w-full oui-h-[calc((100vw-48px)/2)] oui-rounded-t-xl oui-object-fill\"\n src={image}\n alt={title}\n />\n\n <Flex\n itemAlign=\"start\"\n justify=\"between\"\n direction=\"column\"\n height=\"100%\"\n p={4}\n gapY={3}\n className=\"oui-font-semibold\"\n >\n <Flex direction=\"column\" itemAlign=\"start\" gapY={1}>\n <Text size=\"sm\">{title}</Text>\n <Text size=\"2xs\" intensity={54}>\n {displayTime}\n </Text>\n <Text size=\"2xs\" intensity={36}>\n {description}\n </Text>\n </Flex>\n <Flex justify=\"between\" width=\"100%\" gapX={3}>\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n fullWidth\n size=\"md\"\n onClick={() => {\n window.open(learnMoreUrl, \"_blank\");\n }}\n >\n {t(\"tradingLeaderboard.learnMore\")}\n </Button>\n <Button\n size=\"md\"\n fullWidth\n onClick={() => {\n window.open(tradingUrl, \"_self\");\n }}\n >\n {t(\"tradingLeaderboard.tradeNow\")}\n </Button>\n </Flex>\n </Flex>\n </Box>\n );\n};\n\ninterface ScrollIndicatorProps {\n style?: React.CSSProperties;\n list: CurrentCampaigns[];\n scrollIndex: number;\n scrollTo?: (index: number) => void;\n}\n\nconst ScrollIndicator: React.FC<ScrollIndicatorProps> = (props) => {\n const { style, scrollIndex, list } = props;\n\n return (\n <Flex\n mt={3}\n r=\"full\"\n height={scrollIndicatorHeight}\n className={cn(\"oui-bg-line oui-mx-auto oui-relative\")}\n style={props.style}\n >\n {list.map((item, index) => {\n return (\n <Box\n key={index}\n width={scrollIndicatorWidth}\n height={scrollIndicatorHeight}\n onClick={() => {\n props.scrollTo?.(index);\n }}\n r=\"full\"\n className=\"oui-cursor-pointer\"\n />\n );\n })}\n <Box\n width={scrollIndicatorWidth}\n height={scrollIndicatorHeight}\n r=\"full\"\n className={cn(\n \"oui-absolute oui-left-0 oui-top-0\",\n \"oui-transition-all oui-duration-300\",\n \"oui-bg-primary\"\n )}\n style={{\n transform: `translateX(${scrollIndex * scrollIndicatorWidth}px)`,\n }}\n />\n </Flex>\n );\n};\n","import { useEffect, useMemo, useState } from \"react\";\nimport { useScreen } from \"@orderly.network/ui\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport { useTradingLeaderboardContext, Campaign } from \"../provider\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { formatCampaignDate } from \"../../utils\";\n\nexport type CampaignsScriptReturn = ReturnType<typeof useCampaignsScript>;\n\n// Define the type for our categorized campaigns\ntype CategorizedCampaigns = {\n ongoing: Campaign[];\n past: Campaign[];\n future: Campaign[];\n};\n\nexport type CurrentCampaigns = Campaign & {\n displayTime: string;\n learnMoreUrl: string;\n tradingUrl: string;\n};\n\nexport type TEmblaApi = {\n scrollTo?: (index: number) => void;\n};\n\ntype CategoryKey = keyof CategorizedCampaigns;\n\nexport function useCampaignsScript() {\n const { t } = useTranslation();\n const { campaigns = [], href } = useTradingLeaderboardContext();\n const [category, setCategory] = useState<CategoryKey>(\"ongoing\");\n\n const { isMobile } = useScreen();\n\n const filterCampaigns = useMemo(() => {\n const now = new Date();\n\n return campaigns.reduce<CategorizedCampaigns>(\n (acc, campaign) => {\n const startTime = new Date(campaign.startTime);\n const endTime = new Date(campaign.endTime);\n\n if (now >= startTime && now <= endTime) {\n acc.ongoing.push(campaign);\n } else if (now > endTime) {\n acc.past.push(campaign);\n } else {\n acc.future.push(campaign);\n }\n\n return acc;\n },\n { ongoing: [], past: [], future: [] }\n );\n }, [campaigns]);\n\n const options = useMemo(() => {\n const opts: { label: string; value: CategoryKey }[] = [\n { label: t(\"tradingLeaderboard.ongoing\"), value: \"ongoing\" },\n { label: t(\"tradingLeaderboard.past\"), value: \"past\" },\n { label: t(\"tradingLeaderboard.future\"), value: \"future\" },\n ];\n\n // Filter out categories with no campaigns and map to the required format\n return opts.filter((item) => filterCampaigns[item.value].length > 0);\n }, [filterCampaigns, t]);\n\n const currentCampaigns = useMemo(() => {\n const list = filterCampaigns[category];\n return list.map((campaign) => {\n const { startTime, endTime } = campaign;\n\n let learnMoreUrl: string;\n let tradingUrl = href?.trading!;\n\n if (typeof campaign.href === \"object\") {\n learnMoreUrl = campaign.href.learnMore;\n tradingUrl = campaign.href.trading;\n } else {\n learnMoreUrl = campaign.href;\n }\n\n return {\n ...campaign,\n displayTime: `${formatCampaignDate(startTime)} - ${formatCampaignDate(\n endTime\n )} UTC`,\n learnMoreUrl,\n tradingUrl,\n };\n });\n }, [filterCampaigns, category, href]);\n\n useEffect(() => {\n // Find the first non-empty category\n const categoryKeys: CategoryKey[] = [\"ongoing\", \"future\", \"past\"];\n\n const firstAvailableCategory = categoryKeys.find(\n (item) => filterCampaigns[item].length > 0\n );\n\n if (firstAvailableCategory) {\n setCategory(firstAvailableCategory);\n }\n }, [filterCampaigns]);\n\n const onCategoryChange = (value: string) => {\n setCategory(value as CategoryKey);\n };\n const [scrollIndex, setScrollIndex] = useState(0);\n\n const [emblaRef, emblaApi] = useEmblaCarousel({\n loop: false,\n slidesToScroll: \"auto\",\n });\n\n useEffect(() => {\n emblaApi?.on(\"select\", () => {\n setScrollIndex(emblaApi?.selectedScrollSnap());\n });\n }, [emblaApi]);\n\n return {\n options,\n currentCampaigns,\n category,\n onCategoryChange,\n tradingUrl: href?.trading,\n isMobile,\n emblaRef,\n emblaApi: emblaApi as TEmblaApi,\n scrollIndex,\n enableScroll: currentCampaigns?.length > 1,\n };\n}\n","import { createContext, PropsWithChildren, useContext } from \"react\";\n\nexport type Campaign = {\n title: string;\n description: string;\n image: string;\n startTime: Date | string;\n endTime: Date | string;\n href:\n | string\n | {\n /** learn more url */\n learnMore: string;\n /** trading url, if provided, will override default trading now button url */\n trading: string;\n };\n};\n\n/**\n * Trading leaderboard provider state\n */\nexport type TradingLeaderboardState = {\n /** campaigns config, if not provided, will not show campaigns section */\n campaigns?: Campaign[];\n /** background src, it can be a image resource or video resource */\n backgroundSrc?: string;\n href?: {\n /** default trading now button url */\n trading: string;\n };\n};\n\n/**\n * Trading leaderboard context\n */\nexport const TradingLeaderboardContext = createContext<TradingLeaderboardState>(\n {} as TradingLeaderboardState\n);\n\nexport type TradingLeaderboardProviderProps =\n PropsWithChildren<TradingLeaderboardState>;\n\nexport const TradingLeaderboardProvider = (\n props: TradingLeaderboardProviderProps\n) => {\n return (\n <TradingLeaderboardContext.Provider\n value={{\n campaigns: props.campaigns,\n href: props.href,\n backgroundSrc: props.backgroundSrc,\n }}\n >\n {props.children}\n </TradingLeaderboardContext.Provider>\n );\n};\n\nexport const useTradingLeaderboardContext = () => {\n return useContext(TradingLeaderboardContext);\n};\n","import { format, subDays } from \"date-fns\";\n\nexport const getDateRange = (offsetDay: number) => {\n return {\n from: subDays(new Date(), offsetDay - 1)!,\n to: new Date()!,\n };\n};\n\n/**\n * Format a date to \"yyyy-MM-dd\" format (e.g., \"2025-03-10\")\n * @param date The date to format\n * @returns Formatted date string\n */\nexport const formatDateRange = (date: Date): string => {\n return format(date, \"yyyy-MM-dd\");\n};\n\nexport function formatCampaignDate(date: Date | string): string {\n const monthNames = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ];\n if (typeof date === \"string\") {\n date = new Date(date);\n }\n const year = date.getUTCFullYear();\n const month = monthNames[date.getUTCMonth()];\n const day = date.getUTCDate();\n const hours = String(date.getUTCHours()).padStart(2, \"0\");\n const minutes = String(date.getUTCMinutes()).padStart(2, \"0\");\n return `${month} ${day}, ${year} ${hours}:${minutes}`;\n}\n","import { FC } from \"react\";\nimport { cn, Box, Text, Flex, Button, Select } from \"@orderly.network/ui\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { CampaignsScriptReturn, CurrentCampaigns } from \"./campaigns.script\";\n\nexport type CampaignsProps = {\n className?: string;\n style?: React.CSSProperties;\n} & CampaignsScriptReturn;\n\nexport const Campaigns: FC<CampaignsProps> = (props) => {\n if (props.currentCampaigns.length === 0) {\n return null;\n }\n\n return (\n <Box\n width=\"100%\"\n intensity={900}\n p={5}\n pr={2}\n height={288}\n className={cn(\n \"oui-trading-leaderboard-campaigns oui-rounded-[20px]\",\n props.className\n )}\n style={props.style}\n >\n <Header {...props} />\n <Box\n mt={5}\n r=\"xl\"\n className={cn(\"oui-overflow-y-auto\", \"oui-custom-scrollbar\")}\n >\n <Flex\n gapY={5}\n height={200}\n direction=\"column\"\n r=\"xl\"\n className=\"oui-pr-1.5\"\n >\n {props.currentCampaigns.map((campaign) => {\n return <CampaignItem key={campaign.title} campaign={campaign} />;\n })}\n </Flex>\n </Box>\n </Box>\n );\n};\n\nconst Header: FC<CampaignsScriptReturn> = (props) => {\n const { t } = useTranslation();\n return (\n <Flex justify=\"between\" itemAlign=\"center\" pr={3}>\n <Text size=\"xl\">{t(\"tradingLeaderboard.campaigns\")}</Text>\n <Select.options\n size={\"xs\"}\n value={props.category}\n onValueChange={props.onCategoryChange}\n options={props.options}\n classNames={{\n // set the width of the trigger to the width of the content\n trigger: \"oui-w-[--radix-select-content-available-width]\",\n }}\n />\n </Flex>\n );\n};\n\nconst CampaignItem: FC<{ campaign: CurrentCampaigns }> = ({ campaign }) => {\n const { title, description, image, displayTime, learnMoreUrl, tradingUrl } =\n campaign;\n const { t } = useTranslation();\n\n return (\n <Flex intensity={800} r=\"xl\">\n <img\n className=\"oui-w-[400px] oui-h-[200px] oui-rounded-l-xl oui-object-fill\"\n src={image}\n alt={title}\n />\n\n <Flex\n itemAlign=\"start\"\n justify=\"between\"\n direction=\"column\"\n height=\"100%\"\n p={5}\n className=\"oui-font-semibold oui-flex-1\"\n >\n <Flex gap={1} direction=\"column\" itemAlign=\"start\">\n <Text size=\"xl\">{title}</Text>\n <Text size=\"sm\" intensity={36}>\n {description}\n </Text>\n </Flex>\n <Flex justify=\"between\" width=\"100%\">\n <Text size=\"xs\" intensity={54}>\n {displayTime}\n </Text>\n <Flex gap={3}>\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n size=\"md\"\n onClick={() => {\n window.open(learnMoreUrl, \"_blank\");\n }}\n >\n {t(\"tradingLeaderboard.learnMore\")}\n </Button>\n <Button\n size=\"md\"\n onClick={() => {\n window.open(tradingUrl, \"_self\");\n }}\n >\n {t(\"tradingLeaderboard.tradeNow\")}\n </Button>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n","import { FC } from \"react\";\nimport { MobileCampaigns } from \"./campaigns.mobile.ui\";\nimport { useCampaignsScript } from \"./campaigns.script\";\nimport { Campaigns } from \"./campaigns.ui\";\n\nexport type CampaignsWidgetProps = {\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const CampaignsWidget: FC<CampaignsWidgetProps> = (props) => {\n const state = useCampaignsScript();\n if (state.isMobile) {\n return <MobileCampaigns {...state} className={props.className} style={props.style} />;\n }\n return <Campaigns {...state} className={props.className} style={props.style} />;\n};\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { usePrivateQuery } from \"@orderly.network/hooks\";\nimport { TableSort, usePagination, useScreen } from \"@orderly.network/ui\";\nimport { differenceInDays } from \"date-fns\";\nimport { getDateRange, formatDateRange } from \"../../utils\";\nimport { useDataTap } from \"@orderly.network/react-app\";\nimport { API } from \"@orderly.network/types\";\nimport { useEndReached } from \"../../hooks/useEndReached\";\n\nexport type TradingListScriptOptioins = {};\n\nexport type TradingData = {\n account_id: string;\n address: string;\n broker_fee: number;\n date: string;\n perp_maker_volume: number;\n perp_taker_volume: number;\n perp_volume: number;\n total_fee: number;\n};\n\nexport type TradingResponse = {\n meta: API.RecordsMeta;\n rows: TradingData[];\n};\nexport type TradingListScriptReturn = ReturnType<typeof useTradingListScript>;\n\nexport const FilterDays = [7, 14, 30, 90] as const;\nexport type TFilterDays = (typeof FilterDays)[number];\nexport type DateRange = {\n from?: Date;\n to?: Date;\n};\n\nexport function useTradingListScript() {\n const [searchValue, setSearchValue] = useState(\"\");\n const [initialSort] = useState<TableSort>({\n sortKey: \"perp_volume\",\n sort: \"desc\",\n });\n const [sort, setSort] = useState<TableSort | undefined>(initialSort);\n const [dataList, setDataList] = useState<TradingData[]>([]);\n\n const { isMobile } = useScreen();\n\n const { dateRange, filterDay, updateFilterDay, filterItems, onFilter } =\n useFilter();\n\n const { page, pageSize, setPage, parsePagination } = usePagination({\n pageSize: 50,\n });\n\n const getKey = () => {\n const searchParams = new URLSearchParams();\n\n searchParams.set(\"page\", page.toString());\n searchParams.set(\"size\", pageSize.toString());\n\n searchParams.set(\"aggregateBy\", \"ACCOUNT\");\n\n if (sort) {\n const prefix = sort.sort === \"asc\" ? \"ascending\" : \"descending\";\n searchParams.set(\"sort\", `${prefix}_${sort.sortKey}`);\n }\n\n if (searchValue) {\n searchParams.set(\"address\", searchValue);\n }\n\n if (dateRange.from) {\n searchParams.set(\"start_date\", formatDateRange(dateRange.from!));\n }\n\n if (dateRange.to) {\n searchParams.set(\"end_date\", formatDateRange(dateRange.to!));\n }\n\n return `/v1/volume/broker/daily?${searchParams.toString()}`;\n };\n\n const { data, isLoading } = usePrivateQuery<TradingResponse>(getKey(), {\n formatter: (res) => res,\n revalidateOnFocus: false,\n });\n\n const dataSource = useMemo(() => {\n const list = data?.rows || [];\n const total = data?.meta.total || 0;\n if (sort?.sortKey === \"perp_volume\") {\n }\n return list?.map((item, index) => {\n let rank: string | number = index + 1;\n\n if (searchValue) {\n rank = \"-\";\n } else {\n if (sort?.sortKey === \"perp_volume\" && sort?.sort === \"asc\") {\n rank = total - (page - 1) * pageSize - index;\n } else if (sort?.sortKey === \"perp_volume\" && sort?.sort === \"desc\") {\n rank = (page - 1) * pageSize + index + 1;\n }\n }\n\n return {\n ...item,\n rank,\n };\n });\n }, [data, sort, page, pageSize, searchValue]);\n\n useEffect(() => {\n if (!isMobile) {\n return;\n }\n if (page === 1) {\n setDataList(dataSource);\n } else {\n setDataList((prev) => [...prev, ...dataSource]);\n }\n }, [dataSource, isMobile, page]);\n\n const sentinelRef = useRef<HTMLDivElement | null>(null);\n\n const pagination = useMemo(\n () => parsePagination(data?.meta),\n [parsePagination, data]\n );\n\n useEndReached(sentinelRef, () => {\n if (!isLoading && isMobile && page < (pagination?.pageTotal || 0)) {\n setPage(page + 1);\n }\n });\n\n const onSearchValueChange = (value: string) => {\n setSearchValue(value);\n };\n\n const clearSearchValue = useCallback(() => {\n setSearchValue(\"\");\n }, []);\n\n const onSort = useCallback(\n (sort?: TableSort) => {\n setSort(sort || initialSort);\n },\n [initialSort]\n );\n\n useEffect(() => {\n if (searchValue) {\n setPage(1);\n }\n }, [searchValue]);\n\n useEffect(() => {\n if (dateRange.to && dateRange.from) {\n setPage(1);\n }\n }, [dateRange]);\n\n const _data = useDataTap(dataSource);\n\n return {\n pagination,\n dateRange,\n filterDay,\n updateFilterDay,\n filterItems,\n onFilter,\n initialSort,\n onSort,\n dataSource: _data,\n isLoading,\n searchValue,\n onSearchValueChange,\n clearSearchValue,\n isMobile,\n sentinelRef,\n dataList,\n };\n}\n\nconst useFilter = () => {\n /// default is 90d\n const [filterDay, setFilterDay] = useState<TFilterDays | null>(90);\n\n const [dateRange, setDateRange] = useState<DateRange>(getDateRange(90));\n\n const updateFilterDay = (day: TFilterDays) => {\n setFilterDay(day);\n setDateRange(getDateRange(day));\n };\n\n const onFilter = (filter: { name: string; value: any }) => {\n if (filter.name === \"dateRange\") {\n const newDateRange = filter.value;\n setDateRange(newDateRange);\n\n if (newDateRange.from && newDateRange.to) {\n const offsetDay =\n Math.abs(differenceInDays(newDateRange.from, newDateRange.to)) + 1;\n\n const dateRange = getDateRange(offsetDay);\n if (\n formatDateRange(dateRange.from) ===\n formatDateRange(newDateRange.from) &&\n formatDateRange(dateRange.to) === formatDateRange(newDateRange.to)\n ) {\n setFilterDay(offsetDay as any);\n } else {\n setFilterDay(null);\n }\n }\n }\n };\n\n const filterItems = useMemo(() => {\n const dateRangeFilter = {\n type: \"range\",\n name: \"dateRange\",\n value: dateRange,\n max: 90,\n };\n\n return [dateRangeFilter] as any;\n }, [dateRange]);\n\n return {\n filterItems,\n onFilter,\n dateRange,\n filterDay,\n updateFilterDay,\n };\n};\n","import { useEffect, useRef, MutableRefObject } from \"react\";\n\n/**\n * Listen for the specified element to scroll to the bottom\n */\nexport function useEndReached(\n sentinelRef: MutableRefObject<HTMLDivElement | null>,\n onEndReached?: () => void\n) {\n const observer = useRef<IntersectionObserver>();\n const cb = useRef(onEndReached);\n\n cb.current = onEndReached;\n\n useEffect(() => {\n const options: IntersectionObserverInit = {\n root: null,\n rootMargin: \"0px\",\n threshold: 0,\n };\n\n const handleObserver = (entries: IntersectionObserverEntry[]) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n cb.current?.();\n }\n });\n };\n\n observer.current = new IntersectionObserver(handleObserver, options);\n\n return () => {\n observer.current?.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (sentinelRef.current) {\n observer.current?.observe(sentinelRef.current);\n }\n }, [sentinelRef.current]);\n}\n","import { FC, SVGProps } from \"react\";\nimport {\n Box,\n CloseCircleFillIcon,\n cn,\n DataFilter,\n Flex,\n Input,\n Text,\n} from \"@orderly.network/ui\";\nimport {\n FilterDays,\n TradingData,\n TradingListScriptReturn,\n} from \"./tradingList.script\";\nimport { AuthGuardDataTable } from \"@orderly.network/ui-connector\";\nimport { useTradingListColumns } from \"./column\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type TradingListProps = {\n style?: React.CSSProperties;\n className?: string;\n} & TradingListScriptReturn;\n\nexport const TradingList: FC<TradingListProps> = (props) => {\n const column = useTradingListColumns();\n const { t } = useTranslation();\n\n return (\n <Flex\n direction=\"column\"\n width=\"100%\"\n itemAlign=\"start\"\n intensity={900}\n r=\"2xl\"\n px={4}\n style={props.style}\n className={cn(\"oui-trading-leaderboard-trading-list\", props.className)}\n >\n <Flex\n width=\"100%\"\n justify=\"between\"\n itemAlign=\"center\"\n mt={2}\n className={cn(\n \"oui-trading-leaderboard-trading-filter\",\n \"oui-border-b oui-border-line\"\n )}\n >\n <Flex gap={3}>\n {props.filterItems.length > 0 && (\n <DataFilter\n items={props.filterItems}\n onFilter={(value: any) => {\n props.onFilter(value);\n }}\n className=\"oui-h-[53px] oui-border-none\"\n />\n )}\n {FilterDays.map((value) => {\n return (\n <button\n className=\"oui-relative oui-px-2 oui-py-[2px] oui-text-sm\"\n key={value}\n >\n <div className=\"oui-z-10\">\n <Text.gradient\n color={props.filterDay === value ? \"brand\" : undefined}\n className={\n props.filterDay !== value\n ? \"oui-text-base-contrast-54\"\n : \"\"\n }\n >\n {`${value}D`}\n </Text.gradient>\n </div>\n <div\n className=\"oui-gradient-primary oui-opacity-[.12] oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0 oui-rounded\"\n onClick={() => {\n props.updateFilterDay(value as any);\n }}\n ></div>\n </button>\n );\n })}\n </Flex>\n <Input\n value={props.searchValue}\n onValueChange={props.onSearchValueChange}\n placeholder={t(\"common.address.search.placeholder\")}\n className={cn(\n \"oui-trading-leaderboard-trading-search-input\",\n \"oui-w-[240px]\"\n )}\n size=\"sm\"\n prefix={\n <Box pl={3} pr={1}>\n <SearchIcon className=\"oui-text-base-contrast-36\" />\n </Box>\n }\n suffix={\n props.searchValue && (\n <Box mr={2}>\n <CloseCircleFillIcon\n size={14}\n className=\"oui-text-base-contrast-36 oui-cursor-pointer\"\n onClick={props.clearSearchValue}\n />\n </Box>\n )\n }\n autoComplete=\"off\"\n />\n </Flex>\n\n <AuthGuardDataTable\n loading={props.isLoading}\n id=\"oui-trading-leaderboard-trading-table\"\n columns={column}\n initialSort={props.initialSort}\n onSort={props.onSort}\n bordered\n dataSource={props.dataSource}\n generatedRowKey={(record: TradingData) => record.address}\n manualPagination\n manualSorting\n pagination={props.pagination}\n classNames={{\n root: \"!oui-h-[calc(100%_-_53px_-_8px)]\",\n }}\n onRow={(record, index) => {\n return {\n className: cn(\"oui-h-[48px]\"),\n };\n }}\n />\n </Flex>\n );\n};\n\nexport const SearchIcon: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7\" />\n </svg>\n);\n","import { Text, Column, Box } from \"@orderly.network/ui\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport const useTradingListColumns = () => {\n const { t } = useTranslation();\n return [\n {\n title: t(\"tradingLeaderboard.rank\"),\n dataIndex: \"rank\",\n width: 50,\n render: (value: number) => {\n return (\n <Box width={20} className=\"oui-text-center\">\n {value}\n </Box>\n );\n },\n },\n {\n title: t(\"common.address\"),\n dataIndex: \"address\",\n render: (value: string) => {\n return <Text.formatted rule=\"address\">{value}</Text.formatted>;\n },\n width: 100,\n },\n {\n title: t(\"tradingLeaderboard.tradingVolume\"),\n dataIndex: \"perp_volume\",\n onSort: true,\n render: (value: number) => {\n return (\n <Text.numeral prefix=\"$\" rule=\"price\" dp={2}>\n {value}\n </Text.numeral>\n );\n },\n width: 120,\n },\n ] as Column[];\n};\n","import { FC, SVGProps } from \"react\";\nimport {\n Box,\n CloseCircleFillIcon,\n cn,\n DataFilter,\n Flex,\n Input,\n Spinner,\n Text,\n} from \"@orderly.network/ui\";\nimport {\n FilterDays,\n TradingData,\n TradingListScriptReturn,\n} from \"./tradingList.script\";\nimport { AuthGuardDataTable } from \"@orderly.network/ui-connector\";\nimport { useTradingListColumns } from \"./column\";\n\nexport type TradingListProps = {\n style?: React.CSSProperties;\n className?: string;\n} & TradingListScriptReturn;\n\nexport const MobileTradingList: FC<TradingListProps> = (props) => {\n const column = useTradingListColumns();\n\n return (\n <Flex\n direction=\"column\"\n width=\"100%\"\n itemAlign=\"start\"\n intensity={900}\n r=\"2xl\"\n px={4}\n style={props.style}\n className={cn(\n \"oui-mobile-trading-leaderboard-trading-list\",\n props.className\n )}\n >\n <Flex\n width=\"100%\"\n justify=\"between\"\n itemAlign=\"center\"\n className={cn(\"oui-mobile-trading-leaderboard-trading-filter\")}\n >\n {props.filterItems.length > 0 && (\n <DataFilter\n items={props.filterItems}\n onFilter={(value: any) => {\n props.onFilter(value);\n }}\n className=\"oui-h-[40px] oui-border-none\"\n />\n )}\n </Flex>\n\n <AuthGuardDataTable\n classNames={{\n root: \"oui-pb-4\",\n body: \"oui-text-2xs\",\n scroll: \"oui-overflow-y-hidden oui-h-full\",\n }}\n loading={props.isLoading}\n id=\"oui-trading-leaderboard-trading-table\"\n columns={column}\n initialSort={props.initialSort}\n onSort={props.onSort}\n dataSource={props.dataList}\n generatedRowKey={(record: TradingData) => record.address}\n manualPagination\n manualSorting\n onRow={(record, index) => {\n return {\n className: cn(\"oui-h-[30px]\"),\n };\n }}\n />\n <div\n ref={props.sentinelRef}\n className=\"oui-relative oui-invisible oui-h-[1px] oui-top-[-300px]\"\n />\n {props.isLoading && props.dataList.length > 0 && (\n <Flex itemAlign=\"center\" justify=\"center\" width=\"100%\" height={40}>\n <Spinner size=\"sm\" />\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport const SearchIcon: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7\" />\n </svg>\n);\n","import { FC } from \"react\";\nimport { useTradingListScript } from \"./tradingList.script\";\nimport { TradingList, TradingListProps } from \"./tradingList.ui\";\nimport { MobileTradingList } from \"./tradingList.mobile.ui\";\n\nexport type TradingListWidgetProps = Pick<\n TradingListProps,\n \"style\" | \"className\"\n>;\n\nexport const TradingListWidget: FC<TradingListWidgetProps> = (props) => {\n const state = useTradingListScript();\n if (state.isMobile) {\n return <MobileTradingList {...state} {...props} />;\n }\n return <TradingList {...state} {...props} />;\n};\n","import { useMemo } from \"react\";\nimport { Campaign } from \"../../components/provider\";\nimport { useScreen } from \"@orderly.network/ui\";\nimport { useAccount } from \"@orderly.network/hooks\";\nimport { AccountStatusEnum } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nexport type LeaderboardScriptReturn = ReturnType<typeof useLeaderboardScript>;\n\nexport type LeaderboardScriptOptions = {\n backgroundSrc?: string;\n campaigns?: Campaign[];\n};\n\nfunction isVideoSrc(src?: string) {\n const extension = src?.split(\".\").pop();\n return [\"mp4\", \"webm\", \"avi\", \"ogg\"].includes(extension ?? \"\");\n}\n\nexport function useLeaderboardScript(options: LeaderboardScriptOptions) {\n const { backgroundSrc, campaigns = [] } = options;\n const { isMobile } = useScreen();\n const { state } = useAccount();\n const { wrongNetwork, disabledConnect } = useAppContext();\n\n const showCampaigns = useMemo(() => campaigns?.length > 0, [campaigns]);\n\n const canTrading =\n !wrongNetwork &&\n !disabledConnect &&\n (state.status >= AccountStatusEnum.EnableTrading ||\n state.status === AccountStatusEnum.EnableTradingWithoutConnected);\n\n const isVideo = useMemo(() => {\n return isVideoSrc(backgroundSrc);\n }, [backgroundSrc]);\n\n return {\n backgroundSrc,\n isVideo,\n showCampaigns,\n isMobile,\n canTrading,\n };\n}\n","import { FC } from \"react\";\nimport { cn, Flex } from \"@orderly.network/ui\";\nimport { TradingListWidget } from \"../../components/tradingList/widget\";\nimport { CampaignsWidget } from \"../../components/campaigns\";\nimport { LeaderboardScriptReturn } from \"./leaderboard.script\";\n\nexport type LeaderboardProps = {\n style?: React.CSSProperties;\n className?: string;\n} & LeaderboardScriptReturn;\n\nexport const Leaderboard: FC<LeaderboardProps> = (props) => {\n const renderBackground = () => {\n const linearGradient =\n \"linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)\";\n\n if (props.isVideo) {\n return (\n <div\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n >\n <div\n style={{\n backgroundImage: linearGradient,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n />\n <video\n autoPlay\n loop\n muted\n className={cn(\n // rest style\n \"oui-border-none oui-outline-none oui-bg-transparent\",\n \"oui-w-full oui-h-full\",\n // \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-object-cover\",\n \"oui-opacity-50\"\n )}\n >\n <source src={props.backgroundSrc} type=\"video/mp4\" />\n <source src={props.backgroundSrc} type=\"video/webm\" />\n <source src={props.backgroundSrc} type=\"video/ogg\" />\n <source src={props.backgroundSrc} type=\"video/avi\" />\n Your browser does not support the video tag.\n </video>\n </div>\n );\n }\n\n if (props.backgroundSrc) {\n return (\n <div\n style={{\n backgroundImage: `${linearGradient}, url(${props.backgroundSrc}) `,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\",\n \"oui-opacity-50\"\n )}\n />\n );\n }\n };\n\n return (\n <div\n style={props.style}\n className={cn(\"oui-h-full oui-mix-blend-screen\", props.className)}\n >\n {renderBackground()}\n <Flex\n direction=\"column\"\n gapY={5}\n height=\"100%\"\n className={cn(\n \"oui-trading-leaderboard oui-relative\",\n \"oui-max-w-[1040px] oui-px-3 oui-mx-auto \"\n )}\n >\n {props.showCampaigns && <CampaignsWidget />}\n <TradingListWidget\n className={cn(\n props.showCampaigns\n ? \"oui-h-[calc(100%_-_288px_-_20px)]\"\n : \"oui-h-full\"\n )}\n />\n </Flex>\n </div>\n );\n};\n","import { FC } from \"react\";\nimport { cn, Flex } from \"@orderly.network/ui\";\nimport { TradingListWidget } from \"../../components/tradingList/widget\";\nimport { CampaignsWidget } from \"../../components/campaigns\";\nimport { LeaderboardScriptReturn } from \"./leaderboard.script\";\nimport { BottomNavBarWidget } from \"@orderly.network/trading\";\n\nexport type LeaderboardProps = {\n style?: React.CSSProperties;\n className?: string;\n} & LeaderboardScriptReturn;\n\nexport const MobileLeaderboardWidget: FC<LeaderboardProps> = (props) => {\n const renderBackground = () => {\n const linearGradient =\n \"linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)\";\n\n if (props.isVideo) {\n return (\n <div\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n >\n <div\n style={{\n backgroundImage: linearGradient,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n />\n <video\n playsInline\n webkit-playsinline\n autoPlay\n loop\n muted\n className={cn(\n // rest style\n \"oui-border-none oui-outline-none oui-bg-transparent oui-pointer-events-none\",\n \"oui-w-full oui-h-full\",\n // \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-object-cover\",\n \"oui-opacity-50\"\n )}\n >\n <source src={props.backgroundSrc} type=\"video/mp4\" />\n <source src={props.backgroundSrc} type=\"video/webm\" />\n <source src={props.backgroundSrc} type=\"video/ogg\" />\n <source src={props.backgroundSrc} type=\"video/avi\" />\n Your browser does not support the video tag.\n </video>\n </div>\n );\n }\n\n if (props.backgroundSrc) {\n return (\n <div\n style={{\n backgroundImage: `${linearGradient}, url(${props.backgroundSrc}) `,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\",\n \"oui-opacity-50\"\n )}\n />\n );\n }\n };\n return (\n <div\n style={{\n paddingBottom: \"calc(64px + env(safe-area-inset-bottom))\",\n }}\n className={cn(\n \"oui-grid oui-grid-rows-[auto,1fr,auto] oui-h-screen oui-gap-1 oui-relative oui-bg-base-10\",\n \"oui-relative oui-h-full oui-mix-blend-screen\",\n props.className\n )}\n >\n {renderBackground()}\n <Flex\n direction=\"column\"\n gapY={3}\n height=\"100%\"\n px={3}\n pt={3}\n pb={3}\n className={cn(\n \"oui-trading-leaderboard-mobile oui-overflow-y-auto oui-custom-scrollbar\",\n \"oui-relative oui-h-[calc(100vh_-_64px)]\"\n )}\n >\n {props.showCampaigns && <CampaignsWidget />}\n <TradingListWidget className={cn(!props.canTrading && \"oui-h-full\")} />\n <div className=\"oui-fixed oui-left-0 oui-right-0 oui-bottom-0\">\n <BottomNavBarWidget />\n </div>\n </Flex>\n </div>\n );\n};\n","import { FC } from \"react\";\nimport { useLeaderboardScript } from \"./leaderboard.script\";\nimport { Leaderboard, LeaderboardProps } from \"./leaderboard.ui\";\nimport {\n TradingLeaderboardProvider,\n TradingLeaderboardProviderProps,\n} from \"../../components/provider\";\nimport { MobileLeaderboardWidget } from \"./leaderboard.mobile.ui\";\n\nexport type LeaderboardWidgetProps = TradingLeaderboardProviderProps &\n Pick<LeaderboardProps, \"style\" | \"className\">;\n\nexport const LeaderboardWidget: FC<LeaderboardWidgetProps> = (props) => {\n const state = useLeaderboardScript({\n backgroundSrc: props.backgroundSrc,\n campaigns: props.campaigns,\n });\n\n return (\n <TradingLeaderboardProvider campaigns={props.campaigns} href={props.href}>\n {state.isMobile ? (\n <MobileLeaderboardWidget {...state} />\n ) : (\n <Leaderboard\n {...state}\n className={props.className}\n style={props.style}\n />\n )}\n </TradingLeaderboardProvider>\n );\n};\n"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,17 @@
1
+ import { useScreen, Box, cn, Flex, Text, Select, Button, usePagination, DataFilter, Input, CloseCircleFillIcon, Spinner } from '@orderly.network/ui';
2
+ import { useTranslation } from '@orderly.network/i18n';
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { createContext, useContext, useState, useMemo, useEffect, useRef, useCallback } from 'react';
5
+ import rt from 'embla-carousel-react';
6
+ import { subDays, format, differenceInDays } from 'date-fns';
7
+ import { usePrivateQuery, useAccount } from '@orderly.network/hooks';
8
+ import { useDataTap, useAppContext } from '@orderly.network/react-app';
9
+ import { AuthGuardDataTable } from '@orderly.network/ui-connector';
10
+ import { AccountStatusEnum } from '@orderly.network/types';
11
+ import { BottomNavBarWidget } from '@orderly.network/trading';
12
+
13
+ var V=25,q=6,xe=e=>e.currentCampaigns.length===0?null:jsxs(Box,{width:"100%",intensity:900,p:3,className:cn("oui-mobile-trading-leaderboard-campaigns oui-rounded-[20px]",e.className),style:e.style,children:[jsx(He,{...e}),jsx(Box,{r:"xl",mt:3,ref:e.enableScroll?e.emblaRef:void 0,className:cn("oui-w-full oui-min-w-0 oui-overflow-hidden","oui-select-none oui-cursor-pointer"),children:jsx(Flex,{children:e.currentCampaigns.map(t=>jsx(je,{campaign:t},t.title))})}),e.enableScroll&&jsx(Je,{style:{width:V*e.currentCampaigns.length},list:e.currentCampaigns,scrollIndex:e.scrollIndex,scrollTo:e.emblaApi?.scrollTo})]}),He=e=>{let{t}=useTranslation();return jsxs(Flex,{justify:"between",itemAlign:"center",children:[jsx(Text,{size:"base",intensity:80,children:t("tradingLeaderboard.campaigns")}),jsx(Select.options,{size:"xs",value:e.category,onValueChange:e.onCategoryChange,options:e.options,classNames:{trigger:"oui-w-[--radix-select-content-available-width]"}})]})},je=({campaign:e})=>{let{title:t,description:o,image:r,displayTime:l,learnMoreUrl:u,tradingUrl:n}=e,{t:a}=useTranslation();return jsxs(Box,{intensity:800,r:"xl",className:"oui-flex-[0_0_100%]",children:[jsx("img",{className:"oui-w-full oui-h-[calc((100vw-48px)/2)] oui-rounded-t-xl oui-object-fill",src:r,alt:t}),jsxs(Flex,{itemAlign:"start",justify:"between",direction:"column",height:"100%",p:4,gapY:3,className:"oui-font-semibold",children:[jsxs(Flex,{direction:"column",itemAlign:"start",gapY:1,children:[jsx(Text,{size:"sm",children:t}),jsx(Text,{size:"2xs",intensity:54,children:l}),jsx(Text,{size:"2xs",intensity:36,children:o})]}),jsxs(Flex,{justify:"between",width:"100%",gapX:3,children:[jsx(Button,{variant:"outlined",color:"secondary",fullWidth:true,size:"md",onClick:()=>{window.open(u,"_blank");},children:a("tradingLeaderboard.learnMore")}),jsx(Button,{size:"md",fullWidth:true,onClick:()=>{window.open(n,"_self");},children:a("tradingLeaderboard.tradeNow")})]})]})]})},Je=e=>{let{style:t,scrollIndex:o,list:r}=e;return jsxs(Flex,{mt:3,r:"full",height:q,className:cn("oui-bg-line oui-mx-auto oui-relative"),style:e.style,children:[r.map((l,u)=>jsx(Box,{width:V,height:q,onClick:()=>{e.scrollTo?.(u);},r:"full",className:"oui-cursor-pointer"},u)),jsx(Box,{width:V,height:q,r:"full",className:cn("oui-absolute oui-left-0 oui-top-0","oui-transition-all oui-duration-300","oui-bg-primary"),style:{transform:`translateX(${o*V}px)`}})]})};var Ce=createContext({}),he=e=>jsx(Ce.Provider,{value:{campaigns:e.campaigns,href:e.href,backgroundSrc:e.backgroundSrc},children:e.children}),Se=()=>useContext(Ce);var $=e=>({from:subDays(new Date,e-1),to:new Date}),T=e=>format(e,"yyyy-MM-dd");function Z(e){let t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];typeof e=="string"&&(e=new Date(e));let o=e.getUTCFullYear(),r=t[e.getUTCMonth()],l=e.getUTCDate(),u=String(e.getUTCHours()).padStart(2,"0"),n=String(e.getUTCMinutes()).padStart(2,"0");return `${r} ${l}, ${o} ${u}:${n}`}function te(){let{t:e}=useTranslation(),{campaigns:t=[],href:o}=Se(),[r,l]=useState("ongoing"),{isMobile:u}=useScreen(),n=useMemo(()=>{let g=new Date;return t.reduce((s,p)=>{let D=new Date(p.startTime),f=new Date(p.endTime);return g>=D&&g<=f?s.ongoing.push(p):g>f?s.past.push(p):s.future.push(p),s},{ongoing:[],past:[],future:[]})},[t]),a=useMemo(()=>[{label:e("tradingLeaderboard.ongoing"),value:"ongoing"},{label:e("tradingLeaderboard.past"),value:"past"},{label:e("tradingLeaderboard.future"),value:"future"}].filter(s=>n[s.value].length>0),[n,e]),i=useMemo(()=>n[r].map(s=>{let{startTime:p,endTime:D}=s,f,I=o?.trading;return typeof s.href=="object"?(f=s.href.learnMore,I=s.href.trading):f=s.href,{...s,displayTime:`${Z(p)} - ${Z(D)} UTC`,learnMoreUrl:f,tradingUrl:I}}),[n,r,o]);useEffect(()=>{let s=["ongoing","future","past"].find(p=>n[p].length>0);s&&l(s);},[n]);let C=g=>{l(g);},[N,j]=useState(0),[J,m]=rt({loop:false,slidesToScroll:"auto"});return useEffect(()=>{m?.on("select",()=>{j(m?.selectedScrollSnap());});},[m]),{options:a,currentCampaigns:i,category:r,onCategoryChange:C,tradingUrl:o?.trading,isMobile:u,emblaRef:J,emblaApi:m,scrollIndex:N,enableScroll:i?.length>1}}var re=e=>e.currentCampaigns.length===0?null:jsxs(Box,{width:"100%",intensity:900,p:5,pr:2,height:288,className:cn("oui-trading-leaderboard-campaigns oui-rounded-[20px]",e.className),style:e.style,children:[jsx(it,{...e}),jsx(Box,{mt:5,r:"xl",className:cn("oui-overflow-y-auto","oui-custom-scrollbar"),children:jsx(Flex,{gapY:5,height:200,direction:"column",r:"xl",className:"oui-pr-1.5",children:e.currentCampaigns.map(t=>jsx(nt,{campaign:t},t.title))})})]}),it=e=>{let{t}=useTranslation();return jsxs(Flex,{justify:"between",itemAlign:"center",pr:3,children:[jsx(Text,{size:"xl",children:t("tradingLeaderboard.campaigns")}),jsx(Select.options,{size:"xs",value:e.category,onValueChange:e.onCategoryChange,options:e.options,classNames:{trigger:"oui-w-[--radix-select-content-available-width]"}})]})},nt=({campaign:e})=>{let{title:t,description:o,image:r,displayTime:l,learnMoreUrl:u,tradingUrl:n}=e,{t:a}=useTranslation();return jsxs(Flex,{intensity:800,r:"xl",children:[jsx("img",{className:"oui-w-[400px] oui-h-[200px] oui-rounded-l-xl oui-object-fill",src:r,alt:t}),jsxs(Flex,{itemAlign:"start",justify:"between",direction:"column",height:"100%",p:5,className:"oui-font-semibold oui-flex-1",children:[jsxs(Flex,{gap:1,direction:"column",itemAlign:"start",children:[jsx(Text,{size:"xl",children:t}),jsx(Text,{size:"sm",intensity:36,children:o})]}),jsxs(Flex,{justify:"between",width:"100%",children:[jsx(Text,{size:"xs",intensity:54,children:l}),jsxs(Flex,{gap:3,children:[jsx(Button,{variant:"outlined",color:"secondary",size:"md",onClick:()=>{window.open(u,"_blank");},children:a("tradingLeaderboard.learnMore")}),jsx(Button,{size:"md",onClick:()=>{window.open(n,"_self");},children:a("tradingLeaderboard.tradeNow")})]})]})]})]})};var _=e=>{let t=te();return t.isMobile?jsx(xe,{...t,className:e.className,style:e.style}):jsx(re,{...t,className:e.className,style:e.style})};function De(e,t){let o=useRef(),r=useRef(t);r.current=t,useEffect(()=>{let l={root:null,rootMargin:"0px",threshold:0},u=n=>{n.forEach(a=>{a.isIntersecting&&r.current?.();});};return o.current=new IntersectionObserver(u,l),()=>{o.current?.disconnect();}},[]),useEffect(()=>{e.current&&o.current?.observe(e.current);},[e.current]);}var Me=[7,14,30,90];function ie(){let[e,t]=useState(""),[o]=useState({sortKey:"perp_volume",sort:"desc"}),[r,l]=useState(o),[u,n]=useState([]),{isMobile:a}=useScreen(),{dateRange:i,filterDay:C,updateFilterDay:N,filterItems:j,onFilter:J}=gt(),{page:m,pageSize:g,setPage:s,parsePagination:p}=usePagination({pageSize:50}),D=()=>{let d=new URLSearchParams;if(d.set("page",m.toString()),d.set("size",g.toString()),d.set("aggregateBy","ACCOUNT"),r){let X=r.sort==="asc"?"ascending":"descending";d.set("sort",`${X}_${r.sortKey}`);}return e&&d.set("address",e),i.from&&d.set("start_date",T(i.from)),i.to&&d.set("end_date",T(i.to)),`/v1/volume/broker/daily?${d.toString()}`},{data:f,isLoading:I}=usePrivateQuery(D(),{formatter:d=>d,revalidateOnFocus:false}),A=useMemo(()=>{let d=f?.rows||[],X=f?.meta.total||0;return r?.sortKey,d?.map((Ge,Q)=>{let B=Q+1;return e?B="-":r?.sortKey==="perp_volume"&&r?.sort==="asc"?B=X-(m-1)*g-Q:r?.sortKey==="perp_volume"&&r?.sort==="desc"&&(B=(m-1)*g+Q+1),{...Ge,rank:B}})},[f,r,m,g,e]);useEffect(()=>{a&&n(m===1?A:d=>[...d,...A]);},[A,a,m]);let pe=useRef(null),fe=useMemo(()=>p(f?.meta),[p,f]);De(pe,()=>{!I&&a&&m<(fe?.pageTotal||0)&&s(m+1);});let $e=d=>{t(d);},Ee=useCallback(()=>{t("");},[]),Ke=useCallback(d=>{l(d||o);},[o]);useEffect(()=>{e&&s(1);},[e]),useEffect(()=>{i.to&&i.from&&s(1);},[i]);let Oe=useDataTap(A);return {pagination:fe,dateRange:i,filterDay:C,updateFilterDay:N,filterItems:j,onFilter:J,initialSort:o,onSort:Ke,dataSource:Oe,isLoading:I,searchValue:e,onSearchValueChange:$e,clearSearchValue:Ee,isMobile:a,sentinelRef:pe,dataList:u}}var gt=()=>{let[e,t]=useState(90),[o,r]=useState($(90)),l=a=>{t(a),r($(a));},u=a=>{if(a.name==="dateRange"){let i=a.value;if(r(i),i.from&&i.to){let C=Math.abs(differenceInDays(i.from,i.to))+1,N=$(C);T(N.from)===T(i.from)&&T(N.to)===T(i.to)?t(C):t(null);}}};return {filterItems:useMemo(()=>[{type:"range",name:"dateRange",value:o,max:90}],[o]),onFilter:u,dateRange:o,filterDay:e,updateFilterDay:l}};var K=()=>{let{t:e}=useTranslation();return [{title:e("tradingLeaderboard.rank"),dataIndex:"rank",width:50,render:t=>jsx(Box,{width:20,className:"oui-text-center",children:t})},{title:e("common.address"),dataIndex:"address",render:t=>jsx(Text.formatted,{rule:"address",children:t}),width:100},{title:e("tradingLeaderboard.tradingVolume"),dataIndex:"perp_volume",onSort:true,render:t=>jsx(Text.numeral,{prefix:"$",rule:"price",dp:2,children:t}),width:120}]};var le=e=>{let t=K(),{t:o}=useTranslation();return jsxs(Flex,{direction:"column",width:"100%",itemAlign:"start",intensity:900,r:"2xl",px:4,style:e.style,className:cn("oui-trading-leaderboard-trading-list",e.className),children:[jsxs(Flex,{width:"100%",justify:"between",itemAlign:"center",mt:2,className:cn("oui-trading-leaderboard-trading-filter","oui-border-b oui-border-line"),children:[jsxs(Flex,{gap:3,children:[e.filterItems.length>0&&jsx(DataFilter,{items:e.filterItems,onFilter:r=>{e.onFilter(r);},className:"oui-h-[53px] oui-border-none"}),Me.map(r=>jsxs("button",{className:"oui-relative oui-px-2 oui-py-[2px] oui-text-sm",children:[jsx("div",{className:"oui-z-10",children:jsx(Text.gradient,{color:e.filterDay===r?"brand":void 0,className:e.filterDay!==r?"oui-text-base-contrast-54":"",children:`${r}D`})}),jsx("div",{className:"oui-gradient-primary oui-opacity-[.12] oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0 oui-rounded",onClick:()=>{e.updateFilterDay(r);}})]},r))]}),jsx(Input,{value:e.searchValue,onValueChange:e.onSearchValueChange,placeholder:o("common.address.search.placeholder"),className:cn("oui-trading-leaderboard-trading-search-input","oui-w-[240px]"),size:"sm",prefix:jsx(Box,{pl:3,pr:1,children:jsx(Tt,{className:"oui-text-base-contrast-36"})}),suffix:e.searchValue&&jsx(Box,{mr:2,children:jsx(CloseCircleFillIcon,{size:14,className:"oui-text-base-contrast-36 oui-cursor-pointer",onClick:e.clearSearchValue})}),autoComplete:"off"})]}),jsx(AuthGuardDataTable,{loading:e.isLoading,id:"oui-trading-leaderboard-trading-table",columns:t,initialSort:e.initialSort,onSort:e.onSort,bordered:true,dataSource:e.dataSource,generatedRowKey:r=>r.address,manualPagination:true,manualSorting:true,pagination:e.pagination,classNames:{root:"!oui-h-[calc(100%_-_53px_-_8px)]"},onRow:(r,l)=>({className:cn("oui-h-[48px]")})})]})},Tt=e=>jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",...e,children:jsx("path",{d:"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7"})});var Ae=e=>{let t=K();return jsxs(Flex,{direction:"column",width:"100%",itemAlign:"start",intensity:900,r:"2xl",px:4,style:e.style,className:cn("oui-mobile-trading-leaderboard-trading-list",e.className),children:[jsx(Flex,{width:"100%",justify:"between",itemAlign:"center",className:cn("oui-mobile-trading-leaderboard-trading-filter"),children:e.filterItems.length>0&&jsx(DataFilter,{items:e.filterItems,onFilter:o=>{e.onFilter(o);},className:"oui-h-[40px] oui-border-none"})}),jsx(AuthGuardDataTable,{classNames:{root:"oui-pb-4",body:"oui-text-2xs",scroll:"oui-overflow-y-hidden oui-h-full"},loading:e.isLoading,id:"oui-trading-leaderboard-trading-table",columns:t,initialSort:e.initialSort,onSort:e.onSort,dataSource:e.dataList,generatedRowKey:o=>o.address,manualPagination:true,manualSorting:true,onRow:(o,r)=>({className:cn("oui-h-[30px]")})}),jsx("div",{ref:e.sentinelRef,className:"oui-relative oui-invisible oui-h-[1px] oui-top-[-300px]"}),e.isLoading&&e.dataList.length>0&&jsx(Flex,{itemAlign:"center",justify:"center",width:"100%",height:40,children:jsx(Spinner,{size:"sm"})})]})};var z=e=>{let t=ie();return t.isMobile?jsx(Ae,{...t,...e}):jsx(le,{...t,...e})};function kt(e){let t=e?.split(".").pop();return ["mp4","webm","avi","ogg"].includes(t??"")}function ce(e){let{backgroundSrc:t,campaigns:o=[]}=e,{isMobile:r}=useScreen(),{state:l}=useAccount(),{wrongNetwork:u,disabledConnect:n}=useAppContext(),a=useMemo(()=>o?.length>0,[o]),i=!u&&!n&&(l.status>=AccountStatusEnum.EnableTrading||l.status===AccountStatusEnum.EnableTradingWithoutConnected),C=useMemo(()=>kt(t),[t]);return {backgroundSrc:t,isVideo:C,showCampaigns:a,isMobile:r,canTrading:i}}var me=e=>{let t=()=>{let o="linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)";if(e.isVideo)return jsxs("div",{className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full"),children:[jsx("div",{style:{backgroundImage:o,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full")}),jsxs("video",{autoPlay:true,loop:true,muted:true,className:cn("oui-border-none oui-outline-none oui-bg-transparent","oui-w-full oui-h-full","oui-object-cover","oui-opacity-50"),children:[jsx("source",{src:e.backgroundSrc,type:"video/mp4"}),jsx("source",{src:e.backgroundSrc,type:"video/webm"}),jsx("source",{src:e.backgroundSrc,type:"video/ogg"}),jsx("source",{src:e.backgroundSrc,type:"video/avi"}),"Your browser does not support the video tag."]})]});if(e.backgroundSrc)return jsx("div",{style:{backgroundImage:`${o}, url(${e.backgroundSrc}) `,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full","oui-opacity-50")})};return jsxs("div",{style:e.style,className:cn("oui-h-full oui-mix-blend-screen",e.className),children:[t(),jsxs(Flex,{direction:"column",gapY:5,height:"100%",className:cn("oui-trading-leaderboard oui-relative","oui-max-w-[1040px] oui-px-3 oui-mx-auto "),children:[e.showCampaigns&&jsx(_,{}),jsx(z,{className:cn(e.showCampaigns?"oui-h-[calc(100%_-_288px_-_20px)]":"oui-h-full")})]})]})};var Ue=e=>{let t=()=>{let o="linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)";if(e.isVideo)return jsxs("div",{className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full"),children:[jsx("div",{style:{backgroundImage:o,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full")}),jsxs("video",{playsInline:true,"webkit-playsinline":true,autoPlay:true,loop:true,muted:true,className:cn("oui-border-none oui-outline-none oui-bg-transparent oui-pointer-events-none","oui-w-full oui-h-full","oui-object-cover","oui-opacity-50"),children:[jsx("source",{src:e.backgroundSrc,type:"video/mp4"}),jsx("source",{src:e.backgroundSrc,type:"video/webm"}),jsx("source",{src:e.backgroundSrc,type:"video/ogg"}),jsx("source",{src:e.backgroundSrc,type:"video/avi"}),"Your browser does not support the video tag."]})]});if(e.backgroundSrc)return jsx("div",{style:{backgroundImage:`${o}, url(${e.backgroundSrc}) `,backgroundSize:"cover",backgroundRepeat:"no-repeat"},className:cn("oui-absolute oui-top-0 oui-left-0","oui-w-full oui-h-full","oui-opacity-50")})};return jsxs("div",{style:{paddingBottom:"calc(64px + env(safe-area-inset-bottom))"},className:cn("oui-grid oui-grid-rows-[auto,1fr,auto] oui-h-screen oui-gap-1 oui-relative oui-bg-base-10","oui-relative oui-h-full oui-mix-blend-screen",e.className),children:[t(),jsxs(Flex,{direction:"column",gapY:3,height:"100%",px:3,pt:3,pb:3,className:cn("oui-trading-leaderboard-mobile oui-overflow-y-auto oui-custom-scrollbar","oui-relative oui-h-[calc(100vh_-_64px)]"),children:[e.showCampaigns&&jsx(_,{}),jsx(z,{className:cn(!e.canTrading&&"oui-h-full")}),jsx("div",{className:"oui-fixed oui-left-0 oui-right-0 oui-bottom-0",children:jsx(BottomNavBarWidget,{})})]})]})};var _t=e=>{let t=ce({backgroundSrc:e.backgroundSrc,campaigns:e.campaigns});return jsx(he,{campaigns:e.campaigns,href:e.href,children:t.isMobile?jsx(Ue,{...t}):jsx(me,{...t,className:e.className,style:e.style})})};
14
+
15
+ export { re as Campaigns, _ as CampaignsWidget, me as Leaderboard, _t as LeaderboardWidget, Ce as TradingLeaderboardContext, he as TradingLeaderboardProvider, le as TradingList, z as TradingListWidget, te as useCampaignsScript, ce as useLeaderboardScript, Se as useTradingLeaderboardContext, ie as useTradingListScript };
16
+ //# sourceMappingURL=out.js.map
17
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/campaigns/campaigns.mobile.ui.tsx","../src/components/campaigns/campaigns.script.ts","../src/components/provider/index.tsx","../src/utils.ts","../src/components/campaigns/campaigns.ui.tsx","../src/components/campaigns/widget.tsx","../src/components/tradingList/tradingList.script.ts","../src/hooks/useEndReached.ts","../src/components/tradingList/tradingList.ui.tsx","../src/components/tradingList/column.tsx","../src/components/tradingList/tradingList.mobile.ui.tsx","../src/components/tradingList/widget.tsx","../src/page/leaderboard/leaderboard.script.ts","../src/page/leaderboard/leaderboard.ui.tsx","../src/page/leaderboard/leaderboard.mobile.ui.tsx","../src/page/leaderboard/widget.tsx"],"names":["cn","Box","Text","Flex","Button","Select","useTranslation","jsx","jsxs","scrollIndicatorWidth","scrollIndicatorHeight","MobileCampaigns","props","Header","campaign","CampaignItem","ScrollIndicator","title","description","image","displayTime","learnMoreUrl","tradingUrl","t","style","scrollIndex","list","item","index","useEffect","useMemo","useState","useScreen","useEmblaCarousel","createContext","useContext","TradingLeaderboardContext","TradingLeaderboardProvider","useTradingLeaderboardContext","format","subDays","getDateRange","offsetDay","formatDateRange","date","formatCampaignDate","monthNames","year","month","day","hours","minutes","useCampaignsScript","campaigns","href","category","setCategory","isMobile","filterCampaigns","now","acc","startTime","endTime","options","currentCampaigns","firstAvailableCategory","onCategoryChange","value","setScrollIndex","emblaRef","emblaApi","Campaigns","CampaignsWidget","state","useCallback","useRef","usePrivateQuery","usePagination","differenceInDays","useDataTap","useEndReached","sentinelRef","onEndReached","observer","cb","handleObserver","entries","entry","FilterDays","useTradingListScript","searchValue","setSearchValue","initialSort","sort","setSort","dataList","setDataList","dateRange","filterDay","updateFilterDay","filterItems","onFilter","useFilter","page","pageSize","setPage","parsePagination","getKey","searchParams","prefix","data","isLoading","res","dataSource","total","rank","prev","pagination","onSearchValueChange","clearSearchValue","onSort","_data","setFilterDay","setDateRange","filter","newDateRange","CloseCircleFillIcon","DataFilter","Input","AuthGuardDataTable","useTradingListColumns","TradingList","column","SearchIcon","record","Spinner","MobileTradingList","TradingListWidget","useAccount","AccountStatusEnum","useAppContext","isVideoSrc","src","extension","useLeaderboardScript","backgroundSrc","wrongNetwork","disabledConnect","showCampaigns","canTrading","isVideo","Leaderboard","renderBackground","linearGradient","BottomNavBarWidget","MobileLeaderboardWidget","LeaderboardWidget"],"mappings":"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","sourcesContent":["import { FC } from \"react\";\nimport { cn, Box, Text, Flex, Button, Select } from \"@orderly.network/ui\";\nimport { CampaignsScriptReturn, CurrentCampaigns } from \"./campaigns.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type CampaignsProps = {\n className?: string;\n style?: React.CSSProperties;\n} & CampaignsScriptReturn;\n\nconst scrollIndicatorWidth = 25;\nconst scrollIndicatorHeight = 6;\n\nexport const MobileCampaigns: FC<CampaignsProps> = (props) => {\n if (props.currentCampaigns.length === 0) {\n return null;\n }\n\n return (\n <Box\n width=\"100%\"\n intensity={900}\n p={3}\n className={cn(\n \"oui-mobile-trading-leaderboard-campaigns oui-rounded-[20px]\",\n props.className\n )}\n style={props.style}\n >\n <Header {...props} />\n <Box\n r=\"xl\"\n mt={3}\n ref={props.enableScroll ? props.emblaRef : undefined}\n className={cn(\n \"oui-w-full oui-min-w-0 oui-overflow-hidden\",\n \"oui-select-none oui-cursor-pointer\"\n )}\n >\n <Flex>\n {props.currentCampaigns.map((campaign) => {\n return <CampaignItem key={campaign.title} campaign={campaign} />;\n })}\n </Flex>\n </Box>\n {props.enableScroll && (\n <ScrollIndicator\n style={{\n width: scrollIndicatorWidth * props.currentCampaigns.length,\n }}\n list={props.currentCampaigns}\n scrollIndex={props.scrollIndex}\n scrollTo={props.emblaApi?.scrollTo}\n />\n )}\n </Box>\n );\n};\n\nconst Header: FC<CampaignsScriptReturn> = (props) => {\n const { t } = useTranslation();\n\n return (\n <Flex justify=\"between\" itemAlign=\"center\">\n <Text size=\"base\" intensity={80}>\n {t(\"tradingLeaderboard.campaigns\")}\n </Text>\n <Select.options\n size={\"xs\"}\n value={props.category}\n onValueChange={props.onCategoryChange}\n options={props.options}\n classNames={{\n // set the width of the trigger to the width of the content\n trigger: \"oui-w-[--radix-select-content-available-width]\",\n }}\n />\n </Flex>\n );\n};\n\nconst CampaignItem: FC<{ campaign: CurrentCampaigns }> = ({ campaign }) => {\n const { title, description, image, displayTime, learnMoreUrl, tradingUrl } =\n campaign;\n const { t } = useTranslation();\n\n return (\n <Box intensity={800} r=\"xl\" className=\"oui-flex-[0_0_100%]\">\n <img\n className=\"oui-w-full oui-h-[calc((100vw-48px)/2)] oui-rounded-t-xl oui-object-fill\"\n src={image}\n alt={title}\n />\n\n <Flex\n itemAlign=\"start\"\n justify=\"between\"\n direction=\"column\"\n height=\"100%\"\n p={4}\n gapY={3}\n className=\"oui-font-semibold\"\n >\n <Flex direction=\"column\" itemAlign=\"start\" gapY={1}>\n <Text size=\"sm\">{title}</Text>\n <Text size=\"2xs\" intensity={54}>\n {displayTime}\n </Text>\n <Text size=\"2xs\" intensity={36}>\n {description}\n </Text>\n </Flex>\n <Flex justify=\"between\" width=\"100%\" gapX={3}>\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n fullWidth\n size=\"md\"\n onClick={() => {\n window.open(learnMoreUrl, \"_blank\");\n }}\n >\n {t(\"tradingLeaderboard.learnMore\")}\n </Button>\n <Button\n size=\"md\"\n fullWidth\n onClick={() => {\n window.open(tradingUrl, \"_self\");\n }}\n >\n {t(\"tradingLeaderboard.tradeNow\")}\n </Button>\n </Flex>\n </Flex>\n </Box>\n );\n};\n\ninterface ScrollIndicatorProps {\n style?: React.CSSProperties;\n list: CurrentCampaigns[];\n scrollIndex: number;\n scrollTo?: (index: number) => void;\n}\n\nconst ScrollIndicator: React.FC<ScrollIndicatorProps> = (props) => {\n const { style, scrollIndex, list } = props;\n\n return (\n <Flex\n mt={3}\n r=\"full\"\n height={scrollIndicatorHeight}\n className={cn(\"oui-bg-line oui-mx-auto oui-relative\")}\n style={props.style}\n >\n {list.map((item, index) => {\n return (\n <Box\n key={index}\n width={scrollIndicatorWidth}\n height={scrollIndicatorHeight}\n onClick={() => {\n props.scrollTo?.(index);\n }}\n r=\"full\"\n className=\"oui-cursor-pointer\"\n />\n );\n })}\n <Box\n width={scrollIndicatorWidth}\n height={scrollIndicatorHeight}\n r=\"full\"\n className={cn(\n \"oui-absolute oui-left-0 oui-top-0\",\n \"oui-transition-all oui-duration-300\",\n \"oui-bg-primary\"\n )}\n style={{\n transform: `translateX(${scrollIndex * scrollIndicatorWidth}px)`,\n }}\n />\n </Flex>\n );\n};\n","import { useEffect, useMemo, useState } from \"react\";\nimport { useScreen } from \"@orderly.network/ui\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport { useTradingLeaderboardContext, Campaign } from \"../provider\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { formatCampaignDate } from \"../../utils\";\n\nexport type CampaignsScriptReturn = ReturnType<typeof useCampaignsScript>;\n\n// Define the type for our categorized campaigns\ntype CategorizedCampaigns = {\n ongoing: Campaign[];\n past: Campaign[];\n future: Campaign[];\n};\n\nexport type CurrentCampaigns = Campaign & {\n displayTime: string;\n learnMoreUrl: string;\n tradingUrl: string;\n};\n\nexport type TEmblaApi = {\n scrollTo?: (index: number) => void;\n};\n\ntype CategoryKey = keyof CategorizedCampaigns;\n\nexport function useCampaignsScript() {\n const { t } = useTranslation();\n const { campaigns = [], href } = useTradingLeaderboardContext();\n const [category, setCategory] = useState<CategoryKey>(\"ongoing\");\n\n const { isMobile } = useScreen();\n\n const filterCampaigns = useMemo(() => {\n const now = new Date();\n\n return campaigns.reduce<CategorizedCampaigns>(\n (acc, campaign) => {\n const startTime = new Date(campaign.startTime);\n const endTime = new Date(campaign.endTime);\n\n if (now >= startTime && now <= endTime) {\n acc.ongoing.push(campaign);\n } else if (now > endTime) {\n acc.past.push(campaign);\n } else {\n acc.future.push(campaign);\n }\n\n return acc;\n },\n { ongoing: [], past: [], future: [] }\n );\n }, [campaigns]);\n\n const options = useMemo(() => {\n const opts: { label: string; value: CategoryKey }[] = [\n { label: t(\"tradingLeaderboard.ongoing\"), value: \"ongoing\" },\n { label: t(\"tradingLeaderboard.past\"), value: \"past\" },\n { label: t(\"tradingLeaderboard.future\"), value: \"future\" },\n ];\n\n // Filter out categories with no campaigns and map to the required format\n return opts.filter((item) => filterCampaigns[item.value].length > 0);\n }, [filterCampaigns, t]);\n\n const currentCampaigns = useMemo(() => {\n const list = filterCampaigns[category];\n return list.map((campaign) => {\n const { startTime, endTime } = campaign;\n\n let learnMoreUrl: string;\n let tradingUrl = href?.trading!;\n\n if (typeof campaign.href === \"object\") {\n learnMoreUrl = campaign.href.learnMore;\n tradingUrl = campaign.href.trading;\n } else {\n learnMoreUrl = campaign.href;\n }\n\n return {\n ...campaign,\n displayTime: `${formatCampaignDate(startTime)} - ${formatCampaignDate(\n endTime\n )} UTC`,\n learnMoreUrl,\n tradingUrl,\n };\n });\n }, [filterCampaigns, category, href]);\n\n useEffect(() => {\n // Find the first non-empty category\n const categoryKeys: CategoryKey[] = [\"ongoing\", \"future\", \"past\"];\n\n const firstAvailableCategory = categoryKeys.find(\n (item) => filterCampaigns[item].length > 0\n );\n\n if (firstAvailableCategory) {\n setCategory(firstAvailableCategory);\n }\n }, [filterCampaigns]);\n\n const onCategoryChange = (value: string) => {\n setCategory(value as CategoryKey);\n };\n const [scrollIndex, setScrollIndex] = useState(0);\n\n const [emblaRef, emblaApi] = useEmblaCarousel({\n loop: false,\n slidesToScroll: \"auto\",\n });\n\n useEffect(() => {\n emblaApi?.on(\"select\", () => {\n setScrollIndex(emblaApi?.selectedScrollSnap());\n });\n }, [emblaApi]);\n\n return {\n options,\n currentCampaigns,\n category,\n onCategoryChange,\n tradingUrl: href?.trading,\n isMobile,\n emblaRef,\n emblaApi: emblaApi as TEmblaApi,\n scrollIndex,\n enableScroll: currentCampaigns?.length > 1,\n };\n}\n","import { createContext, PropsWithChildren, useContext } from \"react\";\n\nexport type Campaign = {\n title: string;\n description: string;\n image: string;\n startTime: Date | string;\n endTime: Date | string;\n href:\n | string\n | {\n /** learn more url */\n learnMore: string;\n /** trading url, if provided, will override default trading now button url */\n trading: string;\n };\n};\n\n/**\n * Trading leaderboard provider state\n */\nexport type TradingLeaderboardState = {\n /** campaigns config, if not provided, will not show campaigns section */\n campaigns?: Campaign[];\n /** background src, it can be a image resource or video resource */\n backgroundSrc?: string;\n href?: {\n /** default trading now button url */\n trading: string;\n };\n};\n\n/**\n * Trading leaderboard context\n */\nexport const TradingLeaderboardContext = createContext<TradingLeaderboardState>(\n {} as TradingLeaderboardState\n);\n\nexport type TradingLeaderboardProviderProps =\n PropsWithChildren<TradingLeaderboardState>;\n\nexport const TradingLeaderboardProvider = (\n props: TradingLeaderboardProviderProps\n) => {\n return (\n <TradingLeaderboardContext.Provider\n value={{\n campaigns: props.campaigns,\n href: props.href,\n backgroundSrc: props.backgroundSrc,\n }}\n >\n {props.children}\n </TradingLeaderboardContext.Provider>\n );\n};\n\nexport const useTradingLeaderboardContext = () => {\n return useContext(TradingLeaderboardContext);\n};\n","import { format, subDays } from \"date-fns\";\n\nexport const getDateRange = (offsetDay: number) => {\n return {\n from: subDays(new Date(), offsetDay - 1)!,\n to: new Date()!,\n };\n};\n\n/**\n * Format a date to \"yyyy-MM-dd\" format (e.g., \"2025-03-10\")\n * @param date The date to format\n * @returns Formatted date string\n */\nexport const formatDateRange = (date: Date): string => {\n return format(date, \"yyyy-MM-dd\");\n};\n\nexport function formatCampaignDate(date: Date | string): string {\n const monthNames = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ];\n if (typeof date === \"string\") {\n date = new Date(date);\n }\n const year = date.getUTCFullYear();\n const month = monthNames[date.getUTCMonth()];\n const day = date.getUTCDate();\n const hours = String(date.getUTCHours()).padStart(2, \"0\");\n const minutes = String(date.getUTCMinutes()).padStart(2, \"0\");\n return `${month} ${day}, ${year} ${hours}:${minutes}`;\n}\n","import { FC } from \"react\";\nimport { cn, Box, Text, Flex, Button, Select } from \"@orderly.network/ui\";\nimport { useTranslation } from \"@orderly.network/i18n\";\nimport { CampaignsScriptReturn, CurrentCampaigns } from \"./campaigns.script\";\n\nexport type CampaignsProps = {\n className?: string;\n style?: React.CSSProperties;\n} & CampaignsScriptReturn;\n\nexport const Campaigns: FC<CampaignsProps> = (props) => {\n if (props.currentCampaigns.length === 0) {\n return null;\n }\n\n return (\n <Box\n width=\"100%\"\n intensity={900}\n p={5}\n pr={2}\n height={288}\n className={cn(\n \"oui-trading-leaderboard-campaigns oui-rounded-[20px]\",\n props.className\n )}\n style={props.style}\n >\n <Header {...props} />\n <Box\n mt={5}\n r=\"xl\"\n className={cn(\"oui-overflow-y-auto\", \"oui-custom-scrollbar\")}\n >\n <Flex\n gapY={5}\n height={200}\n direction=\"column\"\n r=\"xl\"\n className=\"oui-pr-1.5\"\n >\n {props.currentCampaigns.map((campaign) => {\n return <CampaignItem key={campaign.title} campaign={campaign} />;\n })}\n </Flex>\n </Box>\n </Box>\n );\n};\n\nconst Header: FC<CampaignsScriptReturn> = (props) => {\n const { t } = useTranslation();\n return (\n <Flex justify=\"between\" itemAlign=\"center\" pr={3}>\n <Text size=\"xl\">{t(\"tradingLeaderboard.campaigns\")}</Text>\n <Select.options\n size={\"xs\"}\n value={props.category}\n onValueChange={props.onCategoryChange}\n options={props.options}\n classNames={{\n // set the width of the trigger to the width of the content\n trigger: \"oui-w-[--radix-select-content-available-width]\",\n }}\n />\n </Flex>\n );\n};\n\nconst CampaignItem: FC<{ campaign: CurrentCampaigns }> = ({ campaign }) => {\n const { title, description, image, displayTime, learnMoreUrl, tradingUrl } =\n campaign;\n const { t } = useTranslation();\n\n return (\n <Flex intensity={800} r=\"xl\">\n <img\n className=\"oui-w-[400px] oui-h-[200px] oui-rounded-l-xl oui-object-fill\"\n src={image}\n alt={title}\n />\n\n <Flex\n itemAlign=\"start\"\n justify=\"between\"\n direction=\"column\"\n height=\"100%\"\n p={5}\n className=\"oui-font-semibold oui-flex-1\"\n >\n <Flex gap={1} direction=\"column\" itemAlign=\"start\">\n <Text size=\"xl\">{title}</Text>\n <Text size=\"sm\" intensity={36}>\n {description}\n </Text>\n </Flex>\n <Flex justify=\"between\" width=\"100%\">\n <Text size=\"xs\" intensity={54}>\n {displayTime}\n </Text>\n <Flex gap={3}>\n <Button\n variant=\"outlined\"\n color=\"secondary\"\n size=\"md\"\n onClick={() => {\n window.open(learnMoreUrl, \"_blank\");\n }}\n >\n {t(\"tradingLeaderboard.learnMore\")}\n </Button>\n <Button\n size=\"md\"\n onClick={() => {\n window.open(tradingUrl, \"_self\");\n }}\n >\n {t(\"tradingLeaderboard.tradeNow\")}\n </Button>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n","import { FC } from \"react\";\nimport { MobileCampaigns } from \"./campaigns.mobile.ui\";\nimport { useCampaignsScript } from \"./campaigns.script\";\nimport { Campaigns } from \"./campaigns.ui\";\n\nexport type CampaignsWidgetProps = {\n className?: string;\n style?: React.CSSProperties;\n};\n\nexport const CampaignsWidget: FC<CampaignsWidgetProps> = (props) => {\n const state = useCampaignsScript();\n if (state.isMobile) {\n return <MobileCampaigns {...state} className={props.className} style={props.style} />;\n }\n return <Campaigns {...state} className={props.className} style={props.style} />;\n};\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { usePrivateQuery } from \"@orderly.network/hooks\";\nimport { TableSort, usePagination, useScreen } from \"@orderly.network/ui\";\nimport { differenceInDays } from \"date-fns\";\nimport { getDateRange, formatDateRange } from \"../../utils\";\nimport { useDataTap } from \"@orderly.network/react-app\";\nimport { API } from \"@orderly.network/types\";\nimport { useEndReached } from \"../../hooks/useEndReached\";\n\nexport type TradingListScriptOptioins = {};\n\nexport type TradingData = {\n account_id: string;\n address: string;\n broker_fee: number;\n date: string;\n perp_maker_volume: number;\n perp_taker_volume: number;\n perp_volume: number;\n total_fee: number;\n};\n\nexport type TradingResponse = {\n meta: API.RecordsMeta;\n rows: TradingData[];\n};\nexport type TradingListScriptReturn = ReturnType<typeof useTradingListScript>;\n\nexport const FilterDays = [7, 14, 30, 90] as const;\nexport type TFilterDays = (typeof FilterDays)[number];\nexport type DateRange = {\n from?: Date;\n to?: Date;\n};\n\nexport function useTradingListScript() {\n const [searchValue, setSearchValue] = useState(\"\");\n const [initialSort] = useState<TableSort>({\n sortKey: \"perp_volume\",\n sort: \"desc\",\n });\n const [sort, setSort] = useState<TableSort | undefined>(initialSort);\n const [dataList, setDataList] = useState<TradingData[]>([]);\n\n const { isMobile } = useScreen();\n\n const { dateRange, filterDay, updateFilterDay, filterItems, onFilter } =\n useFilter();\n\n const { page, pageSize, setPage, parsePagination } = usePagination({\n pageSize: 50,\n });\n\n const getKey = () => {\n const searchParams = new URLSearchParams();\n\n searchParams.set(\"page\", page.toString());\n searchParams.set(\"size\", pageSize.toString());\n\n searchParams.set(\"aggregateBy\", \"ACCOUNT\");\n\n if (sort) {\n const prefix = sort.sort === \"asc\" ? \"ascending\" : \"descending\";\n searchParams.set(\"sort\", `${prefix}_${sort.sortKey}`);\n }\n\n if (searchValue) {\n searchParams.set(\"address\", searchValue);\n }\n\n if (dateRange.from) {\n searchParams.set(\"start_date\", formatDateRange(dateRange.from!));\n }\n\n if (dateRange.to) {\n searchParams.set(\"end_date\", formatDateRange(dateRange.to!));\n }\n\n return `/v1/volume/broker/daily?${searchParams.toString()}`;\n };\n\n const { data, isLoading } = usePrivateQuery<TradingResponse>(getKey(), {\n formatter: (res) => res,\n revalidateOnFocus: false,\n });\n\n const dataSource = useMemo(() => {\n const list = data?.rows || [];\n const total = data?.meta.total || 0;\n if (sort?.sortKey === \"perp_volume\") {\n }\n return list?.map((item, index) => {\n let rank: string | number = index + 1;\n\n if (searchValue) {\n rank = \"-\";\n } else {\n if (sort?.sortKey === \"perp_volume\" && sort?.sort === \"asc\") {\n rank = total - (page - 1) * pageSize - index;\n } else if (sort?.sortKey === \"perp_volume\" && sort?.sort === \"desc\") {\n rank = (page - 1) * pageSize + index + 1;\n }\n }\n\n return {\n ...item,\n rank,\n };\n });\n }, [data, sort, page, pageSize, searchValue]);\n\n useEffect(() => {\n if (!isMobile) {\n return;\n }\n if (page === 1) {\n setDataList(dataSource);\n } else {\n setDataList((prev) => [...prev, ...dataSource]);\n }\n }, [dataSource, isMobile, page]);\n\n const sentinelRef = useRef<HTMLDivElement | null>(null);\n\n const pagination = useMemo(\n () => parsePagination(data?.meta),\n [parsePagination, data]\n );\n\n useEndReached(sentinelRef, () => {\n if (!isLoading && isMobile && page < (pagination?.pageTotal || 0)) {\n setPage(page + 1);\n }\n });\n\n const onSearchValueChange = (value: string) => {\n setSearchValue(value);\n };\n\n const clearSearchValue = useCallback(() => {\n setSearchValue(\"\");\n }, []);\n\n const onSort = useCallback(\n (sort?: TableSort) => {\n setSort(sort || initialSort);\n },\n [initialSort]\n );\n\n useEffect(() => {\n if (searchValue) {\n setPage(1);\n }\n }, [searchValue]);\n\n useEffect(() => {\n if (dateRange.to && dateRange.from) {\n setPage(1);\n }\n }, [dateRange]);\n\n const _data = useDataTap(dataSource);\n\n return {\n pagination,\n dateRange,\n filterDay,\n updateFilterDay,\n filterItems,\n onFilter,\n initialSort,\n onSort,\n dataSource: _data,\n isLoading,\n searchValue,\n onSearchValueChange,\n clearSearchValue,\n isMobile,\n sentinelRef,\n dataList,\n };\n}\n\nconst useFilter = () => {\n /// default is 90d\n const [filterDay, setFilterDay] = useState<TFilterDays | null>(90);\n\n const [dateRange, setDateRange] = useState<DateRange>(getDateRange(90));\n\n const updateFilterDay = (day: TFilterDays) => {\n setFilterDay(day);\n setDateRange(getDateRange(day));\n };\n\n const onFilter = (filter: { name: string; value: any }) => {\n if (filter.name === \"dateRange\") {\n const newDateRange = filter.value;\n setDateRange(newDateRange);\n\n if (newDateRange.from && newDateRange.to) {\n const offsetDay =\n Math.abs(differenceInDays(newDateRange.from, newDateRange.to)) + 1;\n\n const dateRange = getDateRange(offsetDay);\n if (\n formatDateRange(dateRange.from) ===\n formatDateRange(newDateRange.from) &&\n formatDateRange(dateRange.to) === formatDateRange(newDateRange.to)\n ) {\n setFilterDay(offsetDay as any);\n } else {\n setFilterDay(null);\n }\n }\n }\n };\n\n const filterItems = useMemo(() => {\n const dateRangeFilter = {\n type: \"range\",\n name: \"dateRange\",\n value: dateRange,\n max: 90,\n };\n\n return [dateRangeFilter] as any;\n }, [dateRange]);\n\n return {\n filterItems,\n onFilter,\n dateRange,\n filterDay,\n updateFilterDay,\n };\n};\n","import { useEffect, useRef, MutableRefObject } from \"react\";\n\n/**\n * Listen for the specified element to scroll to the bottom\n */\nexport function useEndReached(\n sentinelRef: MutableRefObject<HTMLDivElement | null>,\n onEndReached?: () => void\n) {\n const observer = useRef<IntersectionObserver>();\n const cb = useRef(onEndReached);\n\n cb.current = onEndReached;\n\n useEffect(() => {\n const options: IntersectionObserverInit = {\n root: null,\n rootMargin: \"0px\",\n threshold: 0,\n };\n\n const handleObserver = (entries: IntersectionObserverEntry[]) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n cb.current?.();\n }\n });\n };\n\n observer.current = new IntersectionObserver(handleObserver, options);\n\n return () => {\n observer.current?.disconnect();\n };\n }, []);\n\n useEffect(() => {\n if (sentinelRef.current) {\n observer.current?.observe(sentinelRef.current);\n }\n }, [sentinelRef.current]);\n}\n","import { FC, SVGProps } from \"react\";\nimport {\n Box,\n CloseCircleFillIcon,\n cn,\n DataFilter,\n Flex,\n Input,\n Text,\n} from \"@orderly.network/ui\";\nimport {\n FilterDays,\n TradingData,\n TradingListScriptReturn,\n} from \"./tradingList.script\";\nimport { AuthGuardDataTable } from \"@orderly.network/ui-connector\";\nimport { useTradingListColumns } from \"./column\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type TradingListProps = {\n style?: React.CSSProperties;\n className?: string;\n} & TradingListScriptReturn;\n\nexport const TradingList: FC<TradingListProps> = (props) => {\n const column = useTradingListColumns();\n const { t } = useTranslation();\n\n return (\n <Flex\n direction=\"column\"\n width=\"100%\"\n itemAlign=\"start\"\n intensity={900}\n r=\"2xl\"\n px={4}\n style={props.style}\n className={cn(\"oui-trading-leaderboard-trading-list\", props.className)}\n >\n <Flex\n width=\"100%\"\n justify=\"between\"\n itemAlign=\"center\"\n mt={2}\n className={cn(\n \"oui-trading-leaderboard-trading-filter\",\n \"oui-border-b oui-border-line\"\n )}\n >\n <Flex gap={3}>\n {props.filterItems.length > 0 && (\n <DataFilter\n items={props.filterItems}\n onFilter={(value: any) => {\n props.onFilter(value);\n }}\n className=\"oui-h-[53px] oui-border-none\"\n />\n )}\n {FilterDays.map((value) => {\n return (\n <button\n className=\"oui-relative oui-px-2 oui-py-[2px] oui-text-sm\"\n key={value}\n >\n <div className=\"oui-z-10\">\n <Text.gradient\n color={props.filterDay === value ? \"brand\" : undefined}\n className={\n props.filterDay !== value\n ? \"oui-text-base-contrast-54\"\n : \"\"\n }\n >\n {`${value}D`}\n </Text.gradient>\n </div>\n <div\n className=\"oui-gradient-primary oui-opacity-[.12] oui-absolute oui-left-0 oui-right-0 oui-top-0 oui-bottom-0 oui-rounded\"\n onClick={() => {\n props.updateFilterDay(value as any);\n }}\n ></div>\n </button>\n );\n })}\n </Flex>\n <Input\n value={props.searchValue}\n onValueChange={props.onSearchValueChange}\n placeholder={t(\"common.address.search.placeholder\")}\n className={cn(\n \"oui-trading-leaderboard-trading-search-input\",\n \"oui-w-[240px]\"\n )}\n size=\"sm\"\n prefix={\n <Box pl={3} pr={1}>\n <SearchIcon className=\"oui-text-base-contrast-36\" />\n </Box>\n }\n suffix={\n props.searchValue && (\n <Box mr={2}>\n <CloseCircleFillIcon\n size={14}\n className=\"oui-text-base-contrast-36 oui-cursor-pointer\"\n onClick={props.clearSearchValue}\n />\n </Box>\n )\n }\n autoComplete=\"off\"\n />\n </Flex>\n\n <AuthGuardDataTable\n loading={props.isLoading}\n id=\"oui-trading-leaderboard-trading-table\"\n columns={column}\n initialSort={props.initialSort}\n onSort={props.onSort}\n bordered\n dataSource={props.dataSource}\n generatedRowKey={(record: TradingData) => record.address}\n manualPagination\n manualSorting\n pagination={props.pagination}\n classNames={{\n root: \"!oui-h-[calc(100%_-_53px_-_8px)]\",\n }}\n onRow={(record, index) => {\n return {\n className: cn(\"oui-h-[48px]\"),\n };\n }}\n />\n </Flex>\n );\n};\n\nexport const SearchIcon: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7\" />\n </svg>\n);\n","import { Text, Column, Box } from \"@orderly.network/ui\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport const useTradingListColumns = () => {\n const { t } = useTranslation();\n return [\n {\n title: t(\"tradingLeaderboard.rank\"),\n dataIndex: \"rank\",\n width: 50,\n render: (value: number) => {\n return (\n <Box width={20} className=\"oui-text-center\">\n {value}\n </Box>\n );\n },\n },\n {\n title: t(\"common.address\"),\n dataIndex: \"address\",\n render: (value: string) => {\n return <Text.formatted rule=\"address\">{value}</Text.formatted>;\n },\n width: 100,\n },\n {\n title: t(\"tradingLeaderboard.tradingVolume\"),\n dataIndex: \"perp_volume\",\n onSort: true,\n render: (value: number) => {\n return (\n <Text.numeral prefix=\"$\" rule=\"price\" dp={2}>\n {value}\n </Text.numeral>\n );\n },\n width: 120,\n },\n ] as Column[];\n};\n","import { FC, SVGProps } from \"react\";\nimport {\n Box,\n CloseCircleFillIcon,\n cn,\n DataFilter,\n Flex,\n Input,\n Spinner,\n Text,\n} from \"@orderly.network/ui\";\nimport {\n FilterDays,\n TradingData,\n TradingListScriptReturn,\n} from \"./tradingList.script\";\nimport { AuthGuardDataTable } from \"@orderly.network/ui-connector\";\nimport { useTradingListColumns } from \"./column\";\n\nexport type TradingListProps = {\n style?: React.CSSProperties;\n className?: string;\n} & TradingListScriptReturn;\n\nexport const MobileTradingList: FC<TradingListProps> = (props) => {\n const column = useTradingListColumns();\n\n return (\n <Flex\n direction=\"column\"\n width=\"100%\"\n itemAlign=\"start\"\n intensity={900}\n r=\"2xl\"\n px={4}\n style={props.style}\n className={cn(\n \"oui-mobile-trading-leaderboard-trading-list\",\n props.className\n )}\n >\n <Flex\n width=\"100%\"\n justify=\"between\"\n itemAlign=\"center\"\n className={cn(\"oui-mobile-trading-leaderboard-trading-filter\")}\n >\n {props.filterItems.length > 0 && (\n <DataFilter\n items={props.filterItems}\n onFilter={(value: any) => {\n props.onFilter(value);\n }}\n className=\"oui-h-[40px] oui-border-none\"\n />\n )}\n </Flex>\n\n <AuthGuardDataTable\n classNames={{\n root: \"oui-pb-4\",\n body: \"oui-text-2xs\",\n scroll: \"oui-overflow-y-hidden oui-h-full\",\n }}\n loading={props.isLoading}\n id=\"oui-trading-leaderboard-trading-table\"\n columns={column}\n initialSort={props.initialSort}\n onSort={props.onSort}\n dataSource={props.dataList}\n generatedRowKey={(record: TradingData) => record.address}\n manualPagination\n manualSorting\n onRow={(record, index) => {\n return {\n className: cn(\"oui-h-[30px]\"),\n };\n }}\n />\n <div\n ref={props.sentinelRef}\n className=\"oui-relative oui-invisible oui-h-[1px] oui-top-[-300px]\"\n />\n {props.isLoading && props.dataList.length > 0 && (\n <Flex itemAlign=\"center\" justify=\"center\" width=\"100%\" height={40}>\n <Spinner size=\"sm\" />\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport const SearchIcon: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path d=\"M5.841 1.14a4.667 4.667 0 0 0 0 9.333 4.74 4.74 0 0 0 2.875-.975l2.54 2.56a.6.6 0 0 0 .838 0 .6.6 0 0 0 0-.838L9.537 8.677a4.72 4.72 0 0 0 .971-2.871 4.667 4.667 0 0 0-4.667-4.667m0 1.166a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7\" />\n </svg>\n);\n","import { FC } from \"react\";\nimport { useTradingListScript } from \"./tradingList.script\";\nimport { TradingList, TradingListProps } from \"./tradingList.ui\";\nimport { MobileTradingList } from \"./tradingList.mobile.ui\";\n\nexport type TradingListWidgetProps = Pick<\n TradingListProps,\n \"style\" | \"className\"\n>;\n\nexport const TradingListWidget: FC<TradingListWidgetProps> = (props) => {\n const state = useTradingListScript();\n if (state.isMobile) {\n return <MobileTradingList {...state} {...props} />;\n }\n return <TradingList {...state} {...props} />;\n};\n","import { useMemo } from \"react\";\nimport { Campaign } from \"../../components/provider\";\nimport { useScreen } from \"@orderly.network/ui\";\nimport { useAccount } from \"@orderly.network/hooks\";\nimport { AccountStatusEnum } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nexport type LeaderboardScriptReturn = ReturnType<typeof useLeaderboardScript>;\n\nexport type LeaderboardScriptOptions = {\n backgroundSrc?: string;\n campaigns?: Campaign[];\n};\n\nfunction isVideoSrc(src?: string) {\n const extension = src?.split(\".\").pop();\n return [\"mp4\", \"webm\", \"avi\", \"ogg\"].includes(extension ?? \"\");\n}\n\nexport function useLeaderboardScript(options: LeaderboardScriptOptions) {\n const { backgroundSrc, campaigns = [] } = options;\n const { isMobile } = useScreen();\n const { state } = useAccount();\n const { wrongNetwork, disabledConnect } = useAppContext();\n\n const showCampaigns = useMemo(() => campaigns?.length > 0, [campaigns]);\n\n const canTrading =\n !wrongNetwork &&\n !disabledConnect &&\n (state.status >= AccountStatusEnum.EnableTrading ||\n state.status === AccountStatusEnum.EnableTradingWithoutConnected);\n\n const isVideo = useMemo(() => {\n return isVideoSrc(backgroundSrc);\n }, [backgroundSrc]);\n\n return {\n backgroundSrc,\n isVideo,\n showCampaigns,\n isMobile,\n canTrading,\n };\n}\n","import { FC } from \"react\";\nimport { cn, Flex } from \"@orderly.network/ui\";\nimport { TradingListWidget } from \"../../components/tradingList/widget\";\nimport { CampaignsWidget } from \"../../components/campaigns\";\nimport { LeaderboardScriptReturn } from \"./leaderboard.script\";\n\nexport type LeaderboardProps = {\n style?: React.CSSProperties;\n className?: string;\n} & LeaderboardScriptReturn;\n\nexport const Leaderboard: FC<LeaderboardProps> = (props) => {\n const renderBackground = () => {\n const linearGradient =\n \"linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)\";\n\n if (props.isVideo) {\n return (\n <div\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n >\n <div\n style={{\n backgroundImage: linearGradient,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n />\n <video\n autoPlay\n loop\n muted\n className={cn(\n // rest style\n \"oui-border-none oui-outline-none oui-bg-transparent\",\n \"oui-w-full oui-h-full\",\n // \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-object-cover\",\n \"oui-opacity-50\"\n )}\n >\n <source src={props.backgroundSrc} type=\"video/mp4\" />\n <source src={props.backgroundSrc} type=\"video/webm\" />\n <source src={props.backgroundSrc} type=\"video/ogg\" />\n <source src={props.backgroundSrc} type=\"video/avi\" />\n Your browser does not support the video tag.\n </video>\n </div>\n );\n }\n\n if (props.backgroundSrc) {\n return (\n <div\n style={{\n backgroundImage: `${linearGradient}, url(${props.backgroundSrc}) `,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\",\n \"oui-opacity-50\"\n )}\n />\n );\n }\n };\n\n return (\n <div\n style={props.style}\n className={cn(\"oui-h-full oui-mix-blend-screen\", props.className)}\n >\n {renderBackground()}\n <Flex\n direction=\"column\"\n gapY={5}\n height=\"100%\"\n className={cn(\n \"oui-trading-leaderboard oui-relative\",\n \"oui-max-w-[1040px] oui-px-3 oui-mx-auto \"\n )}\n >\n {props.showCampaigns && <CampaignsWidget />}\n <TradingListWidget\n className={cn(\n props.showCampaigns\n ? \"oui-h-[calc(100%_-_288px_-_20px)]\"\n : \"oui-h-full\"\n )}\n />\n </Flex>\n </div>\n );\n};\n","import { FC } from \"react\";\nimport { cn, Flex } from \"@orderly.network/ui\";\nimport { TradingListWidget } from \"../../components/tradingList/widget\";\nimport { CampaignsWidget } from \"../../components/campaigns\";\nimport { LeaderboardScriptReturn } from \"./leaderboard.script\";\nimport { BottomNavBarWidget } from \"@orderly.network/trading\";\n\nexport type LeaderboardProps = {\n style?: React.CSSProperties;\n className?: string;\n} & LeaderboardScriptReturn;\n\nexport const MobileLeaderboardWidget: FC<LeaderboardProps> = (props) => {\n const renderBackground = () => {\n const linearGradient =\n \"linear-gradient(180deg, rgba(var(--oui-color-base-10) / 0.3) 0%, rgba(var(--oui-color-base-10) / 0) 70%, rgba(var(--oui-color-base-10) / 1) 100%)\";\n\n if (props.isVideo) {\n return (\n <div\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n >\n <div\n style={{\n backgroundImage: linearGradient,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\"\n )}\n />\n <video\n playsInline\n webkit-playsinline\n autoPlay\n loop\n muted\n className={cn(\n // rest style\n \"oui-border-none oui-outline-none oui-bg-transparent oui-pointer-events-none\",\n \"oui-w-full oui-h-full\",\n // \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-object-cover\",\n \"oui-opacity-50\"\n )}\n >\n <source src={props.backgroundSrc} type=\"video/mp4\" />\n <source src={props.backgroundSrc} type=\"video/webm\" />\n <source src={props.backgroundSrc} type=\"video/ogg\" />\n <source src={props.backgroundSrc} type=\"video/avi\" />\n Your browser does not support the video tag.\n </video>\n </div>\n );\n }\n\n if (props.backgroundSrc) {\n return (\n <div\n style={{\n backgroundImage: `${linearGradient}, url(${props.backgroundSrc}) `,\n backgroundSize: \"cover\",\n backgroundRepeat: \"no-repeat\",\n }}\n className={cn(\n \"oui-absolute oui-top-0 oui-left-0\",\n \"oui-w-full oui-h-full\",\n \"oui-opacity-50\"\n )}\n />\n );\n }\n };\n return (\n <div\n style={{\n paddingBottom: \"calc(64px + env(safe-area-inset-bottom))\",\n }}\n className={cn(\n \"oui-grid oui-grid-rows-[auto,1fr,auto] oui-h-screen oui-gap-1 oui-relative oui-bg-base-10\",\n \"oui-relative oui-h-full oui-mix-blend-screen\",\n props.className\n )}\n >\n {renderBackground()}\n <Flex\n direction=\"column\"\n gapY={3}\n height=\"100%\"\n px={3}\n pt={3}\n pb={3}\n className={cn(\n \"oui-trading-leaderboard-mobile oui-overflow-y-auto oui-custom-scrollbar\",\n \"oui-relative oui-h-[calc(100vh_-_64px)]\"\n )}\n >\n {props.showCampaigns && <CampaignsWidget />}\n <TradingListWidget className={cn(!props.canTrading && \"oui-h-full\")} />\n <div className=\"oui-fixed oui-left-0 oui-right-0 oui-bottom-0\">\n <BottomNavBarWidget />\n </div>\n </Flex>\n </div>\n );\n};\n","import { FC } from \"react\";\nimport { useLeaderboardScript } from \"./leaderboard.script\";\nimport { Leaderboard, LeaderboardProps } from \"./leaderboard.ui\";\nimport {\n TradingLeaderboardProvider,\n TradingLeaderboardProviderProps,\n} from \"../../components/provider\";\nimport { MobileLeaderboardWidget } from \"./leaderboard.mobile.ui\";\n\nexport type LeaderboardWidgetProps = TradingLeaderboardProviderProps &\n Pick<LeaderboardProps, \"style\" | \"className\">;\n\nexport const LeaderboardWidget: FC<LeaderboardWidgetProps> = (props) => {\n const state = useLeaderboardScript({\n backgroundSrc: props.backgroundSrc,\n campaigns: props.campaigns,\n });\n\n return (\n <TradingLeaderboardProvider campaigns={props.campaigns} href={props.href}>\n {state.isMobile ? (\n <MobileLeaderboardWidget {...state} />\n ) : (\n <Leaderboard\n {...state}\n className={props.className}\n style={props.style}\n />\n )}\n </TradingLeaderboardProvider>\n );\n};\n"]}
package/dist/styles.css ADDED
@@ -0,0 +1 @@
1
+ .oui-custom-scrollbar::-webkit-scrollbar{height:6px;width:6px}.oui-custom-scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:4px;padding-top:20px}.oui-custom-scrollbar::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgb(var(--oui-color-base-7));border:1px dashed transparent;border-radius:3px}.oui-custom-scrollbar::-webkit-scrollbar-thumb:hover{background:rgb(var(--oui-color-base-5));border-radius:3px}.oui-custom-scrollbar::-webkit-scrollbar-corner{background-color:transparent}.oui-pointer-events-none{pointer-events:none}.oui-invisible{visibility:hidden}.oui-fixed{position:fixed}.oui-absolute{position:absolute}.oui-relative{position:relative}.oui-bottom-0{bottom:0}.oui-left-0{left:0}.oui-right-0{right:0}.oui-top-0{top:0}.oui-top-\[-300px\]{top:-300px}.oui-z-10{z-index:10}.oui-mx-auto{margin-left:auto;margin-right:auto}.oui-grid{display:grid}.\!oui-h-\[calc\(100\%_-_53px_-_8px\)\]{height:calc(100% - 61px)!important}.oui-h-\[1px\]{height:1px}.oui-h-\[200px\]{height:200px}.oui-h-\[30px\]{height:30px}.oui-h-\[40px\]{height:40px}.oui-h-\[48px\]{height:48px}.oui-h-\[53px\]{height:53px}.oui-h-\[calc\(\(100vw-48px\)\/2\)\]{height:calc(50vw - 24px)}.oui-h-\[calc\(100\%_-_288px_-_20px\)\]{height:calc(100% - 308px)}.oui-h-\[calc\(100vh_-_64px\)\]{height:calc(100vh - 64px)}.oui-h-full{height:100%}.oui-h-screen{height:100vh}.oui-w-\[--radix-select-content-available-width\]{width:var(--radix-select-content-available-width)}.oui-w-\[240px\]{width:240px}.oui-w-\[400px\]{width:400px}.oui-w-full{width:100%}.oui-min-w-0{min-width:0}.oui-max-w-\[1040px\]{max-width:1040px}.oui-flex-1{flex:1 1 0%}.oui-flex-\[0_0_100\%\]{flex:0 0 100%}.oui-cursor-pointer{cursor:pointer}.oui-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.oui-grid-rows-\[auto\,1fr\,auto\]{grid-template-rows:auto 1fr auto}.oui-gap-1{gap:.25rem}.oui-overflow-hidden{overflow:hidden}.oui-overflow-y-auto{overflow-y:auto}.oui-overflow-y-hidden{overflow-y:hidden}.oui-rounded{border-radius:var(--oui-rounded,.25rem)}.oui-rounded-\[20px\]{border-radius:20px}.oui-rounded-l-xl{border-bottom-left-radius:var(--oui-rounded-xl,.75rem)}.oui-rounded-l-xl,.oui-rounded-t-xl{border-top-left-radius:var(--oui-rounded-xl,.75rem)}.oui-rounded-t-xl{border-top-right-radius:var(--oui-rounded-xl,.75rem)}.oui-border-b{border-bottom-width:1px}.oui-border-none{border-style:none}.oui-border-line{border-color:rgb(var(--oui-color-line,255 255 255)/.08)}.oui-bg-base-10{--tw-bg-opacity:1;background-color:rgb(var(--oui-color-base-10)/var(--tw-bg-opacity))}.oui-bg-line{background-color:rgb(var(--oui-color-line,255 255 255)/.08)}.oui-bg-primary{--tw-bg-opacity:1;background-color:rgb(var(--oui-color-primary)/var(--tw-bg-opacity))}.oui-bg-transparent{background-color:transparent}.oui-object-cover{-o-object-fit:cover;object-fit:cover}.oui-object-fill{-o-object-fit:fill;object-fit:fill}.oui-px-2{padding-left:.5rem;padding-right:.5rem}.oui-px-3{padding-left:.75rem;padding-right:.75rem}.oui-py-\[2px\]{padding-bottom:2px;padding-top:2px}.oui-pb-4{padding-bottom:1rem}.oui-pr-1{padding-right:.25rem}.oui-pr-1\.5{padding-right:.375rem}.oui-text-center{text-align:center}.oui-text-2xs{font-size:var(--oui-font-size-2xs,.75rem);line-height:1.125rem}.oui-text-sm{font-size:var(--oui-font-size-sm,.875rem);line-height:1.25rem}.oui-font-semibold{font-weight:600}.oui-text-base-contrast-36{color:rgb(var(--oui-color-base-foreground)/.36)}.oui-text-base-contrast-54{color:rgb(var(--oui-color-base-foreground)/.54)}.oui-opacity-50{opacity:.5}.oui-opacity-\[\.12\]{opacity:.12}.oui-mix-blend-screen{mix-blend-mode:screen}.oui-outline-none{outline:2px solid transparent;outline-offset:2px}.oui-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.oui-duration-300{transition-duration:.3s}.oui-gradient-primary{background-image:linear-gradient(var(--oui-gradient-primary-angle,28.29deg),rgb(var(--oui-gradient-primary-start)) var(--oui-gradient-primary-stop-start,0),rgb(var(--oui-gradient-primary-end)) var(--oui-gradient-primary-stop-end,100%))}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.oui-duration-300{animation-duration:.3s}
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@orderly.network/trading-leaderboard",
3
+ "version": "2.0.8-alpha.0",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "keywords": [],
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "dependencies": {
16
+ "embla-carousel-react": "8.1.5",
17
+ "date-fns": "^3.6.0",
18
+ "@orderly.network/ui": "2.0.8-alpha.0",
19
+ "@orderly.network/hooks": "2.0.8-alpha.0",
20
+ "@orderly.network/utils": "2.0.8-alpha.0",
21
+ "@orderly.network/types": "2.0.8-alpha.0",
22
+ "@orderly.network/ui-connector": "2.0.8-alpha.0",
23
+ "@orderly.network/i18n": "2.0.8-alpha.0",
24
+ "@orderly.network/trading": "2.0.8-alpha.0",
25
+ "@orderly.network/react-app": "2.0.8-alpha.0"
26
+ },
27
+ "devDependencies": {
28
+ "@babel/core": "^7.22.9",
29
+ "@babel/preset-env": "^7.22.9",
30
+ "@babel/preset-typescript": "^7.22.5",
31
+ "@types/react": "^18.3.2",
32
+ "@types/react-dom": "^18.3.0",
33
+ "react": "^18.2.0",
34
+ "react-dom": "^18.2.0",
35
+ "tailwindcss": "^3.4.4",
36
+ "tsup": "^7.1.0",
37
+ "typescript": "^5.1.6",
38
+ "tsconfig": "0.3.23-alpha.0"
39
+ },
40
+ "peerDependencies": {
41
+ "react": ">=18",
42
+ "react-dom": ">=18"
43
+ },
44
+ "scripts": {
45
+ "build": "tsup && pnpm run build:css",
46
+ "build:css": "tailwindcss build -i src/tailwind.css -o dist/styles.css --minify"
47
+ }
48
+ }