Merge branch 'main' into json-code-wrap

stellar · Dec 18, 2024 · 4d9ba0b · 4d9ba0b
2 parents dd339b2 + 8140c41
commit 4d9ba0b
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 22 deletions.
diff --git a/src/components/FormElements/AssetPicker.tsx b/src/components/FormElements/AssetPicker.tsx
@@ -39,6 +39,7 @@ type AssetPickerProps = {
   includeNative?: boolean;
   includeLiquidityPoolShares?: boolean;
   includeSingleLiquidityPoolShare?: boolean;
+  disabled?: boolean;
 };
 
 export const AssetPicker = ({
@@ -54,6 +55,7 @@ export const AssetPicker = ({
   includeNative = true,
   includeLiquidityPoolShares,
   includeSingleLiquidityPoolShare,
+  disabled,
 }: AssetPickerProps) => {
   let options: AssetObject[] = [];
 
@@ -168,6 +170,7 @@ export const AssetPicker = ({
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             onChange({ ...poolShareValue, pool_share: e.target.value });
           }}
+          disabled={disabled}
         />
       );
     }
@@ -192,6 +195,7 @@ export const AssetPicker = ({
           },
           error: assetError?.issuer || "",
         }}
+        disabled={disabled}
       />
     );
   };
@@ -217,6 +221,18 @@ export const AssetPicker = ({
         }}
         options={options}
         fitContent={fitContent}
+        disabledOptions={
+          disabled
+            ? [
+                "native",
+                "credit_alphanum4",
+                "credit_alphanum12",
+                "pool_share",
+                "liquidity_pool_shares",
+                "issued",
+              ]
+            : []
+        }
       />
 
       <ExpandBox
@@ -254,9 +270,15 @@ type AssetPickerFieldsProps = {
     error: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   };
+  disabled?: boolean;
 };
 
-const AssetPickerFields = ({ id, code, issuer }: AssetPickerFieldsProps) => (
+const AssetPickerFields = ({
+  id,
+  code,
+  issuer,
+  disabled,
+}: AssetPickerFieldsProps) => (
   <div className="RadioPicker__inset">
     <Input
       id={`${id}-code`}
@@ -265,6 +287,7 @@ const AssetPickerFields = ({ id, code, issuer }: AssetPickerFieldsProps) => (
       value={code.value}
       onChange={code.onChange}
       error={code.error}
+      disabled={disabled}
     />
     <PubKeyPicker
       id={`${id}-issuer`}
@@ -273,6 +296,7 @@ const AssetPickerFields = ({ id, code, issuer }: AssetPickerFieldsProps) => (
       value={issuer.value}
       onChange={issuer.onChange}
       error={issuer.error}
+      disabled={disabled}
     />
   </div>
 );
diff --git a/src/components/FormElements/ConfigSettingIdPicker.tsx b/src/components/FormElements/ConfigSettingIdPicker.tsx
@@ -9,12 +9,14 @@ type ConfigSettingIdPickerProps = {
   value: string | undefined;
   onChange: (value: ConfigSettingIdType | undefined) => void;
   error: string | undefined;
+  disabled?: boolean;
 };
 
 export const ConfigSettingIdPicker = ({
   id,
   value,
   onChange,
+  disabled,
 }: ConfigSettingIdPickerProps) => {
   const configSettingType: { id: ConfigSettingIdType; label: string }[] = [
     {
@@ -91,6 +93,7 @@ export const ConfigSettingIdPicker = ({
             onChange(undefined);
           }
         }}
+        disabled={disabled}
       >
         <option value="">Select Config Setting ID</option>
 

diff --git a/src/components/FormElements/LiquidityPoolShares.tsx b/src/components/FormElements/LiquidityPoolShares.tsx
@@ -13,13 +13,15 @@ type LiquidityPoolSharesProps = {
   value: AssetPoolShareObjectValue;
   error: AssetPoolShareError | undefined;
   onChange: (val: AssetPoolShareObjectValue | undefined) => void;
+  disabled?: boolean;
 };
 
 export const LiquidityPoolShares = ({
   id,
   value,
   error,
   onChange,
+  disabled,
 }: LiquidityPoolSharesProps) => {
   const getAssetValue = (
     val:
@@ -52,6 +54,7 @@ export const LiquidityPoolShares = ({
         onChange={(val) => {
           onChange({ ...value, asset_a: getAssetValue(val) });
         }}
+        disabled={disabled}
       />
 
       <AssetPicker
@@ -63,6 +66,7 @@ export const LiquidityPoolShares = ({
         onChange={(val) => {
           onChange({ ...value, asset_b: getAssetValue(val) });
         }}
+        disabled={disabled}
       />
 
       <PositiveIntPicker
@@ -76,6 +80,7 @@ export const LiquidityPoolShares = ({
           // Do nothing
         }}
         readOnly
+        disabled={disabled}
       />
     </Box>
   );

diff --git a/src/components/FormElements/PubKeyPicker.tsx b/src/components/FormElements/PubKeyPicker.tsx
@@ -8,6 +8,7 @@ interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
   labelSuffix?: string | React.ReactNode;
   placeholder?: string;
   readOnly?: boolean;
+  disabled?: boolean;
   value: string;
   error: string | undefined;
   onChange?: (e: React.ChangeEvent<any>) => void;
@@ -22,6 +23,7 @@ export const PubKeyPicker = ({
   value,
   error,
   readOnly,
+  disabled,
   onChange,
   ...props
 }: PubKeyPickerProps) => (
@@ -34,6 +36,7 @@ export const PubKeyPicker = ({
     value={value}
     error={error}
     readOnly={readOnly}
+    disabled={disabled}
     onChange={onChange}
     {...props}
   />

diff --git a/src/components/FormElements/TextPicker.tsx b/src/components/FormElements/TextPicker.tsx
@@ -10,6 +10,7 @@ interface TextPickerProps extends Omit<InputProps, "fieldSize"> {
   placeholder?: string;
   error?: string | undefined;
   readOnly?: boolean;
+  disabled?: boolean;
   autocomplete?: React.HTMLInputAutoCompleteAttribute;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
@@ -23,6 +24,7 @@ export const TextPicker = ({
   error,
   onChange,
   readOnly,
+  disabled,
   autocomplete,
   ...props
 }: TextPickerProps) => (
@@ -35,6 +37,7 @@ export const TextPicker = ({
     error={error}
     onChange={onChange}
     readOnly={readOnly}
+    disabled={disabled}
     autoComplete={autocomplete}
     {...props}
   />

diff --git a/src/components/FormElements/XdrLedgerKeyPicker.tsx b/src/components/FormElements/XdrLedgerKeyPicker.tsx
@@ -109,6 +109,7 @@ export const XdrLedgerKeyPicker = ({
   const [selectedLedgerKey, setSelectedLedgerKey] =
     useState<LedgerKeyFieldsType | null>(null);
 
+  const [isXdrInputActive, setIsXdrInputActive] = useState(true);
   const [formError, setFormError] = useState<AnyObject>({});
   const [ledgerKeyXdrJsonString, setLedgerKeyJsonString] = useState<string>("");
   const [ledgerKeyXdrError, setLedgerKeyXdrError] = useState<string>("");
@@ -347,6 +348,7 @@ export const XdrLedgerKeyPicker = ({
               );
             },
             isRequired: true,
+            disabled: isXdrInputActive,
           });
         }
 
@@ -358,6 +360,7 @@ export const XdrLedgerKeyPicker = ({
               handleChange(selectedConfigSetting, selectedConfigSetting);
             },
             isRequired: true,
+            disabled: isXdrInputActive,
           });
         }
 
@@ -368,14 +371,15 @@ export const XdrLedgerKeyPicker = ({
             handleChange(e.target.value, e.target.value);
           },
           isRequired: true,
+          disabled: isXdrInputActive,
         });
       }
       return null;
     });
   };
 
   return (
-    <Box gap="sm">
+    <Box gap="lg" addlClassName="XdrLedgerKeyPicker">
       <XdrPicker
         id="ledger-key-xdr"
         label="Ledger Key XDR"
@@ -385,30 +389,46 @@ export const XdrLedgerKeyPicker = ({
           onChange(e.target.value);
           validateLedgerKeyXdr(e.target.value);
         }}
+        disabled={!isXdrInputActive}
       />
 
-      <Select
-        id="ledgerkey"
-        fieldSize="md"
-        label="Ledger Key"
-        value={selectedLedgerKey?.id}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-          reset();
-
-          const selectedVal = e.target.value;
-          setSelectedLedgerKey(selectedVal ? getKeyType(selectedVal)! : null);
+      <Button
+        size="md"
+        variant="tertiary"
+        icon={<Icon.SwitchVertical01 />}
+        type="button"
+        onClick={() => {
+          setIsXdrInputActive(!isXdrInputActive);
         }}
       >
-        <option value="">Select a key</option>
-
-        {ledgerKeyFields.map((f) => (
-          <option key={f.id} value={f.id}>
-            {f.label}
-          </option>
-        ))}
-      </Select>
-      <>{renderLedgerKeyTemplate()}</>
-      <>{rightElement}</>
+        Switch input
+      </Button>
+
+      <Box gap="sm">
+        <Select
+          id="ledgerkey"
+          fieldSize="md"
+          label="Ledger Key"
+          value={selectedLedgerKey?.id}
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+            reset();
+
+            const selectedVal = e.target.value;
+            setSelectedLedgerKey(selectedVal ? getKeyType(selectedVal)! : null);
+          }}
+          disabled={isXdrInputActive}
+        >
+          <option value="">Select a key</option>
+
+          {ledgerKeyFields.map((f) => (
+            <option key={f.id} value={f.id}>
+              {f.label}
+            </option>
+          ))}
+        </Select>
+        <>{renderLedgerKeyTemplate()}</>
+        <>{rightElement}</>
+      </Box>
     </Box>
   );
 };