Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SOV-3022: Update staking loading data #608

Merged
merged 4 commits into from
Oct 4, 2023
Merged

SOV-3022: Update staking loading data #608

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf42e59
SOV-3022: add loading data text
pietro-maximoff Sep 26, 2023
a250afd
Create clean-papayas-doubt.md
pietro-maximoff Sep 26, 2023
0699e69
chore: add loading data
pietro-maximoff Sep 28, 2023
342e976
chore: fix changeset story id
soulBit Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/clean-papayas-doubt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"frontend": patch
"@sovryn/ui": patch
---

SOV-3033: Update staking loading data
1 change: 1 addition & 0 deletions ...rganisms/BorrowHistory/components/CloseWithDepositLoanFrame/CloseWithDepositLoanFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ export const CloseWithDepositLoanFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="close-with-deposits-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...pp/3_organisms/BorrowHistory/components/CloseWithSwapLoanFrame/CloseWithSwapLoanFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export const CloseWithSwapLoanFrame: FC<PropsWithChildren> = ({ children }) => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="close-with-swaps-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...ganisms/BorrowHistory/components/CollateralSurplusFrame/CollateralSurplusHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export const CollateralSurplusHistoryFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="surplus-withdrawals-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...anisms/BorrowHistory/components/DepositCollateralLoanFrame/DepositCollateralLoanFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ export const DepositCollateralLoanFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="deposit-collaterals-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rc/app/3_organisms/BorrowHistory/components/LiquidationLoanFrame/LiquidationLoanFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ export const LiquidationLoanFrame: FC<PropsWithChildren> = ({ children }) => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="close-with-deposits-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rontend/src/app/3_organisms/BorrowHistory/components/NewLoanFrame/NewLoanHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@ export const NewLoanHistoryFrame: FC<PropsWithChildren> = ({ children }) => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="new-loans-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...c/app/3_organisms/BorrowHistory/components/RolloverLoanFrame/RolloverLoanHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@ export const RolloverLoanHistoryFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="rollover-loans-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions .../3_organisms/BorrowHistory/components/TransactionHistoryFrame/TransactionHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,6 +563,7 @@ export const TransactionHistoryFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={noDataLabel}
loadingData={t(translations.common.tables.loading)}
dataAttribute="transaction-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rsionsHistoryFrame/components/MyntConversionsHistoryFrame/MyntConversionsHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export const MyntConversionsHistoryFrame: React.FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="mynt-conversions-history-table"
/>
}
Expand Down
1 change: 1 addition & 0 deletions ...rsionsHistoryFrame/components/ZeroConversionsHistoryFrame/ZeroConversionsHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const ZeroConversionsHistoryFrame: React.FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="zero-conversions-history-table"
/>
}
Expand Down
1 change: 1 addition & 0 deletions ...c/app/3_organisms/EarnHistoryFrame/components/LendingHistoryFrame/LendingHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ export const LendingHistoryFrame: FC<PropsWithChildren> = ({ children }) => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="earn-history-table"
/>
}
Expand Down
1 change: 1 addition & 0 deletions ...nisms/EarnHistoryFrame/components/StabilityPoolHistoryFrame/StabilityPoolHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,7 @@ export const StabilityPoolHistoryFrame: FC<PropsWithChildren> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={noDataLabel}
loadingData={t(translations.common.tables.loading)}
dataAttribute="stability-pool-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/3_organisms/FundingHistoryFrame/FundingHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export const FundingHistoryFrame: FC = () => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="funding-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/3_organisms/RedemptionsHistoryFrame/RedemptionsHistoryFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ export const RedemptionsHistoryFrame: FC = () => {
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="redemption-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rc/app/3_organisms/RewardHistory/components/RewardsEarnedHistory/RewardsEarnedHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export const RewardsEarnedHistory: FC<RewardHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="subsidy-history-reward-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rc/app/3_organisms/RewardHistory/components/StabilityPoolRewards/StabilityPoolRewards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ export const StabilityPoolRewards: FC<RewardHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="reward-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...pp/3_organisms/RewardHistory/components/StabilityPoolSubsidies/StabilityPoolSubsidies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ export const StabilityPoolSubsidies: FC<RewardHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="subsidy-history-reward-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/3_organisms/RewardHistory/components/VestingRewards/VestingRewards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export const VestingRewards: FC<RewardHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="vesting-reward-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rganisms/StakingHistoryFrame/components/StakingDelegateChanges/StakingDelegateChanges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ export const StakingDelegateChanges: FC<StakingHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="staking-delegate-change-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...anisms/StakingHistoryFrame/components/StakingExtendedDuration/StakingExtendedDuration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ export const StakingExtendedDuration: FC<StakingHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="staking-extended-duration-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...tend/src/app/3_organisms/StakingHistoryFrame/components/StakingHistory/StakingHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ export const StakingHistory: FC<StakingHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="staking-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions .../src/app/3_organisms/StakingHistoryFrame/components/StakingWithdraws/StakingWithdraws.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ export const StakingWithdraws: FC<StakingHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="staking-withdrawns-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions ...rganisms/StakingHistoryFrame/components/VestingDelegateChanges/VestingDelegateChanges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const VestingDelegateChanges: FC<StakingHistoryProps> = ({
isLoading={loading}
className="bg-gray-80 text-gray-10 lg:px-6 lg:py-4"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="staking-delegate-change-history-table"
/>
<Pagination
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/BorrowPage/components/BorrowAssetsTable/BorrowAssetsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const BorrowAssetsTable: FC = () => (
rowTitle={generateRowTitle}
className="text-gray-10 lg:px-6 lg:py-4 text-xs"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="borrow-assets-table"
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/BorrowPage/components/OpenLoansTable/OpenLoansTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const OpenLoansTable: FC<OpenLoansTableProps> = ({ loans, loading }) => (
rowTitle={generateRowTitle}
className="text-gray-10 lg:px-6 lg:py-4 text-xs"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
isLoading={loading}
dataAttribute="borrow-assets-table"
/>
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/LendPage/components/LendFrame/LendFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const LendFrame: FC = () => {
rowTitle={generateRowTitle}
className="text-gray-10 lg:px-6 lg:py-4 text-xs"
noData={t(translations.common.tables.noData)}
loadingData={t(translations.common.tables.loading)}
dataAttribute="lend-frame-table"
expandedContent={pool => <LendFrameDetails pool={pool} />}
expandedClassNames="border border-gray-70 border-t-0"
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/RewardsPage/components/StabilityPool/StabilityPool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ export const StabilityPool: FC = () => {
: t(translations.rewardPage.stabilityPool.notConnected)}
</span>
}
loadingData={t(translations.common.tables.loading)}
rowTitle={row => (
<div className="flex flex-col items-start gap-1">
<Paragraph className="text-gray-40 font-medium">
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/RewardsPage/components/Staking/Staking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export const Staking: FC = () => {
: t(translations.rewardPage.stabilityPool.notConnected)}
</span>
}
loadingData={t(translations.common.tables.loading)}
rowTitle={row => (
<div className="flex flex-col items-start gap-1 font-medium">
<Paragraph className="text-gray-40">{row.type}</Paragraph>
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/RewardsPage/components/Vesting/Vesting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const Vesting: FC = () => {
: t(translations.rewardPage.vesting.table.notConnected)}
</span>
}
loadingData={t(translations.common.tables.loading)}
isLoading={loading}
dataAttribute="funding-history-table"
rowTitle={generateRowTitle}
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/StakesFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export const StakesFrame: FC = () => {
: t(translations.stakePage.table.notConnected)}
</span>
}
loadingData={t(translations.common.tables.loading)}
dataAttribute="stakes-table"
/>
{account && (
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/app/5_pages/StakePage/components/StakesFrame/hooks/useGetStakes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const useGetStakes = () => {
const prevBlockRef = useRef<number | undefined>(block);

const updateStakes = useCallback(async () => {
if (!stakingContract) {
if (!stakingContract || !account) {
return;
}

Expand Down Expand Up @@ -61,7 +61,7 @@ export const useGetStakes = () => {
return;
}

if (prevBlockRef.current !== block) {
if (prevBlockRef.current !== block || account) {
updateStakes();
}

Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/app/5_pages/StakePage/components/VestingStakesFrame/VestingStakesFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export const VestingStakesFrame: FC = () => {
: t(translations.stakePage.table.notConnected)}
</span>
}
loadingData={t(translations.common.tables.loading)}
dataAttribute="vesting-stakes-table"
/>
{account && (
Expand Down
3 changes: 2 additions & 1 deletion apps/frontend/src/locales/en/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"noDataToExport": "No data to export"
},
"noData": "No data available",
"noDataWithFilters": "No data with the current filters"
"noDataWithFilters": "No data with the current filters",
"loading": "Loading data..."
},
"max": "max",
"amount": "Amount",
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/2_molecules/Table/Table.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export type TableProps<RowType extends RowObject> = {
rowKey?: (row: RowType) => number | string;
rowTitle?: (row: RowType) => ReactNode;
noData?: ReactNode;
loadingData?: ReactNode;
onRowClick?: (row: RowType) => void;
dataAttribute?: string;
isClickable?: boolean;
Expand Down
6 changes: 1 addition & 5 deletions packages/ui/src/2_molecules/Table/components/TableDesktop/TableDesktop.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,10 @@
}
}

.noData {
.noData, .loading {
@apply relative py-6 px-5 text-center;
}

.loading {
@apply h-6 block bg-gray-50 rounded animate-pulse;
}

.header {
@apply text-xs font-medium leading-[0.875rem];

Expand Down
26 changes: 8 additions & 18 deletions packages/ui/src/2_molecules/Table/components/TableDesktop/TableDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const TableDesktop = <RowType extends RowObject>({
rows,
rowKey,
noData,
loadingData,
onRowClick,
dataAttribute,
isClickable,
Expand Down Expand Up @@ -143,24 +144,13 @@ export const TableDesktop = <RowType extends RowObject>({
))}
</tr>

{isLoading ? (
Array.from(Array(4).keys()).map(i => (
<Fragment key={i}>
<tr className={rowStyles.row}>
<td className={styles.noData} colSpan={999}>
<span className={styles.loading} />
</td>
</tr>
<tr className={styles.spacer}></tr>
</Fragment>
))
) : (
<tr className={rowStyles.row}>
<td className={styles.noData} colSpan={999}>
{noData ? noData : 'No data'}
</td>
</tr>
)}
<tr className={rowStyles.row}>
<td className={styles.loading} colSpan={999}>
{isLoading
? loadingData || 'Loading data…'
: noData || 'No data'}
</td>
</tr>
</>
)}
</tbody>
Expand Down
6 changes: 1 addition & 5 deletions packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
@apply flex flex-col;
}

.loading {
@apply h-10 block bg-gray-50 rounded animate-pulse;
}

.noData {
.noData, .loading {
@apply relative text-center my-1;
}
15 changes: 4 additions & 11 deletions packages/ui/src/2_molecules/Table/components/TableMobile/TableMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const TableMobile = <RowType extends RowObject>({
onRowClick,
dataAttribute,
noData,
loadingData,
isLoading,
className,
expandedContent,
Expand All @@ -36,17 +37,9 @@ export const TableMobile = <RowType extends RowObject>({
))}

{(!rows || rows.length === 0) && (
<>
{isLoading ? (
Array.from(Array(4).keys()).map(i => (
<div key={i} className={styles.noData}>
<span className={styles.loading} />
</div>
))
) : (
<div className={styles.noData}>{noData ? noData : 'No data'}</div>
)}
</>
<div className={isLoading ? styles.loading : styles.noData}>
{isLoading ? loadingData || 'Loading data…' : noData || 'No data'}
</div>
)}
</div>
);