mirror of
https://github.com/uqbar-dao/nectar.git
synced 2024-12-23 08:32:23 +03:00
app_store UI: dropdown choose package and publisher
This commit is contained in:
parent
cd1d4caa5f
commit
f963c3705d
@ -0,0 +1,77 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import useAppsStore from "../store";
|
||||||
|
|
||||||
|
interface PackageSelectorProps {
|
||||||
|
onPackageSelect: (packageName: string, publisherId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PackageSelector: React.FC<PackageSelectorProps> = ({ onPackageSelect }) => {
|
||||||
|
const { installed } = useAppsStore();
|
||||||
|
const [selectedPackage, setSelectedPackage] = useState<string>("");
|
||||||
|
const [customPackage, setCustomPackage] = useState<string>("");
|
||||||
|
const [isCustomPackageSelected, setIsCustomPackageSelected] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedPackage && selectedPackage !== "custom") {
|
||||||
|
const [packageName, publisherId] = selectedPackage.split(':');
|
||||||
|
onPackageSelect(packageName, publisherId);
|
||||||
|
}
|
||||||
|
}, [selectedPackage, onPackageSelect]);
|
||||||
|
|
||||||
|
const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
if (value === "custom") {
|
||||||
|
setIsCustomPackageSelected(true);
|
||||||
|
} else {
|
||||||
|
setSelectedPackage(value);
|
||||||
|
setIsCustomPackageSelected(false);
|
||||||
|
setCustomPackage("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSetCustomPackage = () => {
|
||||||
|
if (customPackage) {
|
||||||
|
const [packageName, publisherId] = customPackage.split(':');
|
||||||
|
if (packageName && publisherId) {
|
||||||
|
onPackageSelect(packageName, publisherId);
|
||||||
|
setSelectedPackage(customPackage);
|
||||||
|
setIsCustomPackageSelected(false);
|
||||||
|
} else {
|
||||||
|
alert("Please enter the package name and publisher ID in the format 'packageName:publisherId'");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="package-selector">
|
||||||
|
<select value={selectedPackage} onChange={handlePackageChange}>
|
||||||
|
<option value="">Select a package</option>
|
||||||
|
<option value="custom">Custom package</option>
|
||||||
|
{!isCustomPackageSelected && customPackage && (
|
||||||
|
<option value={customPackage}>{customPackage}</option>
|
||||||
|
)}
|
||||||
|
{Object.keys(installed).map((packageFullName) => (
|
||||||
|
<option key={packageFullName} value={packageFullName}>
|
||||||
|
{packageFullName}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{isCustomPackageSelected && (
|
||||||
|
<div className="custom-package-input">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customPackage}
|
||||||
|
onChange={(e) => setCustomPackage(e.target.value)}
|
||||||
|
placeholder="Enter as packageName:publisherId"
|
||||||
|
style={{ width: '100%', marginBottom: '10px' }}
|
||||||
|
/>
|
||||||
|
<button onClick={handleSetCustomPackage} disabled={!customPackage}>
|
||||||
|
Set Custom Package
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PackageSelector;
|
@ -1,2 +1,3 @@
|
|||||||
export { default as Header } from './Header';
|
export { default as Header } from './Header';
|
||||||
export { default as MirrorSelector } from './MirrorSelector';
|
export { default as MirrorSelector } from './MirrorSelector';
|
||||||
|
export { default as PackageSelector } from './PackageSelector';
|
@ -6,10 +6,12 @@ import { keccak256, toBytes } from 'viem';
|
|||||||
import { mechAbi, KIMAP, encodeIntoMintCall, encodeMulticalls, kimapAbi, MULTICALL } from "../abis";
|
import { mechAbi, KIMAP, encodeIntoMintCall, encodeMulticalls, kimapAbi, MULTICALL } from "../abis";
|
||||||
import { kinohash } from '../utils/kinohash';
|
import { kinohash } from '../utils/kinohash';
|
||||||
import useAppsStore from "../store";
|
import useAppsStore from "../store";
|
||||||
|
import { PackageSelector } from "../components";
|
||||||
|
|
||||||
|
|
||||||
export default function PublishPage() {
|
export default function PublishPage() {
|
||||||
const { openConnectModal } = useConnectModal();
|
const { openConnectModal } = useConnectModal();
|
||||||
const { ourApps, fetchOurApps } = useAppsStore();
|
const { ourApps, fetchOurApps, installed } = useAppsStore();
|
||||||
const publicClient = usePublicClient();
|
const publicClient = usePublicClient();
|
||||||
|
|
||||||
const { address, isConnected, isConnecting } = useAccount();
|
const { address, isConnected, isConnecting } = useAccount();
|
||||||
@ -46,6 +48,11 @@ export default function PublishPage() {
|
|||||||
}
|
}
|
||||||
}, [metadataUrl]);
|
}, [metadataUrl]);
|
||||||
|
|
||||||
|
const handlePackageSelection = (packageName: string, publisherId: string) => {
|
||||||
|
setPackageName(packageName);
|
||||||
|
setPublisherId(publisherId);
|
||||||
|
};
|
||||||
|
|
||||||
const publishPackage = useCallback(
|
const publishPackage = useCallback(
|
||||||
async (e: FormEvent<HTMLFormElement>) => {
|
async (e: FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -187,26 +194,10 @@ export default function PublishPage() {
|
|||||||
) : (
|
) : (
|
||||||
<form className="publish-form" onSubmit={publishPackage}>
|
<form className="publish-form" onSubmit={publishPackage}>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="package-name">Package Name</label>
|
<label htmlFor="package-select">Select Package</label>
|
||||||
<input
|
<PackageSelector onPackageSelect={handlePackageSelection} />
|
||||||
id="package-name"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
placeholder="my-package"
|
|
||||||
value={packageName}
|
|
||||||
onChange={(e) => setPackageName(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="publisher-id">Publisher ID</label>
|
|
||||||
<input
|
|
||||||
id="publisher-id"
|
|
||||||
type="text"
|
|
||||||
required
|
|
||||||
value={publisherId}
|
|
||||||
onChange={(e) => setPublisherId(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="metadata-url">Metadata URL</label>
|
<label htmlFor="metadata-url">Metadata URL</label>
|
||||||
<input
|
<input
|
||||||
|
Loading…
Reference in New Issue
Block a user