Da/unpublish

kinode/packages/app_store/ui/src/App.tsx

@@ -63,6 +63,7 @@ function App() {
 
   useEffect(() => {
     provider?.getNetwork().then(network => {
+      // TODO: don't have this fire 20 times on load
       if (network.chainId === ChainId.OPTIMISM) {
         setPackageAbi(PackageStore__factory.connect(
           PACKAGE_STORE_ADDRESSES[ChainId.OPTIMISM],

kinode/packages/app_store/ui/src/index.css

@@ -4,17 +4,17 @@
 
 @font-face {
   font-family: 'Futura';
-  src: url('./fonts/Futura-Heavy.ttf');
+  src: url('/main:app_store:sys/assets/fonts/Futura-Heavy.ttf');
 }
 
 @font-face {
   font-family: 'OpenSans';
-  src: url('./fonts/OpenSans-CondBold.ttf');
+  src: url('/main:app_store:sys/assets/fonts/OpenSans-CondBold.ttf');
 }
 
 @font-face {
   font-family: 'Barlow';
-  src: url('./fonts/BarlowCondensed-Black.ttf');
+  src: url('/main:app_store:sys/assets/fonts/BarlowCondensed-Black.ttf');
 }
 
 body {
@@ -84,7 +84,7 @@ button[type="submit"],
 }
 
 body {
-  @apply bg-[url('./background.jpg')] bg-cover bg-no-repeat bg-center bg-fixed text-white;
+  @apply bg-[url('/main:app_store:sys/assets/background.jpg')] bg-cover bg-no-repeat bg-center bg-fixed text-white;
 }
 
 input {

kinode/packages/app_store/ui/src/pages/PublishPage.tsx

@@ -44,6 +44,7 @@ export default function PublishPage({
   const [metadataUrl, setMetadataUrl] = useState<string>("");
   const [metadataHash, setMetadataHash] = useState<string>(""); // BytesLike
   const [isUpdate, setIsUpdate] = useState<boolean>(false);
+  const [myPublishedApps, setMyPublishedApps] = useState<AppInfo[]>([]);
 
   useEffect(() => {
     const app: AppInfo | undefined = state?.app;
@@ -54,6 +55,12 @@ export default function PublishPage({
     }
   }, [state])
 
+  useEffect(() => {
+    setMyPublishedApps(
+      listedApps.filter((app) => app.owner?.toLowerCase() === account?.toLowerCase())
+    );
+  }, [listedApps, account])
+
   const connectWallet = useCallback(async () => {
     await metaMask.activate().catch(() => { });
 
@@ -157,6 +164,35 @@ export default function PublishPage({
     ]
   );
 
+  const unpublishPackage = useCallback(
+    async (packageName: string, publisherName: string) => {
+      try {
+        await setChain(OPTIMISM_OPT_HEX);
+
+        const tx = await
+          packageAbi.unlistPacakge(
+            utils.keccak256(utils.solidityPack(
+              ["string", "bytes"],
+              [packageName, toDNSWireFormat(publisherName)]
+            ))
+          );
+
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        setLoading("Unlisting package...");
+        await tx.wait();
+      } catch (error) {
+        console.error(error);
+        window.alert(
+          "Error unlisting package"
+        );
+      } finally {
+        setLoading("");
+      }
+    },
+    [packageAbi, setLoading]
+  );
+
   const checkIfUpdate = useCallback(async () => {
     if (isUpdate) return;
 
@@ -293,6 +329,31 @@ export default function PublishPage({
           </button>
         </form>
       )}
+
+      <div className="flex flex-col my-2 mt-4">
+        <h4>Packages You Own</h4>
+        {myPublishedApps.length > 0 ? (
+          <div className="flex flex-col">
+            {myPublishedApps.map((app) => (
+              <div key={`${app.package}${app.publisher}`} className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <Jazzicon address={app.publisher} className="mr-2" />
+                  <span>{app.package}</span>
+                </div>
+                {/* <Tooltip content="View Package"> */}
+                <button className="flex items-center" onClick={() => unpublishPackage(app.package, app.publisher)}>
+                  <span>Unpublish</span>
+                </button>
+                {/* </Tooltip> */}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex items-center">
+            <span>No packages published</span>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

kinode/packages/app_store/ui/vite.config.ts

@@ -19,7 +19,6 @@ This must match the process name from pkg/manifest.json + pkg/metadata.json
 The format is "/" + "process_name:package_name:publisher_node"
 */
 const BASE_URL = `/main:app_store:sys`;
-// const BASE_URL = `/${manifest[0].process_name}:${metadata.package}:${metadata.publisher}`;
 
 // This is the proxy URL, it must match the node you are developing against
 const PROXY_URL = (process.env.VITE_NODE_URL || 'http://127.0.0.1:8080').replace('localhost', '127.0.0.1');
@@ -79,7 +78,7 @@ export default defineConfig({
         rewrite: (path) => path.replace(BASE_URL, ''),
       },
       // This route will match all other HTTP requests to the backend
-      [`^${BASE_URL}/(?!(@vite/client|src/.*|node_modules/.*|@react-refresh|$))`]: {
+      [`^${BASE_URL}/(?!(@vite/client|src/.*|node_modules/.*|@react-refresh|__uno.css|$))`]: {
         target: PROXY_URL,
         changeOrigin: true,
       },