fix: #657: stop truncating metadata symbols (#1444)

* fix(wasm): #657: stop truncating metadata symbols in wasm * fix(minifront): #657: add max-width to the metadata symbol rendering * chore: changesets * fix(ui): fix DialogContent size on mobile screens * fix(minifront): #657: fix symbol rendering in different places * fix(storage): #657: bump IDB version * chore: changesets
penumbra-zone · Jul 9, 2024 · cbc2419 · cbc2419
1 parent 5641af2
commit cbc2419
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 23 deletions.
diff --git a/.changeset/dry-tigers-sneeze.md b/.changeset/dry-tigers-sneeze.md
@@ -0,0 +1,6 @@
+---
+'@penumbra-zone/wasm': patch
+'@repo/ui': patch
+---
+
+Stop truncating metadata symbols programatically
diff --git a/.changeset/thin-walls-beam.md b/.changeset/thin-walls-beam.md
@@ -0,0 +1,7 @@
+---
+'@penumbra-zone/storage': minor
+'minifront': patch
+'@repo/ui': patch
+---
+
+Storage: bump IDB version. UI: fix Dialog rendering on mobile screens. Minifront: fix metadata symbol truncation.
diff --git a/apps/minifront/src/components/shared/selectors/balance-item.tsx b/apps/minifront/src/components/shared/selectors/balance-item.tsx
@@ -45,7 +45,10 @@ export const BalanceItem = ({ asset, value, onSelect }: BalanceItemProps) => {
         <TableCell>
           <div className='col-span-2 flex items-center justify-start gap-1'>
             <AssetIcon metadata={metadataFromAsset} />
-            <p className='truncate'>
+            <p
+              title={metadataFromAsset?.symbol ? metadataFromAsset.symbol : 'Unknown asset'}
+              className='max-w-20 truncate lg:max-w-60'
+            >
               {metadataFromAsset?.symbol ? metadataFromAsset.symbol : 'Unknown asset'}
             </p>
           </div>

diff --git a/...ront/src/components/staking/account/delegation-value-view/staking-actions/form-dialog.tsx b/...ront/src/components/staking/account/delegation-value-view/staking-actions/form-dialog.tsx
@@ -70,7 +70,7 @@ export const FormDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent size='sm'>
+      <DialogContent>
         {!!open && !!action && (
           <>
             <DialogHeader>{getCapitalizedAction(action)}</DialogHeader>

diff --git a/apps/minifront/src/components/swap/unclaimed-swaps.tsx b/apps/minifront/src/components/swap/unclaimed-swaps.tsx
@@ -29,10 +29,10 @@ export const UnclaimedSwaps = () => {
           <div key={id} className='mt-4 flex items-center gap-4 rounded-md border p-2'>
             <div className='flex items-center gap-2'>
               <AssetIcon metadata={asset1} />
-              <p className='truncate'>{asset1.symbol || 'Unknown asset'}</p>
+              <p className='max-w-40 truncate'>{asset1.symbol || 'Unknown asset'}</p>
               <span>↔</span>
               <AssetIcon metadata={asset2} />
-              <p className='truncate'>{asset2.symbol || 'Unknown asset'}</p>
+              <p className='max-w-40 truncate'>{asset2.symbol || 'Unknown asset'}</p>
             </div>
 
             <div className='hidden sm:block'>Block Height: {Number(swap.outputData?.height)}</div>

diff --git a/packages/storage/src/indexed-db/config.ts b/packages/storage/src/indexed-db/config.ts
@@ -2,4 +2,4 @@
  * The version number for the IndexedDB schema. This version number is used to manage
  * database upgrades and ensure that the correct schema version is applied.
  */
-export const IDB_VERSION = 44;
+export const IDB_VERSION = 45;
diff --git a/packages/ui/components/ui/dialog/index.tsx b/packages/ui/components/ui/dialog/index.tsx
@@ -103,8 +103,7 @@ const dialogContentVariants = cva(
   {
     variants: {
       size: {
-        lg: ['max-w-5xl'],
-        sm: ['max-w-[312px]', 'md:max-w-[400px]'],
+        sm: ['max-w-[350px]', 'md:max-w-[400px] lg:max-w-[600px]'],
       },
     },
     defaultVariants: {
@@ -124,7 +123,11 @@ const DialogContent = React.forwardRef<
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content ref={ref} className={cn(dialogContentVariants({ size }))}>
-      <motion.div layout layoutId={layoutId} className='rounded-lg bg-card-radial'>
+      <motion.div
+        layout
+        layoutId={layoutId}
+        className='w-full overflow-hidden rounded-lg bg-card-radial'
+      >
         {children}
       </motion.div>
     </DialogPrimitive.Content>
@@ -135,7 +138,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ children }: { children?: React.ReactNode }) => (
   <div
     className={cn(
-      'flex items-center gap-4 px-4 text-xl leading-[30px] font-headline font-semibold h-[70px] border-b shrink-0 overflow-hidden w-full',
+      'flex items-center gap-4 px-4 text-xl leading-[30px] font-headline font-semibold h-[70px] border-b shrink-0 w-full',
     )}
   >
     <DialogPrimitive.Close

diff --git a/packages/ui/components/ui/value/value.tsx b/packages/ui/components/ui/value/value.tsx
@@ -38,7 +38,9 @@ export const ValueComponent = ({
         </span>
       )}
       {showDenom && (
-        <span className='truncate font-mono text-xs text-muted-foreground'>{symbol}</span>
+        <span title={symbol} className='max-w-40 truncate font-mono text-xs text-muted-foreground'>
+          {symbol}
+        </span>
       )}
     </div>
   </Pill>

diff --git a/packages/wasm/crate/src/metadata.rs b/packages/wasm/crate/src/metadata.rs
@@ -11,7 +11,6 @@ pub static DELEGATION_TOKEN_REGEX: &str =
     "^udelegation_(?P<data>penumbravalid1(?P<id>[a-zA-HJ-NP-Z0-9]+))$";
 pub static AUCTION_NFT_REGEX: &str =
     "^auctionnft_(?P<data>(?<seq_num>[a-z_0-9]+)_pauctid1(?P<id>[a-zA-HJ-NP-Z0-9]+))$";
-pub static SHORTENED_ID_LENGTH: usize = 8;
 
 /// Given a binary-encoded `Metadata`, returns a new binary-encoded `Metadata`
 /// with the symbol customized if the token is one of several specific types
@@ -37,45 +36,41 @@ pub fn customize_symbol_inner(metadata: Metadata) -> WasmResult<Metadata> {
     let auction_re = Regex::new(AUCTION_NFT_REGEX)?;
 
     if let Some(captures) = unbonding_re.captures(&metadata.base) {
-        let shortened_id = shorten_id(&captures)?;
+        let asset_id = collect_id(&captures)?;
         let start_match = captures
             .name("start")
             .ok_or_else(|| anyhow!("<start> not matched in unbonding token regex"))?
             .as_str();
 
         return Ok(Metadata {
-            symbol: format!("unbondUMat{start_match}({shortened_id}…)"),
+            symbol: format!("unbondUMat{start_match}({asset_id})"),
             ..metadata
         });
     } else if let Some(captures) = delegation_re.captures(&metadata.base) {
-        let shortened_id = shorten_id(&captures)?;
+        let asset_id = collect_id(&captures)?;
 
         return Ok(Metadata {
-            symbol: format!("delUM({shortened_id}…)"),
+            symbol: format!("delUM({asset_id})"),
             ..metadata
         });
     } else if let Some(captures) = auction_re.captures(&metadata.base) {
-        let shortened_id = shorten_id(&captures)?;
+        let asset_id = collect_id(&captures)?;
         let seq_num = get_seq_num(&captures)?;
 
         return Ok(Metadata {
-            symbol: format!("auction@{seq_num}({shortened_id}…)"),
+            symbol: format!("auction@{seq_num}({asset_id})"),
             ..metadata
         });
     }
 
     Ok(metadata)
 }
 
-fn shorten_id(captures: &regex::Captures) -> WasmResult<String> {
+fn collect_id(captures: &regex::Captures) -> WasmResult<String> {
     let id_match = captures
         .name("id")
         .ok_or_else(|| anyhow!("<id> not matched in token regex"))?;
-    Ok(id_match
-        .as_str()
-        .chars()
-        .take(SHORTENED_ID_LENGTH)
-        .collect())
+    Ok(id_match.as_str().to_string())
 }
 
 fn get_seq_num(captures: &regex::Captures) -> WasmResult<String> {