Memepad File Uploader

.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"

package.json

@@ -65,6 +65,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@rpldy/upload-button": "^1.8.3",
+    "@rpldy/upload-drop-zone": "^1.8.3",
+    "@rpldy/upload-preview": "^1.8.3",
+    "@rpldy/uploady": "^1.8.3",
     "@talismn/connect-wallets": "^1.2.5",
     "@tanstack/react-location": "^3.7.4",
     "@tanstack/react-query": "^4.14.5",

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

@@ -0,0 +1,94 @@
+import styled from "@emotion/styled"
+import { theme } from "theme"
+
+export const SContainer = styled.div<{ error?: boolean }>`
+  position: relative;
+
+  & > div {
+    display: flex;
+    width: 100%;
+    padding: 10px;
+
+    width: 100%;
+    height: 100%;
+    min-height: 80px;
+
+    background: rgba(${theme.rgbColors.alpha0}, 0.06);
+
+    border: 1px dashed
+      ${({ error }) => (error ? theme.colors.red400 : theme.colors.darkBlue400)};
+    border-radius: ${theme.borderRadius.default}px;
+
+    &:hover {
+      border-color: rgba(${theme.rgbColors.brightBlue600}, 0.5);
+    }
+
+    &.drag-over {
+      border-color: rgba(${theme.rgbColors.brightBlue600}, 0.75);
+      background-color: rgba(${theme.rgbColors.primaryA15}, 0.12);
+    }
+  }
+`
+
+export const SUploadButton = styled.div`
+  position: absolute;
+  inset: 0;
+
+  padding: 10px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  user-select: none;
+  cursor: pointer;
+
+  text-wrap: balance;
+
+  @media ${theme.viewport.gte.sm} {
+    padding: 20px;
+  }
+`
+
+export const SUploadPreview = styled.div`
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`
+
+export const SClearButton = styled.button`
+  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};
+  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

@@ -0,0 +1,180 @@
+import { asUploadButton } from "@rpldy/upload-button"
+import UploadDropZone from "@rpldy/upload-drop-zone"
+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,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import {
+  SClearButton,
+  SContainer,
+  SUploadButton,
+  SUploadPreview,
+} from "./FileUploader.styled"
+import {
+  ALL_FILE_TYPES,
+  createFileFilter,
+  DEFAULT_MAX_HEIGHT,
+  DEFAULT_MAX_SIZE,
+  DEFAULT_MAX_WIDTH,
+  DEFAULT_MIN_HEIGHT,
+  DEFAULT_MIN_WIDTH,
+  FileError,
+  FileType,
+  isFile,
+  parseDimensions,
+  useFileErrorMessage,
+} from "./FileUploader.utils"
+import { usePrevious } from "react-use"
+import { useTranslation } from "react-i18next"
+
+export type FileUploaderProps = {
+  label?: string
+  hint?: string
+  minDimensions?: string
+  maxDimensions?: string
+  maxSize?: number
+  forceCircleImg?: boolean
+  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} />
+  }),
+)
+
+export const FileUploader: React.FC<FileUploaderProps> = ({
+  label,
+  hint,
+  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,
+  forceCircleImg = false,
+}) => {
+  const { t } = useTranslation()
+  const { abortBatch, clearPending, ...uploady } = useUploady()
+
+  const [batch, setBatch] = useState<Batch | null>(null)
+  const [errorCode, setErrorCode] = useState<FileError | null>(null)
+  const prevBatch = usePrevious(batch)
+
+  const [minWidth, minHeight] = parseDimensions(minDimensions)
+  const [maxWidth, maxHeight] = parseDimensions(maxDimensions)
+
+  const fileFilter = useMemo(() => {
+    return createFileFilter({
+      maxSize,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      allowedTypes,
+      onError: (error) => {
+        if (batch) abortBatch(batch.id)
+        setErrorCode(error.code)
+      },
+    })
+  }, [
+    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,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    allowedTypes,
+  })
+
+  const files = batch?.items
+    ? batch.items.map(({ file }) => file).filter(isFile)
+    : []
+
+  return (
+    <SContainer error={!!error}>
+      <UploadDropZone onDragOverClassName="drag-over" fileFilter={fileFilter}>
+        <UploadButton fileFilter={fileFilter}>
+          <>
+            {!batch && (
+              <>
+                <Text fs={12} lh={16} color="basic400" tAlign="center">
+                  {label ?? t("fileUploader.label")}
+                </Text>
+                {!error && hint && (
+                  <Text fs={12} lh={16} color="basic400" tAlign="center">
+                    ({hint})
+                  </Text>
+                )}
+              </>
+            )}
+            {error && (
+              <Text fs={12} lh={16} color="red400" tAlign="center">
+                {error}
+              </Text>
+            )}
+          </>
+        </UploadButton>
+        <SUploadPreview sx={{ color: "white" }}>
+          {files.map((file) => (
+            <div css={forceCircleImg && { borderRadius: 9999 }}>
+              <img alt="" src={URL.createObjectURL(file)} />
+            </div>
+          ))}
+          {batch && (
+            <SClearButton type="button" onClick={() => abortBatch(batch.id)}>
+              <CrossIcon />
+            </SClearButton>
+          )}
+        </SUploadPreview>
+      </UploadDropZone>
+    </SContainer>
+  )
+}