Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/staging' into 257-metamask-snap-…
Browse files Browse the repository at this point in the history
…integration
  • Loading branch information
gonzamontiel committed Feb 12, 2024
2 parents 33442a2 + e765993 commit 217abc2
Show file tree
Hide file tree
Showing 29 changed files with 391 additions and 240 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ jobs:
uses: actions/checkout@v3
with:
fetch-depth: 0
token: ${{ secrets.GH_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}

- name: 💿 Setup Nodejs
uses: actions/setup-node@v3
Expand Down Expand Up @@ -52,6 +52,6 @@ jobs:
- name: 📦 Release
run: yarn release
env:
NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

27 changes: 27 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,30 @@
# [1.3.0](https://github.com/pendulum-chain/portal/compare/v1.2.1...v1.3.0) (2023-12-15)


### Bug Fixes

* github action ([0b9f207](https://github.com/pendulum-chain/portal/commit/0b9f20798f4f33b7a97ae674f460b7b3dfcde8c0))
* release ([5ebfd88](https://github.com/pendulum-chain/portal/commit/5ebfd88596580307633e3c3dc10d3360f43be8e5))
* Update disclaimer text for Spacewalk ([#303](https://github.com/pendulum-chain/portal/issues/303)) ([70c2a94](https://github.com/pendulum-chain/portal/commit/70c2a940c94aca49b4ef269dce25527084160dfd))


### Features

* 288 allow users to withdraw from backstop pool in other assets ([#292](https://github.com/pendulum-chain/portal/issues/292)) ([8322b11](https://github.com/pendulum-chain/portal/commit/8322b1136033d0d531660c4f1502ec6529f49d29))
* Add AMPE price to the Dashboard ([#293](https://github.com/pendulum-chain/portal/issues/293)) ([cdf598e](https://github.com/pendulum-chain/portal/commit/cdf598ee91c55edcb0b8dcfe7d95b20cc8c5970d))
* Add info to the Bedeem from Backstop pool UI ([#291](https://github.com/pendulum-chain/portal/issues/291)) ([208dacd](https://github.com/pendulum-chain/portal/commit/208dacd858deec372b128b282eb37360c3e01ebe))
* Add support for NGN, EUR and AUD assets for Spacewalk ([#302](https://github.com/pendulum-chain/portal/issues/302)) ([c377019](https://github.com/pendulum-chain/portal/commit/c377019fdbf4f5e4b8ae2dd45b2047213489aa66))
* added pool filtering by paused flag ([#289](https://github.com/pendulum-chain/portal/issues/289)) ([6e09bce](https://github.com/pendulum-chain/portal/commit/6e09bce49c45e5c999c260242a8f36a23e74525a))
* nabla UI and functionality ([#279](https://github.com/pendulum-chain/portal/issues/279)) ([331aabe](https://github.com/pendulum-chain/portal/commit/331aabe696c9671337645fc04da77b40f3cb065b))
* Update Spacewalk dialogs for "Back to Stellar" transactions ([#305](https://github.com/pendulum-chain/portal/issues/305)) ([c80d7a5](https://github.com/pendulum-chain/portal/commit/c80d7a5fc85ae4f11efc5019e5ba990ee1946d96))
* Update transfer dialogs design ([#295](https://github.com/pendulum-chain/portal/issues/295)) ([8fe2791](https://github.com/pendulum-chain/portal/commit/8fe27919c82a5237313cdd4d545054513d791f55))


### Reverts

* Put back GH_TOKEN into the release config ([#282](https://github.com/pendulum-chain/portal/issues/282)) ([e2b142a](https://github.com/pendulum-chain/portal/commit/e2b142a73052e5d2505b094acf833add01520b7c))
* release config ([38ada27](https://github.com/pendulum-chain/portal/commit/38ada2736d5d93dff27dbc75497fd889d85d085c))

## [1.2.1](https://github.com/pendulum-chain/portal/compare/v1.2.0...v1.2.1) (2023-10-31)


Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "pendulum-chain-portal",
"private": true,
"version": "1.2.1",
"version": "1.3.0",
"type": "module",
"packageManager": "[email protected]",
"scripts": {
Expand Down Expand Up @@ -69,8 +69,6 @@
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@esbuild-plugins/node-globals-polyfill": "^0.1.1",
"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
"@graphql-codegen/cli": "~5.0.0",
"@graphql-codegen/client-preset": "~4.1.0",
"@pendulum-chain/types": "^0.2.3",
Expand Down Expand Up @@ -100,6 +98,7 @@
"@typescript-eslint/parser": "^5.53.0",
"autoprefixer": "^10.4.13",
"daisyui": "^2.52.0",
"esbuild-plugin-polyfill-node": "^0.3.0",
"eslint": "^8.34.0",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-react": "^7.32.2",
Expand Down
6 changes: 1 addition & 5 deletions src/assets/AmplitudeLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,7 @@ const AmplitudeLogo = ({ className, ...rest }: Props) => (
<path d="M7.46228 9.50286C7.46228 9.50286 6.98006 8.04752 6.70985 7.33188C6.43964 6.61625 6.28354 6.17847 5.60953 6.18002C5.32426 6.18067 5.02638 6.55167 4.69338 7.33205C4.30366 8.34748 3.86057 9.50286 3.86057 9.50286H7.46228Z" />
<path d="M15.2085 9.50286C15.2085 9.50286 13.2849 5.911 12.997 5.33482C12.7092 4.75865 12.2485 3.93145 11.3108 3.93145C10.3731 3.93145 9.9888 4.83443 9.75093 5.33482C9.51305 5.83521 7.46237 9.50286 7.46237 9.50286L15.2085 9.50286Z" />
<path d="M7.4624 9.50286C7.4624 9.50286 9.38604 13.0947 9.67385 13.6709C9.96166 14.2471 10.4224 15.0743 11.3601 15.0743C12.2978 15.0743 12.6821 14.1713 12.92 13.6709C13.1578 13.1705 15.2085 9.50286 15.2085 9.50286H7.4624Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.5 0C11.3789 0 13.2156 0.557072 14.7779 1.60077C16.3402 2.64447 17.5578 4.12792 18.2769 5.86353C18.9959 7.59914 19.184 9.50895 18.8175 11.3515C18.4509 13.194 17.5461 14.8864 16.2175 16.2148C14.8889 17.5432 13.1962 18.4478 11.3534 18.8143C9.51054 19.1808 7.6004 18.9927 5.86451 18.2738C4.12861 17.5549 2.64491 16.3375 1.60104 14.7755C0.557165 13.2134 0 11.377 0 9.49841C0 6.97928 1.00089 4.56332 2.78249 2.78202C4.56408 1.00072 6.98044 0 9.5 0ZM9.5 1.86439C7.98986 1.86439 6.51364 2.31212 5.25801 3.15097C4.00238 3.98982 3.02373 5.1821 2.44583 6.57705C1.86793 7.972 1.71672 9.50697 2.01133 10.9878C2.30595 12.4687 3.03314 13.829 4.10097 14.8966C5.1688 15.9643 6.52929 16.6914 8.01041 16.9859C9.49153 17.2805 11.0267 17.1293 12.4219 16.5515C13.8171 15.9737 15.0096 14.9952 15.8486 13.7398C16.6876 12.4844 17.1354 11.0084 17.1354 9.4985C17.1354 7.47381 16.3309 5.53204 14.899 4.10037C13.4671 2.6687 11.525 1.86439 9.5 1.86439Z"
/>
<path d="M9.5 0C11.3789 0 13.2156 0.557072 14.7779 1.60077C16.3402 2.64447 17.5578 4.12792 18.2769 5.86353C18.9959 7.59914 19.184 9.50895 18.8175 11.3515C18.4509 13.194 17.5461 14.8864 16.2175 16.2148C14.8889 17.5432 13.1962 18.4478 11.3534 18.8143C9.51054 19.1808 7.6004 18.9927 5.86451 18.2738C4.12861 17.5549 2.64491 16.3375 1.60104 14.7755C0.557165 13.2134 0 11.377 0 9.49841C0 6.97928 1.00089 4.56332 2.78249 2.78202C4.56408 1.00072 6.98044 0 9.5 0ZM9.5 1.86439C7.98986 1.86439 6.51364 2.31212 5.25801 3.15097C4.00238 3.98982 3.02373 5.1821 2.44583 6.57705C1.86793 7.972 1.71672 9.50697 2.01133 10.9878C2.30595 12.4687 3.03314 13.829 4.10097 14.8966C5.1688 15.9643 6.52929 16.6914 8.01041 16.9859C9.49153 17.2805 11.0267 17.1293 12.4219 16.5515C13.8171 15.9737 15.0096 14.9952 15.8486 13.7398C16.6876 12.4844 17.1354 11.0084 17.1354 9.4985C17.1354 7.47381 16.3309 5.53204 14.899 4.10037C13.4671 2.6687 11.525 1.86439 9.5 1.86439Z" />
<path d="M7.50378 9.51406H15.0958" />
<path d="M3.90198 9.51406H7.43313" />
</svg>
Expand Down
20 changes: 20 additions & 0 deletions src/assets/ChainLogo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { HTMLAttributes } from 'preact/compat';
import { useGlobalState } from '../GlobalStateProvider';
import { TenantName } from '../models/Tenant';
import AmplitudeLogo from './AmplitudeLogo';
import PendulumLogo from './PendulumLogo';

interface Props extends HTMLAttributes<SVGSVGElement> {
className?: string;
}

const ChainLogo = (props: Props) => {
const { tenantName } = useGlobalState();
if (tenantName === TenantName.Pendulum) {
return <PendulumLogo {...props} />;
} else {
return <AmplitudeLogo {...props} />;
}
};

export default ChainLogo;
21 changes: 8 additions & 13 deletions src/assets/collators-rewards-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
const RewardsIcon = () => (
<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_362_1997)">
<path
d="M10.2812 15.1797H9.87109V14.3047H4.12891V15.1797H3.71875C3.49204 15.1797 3.30859 15.3631 3.30859 15.5898C3.30859 15.8166 3.49204 16 3.71875 16H10.2812C10.508 16 10.6914 15.8166 10.6914 15.5898C10.6914 15.3631 10.508 15.1797 10.2812 15.1797Z"
fill="#00F197"
/>
<path
d="M13.5898 2.82031H11.503C11.5064 2.68392 11.5117 2.54895 11.5117 2.41016C11.5117 2.18345 11.3283 2 11.1016 2H2.89844C2.67173 2 2.48828 2.18345 2.48828 2.41016C2.48828 2.54895 2.49359 2.68398 2.497 2.82031H0.410156C0.183449 2.82031 0 3.00376 0 3.23047V4.26948C0 6.55927 1.83395 8.4193 4.09432 8.53961C4.5657 9.18799 5.12701 9.66935 5.76234 9.94276C5.66915 11.8143 4.67616 13.1106 4.35493 13.4843H9.64441C9.32329 13.1132 8.33049 11.8246 8.2373 9.94276C8.87283 9.66943 9.43439 9.1881 9.90582 8.53961C12.1661 8.41925 14 6.55924 14 4.26948V3.23047C14 3.00376 13.8166 2.82031 13.5898 2.82031ZM0.820312 4.26948V3.64062H2.53786C2.66022 5.20329 3.01574 6.5733 3.55914 7.65217C2.01023 7.3034 0.820312 5.92227 0.820312 4.26948ZM8.65345 5.53959L8.12755 6.05748L8.24852 6.78568C8.27416 6.93907 8.21086 7.0937 8.08508 7.18462C7.95892 7.27625 7.79308 7.28847 7.65491 7.21708L7 6.877L6.34512 7.21708C6.20654 7.28757 6.0407 7.27595 5.91495 7.18462C5.78916 7.0937 5.72589 6.9391 5.75151 6.78568L5.87248 6.05748L5.34658 5.53959C5.23373 5.42844 5.19745 5.26441 5.24445 5.12063C5.29252 4.97322 5.41989 4.86508 5.5737 4.84186L6.30347 4.73211L6.63313 4.07241C6.77171 3.79443 7.22835 3.79443 7.36693 4.07241L7.69658 4.73211L8.42636 4.84186C8.58017 4.86511 8.70753 4.97325 8.7556 5.12063C8.80365 5.26843 8.764 5.43066 8.65345 5.53959ZM13.1797 4.26948C13.1797 5.92221 11.9898 7.30335 10.4409 7.65212C10.9843 6.57324 11.3398 5.20335 11.4621 3.64062H13.1797V4.26948Z"
fill="#00F197"
/>
import { HTMLAttributes } from 'preact/compat';

const RewardsIcon = (props: HTMLAttributes<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" {...props}>
<g clip-path="url(#clip0_3235_10203)">
<path d="M10.4701 2.3125V7.68312L10.2832 8.13812C9.97445 8.86938 9.30008 9.42188 8.5282 9.57625L8.0407 9.67375L7.5532 9.57625C6.7732 9.42188 6.10695 8.86938 5.7982 8.13812L5.61133 7.68312V2.3125H10.4863M12.1113 0.6875H3.98633V2.3125H2.36133C1.46758 2.3125 0.736328 3.04375 0.736328 3.9375V4.75C0.736328 6.82188 2.29633 8.51188 4.3032 8.76375C4.81508 9.9825 5.91195 10.9006 7.23633 11.1687V13.6875H3.98633V15.3125H12.1113V13.6875H8.86133V11.1687C10.1857 10.9006 11.2826 9.9825 11.7945 8.76375C13.8013 8.51188 15.3613 6.82188 15.3613 4.75V3.9375C15.3613 3.04375 14.6301 2.3125 13.7363 2.3125H12.1113V0.6875ZM12.1113 7.04125V3.9375H13.7363V4.75C13.7363 5.80625 13.0538 6.7 12.1113 7.04125ZM3.98633 7.04125C3.04383 6.7 2.36133 5.80625 2.36133 4.75V3.9375H3.98633V7.04125Z" />
</g>
<defs>
<clipPath id="clip0_362_1997">
<rect width="14" height="17.0964" fill="white" transform="translate(0 0.500977)" />
<clipPath id="clip0_3235_10203">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Expand Down
33 changes: 5 additions & 28 deletions src/assets/collators-staked-icon.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,8 @@
const StakedIcon = () => (
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.5625 13.0625C22.5625 18.2875 18.2875 22.5625 13.0625 22.5625C7.8375 22.5625 3.5625 18.2875 3.5625 13.0625C3.5625 7.8375 7.8375 3.5625 13.0625 3.5625C18.2875 3.5625 22.5625 7.8375 22.5625 13.0625Z"
fill="#ECC52E"
/>
<path
d="M20.1875 13.0625C20.1875 16.9812 16.9812 20.1875 13.0625 20.1875C9.14375 20.1875 5.9375 16.9812 5.9375 13.0625C5.9375 9.14375 9.14375 5.9375 13.0625 5.9375C16.9812 5.9375 20.1875 9.14375 20.1875 13.0625Z"
fill="#F3D332"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20.7812 1.1875H0V0H20.7812C23.75 0 26.125 2.375 26.125 5.34375V20.7812H24.9375V5.34375C24.9375 3.0875 23.0375 1.1875 20.7812 1.1875Z"
fill="#D7D7D7"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.34375 24.9375H26.125V26.125H5.34375C2.375 26.125 0 23.75 0 20.7812V5.34375H1.1875V20.7812C1.1875 23.0375 3.0875 24.9375 5.34375 24.9375Z"
fill="#D7D7D7"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.2249 28.3812L27.0749 25.5312L24.2249 22.6812L23.3937 23.5124L25.2937 25.4124L23.3937 27.3124L24.2249 28.3812Z"
fill="#D7D7D7"
/>
import { HTMLAttributes } from 'preact/compat';

const StakedIcon = (props: HTMLAttributes<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="25" viewBox="0 0 19 25" {...props}>
<path d="M9.46141 3.13495L14.7827 7.27495L9.46141 11.4149L4.14016 7.27495L9.46141 3.13495ZM9.46141 0.288696L0.472656 7.27495L2.10391 8.5462L9.46141 14.2612L16.8077 8.5462L18.4502 7.27495L9.46141 0.288696ZM16.8189 11.0662L9.45016 16.7924L2.09266 11.0774L0.472656 12.3374L9.46141 19.3237L18.4502 12.3374L16.8189 11.0662ZM16.8189 16.1512L9.45016 21.8774L2.09266 16.1624L0.472656 17.4224L9.46141 24.4087L18.4502 17.4224L16.8189 16.1512Z" />
</svg>
);

Expand Down
66 changes: 66 additions & 0 deletions src/components/Form/Amount/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { Input } from 'react-daisyui';
import { UseFormRegisterReturn } from 'react-hook-form';
import { roundNumber } from '../../../shared/parseNumbers';

export interface AmountProps {
className?: string;
max?: number;
min?: number;
register: UseFormRegisterReturn;
setValue: (n: number) => void;
assetSuffix?: string;
error?: string;
}

const Amount = ({ className, register, max, setValue, assetSuffix, error }: AmountProps): JSX.Element | null => {
return (
<>
<div
className={`rounded-lg bg-base-300 px-4 py-3 ${className || ''} ${
error ? 'border border-solid border-red-400' : ''
}`}
>
<div className="w-full flex justify-between">
<div className="flex-grow text-4xl text-accent-content font-2">
<Input
className="input-ghost w-full text-4xl font-2 pl-0 focus:outline-none"
type="number"
step="any"
onKeyPress={(e: KeyboardEvent) => {
if (e.code === 'Minus' || e.code === 'KeyE') {
e.preventDefault();
}
}}
placeholder="0.0"
{...register}
/>
</div>
<div className="flex">
<button
className="text-accent-content underline hover:opacity-70 mx-1 font-semibold"
onClick={() => setValue(roundNumber(Number(max) * 0.5))}
type="button"
>
50%
</button>
<button
className="text-accent-content underline hover:opacity-70 mx-1 font-semibold"
onClick={() => setValue(roundNumber(Number(max)))}
type="button"
>
MAX
</button>
</div>
</div>
<div className="flex justify-between items-center dark:text-neutral-400 text-neutral-500">
<div className="text-sm mt-px">Amount</div>
<div className="flex gap-1 text-sm">
{max !== undefined && <span className="mr-1">Available: {max.toFixed(2)}</span>}
</div>
</div>
</div>
<label className="label">{error && <span className="label-text text-red-400">{error}</span>}</label>
</>
);
};
export default Amount;
6 changes: 3 additions & 3 deletions src/components/Form/From/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export interface FromProps {
setValue: (n: number) => void;
assets?: Asset[];
selectedAsset?: Asset;
setSelectedAsset: (a: Asset) => void;
setSelectedAsset?: (a: Asset) => void;
network?: string;
assetSuffix?: string;
error?: string;
Expand Down Expand Up @@ -40,7 +40,7 @@ const From = ({
<div className="w-full flex justify-between">
<div className="flex-grow text-4xl text-black font-2">
<Input
className="input-ghost w-full text-4xl font-2 pl-0"
className="input-ghost w-full text-4xl font-2 pl-0 focus:outline-none"
type="number"
step="any"
onKeyPress={(e: KeyboardEvent) => {
Expand All @@ -52,7 +52,7 @@ const From = ({
{...register}
/>
</div>
{assets && (
{assets && setSelectedAsset && (
<AssetSelector
selectedAsset={selectedAsset}
assets={assets}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default function Layout(): JSX.Element | null {
<OpenWallet dAppName={dAppName} />
<ChainSelector />
<div className="dropdown dropdown-end mr-2 hidden">
<button className="flex space-x-2 items-center px-4 py-2 btn no-animation">
<button className="flex space-x-2 items-center py-2 btn no-animation">
<span className={`${isPendulum ? 'text-white' : ''} text-md`}>
{isPendulum ? 'Pendulum' : 'Amplitude'}
</span>
Expand Down Expand Up @@ -103,7 +103,7 @@ export default function Layout(): JSX.Element | null {
</div>
</div>
</header>
<main className="w-full flex-wrap px-4 sm:px-8 py-4 flex-grow">
<main className="w-full flex-wrap px-4 py-4 flex-grow">
<Outlet />
</main>
</section>
Expand Down
8 changes: 5 additions & 3 deletions src/components/Layout/links.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { ChevronRightIcon } from '@heroicons/react/20/solid';
import { ComponentChildren } from 'preact';
import { NavLinkProps } from 'react-router-dom';
import { GlobalState } from '../../GlobalStateProvider';
import ExternalIcon from '../../assets/ExternalIcon';
import DashboardIcon from '../../assets/dashboard';
import ExternalIcon from '../../assets/ExternalIcon';
import GovernanceIcon from '../../assets/governance';
import NablaIcon from '../../assets/nabla';
import OnrampIcon from '../../assets/onramp';
Expand All @@ -12,6 +11,7 @@ import StakingIcon from '../../assets/staking';
import SwapIcon from '../../assets/swap';
import { config } from '../../config';
import { nablaConfig } from '../../config/apps/nabla';
import { GlobalState } from '../../GlobalStateProvider';
import { TenantName } from '../../models/Tenant';
import ComingSoonTag from './ComingSoonTag';

Expand Down Expand Up @@ -97,7 +97,9 @@ export const links: Links = ({ tenantName }) => [
{
link: '/nabla',
title: 'Nabla',
hidden: nablaConfig.environment && !nablaConfig.environment.includes(config.env),
hidden:
(nablaConfig.environment && !nablaConfig.environment.includes(config.env)) ||
(tenantName && !nablaConfig.tenants.includes(tenantName)),
prefix: <NablaIcon />,
props: {
className: ({ isActive } = {}) => (isActive ? 'active' : ''),
Expand Down
12 changes: 11 additions & 1 deletion src/components/Table/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import {
ColumnDef,
Row,
flexRender,
getCoreRowModel,
getFilteredRowModel,
Expand Down Expand Up @@ -48,8 +49,12 @@ export type TableProps<T> = {
evenRowsClassname?: string;
/** Gives a className to odd rows (1,3,5,7,...), to help table rows readability. */
oddRowsClassname?: string;
/** Adds a title to be included in the Table header, you can indicate a text or an Element. */
title?: string | JSX.Element;
/** Sets the global font size for the Table. */
fontSize?: string;
/** Sets the global font size for the Table. */
rowCallback?: (row: Row<T>, index: number) => void;
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand All @@ -68,6 +73,7 @@ const Table = <T,>({
oddRowsClassname,
fontSize,
title,
rowCallback,
}: TableProps<T>): JSX.Element | null => {
const totalCount = data.length;

Expand Down Expand Up @@ -152,7 +158,11 @@ const Table = <T,>({
</thead>
<tbody>
{getRowModel().rows.map((row, index) => (
<tr key={row.id}>
<tr
key={row.id}
onClick={rowCallback ? () => rowCallback(row, index) : undefined}
className={rowCallback && 'cursor-pointer highlighted-row'}
>
{row.getVisibleCells().map((cell) => {
return (
<td
Expand Down
7 changes: 7 additions & 0 deletions src/components/Table/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
color: #252733;
}

.highlighted-row:hover td {
background: #f1f4ff;
}
}

[data-theme='amplitude'] {
Expand All @@ -33,4 +36,8 @@
.table-container {
color: #fff;
}

.highlighted-row:hover td {
background-color:#333 ;
}
}
Loading

0 comments on commit 217abc2

Please sign in to comment.