feat(wallet): enhance DRep script handling and UI components

- Added support for displaying DRep scripts in the InspectMultisigScript and ReviewNativeScript components.
- Updated wallet management to include DRep keys in the new wallet creation and invite flows.
- Improved UI to show DRep script information and CBOR representation for better user experience.

Author: QSchlegel

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

@@ -74,11 +74,16 @@ export default function InspectMultisigScript({
 
   if (mWallet?.buildScript(3) !== undefined && mWallet.isGovernanceEnabled()) {
     slides.push(
-      <RowLabelInfo
-        key="stake-3"
-        label="drep:"
-        value={<Code>{JSON.stringify(mWallet.buildScript(3), null, 2)}</Code>}
-      />,
+      <div key="drep-3">
+        <RowLabelInfo
+          label="drep:"
+          value={<Code>{JSON.stringify(mWallet.buildScript(3), null, 2)}</Code>}
+        />
+        <RowLabelInfo
+          label="DRep Script CBOR"
+          value={<Code>{mWallet.getDRepScript()}</Code>}
+        />
+      </div>,
     );
   }
 

src/components/pages/homepage/wallets/invite/info/index.tsx

@@ -100,11 +100,13 @@ export default function PageNewWalletInviteInfo() {
       const updatedAddresses = newWallet.signersAddresses.filter((_, i) => i !== userIndex);
       const updatedStakeKeys = newWallet.signersStakeKeys.filter((_, i) => i !== userIndex);
       const updatedDescriptions = newWallet.signersDescriptions.filter((_, i) => i !== userIndex);
+      const updatedDRepKeys = newWallet.signersDRepKeys?.filter((_, i) => i !== userIndex) || [];
 
       updateNewWalletSigners({
         walletId: newWalletId!,
         signersAddresses: updatedAddresses,
         signersStakeKeys: updatedStakeKeys,
+        signersDRepKeys: updatedDRepKeys,
         signersDescriptions: updatedDescriptions,
       });
     }

src/components/pages/homepage/wallets/new-wallet-flow/create/ReviewNativeScript.tsx

@@ -93,6 +93,9 @@ export default function ReviewNativeScript({
     ...(mWallet?.buildScript(2) !== undefined && mWallet.stakingEnabled() 
       ? [{ id: "stake", label: "Stake Script" }] 
       : []),
+    ...(mWallet?.buildScript(3) !== undefined && mWallet.isGovernanceEnabled() 
+      ? [{ id: "drep", label: "DRep Script" }] 
+      : []),
   ];
 
   const renderContent = () => {
@@ -185,6 +188,22 @@ export default function ReviewNativeScript({
           </div>
         );
 
+      case "drep":
+        return (
+          <div className="space-y-4 min-h-[200px]">
+            <RowLabelInfo
+              label="DRep Script"
+              value={JSON.stringify(mWallet.buildScript(3), null, 2)}
+              copyString={JSON.stringify(mWallet.buildScript(3), null, 2)}
+            />
+            <RowLabelInfo
+              label="DRep Script CBOR"
+              value={mWallet.getDRepScript()}
+              copyString={mWallet.getDRepScript()}
+            />
+          </div>
+        );
+      
       default:
         return null;
     }

src/components/pages/homepage/wallets/new-wallet/index.tsx

@@ -206,6 +206,7 @@ export default function PageNewWallet() {
       signersAddresses: signersAddresses,
       signersDescriptions: signersDescriptions,
       signersStakeKeys: signersStakeKeys,
+      signersDRepKeys: signersDRepKeys,
       numRequiredSigners: numRequiredSigners,
       scriptCbor: scriptCbor,
       stakeCredentialHash: stakeKey.length > 0 ? stakeKey : undefined,