Issuance Form Edits (#166)

* fix: improve issuance review screens and hide max button

Issue Supply:
- Hide Max button (max is 2^63 - currentSupply, not meaningful)
- Update review to use supply_normalized from verbose API response
- Add formatAmount for proper "After Issuance" display

Lock Supply:
- Simplify review to use supply_normalized from verbose API

Lock Description:
- Remove redundant warning from review (form already has warning + confirmation)

Also:
- Add supply and supply_normalized fields to ComposeAssetInfo type
- Update test helper with supply fields

* feat: add random numeric asset generator and fix quantity bug

1. Random numeric asset generator:
   - Add "# Random" button to AssetNameInput when creating new assets
   - Generates valid numeric asset (A{number} in range 26^12+1 to 256^8)
   - Only shows for regular assets, not subassets
   - Free to create (no 0.5 XCP cost)

2. Fix quantity double-conversion bug:
   - When returning from review, quantity was already converted to satoshis
   - Form would convert again on re-submit, causing massive inflation
   - Now detects and normalizes quantities when initializing from formData

3. Reduce description textarea to 1 row:
   - Asset descriptions are typically short
   - Single row is cleaner for the form

* style: change random asset button to 'A123' with cursor pointer

* style: add refresh icon to A123 button

* style: remove title attribute from A123 button

* fix: smaller icon (size-2) and add htmlFor to label for focus

Author: droplister

src/components/ui/inputs/asset-name-input.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, useEffect, useState, useRef } from "react";
 import { Field, Label, Description, Input } from "@headlessui/react";
+import { FiRefreshCw } from "@/components/icons";
 import { fetchAssetDetails } from "@/utils/blockchain/counterparty/api";
 import { useWallet } from "@/contexts/wallet-context";
 import { validateAssetName } from "@/utils/validation/asset";
@@ -19,6 +20,35 @@ interface AssetNameInputProps {
   isSubasset?: boolean;
   parentAsset?: string;
   autoFocus?: boolean;
+  /** Show button to generate random numeric asset name (only for non-subassets) */
+  showRandomNumeric?: boolean;
+}
+
+/**
+ * Generate a random numeric asset name in the valid range.
+ * Numeric assets are in format A{number} where number is between 26^12+1 and 256^8.
+ * Based on Counterparty validation: lower_bound = 26**12 + 1, upper_bound = 256**8
+ */
+function generateRandomNumericAsset(): string {
+  // Valid range: 26^12 + 1 to 256^8 (inclusive)
+  const min = BigInt(26) ** BigInt(12) + BigInt(1); // 95,428,956,661,682,177
+  const max = BigInt(256) ** BigInt(8); // 18,446,744,073,709,551,616
+
+  // Generate random BigInt in range
+  const range = max - min + BigInt(1); // +1 because upper bound is inclusive
+
+  // Generate random bytes and convert to BigInt
+  const randomBytes = new Uint8Array(8);
+  crypto.getRandomValues(randomBytes);
+  let randomValue = BigInt(0);
+  for (let i = 0; i < 8; i++) {
+    randomValue = (randomValue << BigInt(8)) | BigInt(randomBytes[i]);
+  }
+
+  // Scale to our range and add min
+  const value = min + (randomValue % range);
+
+  return `A${value.toString()}`;
 }
 
 // The component uses the validation from utils internally
@@ -41,6 +71,7 @@ export const AssetNameInput = forwardRef<HTMLInputElement, AssetNameInputProps>(
       isSubasset = false,
       parentAsset = "",
       autoFocus = false,
+      showRandomNumeric = false,
     },
     ref
   ) => {
@@ -247,11 +278,29 @@ export const AssetNameInput = forwardRef<HTMLInputElement, AssetNameInputProps>(
       displayText = helpText;
     }
 
+    const handleRandomNumeric = () => {
+      const randomAsset = generateRandomNumericAsset();
+      onChange(randomAsset);
+    };
+
     return (
       <Field>
-        <Label className="text-sm font-medium text-gray-700">
-          {label} {required && <span className="text-red-500">*</span>}
-        </Label>
+        <div className="flex items-center justify-between">
+          <Label htmlFor={name} className="text-sm font-medium text-gray-700">
+            {label} {required && <span className="text-red-500">*</span>}
+          </Label>
+          {showRandomNumeric && !isSubasset && (
+            <button
+              type="button"
+              onClick={handleRandomNumeric}
+              disabled={disabled}
+              className="text-xs text-blue-600 hover:text-blue-800 disabled:text-gray-400 cursor-pointer font-mono flex items-center gap-1"
+            >
+              <FiRefreshCw className="size-2" />
+              A123
+            </button>
+          )}
+        </div>
         <div className="relative">
           <Input
             ref={(el: HTMLInputElement | null) => {

src/pages/compose/issuance/form.tsx

@@ -45,10 +45,20 @@ export function IssuanceForm({
   // Form status
   const { pending } = useFormStatus();
 
-  // Form state
+  // Form state - normalize quantity from satoshis if returning from review
+  const getInitialAmount = (): string => {
+    if (!initialFormData?.quantity) return "";
+    const qty = initialFormData.quantity.toString();
+    // If divisible was set and quantity looks like satoshis, convert back
+    if (initialFormData?.divisible && Number(qty) >= 100000000) {
+      return toBigNumber(qty).dividedBy(100000000).toString();
+    }
+    return qty;
+  };
+
   const [assetName, setAssetName] = useState(initialFormData?.asset || (initialParentAsset ? `${initialParentAsset}.` : ""));
   const [isAssetNameValid, setIsAssetNameValid] = useState(false);
-  const [amount, setAmount] = useState(initialFormData?.quantity?.toString() || "");
+  const [amount, setAmount] = useState(getInitialAmount());
   const [isDivisible, setIsDivisible] = useState(initialFormData?.divisible ?? false);
   const [isLocked, setIsLocked] = useState(initialFormData?.lock ?? false);
   const [description, setDescription] = useState(initialFormData?.description || "");
@@ -196,6 +206,7 @@ export function IssuanceForm({
             parentAsset={initialParentAsset}
             disabled={pending}
             showHelpText={showHelpText}
+            showRandomNumeric={!initialParentAsset}
             required
             autoFocus
           />
@@ -268,7 +279,7 @@ export function IssuanceForm({
               value={description}
               onChange={setDescription}
               label="Description"
-              rows={4}
+              rows={1}
               disabled={pending}
               showHelpText={showHelpText}
               helpText="A textual description for the asset."

src/pages/compose/issuance/issue-supply/form.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useFormStatus } from "react-dom";
 import { ComposerForm } from "@/components/composer/composer-form";
 import { Spinner } from "@/components/ui/spinner";
@@ -39,11 +39,33 @@ export function IssueSupplyForm({
   // Form status
   const { pending } = useFormStatus();
 
-  // Form state
-  const [quantity, setQuantity] = useState(initialFormData?.quantity?.toString() || "");
+  // Form state - normalize quantity from satoshis if returning from review
+  const getInitialQuantity = (): string => {
+    if (!initialFormData?.quantity) return "";
+    const qty = initialFormData.quantity.toString();
+    // If we have asset info and it's divisible, the stored quantity is in satoshis
+    // We need to convert back to user-friendly format
+    // Check if the value looks like it was converted (large number for divisible)
+    if (assetInfo?.divisible && Number(qty) >= 100000000) {
+      return toBigNumber(qty).dividedBy(100000000).toString();
+    }
+    return qty;
+  };
+
+  const [quantity, setQuantity] = useState(getInitialQuantity());
   const [lock, setLock] = useState(initialFormData?.lock || false);
   const [, setError] = useState<string | null>(null);
 
+  // Update quantity if assetInfo loads after initial render (for proper normalization)
+  useEffect(() => {
+    if (assetInfo && initialFormData?.quantity) {
+      const qty = initialFormData.quantity.toString();
+      if (assetInfo.divisible && Number(qty) >= 100000000) {
+        setQuantity(toBigNumber(qty).dividedBy(100000000).toString());
+      }
+    }
+  }, [assetInfo, initialFormData?.quantity]);
+
   // Calculate maximum issuable amount
   const calculateMaxAmount = (): string => {
     if (!assetInfo) return "0";
@@ -149,8 +171,9 @@ export function IssueSupplyForm({
           maxAmount={calculateMaxAmount()}
           label="Amount"
           name="quantity_display"
-          description={`Amount of ${asset} to issue (max: ${calculateMaxAmount()})`}
-          disableMaxButton={false}
+          description={`Enter the amount of ${asset} to issue`}
+          disableMaxButton={true}
+          isDivisible={assetInfo?.divisible ?? false}
         />
 
         <CheckboxInput

src/pages/compose/issuance/issue-supply/review.tsx

@@ -1,4 +1,5 @@
 import { ReviewScreen } from "@/components/screens/review-screen";
+import { formatAmount } from "@/utils/format";
 
 interface ReviewIssuanceIssueSupplyProps {
   apiResponse: any;
@@ -22,9 +23,10 @@ export function ReviewIssuanceIssueSupply({
   const issuedQuantity = result.params.quantity_normalized ?? result.params.quantity;
 
   // Calculate new total supply from normalized values
-  const newTotalSupply = (
-    Number(currentSupply) + Number(issuedQuantity)
-  ).toString();
+  const newTotalSupply = formatAmount({
+    value: Number(currentSupply) + Number(issuedQuantity),
+    minimumFractionDigits: 0,
+  });
 
   const customFields = [
     { label: "Asset", value: result.params.asset },

src/pages/compose/issuance/lock-description/review.tsx

@@ -19,16 +19,11 @@ export function ReviewLockDescription({
 
   const customFields = [
     { label: "Asset", value: result.params.asset },
-    { 
-      label: "Action", 
+    {
+      label: "Action",
       value: "Lock Description",
       className: "text-red-600 font-medium"
     },
-    { 
-      label: "Warning", 
-      value: "This permanently prevents future description changes",
-      className: "text-red-600 text-sm"
-    },
   ];
 
   return (

src/pages/compose/issuance/lock-supply/review.tsx

@@ -1,15 +1,14 @@
 import { ReviewScreen } from "@/components/screens/review-screen";
-import { formatAssetQuantity } from "@/utils/format";
 
 /**
  * Props for the ReviewIssuanceLockSupply component.
  */
 interface ReviewIssuanceLockSupplyProps {
-  apiResponse: any; // Consider typing this more strictly based on your API response shape
+  apiResponse: any;
   onSign: () => void;
   onBack: () => void;
   error: string | null;
-  isSigning: boolean; // Passed from useActionState in Composer
+  isSigning: boolean;
 }
 
 /**
@@ -25,12 +24,9 @@ export function ReviewIssuanceLockSupply({
   isSigning
 }: ReviewIssuanceLockSupplyProps) {
   const { result } = apiResponse;
-  const isDivisible = result.params.asset_info.divisible;
 
-
-  const currentSupply = result.params.asset_info.supply
-    ? formatAssetQuantity(result.params.asset_info.supply, isDivisible)
-    : "0";
+  // Use normalized supply from verbose API response (handles divisibility correctly)
+  const currentSupply = result.params.asset_info?.supply_normalized ?? "0";
 
   const customFields = [
     { label: "Asset", value: result.params.asset },

src/utils/blockchain/counterparty/__tests__/helpers/composeTestHelpers.ts

@@ -50,6 +50,8 @@ export const createMockComposeResult = (overrides?: Partial<ComposeResult>): Com
       divisible: true,
       locked: false,
       owner: mockAddress,
+      supply: '100000000',
+      supply_normalized: '1.00000000',
     },
     quantity_normalized: '1.00000000',
   },

src/utils/blockchain/counterparty/compose.ts

@@ -61,6 +61,8 @@ export interface ComposeAssetInfo {
   divisible: boolean;
   locked: boolean;
   owner: string;
+  supply?: string;
+  supply_normalized?: string;
 }
 
 export interface ComposeParams {