Skip to content

Commit

Permalink
Add sdk loading state in Markets table
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarah-thong
sarah-thong committed Aug 3, 2022
1 parent 300ea94 commit 267a899
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 18 deletions.
8 changes: 4 additions & 4 deletions src/@demex-info/layout/MainLayout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useAsyncTask } from "@demex-info/hooks";
import actions from "@demex-info/store/actions";
import { RootState } from "@demex-info/store/types";
import { BoxProps, makeStyles, Theme } from "@material-ui/core";
Expand All @@ -11,6 +12,7 @@ interface Props extends BoxProps { }

const MainLayout: React.FC<Props> = (props: Props) => {
const { children, className, ...rest } = props;
const [runInitSDK] = useAsyncTask("runInitSDK");
const dispatch = useDispatch();
const net = useSelector((store: RootState) => store.app.network);

Expand All @@ -21,7 +23,7 @@ const MainLayout: React.FC<Props> = (props: Props) => {
}, []);

useEffect(() => {
const initWsSDK = async () => {
runInitSDK(async () => {
try {
const sdk = await CarbonSDK.instance({
network: net,
Expand All @@ -31,9 +33,7 @@ const MainLayout: React.FC<Props> = (props: Props) => {
} catch (err) {
console.error(err);
}
};
initWsSDK();

});
return () => {};
}, [net]);

Expand Down
30 changes: 16 additions & 14 deletions src/@demex-info/views/MarketsTable/MarketsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,12 @@ const MarketsTable: React.FC = () => {
const widthXs = useMediaQuery(theme.breakpoints.only("xs"));
const [ws] = useWebsocket();

const loadingTasks = useSelector((store: RootState) => store.layout.loadingTasks);
const isAppReady = useSelector((state: RootState) => state.app.isAppReady);
const network = useSelector((state: RootState) => state.app.network);
const sdk = useSelector((store: RootState) => store.app.sdk);
const tokenClient = sdk?.token;
const statLoading = loading || Boolean(loadingTasks.runInitSDK);

// TODO: Add setMarketOption when futures markets are launched on Carbonated Demex
const [marketOption] = React.useState<MarketType>(MarkType.Spot);
Expand Down Expand Up @@ -253,10 +255,10 @@ const MarketsTable: React.FC = () => {
Volume (24H)
</Typography>
</Box>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.standardSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" variant="h4">
${volumeCountUp}
</TypographyLabel>
Expand All @@ -276,10 +278,10 @@ const MarketsTable: React.FC = () => {
justifyContent="space-between"
mt={widthXs ? 1 : 1.5}
>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.standardSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" variant="h4">
{spotCountUp}
</TypographyLabel>
Expand All @@ -302,10 +304,10 @@ const MarketsTable: React.FC = () => {
<TypographyLabel color="textPrimary" variant="subtitle2">
Open Interest
</TypographyLabel>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.standardSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" mt={widthXs ? 1 : 1.5} variant="h4">
${interestCountUp}
</TypographyLabel>
Expand All @@ -322,15 +324,15 @@ const MarketsTable: React.FC = () => {
Coins
</TypographyLabel>
<Box display="flex" alignItems="center" mt={widthXs ? 1 : 1.5} justifyContent="space-between">
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.numSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" variant="h4">
{coinsCountUp}
</TypographyLabel>
</RenderGuard>
<RenderGuard renderIf={!loading && coinsList.length > 0}>
<RenderGuard renderIf={!statLoading && coinsList.length > 0}>
<Box position="relative">
<Box
className={classes.labelBox}
Expand Down Expand Up @@ -375,7 +377,7 @@ const MarketsTable: React.FC = () => {
</Box>
</Box>
</RenderGuard>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Box alignItems="center" display="flex" justifyContent="center">
<Skeleton className={classes.coinSkeleton} />
</Box>
Expand All @@ -400,10 +402,10 @@ const MarketsTable: React.FC = () => {
<TypographyLabel color="textPrimary" variant="subtitle2">
Delivery Futures
</TypographyLabel>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.standardSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" mt={widthXs ? 1 : 1.5} variant="h4">
{futuresCountUp}
</TypographyLabel>
Expand All @@ -417,10 +419,10 @@ const MarketsTable: React.FC = () => {
<TypographyLabel color="textPrimary" variant="subtitle2">
Perpetual Swaps
</TypographyLabel>
<RenderGuard renderIf={loading}>
<RenderGuard renderIf={statLoading}>
<Skeleton className={classes.standardSkeleton} />
</RenderGuard>
<RenderGuard renderIf={!loading}>
<RenderGuard renderIf={!statLoading}>
<TypographyLabel color="textPrimary" mt={widthXs ? 1 : 1.5} variant="h4">
{perpetualsCountUp}
</TypographyLabel>
Expand Down

0 comments on commit 267a899

Please sign in to comment.