Merge pull request #189 from MeshJS/feature/UX-info-page

Refactor wallet info components for improved UI and functionality

Author: QSchlegel

src/components/multisig/inspect-multisig-script.tsx

@@ -1,5 +1,5 @@
-import CardUI from "@/components/common/card-content";
-import Code from "@/components/common/code";
+import CardUI from "@/components/ui/card-content";
+import Code from "@/components/ui/code";
 import RowLabelInfo from "@/components/common/row-label-info";
 import { type MultisigWallet } from "@/utils/multisigSDK";
 import { Carousel } from "@/components/ui/carousel";
@@ -88,37 +88,36 @@ export default function InspectMultisigScript({
   }
 
   return (
-    <div className="col-span-2 w-full rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50">
-      <div className="flex flex-row items-center justify-between space-y-0 pb-2 p-6">
-        <h3 className="text-xl font-medium">Native Script</h3>
-      </div>
-      <div className="p-6 pt-0">
+    <CardUI
+      title="Native Script"
+      description="Advanced script details for SDK-managed wallets"
+      cardClassName="col-span-2"
+    >
+      <div className="mt-1 flex flex-col gap-2">
         <div className="mt-1 flex flex-col gap-2">
-          <div className="mt-1 flex flex-col gap-2">
-            {mWallet.stakingEnabled() && <RowLabelInfo
-              label="Address"
-              value={<Code>{mWallet.getScript().address}</Code>}
-              copyString={mWallet.getScript().address}
-            />}
-            <RowLabelInfo label="Balance" value={<Code>{`${balance} ₳`}</Code>} />
-            {mWallet.stakingEnabled() && (
-              <RowLabelInfo
-                label="Stake Address"
-                value={<Code>{mWallet.getStakeAddress()}</Code>}
-                copyString={mWallet.getStakeAddress()}
-              />
-            )}
-            {/* add pending rewards like balance */}
-            {mWallet.isGovernanceEnabled() && <RowLabelInfo
-              label="dRep ID"
-              value={<Code>{mWallet.getDRepId()}</Code>}
-              copyString={mWallet.getDRepId()}
-            />}
+          {mWallet.stakingEnabled() && <RowLabelInfo
+            label="Address"
+            value={<Code>{mWallet.getScript().address}</Code>}
+            copyString={mWallet.getScript().address}
+          />}
+          <RowLabelInfo label="Balance" value={<Code>{`${balance} ₳`}</Code>} />
+          {mWallet.stakingEnabled() && (
+            <RowLabelInfo
+              label="Stake Address"
+              value={<Code>{mWallet.getStakeAddress()}</Code>}
+              copyString={mWallet.getStakeAddress()}
+            />
+          )}
+          {/* add pending rewards like balance */}
+          {mWallet.isGovernanceEnabled() && <RowLabelInfo
+            label="dRep ID"
+            value={<Code>{mWallet.getDRepId()}</Code>}
+            copyString={mWallet.getDRepId()}
+          />}
 
-            <Carousel slides={slides} />
-          </div>
+          <Carousel slides={slides} />
         </div>
       </div>
-    </div>
+    </CardUI>
   );
 }

src/components/pages/wallet/info/archive-wallet.tsx

@@ -42,23 +42,34 @@ export function ArchiveWallet({ appWallet }: { appWallet: Wallet }) {
   return (
     <CardUI
       title="Archive Wallet"
-      description="Archive this wallet"
+      description="Archive this wallet to remove it from your wallet list"
       cardClassName="col-span-2"
     >
-      <p>
-        Archiving this wallet will remove it from your list of wallets. You can
-        always restore it later.
-      </p>
-      <div>
-        {appWallet.isArchived ? (
-          <Button onClick={() => archiveWallet(false)} variant="default">
-            Restore Wallet
-          </Button>
-        ) : (
-          <Button onClick={() => archiveWallet(true)} variant="destructive">
-            Archive Wallet
-          </Button>
-        )}
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {appWallet.isArchived 
+            ? "This wallet is currently archived and hidden from your wallet list."
+            : "Archiving this wallet will remove it from your list of wallets. You can always restore it later."}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3">
+          {appWallet.isArchived ? (
+            <Button 
+              onClick={() => archiveWallet(false)} 
+              variant="default"
+              className="w-full sm:w-auto"
+            >
+              Restore Wallet
+            </Button>
+          ) : (
+            <Button 
+              onClick={() => archiveWallet(true)} 
+              variant="destructive"
+              className="w-full sm:w-auto"
+            >
+              Archive Wallet
+            </Button>
+          )}
+        </div>
       </div>
     </CardUI>
   );