Merge branch 'master' into saved-requests-name-field

stellar · Nov 26, 2024 · aff1e5c · aff1e5c
2 parents 4bd568d + 2268150
commit aff1e5c
Show file tree

Hide file tree

Showing 16 changed files with 1,876 additions and 31 deletions.
diff --git a/src/app/(sidebar)/transaction/build/components/Operations.tsx b/src/app/(sidebar)/transaction/build/components/Operations.tsx
@@ -935,7 +935,12 @@ export const Operations = () => {
           {/* Operations */}
           <>
             {txnOperations.map((op, idx) => (
-              <Box key={`op-${idx}`} gap="lg" addlClassName="PageBody__content">
+              <Box
+                key={`op-${idx}`}
+                gap="lg"
+                addlClassName="PageBody__content"
+                data-testid={`build-transaction-operation-${idx}`}
+              >
                 {/* Operation label and action buttons */}
                 <Box
                   gap="lg"

diff --git a/src/app/(sidebar)/transaction/build/components/TransactionXdr.tsx b/src/app/(sidebar)/transaction/build/components/TransactionXdr.tsx
@@ -544,7 +544,7 @@ export const TransactionXdr = () => {
           variant="success"
           title="Success! Transaction Envelope XDR:"
           response={
-            <Box gap="xs">
+            <Box gap="xs" data-testid="build-transaction-envelope-xdr">
               <div>
                 <div>Network Passphrase:</div>
                 <div>{network.passphrase}</div>

diff --git a/src/app/(sidebar)/transaction/build/page.tsx b/src/app/(sidebar)/transaction/build/page.tsx
@@ -28,7 +28,7 @@ export default function BuildTransaction() {
                   <Box gap="sm">
                     <>
                       <div>Params</div>
-                      <ul>
+                      <ul data-testid="build-transaction-params-errors">
                         {paramsError.map((e, i) => (
                           <li key={`e-${i}`}>{e}</li>
                         ))}
@@ -38,7 +38,10 @@ export default function BuildTransaction() {
                 ) : null}
 
                 {operationsError.length > 0 ? (
-                  <Box gap="sm">
+                  <Box
+                    gap="sm"
+                    data-testid="build-transaction-operations-errors"
+                  >
                     {operationsError.map((e, i) => (
                       <Box gap="sm" key={`e-${i}`}>
                         <>

diff --git a/src/app/(sidebar)/transaction/sign/components/Overview.tsx b/src/app/(sidebar)/transaction/sign/components/Overview.tsx
@@ -515,7 +515,13 @@ export const Overview = () => {
       }, [] as boolean[]).length > 0;
 
     return (
-      <Box gap="md" direction="row" align="center" wrap="wrap">
+      <Box
+        gap="md"
+        direction="row"
+        align="center"
+        wrap="wrap"
+        data-testid="sign-tx-overview"
+      >
         {sigSuccessMsg ? (
           <Button
             size="md"
@@ -649,14 +655,18 @@ export const Overview = () => {
         </div>
       </PageCard>
 
-      <div className="SignTx__Signs">
+      <div className="SignTx__Signs" data-testid="sign-tx-sigs">
         <PageCard
           heading="Signatures"
           headingInfoLink="https://developers.stellar.org/docs/learn/encyclopedia/signatures-multisig"
           headingAs="h2"
         >
           <Box gap="lg">
-            <Box gap="md" addlClassName="PageBody__content">
+            <Box
+              gap="md"
+              addlClassName="PageBody__content"
+              data-testid="sign-tx-secretkeys"
+            >
               <MultiPicker
                 id="signer"
                 label="Sign with secret key"
@@ -686,7 +696,11 @@ export const Overview = () => {
               />
             </Box>
 
-            <Box gap="md" addlClassName="PageBody__content">
+            <Box
+              gap="md"
+              addlClassName="PageBody__content"
+              data-testid="sign-tx-hardware"
+            >
               <Box gap="sm" direction="row">
                 <TextPicker
                   id="bip-path"
@@ -756,7 +770,11 @@ export const Overview = () => {
               />
             </Box>
 
-            <Box gap="md" addlClassName="PageBody__content">
+            <Box
+              gap="md"
+              addlClassName="PageBody__content"
+              data-testid="sign-tx-wallet-ext"
+            >
               <LabelHeading size="md">Sign with wallet extension</LabelHeading>
 
               <SignTxButton
@@ -775,7 +793,11 @@ export const Overview = () => {
               />
             </Box>
 
-            <Box gap="md" addlClassName="PageBody__content">
+            <Box
+              gap="md"
+              addlClassName="PageBody__content"
+              data-testid="sign-tx-signature"
+            >
               <LabelHeading size="md">Add a signature</LabelHeading>
 
               <>
@@ -852,15 +874,17 @@ export const Overview = () => {
         </PageCard>
 
         {sign.signedTx ? (
-          <div ref={successResponseEl}>
+          <div ref={successResponseEl} data-testid="sign-tx-validation-card">
             <ValidationResponseCard
               variant="success"
               title="Transaction signed!"
               subtitle={getAllSigsMessage()}
               response={
                 <Box gap="xs">
                   <div>
-                    <div>{sign.signedTx}</div>
+                    <div data-testid="validation-card-response">
+                      {sign.signedTx}
+                    </div>
                   </div>
                 </Box>
               }

diff --git a/src/components/ExpandBox/styles.scss b/src/components/ExpandBox/styles.scss
@@ -53,6 +53,13 @@
       .ExpandBox__inset {
         overflow: visible;
       }
+
+      // Don't affect nested closed ExpandBox
+      [data-is-expanded="false"] {
+        .ExpandBox__inset {
+          overflow: hidden;
+        }
+      }
     }
   }
 }
diff --git a/src/components/FormElements/AssetMultiPicker.tsx b/src/components/FormElements/AssetMultiPicker.tsx
@@ -106,6 +106,7 @@ export const AssetMultiPicker = ({
                 <div className="RadioPicker__inset" key={`${id}-${index}`}>
                   <RadioPicker
                     id={`${id}-${index}`}
+                    data-testid={`asset-multipicker-${index}`}
                     selectedOption={value.type}
                     label={`#${index + 1}`}
                     onChange={(optionId) => {

diff --git a/src/components/FormElements/AssetPicker.tsx b/src/components/FormElements/AssetPicker.tsx
@@ -200,6 +200,7 @@ export const AssetPicker = ({
     <div className="RadioPicker__inset">
       <RadioPicker
         id={id}
+        data-testid="asset-picker"
         selectedOption={value.type}
         label={label}
         labelSuffix={labelSuffix}

diff --git a/src/components/FormElements/ClaimantsPicker.tsx b/src/components/FormElements/ClaimantsPicker.tsx
@@ -39,7 +39,7 @@ export const ClaimantsPicker = ({
                 const clId = `${id}-claimant-${idx}`;
 
                 return (
-                  <Box gap="sm" key={clId}>
+                  <Box gap="sm" key={clId} data-testid="claimants-picker">
                     <Box
                       gap="lg"
                       direction="row"
@@ -261,6 +261,7 @@ const Predicate = ({
 
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-predicate`}
+        data-testid="predicate-picker"
         selectedOption={type}
         onChange={(val) => {
           onUpdate({
@@ -315,6 +316,7 @@ const PredicateType = ({
     <Box gap="sm" addlClassName="PredicateTypeWrapper">
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-predicate-type`}
+        data-testid="predicate-type-picker"
         selectedOption={type}
         label="Predicate Type"
         onChange={(val) => {
@@ -384,6 +386,7 @@ const PredicateTimeType = ({
     <>
       <RadioPicker
         id={`${parentId}-${index}-${parentPath}-time-type`}
+        data-testid="predicate-time-picker"
         selectedOption={type}
         label="Time Type"
         onChange={(val) => {

diff --git a/src/components/FormElements/FlagFieldPicker.tsx b/src/components/FormElements/FlagFieldPicker.tsx
@@ -33,7 +33,7 @@ export const FlagFieldPicker = ({
   const details = optionsFlagDetails(options, selectedOptions);
 
   return (
-    <div className="RadioPicker">
+    <div className="RadioPicker" data-testid="flag-field-picker">
       {label ? (
         <LabelHeading
           size="md"

diff --git a/src/components/FormElements/MemoPicker.tsx b/src/components/FormElements/MemoPicker.tsx
@@ -56,6 +56,7 @@ export const MemoPicker = ({
     <div className="RadioPicker__inset">
       <RadioPicker
         id={id}
+        data-testid="memo-picker"
         selectedOption={value?.type}
         label="Memo"
         labelSuffix={labelSuffix}

diff --git a/src/components/FormElements/MultiPicker.tsx b/src/components/FormElements/MultiPicker.tsx
@@ -47,7 +47,7 @@ export const MultiPicker = ({
   }
 
   return (
-    <Box gap="sm">
+    <Box gap="sm" data-testid={`multipicker-${id}`}>
       <LabelHeading size="md" labelSuffix={labelSuffix}>
         {label}
       </LabelHeading>

diff --git a/src/components/FormElements/NumberFractionPicker.tsx b/src/components/FormElements/NumberFractionPicker.tsx
@@ -104,7 +104,7 @@ export const NumberFractionPicker = ({
   };
 
   return (
-    <Box gap="sm">
+    <Box gap="sm" data-testid="number-fraction-picker">
       <LabelHeading size="md" labelSuffix={labelSuffix}>
         {label}
       </LabelHeading>

diff --git a/src/components/RadioPicker/index.tsx b/src/components/RadioPicker/index.tsx
@@ -30,13 +30,14 @@ export const RadioPicker = <TOptionValue,>({
   infoLink,
   infoText,
   disabledOptions,
+  ...props
 }: RadioPickerProps<TOptionValue>) => {
   const customStyle = {
     ...(fitContent ? { "--RadioPicker-width": "fit-content" } : {}),
   } as React.CSSProperties;
 
   return (
-    <div className="RadioPicker" style={customStyle}>
+    <div className="RadioPicker" style={customStyle} {...props}>
       {label ? (
         <LabelHeading
           size="md"

diff --git a/src/helpers/formatEpochToDate.ts b/src/helpers/formatEpochToDate.ts
@@ -1,17 +1,21 @@
 export const formatEpochToDate = (epoch: number) => {
-  const date = new Date(epoch * 1000);
-  const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    hourCycle: "h24",
-    timeZone: "utc",
-    timeZoneName: "short",
-  });
+  try {
+    const date = new Date(epoch * 1000);
+    const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+      hourCycle: "h24",
+      timeZone: "utc",
+      timeZoneName: "short",
+    });
 
-  return dateTimeFormatter.format(date);
+    return dateTimeFormatter.format(date);
+  } catch (e) {
+    return null;
+  }
 };