Apillon integration

.env.development

@@ -18,4 +18,5 @@ VITE_EVM_PROVIDER_URL=https://rpc.nice.hydration.cloud
 VITE_EVM_EXPLORER_URL=https://explorer.nice.hydration.cloud
 VITE_EVM_NATIVE_ASSET_ID=20
 VITE_MIGRATION_TRIGGER_DOMAIN="deploy-preview-1334--testnet-hydra-app.netlify.app"
-VITE_MIGRATION_TARGET_DOMAIN="testnet-app.hydradx.io"
+VITE_MIGRATION_TARGET_DOMAIN="testnet-app.hydradx.io"
+VITE_MEMEPAD_APILLON_BUCKET_UUID="1b216a6c-704f-49c4-b5d7-6ae4a16e6f25"

.env.production

@@ -18,4 +18,5 @@ VITE_EVM_PROVIDER_URL=https://rpc.hydradx.cloud
 VITE_EVM_EXPLORER_URL=https://explorer.evm.hydration.cloud
 VITE_EVM_NATIVE_ASSET_ID=20
 VITE_MIGRATION_TRIGGER_DOMAIN="app.hydradx.io"
-VITE_MIGRATION_TARGET_DOMAIN="app.hydration.net"
+VITE_MIGRATION_TARGET_DOMAIN="app.hydration.net"
+VITE_MEMEPAD_APILLON_BUCKET_UUID="1b216a6c-704f-49c4-b5d7-6ae4a16e6f25"

.env.rococo

@@ -18,4 +18,5 @@ VITE_EVM_PROVIDER_URL=
 VITE_EVM_EXPLORER_URL=
 VITE_EVM_NATIVE_ASSET_ID=20
 VITE_MIGRATION_TRIGGER_DOMAIN=""
-VITE_MIGRATION_TARGET_DOMAIN=""
+VITE_MIGRATION_TARGET_DOMAIN=""
+VITE_MEMEPAD_APILLON_BUCKET_UUID="1b216a6c-704f-49c4-b5d7-6ae4a16e6f25"

src/api/external/assethub.ts

@@ -60,6 +60,18 @@ export const assethubNativeToken = assethub.assetsData.get(
   "dot",
 ) as ParachainAssetsData
 
+// TEMP CHOPSTICKS SETUP
+if (window.location.hostname === "localhost") {
+  //@ts-ignore
+  assethub.ws = "ws://172.25.126.217:8000"
+  const hydradx = chainsMap.get("hydradx") as Parachain
+  //@ts-ignore
+  hydradx.ws = "ws://172.25.126.217:8001"
+  const polkadot = chainsMap.get("polkadot") as Parachain
+  //@ts-ignore
+  polkadot.ws = "ws://172.25.126.217:8002"
+}
+
 export const getAssetHubAssets = async (api: ApiPromise) => {
   try {
     const [dataRaw, assetsRaw] = await Promise.all([

src/components/FileUploader/FileUploader.styled.ts

@@ -17,6 +17,10 @@ export const SContainer = styled.div<{ error?: boolean }>`
       ${({ error }) => (error ? theme.colors.red400 : theme.colors.basic600)};
     border-radius: ${theme.borderRadius.default}px;
 
+    &:hover {
+      border-color: ${theme.colors.brightBlue300};
+    }
+
     &.drag-over {
       border-color: ${theme.colors.brightBlue300};
       background-color: ${theme.colors.darkBlue401};
@@ -46,16 +50,26 @@ export const SUploadPreview = styled.div`
 `
 
 export const SClearButton = styled.button`
-  background-color: ${theme.colors.basic800};
-  border: none;
   position: absolute;
   top: 4px;
   right: 4px;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+
   color: ${theme.colors.basic400};
-  cursor: pointer;
+  background-color: ${theme.colors.basic800};
 
+  border: none;
   border-radius: ${theme.borderRadius.default}px;
 
+  cursor: pointer;
+
   :hover,
   :focus {
     background-color: ${theme.colors.basic700};

src/components/FileUploader/FileUploader.tsx

@@ -1,9 +1,15 @@
 import { asUploadButton } from "@rpldy/upload-button"
 import UploadDropZone from "@rpldy/upload-drop-zone"
-import UploadPreview, { PreviewMethods } from "@rpldy/upload-preview"
-import Uploady, { BatchItem, UPLOADER_EVENTS, useUploady } from "@rpldy/uploady"
+import Uploady, { Batch, UPLOADER_EVENTS, useUploady } from "@rpldy/uploady"
+import CrossIcon from "assets/icons/CrossIcon.svg?react"
 import { Text } from "components/Typography/Text/Text"
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react"
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
 import { useTranslation } from "react-i18next"
 import {
   SClearButton,
@@ -21,107 +27,44 @@ import {
   DEFAULT_MIN_WIDTH,
   FileError,
   FileType,
+  isFile,
   parseDimensions,
   useFileErrorMessage,
 } from "./FileUploader.utils"
+import { usePrevious } from "react-use"
 
 export type FileUploaderProps = {
   placeholder?: string
   minDimensions?: string
   maxDimensions?: string
   maxSize?: number
   allowedTypes?: readonly FileType[]
+  onChange?: (files: File[]) => void
 }
 
+export const FileUploaderProvider = Uploady
+
 const UploadButton = asUploadButton(
   forwardRef<HTMLDivElement>((props, ref) => {
     return <SUploadButton {...props} tabIndex={0} role="button" ref={ref} />
   }),
 )
 
-type UploaderWrapperProps = Partial<FileUploaderProps> & {
-  file: BatchItem | null
-  error?: string
-  onFileAdded?: (item: BatchItem) => void
-  onFileRemoved?: () => void
-  previewMethodsRef: React.MutableRefObject<PreviewMethods | null>
-}
-
-const UploaderWrapper: React.FC<UploaderWrapperProps> = ({
-  placeholder,
-  error,
-  file,
-  allowedTypes,
-  onFileAdded,
-  onFileRemoved,
-  previewMethodsRef,
-}) => {
-  const uploady = useUploady()
-
-  useEffect(() => {
-    const handleItemStart = (item: BatchItem) => onFileAdded?.(item)
-    uploady.on(UPLOADER_EVENTS.ITEM_START, handleItemStart)
-    return () => {
-      uploady.off(UPLOADER_EVENTS.ITEM_START, handleItemStart)
-    }
-  }, [onFileAdded, uploady])
-
-  function clearPreview() {
-    previewMethodsRef.current?.clear()
-    onFileRemoved?.()
-  }
-
-  const hasFile = !!file
-
-  return (
-    <SContainer error={!!error}>
-      <UploadDropZone onDragOverClassName="drag-over">
-        <UploadButton>
-          <>
-            {!hasFile && (
-              <>
-                <Text fs={12} lh={16} color="basic400">
-                  {placeholder}
-                </Text>
-                {!error && allowedTypes && (
-                  <Text fs={12} lh={16} color="basic400">
-                    ({allowedTypes.join(", ")})
-                  </Text>
-                )}
-              </>
-            )}
-            {error && (
-              <Text fs={12} lh={16} color="red400">
-                {error}
-              </Text>
-            )}
-          </>
-        </UploadButton>
-        <SUploadPreview>
-          <UploadPreview previewMethodsRef={previewMethodsRef} />
-          {hasFile && (
-            <SClearButton type="button" onClick={clearPreview}>
-              x
-            </SClearButton>
-          )}
-        </SUploadPreview>
-      </UploadDropZone>
-    </SContainer>
-  )
-}
-
 export const FileUploader: React.FC<FileUploaderProps> = ({
   placeholder,
   minDimensions = `${DEFAULT_MIN_WIDTH}x${DEFAULT_MIN_HEIGHT}`,
   maxDimensions = `${DEFAULT_MAX_WIDTH}x${DEFAULT_MAX_HEIGHT}`,
   maxSize = DEFAULT_MAX_SIZE,
   allowedTypes = ALL_FILE_TYPES,
+  onChange,
 }) => {
   const { t } = useTranslation()
 
-  const [file, setFile] = useState<BatchItem | null>(null)
+  const { abortBatch, clearPending, ...uploady } = useUploady()
+
+  const [batch, setBatch] = useState<Batch | null>(null)
   const [errorCode, setErrorCode] = useState<FileError | null>(null)
-  const previewMethodsRef = useRef<PreviewMethods>(null)
+  const prevBatch = usePrevious(batch)
 
   const [minWidth, minHeight] = parseDimensions(minDimensions)
   const [maxWidth, maxHeight] = parseDimensions(maxDimensions)
@@ -135,12 +78,49 @@ export const FileUploader: React.FC<FileUploaderProps> = ({
       maxHeight,
       allowedTypes,
       onError: (error) => {
+        if (batch) abortBatch(batch.id)
         setErrorCode(error.code)
-        setFile(null)
-        previewMethodsRef.current?.clear()
       },
     })
-  }, [allowedTypes, maxHeight, maxSize, maxWidth, minHeight, minWidth])
+  }, [
+    abortBatch,
+    allowedTypes,
+    batch,
+    maxHeight,
+    maxSize,
+    maxWidth,
+    minHeight,
+    minWidth,
+  ])
+
+  const onBatchAdded = useCallback(
+    (batch: Batch) => {
+      if (prevBatch) abortBatch(prevBatch.id)
+      setBatch(batch)
+      setErrorCode(null)
+
+      const files = batch.items.map(({ file }) => file).filter(isFile)
+      onChange?.(files)
+    },
+    [abortBatch, onChange, prevBatch],
+  )
+
+  const onBatchAborted = useCallback(() => {
+    setBatch?.(null)
+    onChange?.([])
+  }, [onChange])
+
+  useEffect(() => {
+    uploady.on(UPLOADER_EVENTS.BATCH_ADD, onBatchAdded)
+    uploady.on(UPLOADER_EVENTS.BATCH_ABORT, onBatchAborted)
+    uploady.on(UPLOADER_EVENTS.BATCH_CANCEL, onBatchAborted)
+
+    return () => {
+      uploady.off(UPLOADER_EVENTS.BATCH_ADD, onBatchAdded)
+      uploady.off(UPLOADER_EVENTS.BATCH_ABORT, onBatchAborted)
+      uploady.off(UPLOADER_EVENTS.BATCH_CANCEL, onBatchAborted)
+    }
+  }, [onBatchAborted, onBatchAdded, uploady])
 
   const error = useFileErrorMessage(errorCode, {
     maxSize,
@@ -151,20 +131,47 @@ export const FileUploader: React.FC<FileUploaderProps> = ({
     allowedTypes,
   })
 
+  const files = batch?.items
+    ? batch.items.map(({ file }) => file).filter(isFile)
+    : []
+
+  console.log({ batch })
+
   return (
-    <Uploady fileFilter={fileFilter}>
-      <UploaderWrapper
-        file={file}
-        placeholder={placeholder ?? t("fileUploader.placeholder")}
-        allowedTypes={allowedTypes}
-        error={error}
-        onFileAdded={(file) => {
-          setFile(file)
-          setErrorCode(null)
-        }}
-        onFileRemoved={() => setFile(null)}
-        previewMethodsRef={previewMethodsRef}
-      />
-    </Uploady>
+    <SContainer error={!!error}>
+      <UploadDropZone onDragOverClassName="drag-over" fileFilter={fileFilter}>
+        <UploadButton fileFilter={fileFilter}>
+          <>
+            {!batch && (
+              <>
+                <Text fs={12} lh={16} color="basic400">
+                  {placeholder ?? t("fileUploader.placeholder")}
+                </Text>
+                {!error && allowedTypes && (
+                  <Text fs={12} lh={16} color="basic400">
+                    ({allowedTypes.join(", ")})
+                  </Text>
+                )}
+              </>
+            )}
+            {error && (
+              <Text fs={12} lh={16} color="red400">
+                {error}
+              </Text>
+            )}
+          </>
+        </UploadButton>
+        <SUploadPreview sx={{ color: "white" }}>
+          {files.map((file) => (
+            <img alt="" src={URL.createObjectURL(file)} />
+          ))}
+          {batch && (
+            <SClearButton type="button" onClick={() => abortBatch(batch.id)}>
+              <CrossIcon />
+            </SClearButton>
+          )}
+        </SUploadPreview>
+      </UploadDropZone>
+    </SContainer>
   )
 }