diff --git a/components/account/AccountActions.tsx b/components/account/AccountActions.tsx index e180701a..f6ed78de 100644 --- a/components/account/AccountActions.tsx +++ b/components/account/AccountActions.tsx @@ -75,7 +75,7 @@ const AccountActions = () => { onClick={handleCloseMangoAccount} > - {t('close-account:close-account')} + {t('close-account')} diff --git a/components/shared/SheenLoader.tsx b/components/shared/SheenLoader.tsx new file mode 100644 index 00000000..91332fa6 --- /dev/null +++ b/components/shared/SheenLoader.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from 'react' + +// Children should be a shape or set of shapes with a bg color to animate over + +const SheenLoader = ({ children }: { children: ReactNode }) => { + return ( +
+
+
+ {children} +
+
+
+ ) +} + +export default SheenLoader diff --git a/components/swap/JupiterRoutes.tsx b/components/swap/JupiterRoutes.tsx index 4d7140e5..a6f2c68a 100644 --- a/components/swap/JupiterRoutes.tsx +++ b/components/swap/JupiterRoutes.tsx @@ -77,8 +77,8 @@ const JupiterRoutes = ({ } return routes?.length && selectedRoute && outputTokenInfo ? ( -
- <> +
+
) : null} - -
+
+
diff --git a/components/swap/RouteFeeInfo.tsx b/components/swap/RouteFeeInfo.tsx index 1335cb00..41ed4160 100644 --- a/components/swap/RouteFeeInfo.tsx +++ b/components/swap/RouteFeeInfo.tsx @@ -5,7 +5,6 @@ import { useEffect, useState } from 'react' import mangoStore from '../../store/state' import { TokenInfo } from '../../types/jupiter' import { formatDecimal } from '../../utils/numbers' -import Button from '../shared/Button' type RouteFeeInfoProps = { selectedRoute: RouteInfo diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx index c83f6143..5efc8d06 100644 --- a/components/swap/SwapTokenChart.tsx +++ b/components/swap/SwapTokenChart.tsx @@ -16,6 +16,7 @@ import ContentBox from '../shared/ContentBox' import { GREEN, RED } from '../../styles/colors' import { DownTriangle, UpTriangle } from '../shared/DirectionTriangles' import { formatFixedDecimals } from '../../utils/numbers' +import SheenLoader from '../shared/SheenLoader' dayjs.extend(relativeTime) @@ -77,6 +78,7 @@ const SwapTokenChart: FunctionComponent = ({ outputTokenId, }) => { const [chartData, setChartData] = useState([]) + const [loadChartData, setLoadChartData] = useState(true) const [baseTokenId, setBaseTokenId] = useState('') const [quoteTokenId, setQuoteTokenId] = useState('') const [inputTokenInfo, setInputTokenInfo] = useState(null) @@ -115,6 +117,7 @@ const SwapTokenChart: FunctionComponent = ({ daysToShow ) setChartData(chartData) + setTimeout(() => setLoadChartData(false), 1500) }, [baseTokenId, quoteTokenId, daysToShow]) const getInputTokenInfo = useCallback(async () => { @@ -160,7 +163,11 @@ const SwapTokenChart: FunctionComponent = ({ return ( - {chartData.length && baseTokenId && quoteTokenId ? ( + {loadChartData ? ( + +
+ + ) : chartData.length && baseTokenId && quoteTokenId ? (
@@ -328,8 +335,8 @@ const SwapTokenChart: FunctionComponent = ({ ) : (
- - Chart not available + +

Chart not available

)} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 9dbfe19f..36c1bf5a 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,5 +1,6 @@ { "account-value": "Account Value", + "balance": "Balance", "borrow": "Borrow", "buy": "Buy", "close-account": "Close Account", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 9dbfe19f..36c1bf5a 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -1,5 +1,6 @@ { "account-value": "Account Value", + "balance": "Balance", "borrow": "Borrow", "buy": "Buy", "close-account": "Close Account", diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index 4ac7bae7..6f7b9755 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -1,5 +1,6 @@ { "account-value": "Account Value", + "balance": "Balance", "borrow": "Borrow", "buy": "Buy", "close-account": "Close Account", diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json index 0ddf72dd..ff85156c 100644 --- a/public/locales/zh_tw/common.json +++ b/public/locales/zh_tw/common.json @@ -1,5 +1,6 @@ { "account-value": "Account Value", + "balance": "Balance", "borrow": "Borrow", "buy": "Buy", "close-account": "Close Account", diff --git a/tailwind.config.js b/tailwind.config.js index fc7f6930..5fc5c75d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -107,6 +107,11 @@ module.exports = { transform: 'rotate(-6deg)', }, }, + shimmer: { + '100%': { + transform: 'translateX(100%)', + }, + }, }, backgroundImage: { 'long-loss': "url('/share_images/bg-long-loss.png')",