Merge branch 'main' into development

Author: wzrdx

app/server-components/Accounts/Account.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 export default async function Account({ ethAddress, licenses }: Props) {
     return (
-        <BorderedCard useCustomWrapper hasFixedWidth>
+        <BorderedCard useCustomWrapper useFixedWidthLarge>
             <div className="row justify-between gap-3 py-2 md:py-3 lg:gap-6 lg:py-4">
                 <div className="min-w-[180px]">
                     <CardItem

app/server-components/Licenses/License.tsx

@@ -38,7 +38,7 @@ export default async function License({ licenseType, licenseId }: Props) {
     }
 
     return (
-        <BorderedCard useCustomWrapper hasFixedWidth>
+        <BorderedCard useCustomWrapper useFixedWidthLarge>
             <div className="row justify-between gap-3 py-2 md:py-3 lg:gap-6">
                 {/* License */}
                 <LicenseSmallCard

app/server-components/Licenses/TreasuryDistribution.tsx

@@ -75,11 +75,11 @@ export default async function TreasuryDistribution({ license }: Props) {
         <>
             <div className="card-title font-bold">Treasury Distribution</div>
 
-            <div className="col gap-3">
-                <ListHeader>
-                    <div className="min-w-[100px]">Wallet</div>
-                    <div className="min-w-[100px]">% of GND</div>
-                    <div className="min-w-[220px]">Mined/To be mined</div>
+            <div className="list">
+                <ListHeader useFixedWidthSmall>
+                    <div className="min-w-[70px]">Wallet</div>
+                    <div className="min-w-[112px]">% of GND</div>
+                    <div className="min-w-[210px]">Mined/To be mined</div>
                     <div className="min-w-[120px]">$R1 Balance</div>
                     <div className="min-w-[120px]">Transferred Out</div>
                 </ListHeader>
@@ -89,16 +89,16 @@ export default async function TreasuryDistribution({ license }: Props) {
                         .sort((a, b) => b.percentage - a.percentage)
                         .map((wallet) => (
                             <div key={wallet.address}>
-                                <BorderedCard useCustomWrapper roundedSmall>
+                                <BorderedCard useCustomWrapper roundedSmall useFixedWidthSmall>
                                     <div className="row justify-between gap-3 py-3 lg:gap-6">
-                                        <div className="min-w-[100px]">
+                                        <div className="min-w-[70px]">
                                             <CardItem
                                                 label="Wallet"
                                                 value={<div className="text-slate-500">{wallet.name}</div>}
                                             />
                                         </div>
 
-                                        <div className="min-w-[100px]">
+                                        <div className="min-w-[112px]">
                                             <CardItem
                                                 label="% of GND"
                                                 value={
@@ -116,7 +116,7 @@ export default async function TreasuryDistribution({ license }: Props) {
                                             />
                                         </div>
 
-                                        <div className="min-w-[220px]">
+                                        <div className="min-w-[210px]">
                                             <CardItem
                                                 label="Mined/To be mined"
                                                 value={

app/server-components/Nodes/Node.tsx

@@ -21,7 +21,7 @@ export default async function Node({ ratio1Addr, node }: { ratio1Addr: R1Address
     }
 
     return (
-        <BorderedCard useCustomWrapper hasFixedWidth>
+        <BorderedCard useCustomWrapper useFixedWidthLarge>
             <div className="row justify-between gap-3 py-2 md:py-3 lg:gap-6">
                 <Link href={`${routePath.node}/${node.eth_addr}`} className="group min-w-[200px] py-3 lg:min-w-[228px]">
                     <div className="row gap-1.5">

app/server-components/shared/ListHeader.tsx

@@ -1,6 +1,21 @@
-export default async function ListHeader({ children }) {
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+
+interface Props {
+    useFixedWidthSmall?: boolean;
+}
+
+export default async function ListHeader({ children, useFixedWidthSmall = false }: PropsWithChildren<Props>) {
     return (
-        <div className="hidden w-full min-w-[1126px] items-center justify-between gap-3 rounded-xl border-2 border-slate-100 bg-slate-100 px-4 py-4 text-sm font-medium text-slate-500 lg:flex lg:gap-6 lg:px-6">
+        <div
+            className={clsx(
+                'hidden w-full items-center justify-between gap-3 rounded-xl border-2 border-slate-100 bg-slate-100 px-4 py-4 text-sm font-medium text-slate-500 lg:flex lg:gap-6 lg:px-6',
+                {
+                    'min-w-[1126px]': !useFixedWidthSmall,
+                    'min-w-[820px]': useFixedWidthSmall,
+                },
+            )}
+        >
             {children}
         </div>
     );

app/server-components/shared/cards/BorderedCard.tsx

@@ -3,20 +3,23 @@ import { FunctionComponent, PropsWithChildren } from 'react';
 
 interface Props {
     useCustomWrapper?: boolean;
-    hasFixedWidth?: boolean;
+    useFixedWidthLarge?: boolean;
+    useFixedWidthSmall?: boolean;
     roundedSmall?: boolean;
 }
 
 export const BorderedCard: FunctionComponent<PropsWithChildren<Props>> = ({
     children,
     useCustomWrapper = false,
-    hasFixedWidth = false,
+    useFixedWidthLarge = false,
+    useFixedWidthSmall = false,
     roundedSmall = false,
 }) => {
     return (
         <div
             className={clsx('flex w-full overflow-hidden rounded-2xl border-2 border-slate-100 bg-slate-100', {
-                'min-w-[1126px]': hasFixedWidth,
+                'min-w-[1126px]': useFixedWidthLarge,
+                'min-w-[820px]': useFixedWidthSmall,
                 '!rounded-xl': roundedSmall,
             })}
         >

config/index.ts

@@ -132,5 +132,7 @@ export const getEnvironment = (hostname: string | null): 'mainnet' | 'testnet' |
         ? ('mainnet' as const)
         : hostname === domains.testnet
           ? ('testnet' as const)
-          : ('mainnet' as const);
+          : hostname === domains.devnet
+            ? ('devnet' as const)
+            : ('devnet' as const);
 };