Skip to content

Commit

Permalink
Smoothen Loader, add a fade in
Browse files Browse the repository at this point in the history
  • Loading branch information
JaniAnttonen committed Mar 4, 2022
1 parent 81744ff commit 2ce7cfa
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 30 deletions.
24 changes: 21 additions & 3 deletions components/Loader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,22 @@ import Box from "../Box";

const gradientAnimation = keyframes({
"0%": {
backgroundPosition: "-400% 50%"
},
"50%": {
backgroundPosition: "0% 50%"
},
"100%": {
backgroundPosition: "100% 50%"
backgroundPosition: "400% 50%"
}
})

const fadeInAnimation = keyframes({
"0%": {
opacity: "0"
},
"100%": {
opacity: "1"
}
})

Expand All @@ -18,9 +30,15 @@ const Loader = styled(Box, {
width: "100%",
minWidth: "150px",
minHeight: "1em",
background: "linear-gradient(90deg, rgba(241,235,212,0.2), rgba(16,7,15,0.2), rgba(241,235,212,0.2))",
opacity: 0,
background: "linear-gradient(90deg, rgba(241,235,212,0.1), rgba(16,7,15,0.15), rgba(241,235,212,0.1))",
backgroundSize: "400% 400%",
animation: `${gradientAnimation} 2s linear infinite`
animationName: `${gradientAnimation}, ${fadeInAnimation}`,
animationDuration: "12s, 1s",
animationTimingFunction: "linear, ease",
animationIterationCount: "infinite, 1",
animationDelay: "0, 400ms",
animationFillMode: "forwards"
})

export default Loader
4 changes: 2 additions & 2 deletions components/MyStakes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ethers } from "ethers";
import Image from "next/image";
import { CaretDown } from "phosphor-react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Column, Row } from "react-table";
import { useSnapshot } from "valtio";
import { CaretDown } from "phosphor-react";
import { useGetAssetPairsQuery } from "../../generated/graphql";
import { Stake, state } from "../../state";
import { fetchStakes } from "../../state/actions/stakes";
Expand Down Expand Up @@ -320,7 +320,7 @@ export const MyStakes = () => {
</Button>
)}
</Flex>
{tableData || (!tableData && stakesLoading) ? (
{tableData || stakesLoading ? (
<Box
css={{
overflowX: "auto",
Expand Down
51 changes: 26 additions & 25 deletions state/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { subscribeKey } from "valtio/utils";
import Web3Modal from "web3modal";
import { defaultEthereumProvider, defaultPolygonProvider } from "../lib/config";

type PrimitiveBalanceTypes = "eth" | "vnl" | "juice" | "matic"
type PrimitiveBalanceTypes = "eth" | "vnl" | "juice" | "matic";
type JuicenetBalanceTypes = "unstakedJuice" | "stakedJuice" | "totalJuice";

export type Balances = {
[key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: string;
};

export type RawBalances = {
[key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber
}
[key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber;
};

export enum Sentiment {
long = "long",
Expand All @@ -32,29 +32,28 @@ export type Stake = {
export type AlertOpts = {
title: string;
body?: string | JSX.Element;
onConfirm?: () => void | Promise<void>,
onCancel?: () => void,
confirmDisabled?: boolean,
confirmText?: string
cancelText?: string
}

onConfirm?: () => void | Promise<void>;
onCancel?: () => void;
confirmDisabled?: boolean;
confirmText?: string;
cancelText?: string;
};

type State = {
ethereumProvider:
| providers.JsonRpcProvider
| providers.Web3Provider
| providers.WebSocketProvider
| providers.Provider
| providers.BaseProvider
| null;
| providers.JsonRpcProvider
| providers.Web3Provider
| providers.WebSocketProvider
| providers.Provider
| providers.BaseProvider
| null;
polygonProvider:
| providers.JsonRpcProvider
| providers.Web3Provider
| providers.WebSocketProvider
| providers.Provider
| providers.BaseProvider
| null;
| providers.JsonRpcProvider
| providers.Web3Provider
| providers.WebSocketProvider
| providers.Provider
| providers.BaseProvider
| null;
providerName: string | null;
signer: Signer | null;
balances: Balances;
Expand All @@ -65,6 +64,7 @@ type State = {
stakes: Stake[] | null;
alert: AlertOpts | null;
walletOpen: boolean;
online: boolean;
};

export const initialState: State = {
Expand All @@ -80,15 +80,16 @@ export const initialState: State = {
alert: null,
stakes: null,
walletOpen: false,
online: true,
};

const persistedKeys = {
walletAddress: "vanilla-walletAddress",
};

enum VanillaEvents {
stakesChanged = 'vanilla-StakesChanged',
balancesChanged = 'vanilla-BalancesChanged',
stakesChanged = "vanilla-StakesChanged",
balancesChanged = "vanilla-BalancesChanged",
}

const state = proxy<State>(initialState);
Expand All @@ -101,5 +102,5 @@ export {
snapshot,
ref,
persistedKeys,
VanillaEvents
VanillaEvents,
};

0 comments on commit 2ce7cfa

Please sign in to comment.