feat(wallet-dashboard): Improve release process

.github/workflows/_vercel_deploy.yml

@@ -68,14 +68,16 @@ jobs:
     secrets: inherit
     with:
       isProd: false
+      isStaging: false
 
-  wallet-dashboard-prod:
-    name: Vercel Wallet Dashboard Production
+  wallet-dashboard-staging:
+    name: Vercel Wallet Dashboard Staging
     if: github.ref_name == 'develop'
     uses: ./.github/workflows/apps_wallet_dashboard_deploy.yml
     secrets: inherit
     with:
-      isProd: true
+      isProd: false
+      isStaging: true
 
   apps-backend-preview:
     name: Vercel apps-backend Preview

.github/workflows/apps_wallet_dashboard_deploy.yml

@@ -3,14 +3,25 @@ name: Deploy for Wallet Dashboard
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.WALLET_DASHBOARD_VERCEL_PROJECT_ID }}
+  WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL: ${{ secrets.WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL }}
 
 on:
   workflow_dispatch:
+    inputs:
+      isProd:
+        type: boolean
+        required: true
+      isStaging:
+        type: boolean
+        required: true
   workflow_call:
     inputs:
       isProd:
         type: boolean
         required: true
+      isStaging:
+        type: boolean
+        required: true
 
 jobs:
   deploy:
@@ -64,8 +75,11 @@ jobs:
         id: deploy_url
         if: ${{ inputs.isProd == false }}
         run: echo "DEPLOY_URL=$(cat vercel_output.txt | awk 'END{print}')" >> $GITHUB_OUTPUT
+      - name: Alias Staging deploy
+        if: ${{ inputs.isStaging }}
+        run: vercel alias ${{ steps.deploy_url.outputs.DEPLOY_URL }} $WALLET_DASHBOARD_VERCEL_PROJECT_STAGING_URL --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_SCOPE }}
       - name: Comment on pull request
-        if: ${{ inputs.isProd == false }}
+        if: ${{ inputs.isProd == false && inputs.isStaging == false }}
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

apps/wallet-dashboard/app/page.tsx

@@ -63,8 +63,10 @@ function HomeDashboardPage(): JSX.Element {
                                 <ConnectButton connectText="Connect" />
                             </div>
                         </div>
-                        <div className="text-body-lg text-neutral-60">
+                        <div className="text-center text-body-lg text-neutral-60">
                             &copy; IOTA Foundation {CURRENT_YEAR}
+                            <br />
+                            {process.env.NEXT_PUBLIC_DASHBOARD_REV}
                         </div>
                     </div>
                 </>

apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx

@@ -41,18 +41,21 @@ export function SettingsListView({ handleClose, setView }: SettingsListViewProps
         <DialogLayout>
             <Header title="Settings" onClose={handleClose} onBack={handleClose} titleCentered />
             <DialogLayoutBody>
-                <div className="flex w-full flex-col gap-md">
-                    {MENU_ITEMS.map((item, index) => (
-                        <Card key={index} type={CardType.Default} onClick={item.onClick}>
-                            <CardImage type={ImageType.BgSolid}>
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
-                                    <span className="text-2xl">{item.icon}</span>
-                                </div>
-                            </CardImage>
-                            <CardBody title={item.title} subtitle={item.subtitle} />
-                            <CardAction type={CardActionType.Link} />
-                        </Card>
-                    ))}
+                <div className="flex h-full flex-col content-stretch">
+                    <div className="flex h-full w-full flex-col gap-md">
+                        {MENU_ITEMS.map((item, index) => (
+                            <Card key={index} type={CardType.Default} onClick={item.onClick}>
+                                <CardImage type={ImageType.BgSolid}>
+                                    <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
+                                        <span className="text-2xl">{item.icon}</span>
+                                    </div>
+                                </CardImage>
+                                <CardBody title={item.title} subtitle={item.subtitle} />
+                                <CardAction type={CardActionType.Link} />
+                            </Card>
+                        ))}
+                    </div>
+                    <p className="text-center">{process.env.NEXT_PUBLIC_DASHBOARD_REV}</p>
                 </div>
             </DialogLayoutBody>
         </DialogLayout>

apps/wallet-dashboard/next.config.mjs

@@ -1,6 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { execSync } from 'child_process';
+const NEXT_PUBLIC_DASHBOARD_REV = execSync('git rev-parse HEAD').toString().trim().toString();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     async redirects() {
@@ -16,6 +19,9 @@ const nextConfig = {
         // Remove this domain when fetching data
         domains: ['d315pvdvxi2gex.cloudfront.net'],
     },
+    env: {
+        NEXT_PUBLIC_DASHBOARD_REV,
+    },
 };
 
 export default nextConfig;