Merge branch 'develop' into devx/cli-output-filter

iotaledger · Sep 25, 2024 · cbfe84a · cbfe84a
2 parents 2a753c8 + 065513f
commit cbfe84a
Show file tree

Hide file tree

Showing 76 changed files with 1,255 additions and 867 deletions.
diff --git a/.changeset/gold-bobcats-check.md b/.changeset/gold-bobcats-check.md
@@ -0,0 +1,5 @@
+---
+'@iota/dapp-kit': minor
+---
+
+Rebrand
diff --git a/.github/actions/turbo-diffs/action.yml b/.github/actions/turbo-diffs/action.yml
@@ -17,7 +17,7 @@ runs:
     - id: changes
       name: Detect changes
       shell: bash
-      run: echo "packages=$(pnpm --silent dlx turbo@1 run build --filter="...[origin/develop]" --dry=json | jq -c ".packages")" >> $GITHUB_OUTPUT
+      run: echo "packages=$(pnpm --silent dlx turbo@2 run build --filter="...[origin/develop]" --dry=json | jq -c ".packages")" >> $GITHUB_OUTPUT
     - name: Print changes for easy debugging
       shell: bash
       run: echo ${{ steps.changes.outputs.packages }}
diff --git a/.github/workflows/apps-wallet-rc.build.yml b/.github/workflows/apps-wallet-rc.build.yml
@@ -0,0 +1,47 @@
+name: Build Wallet App (RC)
+
+on:
+  workflow_dispatch:
+    inputs:
+      iota_branch:
+        description: "IOTA repo release branch to build artifacts from"
+        type: string
+        required: true
+      rc_version:
+        description: "The RC numeric version (X.Y.Z.RC)"
+        type: number
+        required: true
+
+env:
+  DEFAULT_NETWORK: ${{ secrets.WALLET_RC_DEFAULT_NETWORK }}
+  IOTA_NETWORKS: ${{ secrets.WALLET_RC_IOTA_NETWORKS }}
+  APPS_BACKEND: ${{ secrets.WALLET_RC_APPS_BACKEND }}
+  RC_VERSION: "${{ github.event.inputs.rc_version }}"
+  WALLET_RC: "true"
+
+jobs:
+  wallet-rc-build:
+    permissions:
+      contents: read
+    runs-on: [self-hosted]
+    steps:
+      - name: Checking out ${{ env.iota_branch }}
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # pin@v3
+        with:
+          ref: ${{ env.iota_branch }}
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # [email protected]
+      - name: Install Nodejs
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # [email protected]
+        with:
+          node-version: "20"
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build Wallet
+        run: pnpm wallet build:rc
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ env.artifact_name }}
+          path: |
+            ./apps/wallet/dist
diff --git a/apps/explorer/src/components/top-validators-card/StakeColumn.tsx b/apps/explorer/src/components/top-validators-card/StakeColumn.tsx
@@ -2,9 +2,9 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { TableCellText } from '@iota/apps-ui-kit';
 import { useFormatCoin, CoinFormat, formatBalance } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { Text } from '@iota/ui';
 
 type StakeColumnProps = {
     stake: bigint | number | string;
@@ -19,16 +19,13 @@ export function StakeColumn({
 }: StakeColumnProps): JSX.Element {
     const coinFormat = hideCoinSymbol ? CoinFormat.FULL : CoinFormat.ROUNDED;
     const [amount, symbol] = useFormatCoin(stake, IOTA_TYPE_ARG, coinFormat);
+
+    const label = inNano ? formatBalance(stake, 0, coinFormat) : amount;
+    const supportingLabel = inNano ? 'nano' : symbol;
+
     return (
-        <div className="flex items-end gap-0.5">
-            <Text variant="bodySmall/medium" color="steel-darker">
-                {inNano ? formatBalance(stake, 0, coinFormat) : amount}
-            </Text>
-            {!hideCoinSymbol && (
-                <Text variant="captionSmall/medium" color="steel-dark">
-                    {inNano ? 'nano' : symbol}
-                </Text>
-            )}
-        </div>
+        <span className="whitespace-nowrap">
+            <TableCellText supportingLabel={supportingLabel}>{label}</TableCellText>
+        </span>
     );
 }
diff --git a/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx b/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx
@@ -8,6 +8,7 @@ import { type ApyByValidator, formatPercentageDisplay } from '@iota/core';
 import { ampli, getValidatorMoveEvent, VALIDATOR_LOW_STAKE_GRACE_PERIOD } from '~/lib';
 import { StakeColumn, ValidatorLink, ImageIcon } from '~/components';
 import type { IotaEvent, IotaValidatorSummary } from '@iota/iota-sdk/dist/cjs/client';
+import clsx from 'clsx';
 
 interface generateValidatorsTableColumnsArgs {
     atRiskValidators: [string, string][];
@@ -16,9 +17,16 @@ interface generateValidatorsTableColumnsArgs {
     limit?: number;
     showValidatorIcon?: boolean;
     includeColumns?: string[];
+    highlightValidatorName?: boolean;
 }
 
-function ValidatorWithImage({ validator }: { validator: IotaValidatorSummary }) {
+function ValidatorWithImage({
+    validator,
+    highlightValidatorName,
+}: {
+    validator: IotaValidatorSummary;
+    highlightValidatorName?: boolean;
+}) {
     return (
         <ValidatorLink
             address={validator.iotaAddress}
@@ -37,7 +45,13 @@ function ValidatorWithImage({ validator }: { validator: IotaValidatorSummary })
                         label={validator.name}
                         fallback={validator.name}
                     />
-                    <span className="text-label-lg">{validator.name}</span>
+                    <span
+                        className={clsx('text-label-lg', {
+                            'text-neutral-10 dark:text-neutral-92': highlightValidatorName,
+                        })}
+                    >
+                        {validator.name}
+                    </span>
                 </div>
             }
         />
@@ -50,18 +64,43 @@ export function generateValidatorsTableColumns({
     rollingAverageApys = null,
     showValidatorIcon = true,
     includeColumns,
+    highlightValidatorName,
 }: generateValidatorsTableColumnsArgs): ColumnDef<IotaValidatorSummary>[] {
     let columns: ColumnDef<IotaValidatorSummary>[] = [
+        {
+            header: '#',
+            id: 'number',
+            cell({ row }) {
+                return (
+                    <TableCellBase>
+                        <TableCellText>{row.index + 1}</TableCellText>
+                    </TableCellBase>
+                );
+            },
+        },
         {
             header: 'Name',
             id: 'name',
             cell({ row: { original: validator } }) {
                 return (
                     <TableCellBase>
                         {showValidatorIcon ? (
-                            <ValidatorWithImage validator={validator} />
+                            <ValidatorWithImage
+                                validator={validator}
+                                highlightValidatorName={highlightValidatorName}
+                            />
                         ) : (
-                            <TableCellText>{validator.name}</TableCellText>
+                            <TableCellText>
+                                <span
+                                    className={
+                                        highlightValidatorName
+                                            ? 'text-neutral-10 dark:text-neutral-92'
+                                            : undefined
+                                    }
+                                >
+                                    {validator.name}
+                                </span>
+                            </TableCellText>
                         )}
                     </TableCellBase>
                 );

diff --git a/apps/explorer/src/pages/validators/Validators.tsx b/apps/explorer/src/pages/validators/Validators.tsx
@@ -80,6 +80,18 @@ function ValidatorPageResult(): JSX.Element {
             atRiskValidators: data.atRiskValidators,
             validatorEvents,
             rollingAverageApys: validatorsApy || null,
+            highlightValidatorName: true,
+            includeColumns: [
+                '#',
+                'Name',
+                'Stake',
+                'Proposed next Epoch gas price',
+                'APY',
+                'Comission',
+                'Last Epoch Rewards',
+                'Voting Power',
+                'Status',
+            ],
         });
     }, [data, validatorEvents, validatorsApy]);
 

diff --git a/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx b/apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx
@@ -22,12 +22,12 @@ export function Tooltip({
             {children}
             <div
                 className={cx(
-                    'absolute z-[999] hidden w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:flex group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    'absolute z-[999] hidden w-max max-w-[200px] rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
                     tooltipPositionClass,
                 )}
                 role="tooltip"
             >
-                {text}
+                <p className="w-full break-words">{text}</p>
             </div>
         </div>
     );

diff --git a/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx b/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx
@@ -16,10 +16,6 @@ interface TableCellBaseProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
-    /**
-     * Whether to not wrap the text in the cell.
-     */
-    noWrap?: boolean;
 }
 
 export function TableCellBase({

diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/dashboard/layout.tsx
@@ -2,31 +2,42 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { Notifications, RouteLink } from '@/components/index';
-import React, { type PropsWithChildren } from 'react';
+import { Button, Notifications, RouteLink } from '@/components/index';
+import React, { useState, type PropsWithChildren } from 'react';
 import { ConnectButton } from '@iota/dapp-kit';
 
+const routes = [
+    { title: 'Home', path: '/dashboard/home' },
+    { title: 'Assets', path: '/dashboard/assets' },
+    { title: 'Staking', path: '/dashboard/staking' },
+    { title: 'Apps', path: '/dashboard/apps' },
+    { title: 'Activity', path: '/dashboard/activity' },
+    { title: 'Migrations', path: '/dashboard/migrations' },
+    { title: 'Vesting', path: '/dashboard/vesting' },
+];
+
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
-    const routes = [
-        { title: 'Home', path: '/dashboard/home' },
-        { title: 'Assets', path: '/dashboard/assets' },
-        { title: 'Staking', path: '/dashboard/staking' },
-        { title: 'Apps', path: '/dashboard/apps' },
-        { title: 'Activity', path: '/dashboard/activity' },
-        { title: 'Migrations', path: '/dashboard/migrations' },
-        { title: 'Vesting', path: '/dashboard/vesting' },
-    ];
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark');
+        } else {
+            document.documentElement.classList.add('dark');
+        }
+    };
 
     // TODO: check if the wallet is connected and if not redirect to the welcome screen
     return (
         <>
             <section className="flex flex-row items-center justify-around pt-12">
                 <Notifications />
-                <ConnectButton />
-
                 {routes.map((route) => {
                     return <RouteLink key={route.title} {...route} />;
                 })}
+                <Button onClick={toggleDarkMode}>{isDarkMode ? 'Light Mode' : 'Dark Mode'}</Button>
+                <ConnectButton />
             </section>
             <div>{children}</div>
         </>

diff --git a/apps/wallet-dashboard/app/globals.css b/apps/wallet-dashboard/app/globals.css
@@ -2,29 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --foreground-rgb: 255, 255, 255;
-        --background-start-rgb: 0, 0, 0;
-        --background-end-rgb: 0, 0, 0;
-    }
-}
-
 html,
 body {
     height: 100%;
-}
-
-body {
-    color: rgb(var(--foreground-rgb));
-    background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-        rgb(var(--background-start-rgb));
+    @apply bg-gray-100 dark:bg-gray-900;
+    @apply text-gray-900 dark:text-gray-100;
 }
 
 @layer utilities {

diff --git a/apps/wallet-dashboard/tailwind.config.ts b/apps/wallet-dashboard/tailwind.config.ts
@@ -9,6 +9,7 @@ const config: Config = {
         './pages/**/*.{js,ts,jsx,tsx,mdx}',
         './components/**/*.{js,ts,jsx,tsx,mdx}',
     ],
+    darkMode: 'class',
     theme: {
         extend: {
             backgroundImage: {