Skip to content

Commit

Permalink
- added link to transactions in pool
Browse files Browse the repository at this point in the history 
- show total txes in pool on title
  • Loading branch information
@radumojic
radumojic committed Nov 13, 2024
1 parent 595c187 commit db02951
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 64 deletions.
152 changes: 94 additions & 58 deletions src/assets/scss/_bootstrap-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,146 @@

.card {
&.card-black {
--#{$prefix}card-bg: var(--#{$prefix}#{$prefix}black);
--card-bg: var(--black);
}
}

.btn-primary {
--#{$prefix}btn-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-bg: var(--#{$prefix}primary);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);

--#{$prefix}btn-hover-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}primary-200);
--btn-color: var(--neutral-900);
--btn-bg: var(--primary);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5);

--btn-hover-color: var(--neutral-900);
--btn-hover-bg: var(--primary-200);
}

.btn {
--#{$prefix}btn-active-bg: var(--#{$prefix}primary);
--#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
--#{$prefix}btn-active-color: var(--#{$prefix}neutral-900);
--btn-active-bg: var(--primary);
--btn-active-border-color: var(--primary);
--btn-active-color: var(--neutral-900);
}

.btn-outline-primary {
border-width: 1px;
--#{$prefix}btn-color: var(--#{$prefix}primary);
--#{$prefix}btn-border-color: var(--#{$prefix}primary);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-200);
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);
--#{$prefix}btn-hover-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}primary);
--btn-color: var(--primary);
--btn-border-color: var(--primary);
--btn-hover-border-color: var(--primary-200);
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5);
--btn-hover-color: var(--neutral-900);
--btn-hover-bg: var(--primary);
}

.btn-dark {
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-bg: var(--#{$prefix}neutral-800);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: none;

--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
--#{$prefix}btn-hover-bg: var(--#{$prefix}neutral-900);

--#{$prefix}btn-active-color: var(--#{$prefix}body-color);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-900);
--#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
--btn-color: var(--body-color);
--btn-bg: var(--neutral-800);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--body-color);
--btn-hover-bg: var(--neutral-900);

--btn-active-color: var(--body-color);
--btn-active-bg: var(--neutral-900);
--btn-active-border-color: var(--primary);
}

.btn-dark-alt {
--#{$prefix}btn-bg: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}black);
--#{$prefix}btn-active-bg: var(--#{$prefix}black);
--btn-bg: var(--neutral-900);
--btn-hover-bg: var(--black);
--btn-active-bg: var(--black);
}

.btn-dark-980 {
--#{$prefix}btn-color: var(--#{$prefix}neutral-600);
--#{$prefix}btn-bg: var(--#{$prefix}neutral-980);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: none;

--#{$prefix}btn-hover-color: var(--#{$prefix}primary);
--#{$prefix}btn-hover-bg: var(--#{$prefix}black);

--#{$prefix}btn-active-color: var(--#{$prefix}primary);
--#{$prefix}btn-active-bg: var(--#{$prefix}black);
--#{$prefix}btn-active-border-color: transparent;
--btn-color: var(--neutral-600);
--btn-bg: var(--neutral-980);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--primary);
--btn-hover-bg: var(--black);

--btn-active-color: var(--primary);
--btn-active-bg: var(--black);
--btn-active-border-color: transparent;
}
.btn-dark-gradient {
--btn-font-weight: 500;
--btn-font-family: var(--font-headings-regular);
--btn-color: var(--neutral-400);
--btn-bg: linear-gradient(
90deg,
rgba(117, 127, 154, 0.3),
rgba(215, 221, 232, 0.3)
);
--btn-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--neutral-400);
--btn-hover-bg: linear-gradient(
90deg,
rgba(117, 127, 154, 0.4),
rgba(215, 221, 232, 0.4)
);
--btn-hover-border-color: var(--border-color);

--btn-active-color: var(--btn-hover-color);
--btn-active-bg: var(--btn-hover-bg);
--btn-active-border-color: var(--border-color);

--btn-disabled-opacity: 0.65;
--btn-disabled-color: var(--neutral-400);
--btn-disabled-bg: var(--neutral-800);
--btn-disabled-border-color: var(--border-color);

color: var(--neutral-400);
background: linear-gradient(
90deg,
rgba(117, 127, 154, 0.3),
rgba(215, 221, 232, 0.3)
);
}
.form-select,
.form-control {
background-color: var(--#{$prefix}neutral-800);
color: var(--#{$prefix}neutral-500);
background-color: var(--neutral-800);
color: var(--neutral-500);
&::placeholder {
color: var(--#{$prefix}neutral-500);
color: var(--neutral-500);
}
&:focus {
color: var(--#{$prefix}neutral-400);
background-color: var(--#{$prefix}neutral-800);
box-shadow: 0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.5);
color: var(--neutral-400);
background-color: var(--neutral-800);
box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.5);
}
&:focus-visible {
border: 0;
outline: 0;
}
&.form-control-dark {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}

.input-group-text {
background-color: var(--#{$prefix}neutral-800);
color: var(--#{$prefix}neutral-500);
background-color: var(--neutral-800);
color: var(--neutral-500);
&:hover {
color: var(--#{$prefix}primary);
color: var(--primary);
}
}

.input-group-black {
.form-control {
background-color: var(--#{$prefix}black);
background-color: var(--black);
&:focus {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}
.input-group-text {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}

Expand Down
5 changes: 3 additions & 2 deletions src/components/TransactionsInPoolTable/TransactionsInPoolTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export const TransactionsInPoolTable = ({
totalTransactionsInPool,
title = (
<h5 data-testid='title' className='table-title d-flex align-items-center'>
Live Transactions In Pool <PulsatingLed className='ms-2 mt-1' />
{totalTransactionsInPool} Transactions In Pool{' '}
<PulsatingLed className='ms-2 mt-1' />
</h5>
),
dataChanged = false,
Expand All @@ -42,7 +43,7 @@ export const TransactionsInPoolTable = ({
}: TransactionsInPoolTableUIType) => {
const { type } = useGetTransactionInPoolFilters();
return (
<div className='transactions-table transactions-in-pool-table'>
<div className='transactions-table transactions-in-pool-table'>
<div className='card'>
<div className='card-header'>
<div className='card-header-item table-card-header d-flex justify-content-between align-items-center flex-wrap gap-3'>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TransactionsTable/components/MethodList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const MethodList = () => {
<div className='card-header-item table-card-header d-flex justify-content-between align-items-center flex-wrap gap-3'>
<ul className='list-inline m-0 d-flex flex-wrap gap-2'>
{method && (
<li className='list-inline-item ms-2'>
<li className='list-inline-item'>
<div className='badge badge-outline badge-outline-green text-capitalize d-flex align-items-center justify-content-center pe-0'>
{method}
<div
Expand Down
16 changes: 13 additions & 3 deletions src/pages/Transactions/Transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
import { useSelector } from 'react-redux';
import { useSearchParams } from 'react-router-dom';

import { TransactionsTable, PulsatingLed } from 'components';
import { TransactionsTable, PulsatingLed, NetworkLink } from 'components';
import { MethodList } from 'components/TransactionsTable/components';
import {
useAdapter,
Expand All @@ -12,6 +12,7 @@ import {
useGetShardText
} from 'hooks';
import { activeNetworkSelector } from 'redux/selectors';
import { transactionsRoutes } from 'routes';
import { TransactionFiltersEnum } from 'types';

export const Transactions = () => {
Expand Down Expand Up @@ -66,6 +67,7 @@ export const Transactions = () => {
data-testid='title'
className='table-title d-flex align-items-center flex-wrap'
>
<div className='d-flex align-items-center flex-wrap'></div>
Live Transactions
{senderShard !== undefined && (
<>
Expand All @@ -79,8 +81,16 @@ export const Transactions = () => {
{getShardText(receiverShard)}
</>
)}
<MethodList />
<PulsatingLed className='ms-2 mt-1' />
<PulsatingLed className='mx-2' />
<div className='d-flex align-items-center flex-wrap gap-2'>
<NetworkLink
to={transactionsRoutes.transactionsInPool}
className='btn btn-sm btn-dark-gradient'
>
Transaction Pool
</NetworkLink>
<MethodList />
</div>
</h5>
}
/>
Expand Down

0 comments on commit db02951

Please sign in to comment.