import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
});

/// <reference types="vite/client" />

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

import { test, expect } from "@playwright/test";
test("find and click register link", async ({ page }) => {
  await page.goto("/");
  // Click the register link.
  await page.getByRole("link", { name: "Connect this device" }).click();
  // Expects the URL to contain register.
  await expect(page).toHaveURL(/.*register/);
});

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  plugins: [require("daisyui")],
  darkMode: ["class", '[data-theme="dark"]'],
  daisyui: {
    styled: true,
    themes: [
      {
        dark: {
          primary: "#171717",
          secondary: "#30aadd",
          accent: "#00ffc6",
          neutral: "#171717",
          info: "#93c5fd",
          success: "#BBF7D0",
          warning: "#fdba74",
          error: "#DC2626",
          "base-content": "#FAFAFA", // Base text content color
          "base-100": "#171717", // Base background color
          "--rounded-box": "16px",
          "--rounded-btn": "4px",
          "--rounded-badge": "2px",
          "--tab-radius": "2px",
          "--btn-text-case": "normal-case",
          "--navbar-padding": "16px",
        },
        light: {
          primary: "#FAFAFA",
          secondary: "#30aadd",
          accent: "#00ffc6",
          neutral: "#171717",
          info: "#bfdbfe",
          success: "#BBF7D0",
          warning: "#fed7aa",
          error: "#DC2626",
          "base-content": "#171717", // Base text content color
          "base-100": "#FAFAFA", // Base background color
          "--rounded-box": "16px",
          "--rounded-btn": "4px",
          "--rounded-badge": "2px",
          "--tab-radius": "2px",
          "--btn-text-case": "normal-case",
          "--navbar-padding": "16px",
        },
      },
    ],
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    darkTheme: "dark",
  },
  theme: {
    extend: {
      animation: {
        marquee: "marquee 20s linear infinite",
      },
      aspectRatio: {
        "22/23": "22 / 23",
      },
      boxShadow: {
        orange: "0px 4px 0px rgba(243, 110, 101, 0.35)",
      },
      colors: {
        blue: {
          100: "#DBEAFE",
          600: "#2563EB",
          900: "#1E3A8A",
        },
        green: {
          300: "#86EFAC",
          500: "#22C55E",
          700: "#15803D",
        },
        neutral: {
          50: "#FAFAFA",
          200: "#E5E5E5",
          500: "#737373",
          700: "#404040",
          800: "#262626",
          900: "#171717",
        },
        orange: {
          50: "#FFF7ED",
          200: "#FDBA74",
          300: "#F26D64",
          500: "#F36E65",
          600: "#EED082",
          700: "#C2410C",
        },
        red: {
          400: "#F87171",
          600: "#DC2626",
        },
      },
      fontFamily: {
        sans: ["UncutSans"],
      },
      fontSize: {
        mobileNav: ["24px", { lineHeight: "24px" }],
        deviceCode: ["30px", { lineHeight: "36px" }],
        xxs: ["12px", { lineHeight: "16px" }],
        xs: ["13px", { lineHeight: "24px", letterSpacing: "0.1em" }],
        sm: ["16px", { lineHeight: "24px" }],
        base: ["20px", { lineHeight: "28px" }],
        lg: ["24px", { lineHeight: "32px" }],
        xl: ["38px", { lineHeight: "48px" }],
        "2xl": ["50px", { lineHeight: "62px" }],
      },
      keyframes: {
        marquee: {
          "0%": { transform: "translateX(102%)" },
          "100%": { transform: "translateX(-100vw)" },
        },
      },
      width: {
        narrowModal: "327px",
        wideModal: "471px",
      },
      zIndex: {
        max: "1000", // High enough to appear above the modal(999)
      },
    },
  },
  purge: {
    options: {
      safelist: ["alert-success", "alert-error", "alert-info", "alert-warning"],
    },
  },
};

import { atom } from "recoil";
import type FileSystem from "@oddjs/odd/fs/index";
import type { AccountSettings } from "./lib/account-settings";
import type { Notification } from "./lib/notifications";
import { initialSession, type SESSION } from "./lib/session";
import { loadTheme, type THEME } from "./lib/theme";
export const filesystemStore = atom({
  key: "filesystem",
  default: null as FileSystem | null,
  dangerouslyAllowMutability: true,
});
export const notificationStore = atom({
  key: "notifications",
  default: [] as Notification[],
});
export const sessionStore = atom({
  key: "session",
  default: initialSession as SESSION,
  dangerouslyAllowMutability: true,
});
export const themeStore = atom({
  key: "theme",
  default: loadTheme() as THEME,
});
export const accountSettingsStore = atom({
  key: "accountSettings",
  default: {
    avatar: null,
    loading: true,
  } as AccountSettings,
  dangerouslyAllowMutability: true,
});

import { atom } from 'recoil';
import { type COLLECTION } from './lib/playlists';
export enum AREAS {
  PUBLIC = 'PUBLIC',
  PRIVATE = 'PRIVATE',
}
const initialGallery: COLLECTION = {
  loading: true,
  publicPlaylists: [],
  privatePlaylists: [],
  selectedArea: AREAS.PUBLIC,
};
export const collectionStore = atom({
  key: 'collection',
  default: initialGallery as COLLECTION,
  dangerouslyAllowMutability: true,
});

import * as odd from '@oddjs/odd';
import { getRecoil, setRecoil } from 'recoil-nexus';
import type PublicFile from '@oddjs/odd/fs/v1/PublicFile';
import type PrivateFile from '@oddjs/odd/fs/v1/PrivateFile';
import { isFile } from '@oddjs/odd/fs/types/check';
import { filesystemStore } from '../../../stores';
import { collectionStore, AREAS } from '../stores';
import { addNotification } from '../../../lib/notifications';
import { fileToUint8Array } from '../../../lib/utils';
export type PlaylistSourceType =
  | 'apple'
  | 'spotify'
  | 'youtube'
  | 'tidal'
  | 'deezer'
  | 'bandcamp'
  | 'soundcloud'
  | 'other';
export type PlaylistSource = {
  type: PlaylistSourceType;
  url: string;
};
export type Playlist = {
  cid: string;
  ctime: number;
  name: string;
  private: boolean;
  size: number;
  src: string;
  cover?: string;
  sources?: PlaylistSource[];
};
export type COLLECTION = {
  publicPlaylists: Playlist[];
  privatePlaylists: Playlist[];
  selectedArea: AREAS;
  loading: boolean;
};
type Link = {
  size: number;
};
export const COLLECTION_DIRS = {
  [AREAS.PUBLIC]: odd.path.directory('public', 'collection'),
  [AREAS.PRIVATE]: odd.path.directory('private', 'collection'),
};
const FILE_SIZE_LIMIT = 20;
/**
 * Get playlists from the user's WNFS and construct the `src` value for the playlists
 */
export const getPlaylistsFromWNFS: () => Promise<void> = async () => {
  const collection = getRecoil(collectionStore);
  const fs = getRecoil(filesystemStore);
  if (!fs) return;
  try {
    // Set loading: true on the collectionStore
    setRecoil(collectionStore, { ...collection, loading: true });
    const { selectedArea } = collection;
    const isPrivate = selectedArea === AREAS.PRIVATE;
    // Set path to either private or public gallery dir
    const path = COLLECTION_DIRS[selectedArea];
    // Get list of links for files in the gallery dir
    const links = await fs.ls(path);
    let playlists = await Promise.all(
      Object.entries(links).map(async ([name]) => {
        const file = await fs.get(
          odd.path.combine(
            COLLECTION_DIRS[selectedArea],
            odd.path.file(`${name}`)
          )
        );
        if (!isFile(file)) return null;
        // The CID for private files is currently located in `file.header.content`,
        // whereas the CID for public files is located in `file.cid`
        const cid = isPrivate
          ? (file as PrivateFile).header.content.toString()
          : (file as PublicFile).cid.toString();
        // Create a blob to use as the playlist `src`
        const blob = new Blob([file.content]);
        const src = URL.createObjectURL(blob);
        const ctime = isPrivate
          ? (file as PrivateFile).header.metadata.unixMeta.ctime
          : (file as PublicFile).header.metadata.unixMeta.ctime;
        return {
          cid,
          ctime,
          name,
          private: isPrivate,
          size: (links[name] as Link).size,
          src,
        };
      })
    );
    // Sort playlists by ctime(created at date)
    // NOTE: this will eventually be controlled via the UI
    playlists = playlists.filter((a) => !!a);
    playlists.sort((a, b) => b.ctime - a.ctime);
    // Push playlists to the collectionStore
    setRecoil(collectionStore, {
      ...collection,
      ...(isPrivate
        ? {
            privatePlaylists: playlists,
          }
        : {
            publicPlaylists: playlists,
          }),
      loading: false,
    });
  } catch (error) {
    setRecoil(collectionStore, {
      ...collection,
      loading: false,
    });
  }
};
/**
 * Upload a playlist to the user's private or public WNFS
 * @param playlist
 */
export const uploadPlaylistToWNFS: (playlist: File) => Promise<void> = async (
  playlist
) => {
  const collection = getRecoil(collectionStore);
  const fs = getRecoil(filesystemStore);
  if (!fs) return;
  try {
    const { selectedArea } = collection;
    // Reject files over 20MB
    const playlistSizeInMB = playlist.size / (1024 * 1024);
    if (playlistSizeInMB > FILE_SIZE_LIMIT) {
      throw new Error('Playlist can be no larger than 20MB');
    }
    // Reject the upload if the playlist already exists in the directory
    const playlistExists = await fs.exists(
      odd.path.combine(
        COLLECTION_DIRS[selectedArea],
        odd.path.file(playlist.name)
      )
    );
    if (playlistExists) {
      throw new Error(`${playlist.name} playlist already exists`);
    }
    // Create a sub directory and add some content
    await fs.write(
      odd.path.combine(
        COLLECTION_DIRS[selectedArea],
        odd.path.file(playlist.name)
      ),
      await fileToUint8Array(playlist)
    );
    // Announce the changes to the server
    await fs.publish();
    addNotification({
      msg: `${playlist.name} playlist has been published`,
      type: 'success',
    });
  } catch (error) {
    addNotification({ msg: (error as Error).message, type: 'error' });
    console.error(error);
  }
};
/**
 * Delete a playlist from the user's private or public WNFS
 * @param name
 */
export const deletePlaylistFromWNFS: (name: string) => Promise<void> = async (
  name
) => {
  const collection = getRecoil(collectionStore);
  const fs = getRecoil(filesystemStore);
  if (!fs) return;
  try {
    const { selectedArea } = collection;
    const playlistExists = await fs.exists(
      odd.path.combine(COLLECTION_DIRS[selectedArea], odd.path.file(name))
    );
    if (playlistExists) {
      // Remove playlists from server
      await fs.rm(
        odd.path.combine(COLLECTION_DIRS[selectedArea], odd.path.file(name))
      );
      // Announce the changes to the server
      await fs.publish();
      addNotification({
        msg: `${name} playlist has been deleted`,
        type: 'success',
      });
      // Refetch playlists and update collectionStore
      await getPlaylistsFromWNFS();
    } else {
      throw new Error(`${name} playlist has already been deleted`);
    }
  } catch (error) {
    addNotification({ msg: (error as Error).message, type: 'error' });
    console.error(error);
  }
};
/**
 * Handle uploads made by interacting with the file input directly
 */
export const handleFileInput: (
  files: FileList | null
) => Promise<void> = async (files) => {
  if (!files) return;
  await Promise.all(
    Array.from(files).map(async (file) => {
      await uploadPlaylistToWNFS(file);
    })
  );
  // Refetch playlists and update collectionStore
  await getPlaylistsFromWNFS();
};

import { useRecoilValue } from "recoil";
import { collectionStore } from "../../stores";
import { handleFileInput } from "../../lib/playlists";
import FileUploadIcon from "../icons/FileUploadIcon";
const FileUploadCard = () => {
  const collection = useRecoilValue(collectionStore);
  return (
    <label
      htmlFor="upload-file"
      className="group btn flex flex-col justify-center items-center !p-0 !h-auto aspect-[22/23] object-cover rounded-lg shadow-orange hover:border-neutral-500 overflow-hidden transition-colors ease-in bg-base-100 border-2 box-content border-neutral-900 cursor-pointer text-neutral-900 bg-gradient-to-r from-orange-300 to-orange-600"
    >
      {collection.loading ? (
        <div className="flex items-center justify-center p-12">
          <div className="w-16 h-16 ease-linear border-4 border-t-4 rounded-full loader border-t-orange-300 border-neutral-900 animate-spin" />
        </div>
      ) : (
        <>
          <div className="flex flex-col items-center justify-center pt-5 pb-6">
            <FileUploadIcon />
            <p className="mt-4 mb-2 text-sm">
              <span className="text-sm font-bold">Click to upload</span>
            </p>
            <p className="text-xxs">JSON</p>
          </div>
          <input
            onChange={(e) => handleFileInput(e.target.files)}
            id="upload-file"
            type="file"
            multiple
            accept="application/json"
            className="hidden"
          />
        </>
      )}
    </label>
  );
};
export default FileUploadCard;

import { DragEvent, ReactNode, useState } from "react";
import { addNotification } from "../../../../lib/notifications";
import { getPlaylistsFromWNFS, uploadPlaylistToWNFS } from "../../lib/playlists";
/**
 * This is needed to prevent the default behaviour of the file opening in browser
 * when it is dropped
 * @param event
 */
const handleDragOver: (event: DragEvent<HTMLLabelElement>) => void = (event) =>
  event.preventDefault();
type Props = {
  children: ReactNode;
};
const Dropzone = ({ children }: Props) => {
  const [isDragging, setIsDragging] = useState(false);
  /**
   * Detect when a user drags a file in or out of the dropzone to change the styles
   */
  const handleDragEnter: () => void = () => setIsDragging(true);
  const handleDragLeave: () => void = () => setIsDragging(false);
  /**
   * Process files being dropped in the drop zone and ensure they are images
   * @param event
   */
  const handleDrop: (
    event: DragEvent<HTMLLabelElement>
  ) => Promise<void> = async (event) => {
    // Prevent default behavior (Prevent file from being opened)
    (event as any).preventDefault();
    const files = Array.from((event as any).dataTransfer.items);
    // Iterate over the dropped files and upload them to WNFS
    await Promise.all(
      files.map(async (item: any) => {
        if (item.kind === "file") {
          const file: File = item.getAsFile();
          // If the dropped files aren't images, we don't want them!
          if (!file.type.match("image/*")) {
            addNotification({
              msg: "Please upload images only",
              type: "error",
            });
          } else {
            await uploadPlaylistToWNFS(file);
          }
        }
      })
    );
    // Refetch images and update collectionStore
    await getPlaylistsFromWNFS();
    // Disable isDragging state
    setIsDragging(false);
  };
  return (
    <label
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      htmlFor="dropzone-file"
      className={`block w-full min-h-[calc(100vh-190px)] rounded-lg border-2 border-solid border-base-content transition ease-in cursor-pointer ${
        isDragging ? "border-dashed !border-orange-700 bg-orange-50" : ""
      }`}
    >
      {children}
    </label>
  );
};
export default Dropzone;

const FileUploadIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="60" height="66" fill="none">
    <path
      stroke="#171717"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M14.167 45.667C7.17 45.667 1.5 39.996 1.5 33c0-6.039 4.226-11.09 9.882-12.36A15.89 15.89 0 0 1 11 17.167c0-8.745 7.089-15.834 15.833-15.834 7.662 0 14.052 5.441 15.518 12.67.105-.002.21-.003.316-.003C51.41 14 58.5 21.089 58.5 29.833c0 7.66-5.44 14.05-12.667 15.517M39.5 36.167l-9.5-9.5m0 0-9.5 9.5m9.5-9.5v38"
    />
  </svg>
);
export default FileUploadIcon

import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { collectionStore } from '../../stores';
import { deletePlaylistFromWNFS, type Playlist } from '../../lib/playlists';
import { ipfsGatewayUrl } from '../../../../lib/app-info';
import Download from '../../../../components/icons/Download';
import Trash from '../../../../components/icons/Trash';
type Props = {
  playlist: Playlist;
  isModalOpen: boolean;
  onClose: () => void;
};
const PlaylistModal = ({ playlist, isModalOpen, onClose }: Props) => {
  const collection = useRecoilValue(collectionStore);
  const [selectedPlaylist, setSelectedPlaylist] = useState<Playlist | null>(
    playlist
  );
  const [openModal, setOpenModal] = useState<boolean>(isModalOpen);
  const [previousPlaylist, setPreviousPlaylist] = useState<Playlist | null>();
  const [nextPlaylist, setNextPlaylist] = useState<Playlist | null>();
  const [showPreviousArrow, setShowPreviousArrow] = useState<boolean>();
  const [showNextArrow, setShowNextArrow] = useState<boolean>();
  /**
   * Close the modal, clear the playlist state vars, set `isModalOpen` to false
   * and dispatch the close event to clear the playlist from the parent's state
   */
  const handleCloseModal: () => void = () => {
    setPreviousPlaylist(null);
    setNextPlaylist(null);
    setSelectedPlaylist(null);
    setOpenModal(false);
    onClose();
  };
  /**
   * Delete an playlist from the user's WNFS
   */
  const handleDeletePlaylist: () => Promise<void> = async () => {
    if (selectedPlaylist) {
      await deletePlaylistFromWNFS(selectedPlaylist.name);
      handleCloseModal();
    }
  };
  /**
   * Set the previous and next playlists to be toggled to when the arrows are clicked
   */
  const setCarouselState = () => {
    const playlistList = selectedPlaylist?.private
      ? collection.privatePlaylists
      : collection.publicPlaylists;
    const currentIndex = playlistList.findIndex(
      (val) => val.cid === selectedPlaylist?.cid
    );
    const updatedPreviousPlaylist =
      playlistList[currentIndex - 1] ?? playlistList[playlistList.length - 1];
    setPreviousPlaylist(updatedPreviousPlaylist);
    const updatedNextPlaylist =
      playlistList[currentIndex + 1] ?? playlistList[0];
    setNextPlaylist(updatedNextPlaylist);
    setShowPreviousArrow(playlistList.length > 1 && !!updatedPreviousPlaylist);
    setShowNextArrow(playlistList.length > 1 && !!updatedNextPlaylist);
  };
  /**
   * Load the correct playlist when a user clicks the Next or Previous arrows
   * @param direction
   */
  const handleNextOrPrevPlaylist: (direction: 'next' | 'prev') => void = (
    direction
  ) => {
    setSelectedPlaylist(
      (direction === 'prev' ? previousPlaylist : nextPlaylist) ?? null
    );
  };
  useEffect(() => {
    setCarouselState();
  }, [selectedPlaylist]);
  /**
   * Detect `Escape` key presses to close the modal or `ArrowRight`/`ArrowLeft`
   * presses to navigate the carousel
   * @param event
   */
  const handleKeyDown: (event: KeyboardEvent) => void = (event) => {
    if (event.key === 'Escape') handleCloseModal();
    if (showNextArrow && event.key === 'ArrowRight')
      handleNextOrPrevPlaylist('next');
    if (showPreviousArrow && event.key === 'ArrowLeft')
      handleNextOrPrevPlaylist('prev');
  };
  // Attach attach left/right/esc keys to modal actions
  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);
  const useMountEffect = () =>
    useEffect(() => {
      setCarouselState();
    }, []);
  useMountEffect();
  if (selectedPlaylist) {
    return (
      <>
        <input
          type="checkbox"
          id={`playlist-modal-${selectedPlaylist.cid}`}
          className="modal-toggle"
          checked={openModal}
          onChange={() => undefined}
        />
        <label
          htmlFor={`playlist-modal-${selectedPlaylist.cid}`}
          className="z-50 cursor-pointer modal"
          onClick={(event) => {
            if (event.currentTarget !== event.target) {
              return;
            }
            handleCloseModal();
          }}
        >
          <div className="relative text-center modal-box text-base-content">
            <label
              htmlFor={`playlist-modal-${selectedPlaylist.cid}`}
              className="absolute btn btn-xs btn-circle right-2 top-2"
              onClick={handleCloseModal}
            >
              ✕
            </label>
            <div>
              <h3 className="text-lg break-all mb-7">
                {selectedPlaylist.name}
              </h3>
              <div className="relative">
                {showPreviousArrow && (
                  <button
                    className="absolute top-1/2 -left-[25px] -translate-y-1/2 inline-block text-center text-[40px]"
                    onClick={() => handleNextOrPrevPlaylist('prev')}
                  >
                    &#8249;
                  </button>
                )}
                <img
                  className="block object-cover object-center border-2 border-base-content w-full h-full mb-4 rounded-[1rem]"
                  alt={selectedPlaylist.name}
                  src={selectedPlaylist.src}
                />
                {showNextArrow && (
                  <button
                    className="absolute top-1/2 -right-[25px] -translate-y-1/2 inline-block text-center text-[40px]"
                    onClick={() => handleNextOrPrevPlaylist('next')}
                  >
                    &#8250;
                  </button>
                )}
              </div>
              <div className="flex flex-col items-center justify-center">
                <p className="mb-2 text-neutral-500">
                  Created {new Date(selectedPlaylist.ctime).toDateString()}
                </p>
                <a
                  href={`https://ipfs.${ipfsGatewayUrl}/ipfs/${selectedPlaylist.cid}/userland`}
                  target="_blank"
                  rel="noreferrer"
                  className="mb-2 underline hover:text-neutral-500"
                >
                  View on IPFS{selectedPlaylist.private && `*`}
                </a>
                {selectedPlaylist.private && (
                  <>
                    <p className="mb-2 text-neutral-700 dark:text-neutral-500">
                      * Your private files can only be viewed on devices that
                      have permission. When viewed directly on IPFS, you will
                      see the encrypted state of this file. This is because the
                      raw IPFS gateway view does not have permission to decrypt
                      this file.
                    </p>
                    <p className="mb-2 text-neutral-700 dark:text-neutral-500">
                      Interested in private file sharing as a feature? Follow
                      the{' '}
                      <a
                        className="underline"
                        href="https://github.com/oddsdk/odd-app-template/issues/4"
                        target="_blank"
                        rel="noreferrer"
                      >
                        github issue.
                      </a>
                    </p>
                  </>
                )}
                <div className="flex flex-col items-center justify-between gap-4 mt-4 sm:flex-row">
                  <a
                    href={selectedPlaylist.src}
                    download={selectedPlaylist.name}
                    className="gap-2 btn btn-primary"
                  >
                    <Download />
                    Download Playlist
                  </a>
                  <button
                    className="gap-2 btn btn-outline"
                    onClick={handleDeletePlaylist}
                  >
                    <Trash />
                    Delete Playlist
                  </button>
                </div>
              </div>
            </div>
          </div>
        </label>
      </>
    );
  }
  return null;
};
export default PlaylistModal;

import type { Playlist } from '../../lib/playlists';
type Props = {
  playlist: Playlist;
  openModal: (playlist: Playlist) => void;
};
const PlaylistCard = ({ playlist, openModal }: Props) => {
  const handleOpenModal = () => openModal(playlist);
  return (
    <button
      type="button"
      className="relative group w-full aspect-[22/23] rounded-lg border-2 border-transparent hover:border-base-content box-border overflow-hidden transition-colors ease-in"
      onClick={handleOpenModal}
    >
      <div className="flex items-center justify-center absolute z-10 top-0 right-0 bottom-0 left-0 bg-[#00000035] opacity-0 group-hover:opacity-100 transition-opacity ease-in" />
      <div className="relative pb-[105%]">
        <img
          className="absolute block object-cover object-center w-full h-full"
          alt={playlist.name}
          src={playlist.cover}
        />
      </div>
    </button>
  );
};
export default PlaylistCard;

import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { AREAS, collectionStore } from '../../stores';
import { getPlaylistsFromWNFS, type Playlist } from '../../lib/playlists';
import FileUploadCard from '../upload/FileUploadCard';
import PlaylistCard from './playlistCard';
import PlaylistModal from './playlistModal';
const Collection = () => {
  const collection = useRecoilValue(collectionStore);
  const [selectedArea, setSelectedArea] = useState<string | null>(
    collection.selectedArea
  );
  const [selectedPlaylist, setSelectedPlaylist] = useState<Playlist | null>(
    null
  );
  const selectedCollection =
    collection.selectedArea === AREAS.PRIVATE
      ? collection.privatePlaylists
      : collection.publicPlaylists;
  /**
   * Open the ImageModal and pass it the selected `image` from the gallery
   * @param image
   */
  const handleOpenModal: (playlist: Playlist) => void = (playlist) =>
    setSelectedPlaylist(playlist);
  const clearSelectedPlaylist = () => setSelectedPlaylist(null);
  useEffect(() => {
    // If collectionStore.selectedArea changes from private to public, re-run getPlaylistsFromWNFS
    if (!collection.loading && selectedArea !== collection.selectedArea) {
      const refetchPlaylists = async () => {
        setSelectedArea(collection.selectedArea);
        await getPlaylistsFromWNFS();
      };
      refetchPlaylists();
    }
    // eslint-disable-next-line
  }, [collection.selectedArea, selectedArea]);
  const useMountEffect = () =>
    useEffect(() => {
      // Get images from the user's public WNFS
      getPlaylistsFromWNFS();
    }, []);
  useMountEffect();
  return (
    <section className="overflow-hidden text-gray-700">
      <div className="p-6 pt-8 mx-auto md:p-8">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 xl:lg:grid-cols-6">
          <FileUploadCard />
          {selectedCollection?.map((playlist: Playlist) => (
            <PlaylistCard
              key={playlist.cid}
              playlist={playlist}
              openModal={handleOpenModal}
            />
          ))}
        </div>
      </div>
      {selectedPlaylist && (
        <PlaylistModal
          playlist={selectedPlaylist}
          isModalOpen={!!selectedPlaylist}
          onClose={clearSelectedPlaylist}
        />
      )}
    </section>
  );
};
export default Collection;

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';
import { sessionStore } from '../../stores';
import { AREAS, collectionStore } from './stores';
import Dropzone from './components/upload/Dropzone';
import Collection from './components/collection/collection';
const PlaylistsRoute = () => {
  const navigate = useNavigate();
  const [collection, setCollection] = useRecoilState(collectionStore);
  const session = useRecoilValue(sessionStore);
  /**
   * Tab between the public/private areas and load associated images
   * @param area
   */
  const handleChangeTab: (area: AREAS) => void = (area) =>
    setCollection({
      ...collection,
      selectedArea: area,
    });
  // If the user is not authed redirect them to the home page
  useEffect(() => {
    if (!session.loading && !session.session) {
      navigate('/');
    }
  }, [session, navigate]);
  return (
    <div className="p-2 text-center mb-14">
      {session.session && (
        <>
          <div className="flex items-center justify-center m-auto translate-y-1/2 w-fit">
            <div className="overflow-hidden border-2 rounded-lg tabs border-base-content">
              {Object.keys(AREAS).map((area) => (
                <button
                  type="button"
                  key={area}
                  onClick={() => handleChangeTab(AREAS[area as AREAS])}
                  className={`tab h-10 font-bold text-sm ease-in ${collection.selectedArea === AREAS[area as AREAS]
                      ? 'tab-active bg-base-content text-base-100'
                      : 'bg-base-100 text-base-content'
                    } ease-in`}
                >
                  {`${AREAS[area as AREAS].charAt(0).toUpperCase()}${AREAS[
                    area as AREAS
                  ]
                    .slice(1)
                    .toLowerCase()}`}
                </button>
              ))}
            </div>
          </div>
          <Dropzone>
            <Collection />
          </Dropzone>
        </>
      )}
    </div>
  );
};
export default PlaylistsRoute;

import { Navigate } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { sessionStore } from "../stores";
import AvatarUpload from "../components/settings/AvatarUpload";
import ConnectedDevices from "../components/settings/ConnectedDevices";
import FullScreenLoader from "../components/common/FullScreenLoader";
import ThemePreferences from "../components/settings/ThemePreferences";
import RecoveryKit from "../components/settings/RecoveryKit";
import Username from "../components/settings/Username";
const SettingsRoute = () => {
  const session = useRecoilValue(sessionStore)
  if (!session.session && !session.loading) {
    return <Navigate to="/" />;
  }
  if (session.loading) {
    return <FullScreenLoader />;
  }
  return (
    <div className="min-h-[calc(100vh-128px)] md:min-h-[calc(100vh-160px)] pt-8 md:pt-16 flex flex-col items-start max-w-[690px] m-auto gap-10 pb-28 text-sm">
      <h1 className="text-xl">Account Settings</h1>
      <div className="flex flex-col items-start justify-center gap-6">
        <AvatarUpload />
        <Username />
        <ThemePreferences />
        <ConnectedDevices />
        <RecoveryKit />
      </div>
    </div>
  );
};
export default SettingsRoute;

import { useRecoilValue } from 'recoil';
import { sessionStore } from '../stores';
import Register from '../components/auth/register/Register'
import Welcome from '../components/auth/register/Welcome'
const RegisterRoute = () => {
  const session = useRecoilValue(sessionStore);
  if (session.session) {
   return <Welcome />;
  } else {
    return <Register />;
  }
};
export default RegisterRoute;

import HasRecoveryKit from '../components/auth/recover/HasRecoveryKit'
const RecoverRoute = () => <HasRecoveryKit />
export default RecoverRoute

import Discord from '../components/icons/Discord'
import ExternalLink from '../components/icons/ExternalLink'
import Github from '../components/icons/Github'
const NotFoundRoute = () => (
  <div className="min-h-[calc(100vh-96px)] flex flex-col items-center justify-center max-w-[700px] m-auto gap-6 pb-5 text-sm">
    <h1 className="text-xl">404 - Page not found</h1>
    <p>The page you have requested does not exist.</p>
    <img
      className="relative z-0 w-[227px] h-[227px] rounded-full border-[16px] border-base-content"
      src={`${window.location.origin}/wn-404.gif`}
      alt={`Circle animation`}
    />
    <div className="flex items-center justify-between gap-6">
      <a
        className="flex items-center justify-center gap-2 font-bold text-sm text-base-content"
        href="https://guide.fission.codes/"
        target="_blank" rel="noreferrer"
      >
        Docs <ExternalLink />
      </a>
      <a
        className="flex items-center justify-center gap-2 font-bold text-sm text-base-content"
        href="https://github.com/oddsdk/"
        target="_blank" rel="noreferrer"
      >
        Github <Github />
      </a>
      <a
        className="flex items-center justify-center gap-2 font-bold text-sm text-base-content"
        href="https://fission.codes/discord"
        target="_blank" rel="noreferrer"
      >
        Discord <Discord />
      </a>
    </div>
  </div>
);
export default NotFoundRoute

import * as odd from "@oddjs/odd";
import { useEffect, useMemo, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { addNotification } from "../lib/notifications";
import { createAccountLinkingConsumer } from "../lib/auth/linking";
import { loadAccount } from "../lib/auth/account";
import type { LinkDeviceView } from "../lib/views";
import FilesystemActivity from "../components/common/FilesystemActivity";
import LinkDevice from "../components/auth/link-device/LinkDevice";
const useQuery = () => {
  const { search } = useLocation();
  return useMemo(() => new URLSearchParams(search), [search]);
};
let accountLinkingConsumer: odd.AccountLinkingConsumer;
const LinkDeviceRoute = () => {
  const navigate = useNavigate();
  const [view, setView] = useState<LinkDeviceView>("link-device");
  const [displayPin, setDisplayPin] = useState<string>("");
  // const [accountLinkingConsumer, setAccountLinkingConsumer] =
  //   useState<account.AccountLinkingConsumer>();
  const query = useQuery();
  const hashedUsername = query.get('hashedUsername') as string;
  const fullUsername = decodeURIComponent(
    query.get('username') as string
  );
  const initAccountLinkingConsumer = async () => {
    const accountLinkingConsumer = await createAccountLinkingConsumer(hashedUsername);
    // setAccountLinkingConsumer(updatedAccountLinkingConsumer)
    accountLinkingConsumer?.on("challenge", ({ pin }) => {
      setDisplayPin(pin.join(""));
    });
    accountLinkingConsumer?.on("link", async ({ approved }) => {
      if (approved) {
        setView("load-filesystem");
        await loadAccount(hashedUsername, fullUsername);
        addNotification({ msg: "You're now connected!", type: "success" });
        navigate("/");
      } else {
        addNotification({
          msg: "The connection attempt was cancelled",
          type: "info",
        });
        navigate("/");
      }
    });
  };
  const cancelConnection = async () => {
    addNotification({
      msg: "The connection attempt was cancelled",
      type: "info",
    });
    accountLinkingConsumer?.cancel();
    navigate("/");
  };
  const useMountEffect = () =>
    useEffect(() => {
      initAccountLinkingConsumer();
    }, []);
  useMountEffect();
  return (
    <>
      <input
        type="checkbox"
        id="my-modal-5"
        defaultChecked
        className="modal-toggle"
      />
      {view === "link-device" && (
        <LinkDevice pin={displayPin} cancelConnection={cancelConnection} />
      )}
      {view === "load-filesystem" && <FilesystemActivity activity="Loading" />}
    </>
  );
};
export default LinkDeviceRoute;

import { useRecoilValue } from "recoil";
import { sessionStore } from "../stores";
import Authed from "../components/home/Authed";
import Public from "../components/home/Public";
const HomeRoute = () => {
  const session = useRecoilValue(sessionStore);
  if (session.session) {
    return <Authed />;
  }
  return <Public />;
};
export default HomeRoute;

import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useRecoilState, useRecoilValue } from "recoil";
import QRCode from 'qrcode-svg'
import { filesystemStore, sessionStore, themeStore } from '../stores';
import { addNotification } from '../lib/notifications';
import { createAccountLinkingProducer } from '../lib/auth/linking';
import { ThemeOptions } from '../lib/theme';
import { getBackupStatus, setBackupStatus } from '../lib/auth/backup';
import ConnectBackupDevice from '../components/auth/delegate-account/ConnectBackupDevice';
import DelegateAccount from '../components/auth/delegate-account/DelegateAccount';
import type { DelegateAccountView } from '../lib/views';
const DelegateAccountRoute = () => {
  const navigate = useNavigate();
  const fs = useRecoilValue(filesystemStore);
  const [session, setSession] = useRecoilState(sessionStore);
  const theme = useRecoilValue(themeStore);
  const [backupCreated, setBackupCreated] = useState(true);
  const [connectionLink, setConnectionLink] = useState('')
  const [view, setView] = useState<DelegateAccountView>(
    'connect-backup-device'
  );
  const [qrcode, setQrcode] = useState('')
  const [pin, setPin] = useState<number[]>();
  const [pinInput] = useState('');
  const [pinError, setPinError] = useState(false);
  const [confirmPin, setConfirmPin] = useState<() => void>(() => undefined);
  const [rejectPin, setRejectPin] = useState<() => void>(() => undefined);
  const initAccountLinkingProducer = async (username: string) => {
    const accountLinkingProducer = await createAccountLinkingProducer(username)
    accountLinkingProducer.on('challenge', detail => {
      setPin(detail.pin)
      setConfirmPin(detail.confirmPin);
      setRejectPin(detail.rejectPin);
      setView('delegate-account')
    })
    accountLinkingProducer.on('link', async ({ approved }) => {
      if (approved) {
        setSession({
          ...session,
          backupCreated: true,
        });
        if (fs) {
          await setBackupStatus({ created: true })
          addNotification({ msg: 'You\'ve connected a backup device!', type: 'success' })
          navigate('/')
        } else {
          addNotification({ msg: 'Missing filesystem. Unable to create a backup device.', type: 'error' })
        }
      }
    })
  }
  const cancelConnection = () => {
    rejectPin();
    addNotification({ msg: 'The connection attempt was cancelled', type: 'info' })
    navigate('/');
  };
  const checkPin = () => {
    if (pin?.join('') === pinInput) {
      confirmPin();
    } else {
      setPinError(true);
    }
  };
  const useMountEffect = () =>
    useEffect(() => {
      if (fs) {
        const updateBackupCreated = async () => {
          const backupStatus = await getBackupStatus(fs);
          setBackupCreated(!!backupStatus?.created);
        }
        updateBackupCreated();
      }
      const hashedUsername = session.username.hashed;
      const fullUsername = session.username.full;
      if (hashedUsername && fullUsername) {
        const origin = window.location.origin;
        const updatedConnectionLink = `${origin}/link-device?hashedUsername=${hashedUsername}&username=${encodeURIComponent(
          fullUsername
        )}`;
        setConnectionLink(updatedConnectionLink);
        setQrcode(
          new QRCode({
            content: updatedConnectionLink,
            color: theme.selectedTheme === ThemeOptions.LIGHT ? "#171717" : "#FAFAFA",
            background: theme.selectedTheme === ThemeOptions.LIGHT ? "#FAFAFA" : "#171717",
            padding: 0,
            width: 250,
            height: 250,
            join: true
          }).svg()
        );
        initAccountLinkingProducer(hashedUsername);
      }
    }, []);
  useMountEffect()
  if (view === 'connect-backup-device') {
    return (
      <ConnectBackupDevice qrcode={qrcode} connectionLink={connectionLink} backupCreated={backupCreated} />
    );
  } else if (view === 'delegate-account') {
    return (
      <DelegateAccount
        pinInput={pinInput}
        pinError={pinError}
        cancelConnection={cancelConnection}
        checkPin={checkPin}
      />
    );
  }
  return null;
};
export default DelegateAccountRoute;

import { useState } from 'react';
import type { ConnectView } from '../lib/views';
import Connect from '../components/auth/connect/Connect';
import OpenConnectedDevice from '../components/auth/connect/OpenConnectedDevice';
const ConnectRoute = () => {
  const [view, setView] = useState<ConnectView>("connect");
  if (view === 'connect') {
    return <Connect changeView={setView} />;
  } else if (view === 'open-connected-device') {
    return <OpenConnectedDevice />;
  }
  return null;
}
export default ConnectRoute;

import { useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import type { BackupView } from '../lib/views';
import AreYouSure from '../components/auth/backup/AreYouSure';
import Backup from '../components/auth/backup/Backup';
const useQuery = () => {
  const { search } = useLocation();
  return useMemo(() => new URLSearchParams(search), [search]);
}
const BackupRoute = () => {
  const query = useQuery();
  const [view, setView] = useState(query.get('view') ?? 'backup');
  const handleChangeView = (updatedView: BackupView) => {
    setView(updatedView);
  };
  if (view === 'backup') {
    return <Backup changeView={handleChangeView} />
  } else if (view === 'are-you-sure') {
    return <AreYouSure />
  }
  return null
};
export default BackupRoute;

import AboutThisTemplate from '../components/about/AboutThisTemplate'
const AboutRoute = () => <AboutThisTemplate />
export default AboutRoute

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

export type BackupView = "backup" | "are-you-sure";
export type ConnectView = "connect" | "open-connected-device";
export type DelegateAccountView = "connect-backup-device" | "delegate-account";
export type LinkDeviceView = "link-device" | "load-filesystem";

export function asyncDebounce<A extends unknown[], R>(
  fn: (...args: A) => Promise<R>,
  wait: number
): (...args: A) => Promise<R> {
  let lastTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined;
  return (...args: A): Promise<R> => {
    clearTimeout(lastTimeoutId);
    return new Promise((resolve, reject) => {
      const currentTimeoutId = setTimeout(async () => {
        try {
          if (currentTimeoutId === lastTimeoutId) {
            const result = await fn(...args);
            resolve(result);
          }
        } catch (err) {
          reject(err);
        }
      }, wait);
      lastTimeoutId = currentTimeoutId;
    });
  };
}
export const extractSearchParam = (url: URL, param: string): string | null => {
  const val = url.searchParams.get(param);
  // clear the param from the URL
  url.searchParams.delete(param);
  window.history.replaceState(null, document.title, url.toString());
  return val;
};
/**
 * File to Uint8Array
 */
export const fileToUint8Array = async (file: File): Promise<Uint8Array> => {
  return new Uint8Array(
    await new Blob([ file ]).arrayBuffer()
  )
}

export enum ThemeOptions {
  LIGHT = 'light',
  DARK = 'dark',
}
export type THEME = {
  selectedTheme: ThemeOptions;
  useDefault: boolean;
};
export const DEFAULT_THEME_KEY = "useDefaultTheme";
export const THEME_KEY = "theme";
export const getSystemDefaultTheme = (): ThemeOptions =>
  window.matchMedia("(prefers-color-scheme: dark)").matches
    ? ThemeOptions.DARK
    : ThemeOptions.LIGHT;
/**
 * Load the theme from localStorage or fallback to the osTheme
 * @returns THEME
 */
export const loadTheme = (): THEME => {
  const useDefault =
    localStorage.getItem(DEFAULT_THEME_KEY) !== "undefined" &&
    JSON.parse(localStorage.getItem(DEFAULT_THEME_KEY));
  const browserTheme = localStorage.getItem(THEME_KEY) as ThemeOptions;
  const osTheme = getSystemDefaultTheme();
  if (useDefault) {
    return {
      selectedTheme: getSystemDefaultTheme(),
      useDefault,
    };
  }
  return {
    selectedTheme: browserTheme ?? (osTheme as ThemeOptions) ?? ThemeOptions.LIGHT,
    useDefault,
  };
};
/**
 * Store the theme in localStorage
 * @param theme
 * @returns void
 */
export const storeTheme = (theme: ThemeOptions): void => localStorage.setItem('theme', theme);

import type * as odd from "@oddjs/odd";
import { appName } from "../lib/app-info";
type USERNAME = {
  full: string;
  hashed: string;
  trimmed: string;
};
export type SESSION = {
  username: USERNAME;
  session: odd.Session | null;
  authStrategy: odd.AuthenticationStrategy | null;
  program: odd.Program
  loading: boolean;
  backupCreated: boolean;
  error?: SESSION_ERROR;
};
export enum SESSION_ERROR {
  INSECURE_CONTEXT = "Insecure Context",
  UNSUPORTED_CONTEXT = "Unsupported Browser",
}
export type SESSION_STORE = {
  session: SESSION;
  updateSession: (session: SESSION) => void;
};
export const errorToMessage = (error: SESSION_ERROR): string => {
  switch (error) {
    case SESSION_ERROR.INSECURE_CONTEXT:
      return `${appName} requires a secure context (HTTPS)`;
    case SESSION_ERROR.UNSUPORTED_CONTEXT:
      return `Your browser does not support ${appName}`;
  }
};
export const initialSession: SESSION = {
  username: null,
  session: null,
  authStrategy: null,
  program: null,
  loading: true,
  backupCreated: false,
};

import { getRecoil, setRecoil } from "recoil-nexus";
import { notificationStore } from "../stores";
export type Notification = {
  id?: string;
  msg?: string;
  type?: NotificationType;
  timeout?: number;
};
export type NotificationType = "success" | "error" | "info" | "warning";
/**
 * Remove a notification from the store using its id
 * @param id
 */
export const removeNotification: (id: string) => void = (id) => {
  const notifications = getRecoil(notificationStore);
  setRecoil(
    notificationStore, notifications.filter(
      (notification: Notification) => notification.id !== id
    )
  );
};
/**
 * Add a new notification to the bottom of the list
 * @param notification
 * @returns id
 */
export const addNotification: (notification: Notification) => void = ({
  msg,
  type = "info",
  timeout = 5000,
}) => {
  const notifications = getRecoil(notificationStore);
  // uuid for each notification
  const id = crypto.randomUUID();
  // adding new notifications to the bottom of the list so they stack from bottom to top
  setRecoil(notificationStore,[
    ...notifications,
    {
      id,
      msg,
      type,
      timeout,
    },
  ]);
  // removing the notification after a specified timeout
  const timer = setTimeout(() => {
    removeNotification(id);
    clearTimeout(timer);
  }, timeout);
  // return the id
  return id;
};

import * as odd from "@oddjs/odd";
import { getRecoil, setRecoil } from "recoil-nexus";
import { sessionStore, filesystemStore } from "../stores";
import { SESSION_ERROR } from "../lib/session";
import { getBackupStatus, type BackupStatus } from "../lib/auth/backup";
import { USERNAME_STORAGE_KEY, createDID } from "../lib/auth/account";
import { oddNamespace } from "../lib/app-info";
const initialize = async (): Promise<void> => {
  try {
    let backupStatus: BackupStatus = null;
    const program: odd.Program = await odd.program({
      namespace: oddNamespace,
      debug: process.env.NODE_ENV === "development",
    });
    if (program.session) {
      // Authed
      backupStatus = await getBackupStatus(program.session.fs);
      let fullUsername = (await program.components.storage.getItem(
        USERNAME_STORAGE_KEY
      )) as string;
      // If the user is migrating from a version odd-app-template before https://github.com/oddsdk/odd-app-template/pull/97/files#diff-a180510e798b8f833ebfdbe691c5ec4a1095076980d3e2388de29c849b2b8361R44,
      // their username won't contain a did, so we will need to manually append a DID and add it storage here
      if (!fullUsername) {
        const did = await createDID(program.components.crypto);
        fullUsername = `${program.session.username}#${did}`;
        await program.components.storage.setItem(
          USERNAME_STORAGE_KEY,
          fullUsername
        );
        window.location.reload();
      }
      setRecoil(sessionStore, {
        username: {
          full: fullUsername,
          hashed: program.session.username,
          trimmed: fullUsername.split("#")[0],
        },
        session: program.session,
        authStrategy: program.auth,
        program,
        loading: false,
        backupCreated: backupStatus.created,
      });
      setRecoil(filesystemStore, program.session.fs);
    } else {
      // Not authed
      setRecoil(sessionStore, {
        username: null,
        session: null,
        authStrategy: program.auth,
        program,
        loading: false,
        backupCreated: null,
      });
    }
  } catch (error) {
    console.error(error)
    const session = getRecoil(sessionStore);
    switch (error) {
      case odd.ProgramError.InsecureContext:
        setRecoil(sessionStore, {
          ...session,
          loading: false,
          error: SESSION_ERROR.INSECURE_CONTEXT,
        });
        break;
      case odd.ProgramError.UnsupportedBrowser:
        setRecoil(sessionStore, {
          ...session,
          loading: false,
          error: SESSION_ERROR.UNSUPORTED_CONTEXT,
        });
        break;
    }
  }
};
export default initialize;

import type * as odd from "@oddjs/odd";
import { getRecoil } from "recoil-nexus";
import { sessionStore } from "../../stores";
export const createAccountLinkingConsumer = async (
  username: string
): Promise<odd.AccountLinkingConsumer> => {
  const session = getRecoil(sessionStore)
  if (session.authStrategy) return session.authStrategy.accountConsumer(username);
  // Wait for program to be initialised
  return new Promise(function (resolve) {
    (function waitForAuthStrategy() {
      const updatedSession = getRecoil(sessionStore);
      if (updatedSession.authStrategy) {
        return resolve(updatedSession.authStrategy.accountConsumer(username));
      }
      setTimeout(waitForAuthStrategy, 30);
    })();
  });
};
export const createAccountLinkingProducer = async (
  username: string
): Promise<odd.AccountLinkingProducer> => {
  const session = getRecoil(sessionStore);
  return session.authStrategy.accountProducer(username);
};

import * as odd from '@oddjs/odd';
import { getRecoil } from "recoil-nexus";
import type FileSystem from "@oddjs/odd/fs/index";
import { filesystemStore } from '../../stores';
export type BackupStatus = { created: boolean } | null;
export const setBackupStatus = async (
  status: BackupStatus
): Promise<void> => {
  const fs = getRecoil(filesystemStore);
  const backupStatusPath = odd.path.file('private', 'backup-status.json');
  await fs.write(
    backupStatusPath,
    new TextEncoder().encode(JSON.stringify(status))
  );
  await fs?.publish();
};
export const getBackupStatus = async (fs: FileSystem): Promise<BackupStatus> => {
  const backupStatusPath = odd.path.file('private', 'backup-status.json');
  if (await fs?.exists(backupStatusPath)) {
    const fileContent = await fs?.read(backupStatusPath);
    try {
      return JSON.parse(new TextDecoder().decode(fileContent)) as BackupStatus;
    } catch (err) {
      console.warn(`Unable to load backup status: ${err.message || err}`);
    }
    return { created: false };
  } else {
    return { created: false };
  }
};

import * as uint8arrays from 'uint8arrays';
import type FileSystem from '@oddjs/odd/fs/index';
import { sha256 } from '@oddjs/odd/components/crypto/implementation/browser';
import { publicKeyToDid } from '@oddjs/odd/did/transformers';
import type { Crypto } from '@oddjs/odd';
import { getRecoil, setRecoil } from 'recoil-nexus';
import { filesystemStore, sessionStore } from '../../stores';
import { AREAS } from '../../routes/playlists/stores';
import { COLLECTION_DIRS } from '../../routes/playlists/lib/playlists';
import { ACCOUNT_SETTINGS_DIR } from '../account-settings';
import { asyncDebounce } from '../utils';
import { getBackupStatus } from './backup';
export const USERNAME_STORAGE_KEY = 'fullUsername';
export enum RECOVERY_STATES {
  Ready = 0,
  Processing = 1,
  Error = 2,
  Done = 3,
}
export const isUsernameValid = async (username: string): Promise<boolean> => {
  const session = getRecoil(sessionStore);
  return session.authStrategy.isUsernameValid(username);
};
export const isUsernameAvailable = async (
  username: string
): Promise<boolean> => {
  const session = getRecoil(sessionStore);
  return session.authStrategy.isUsernameAvailable(username);
};
export const debouncedIsUsernameAvailable = asyncDebounce(
  isUsernameAvailable,
  300
);
/**
 * Create additional directories and files needed by the app
 *
 * @param fs FileSystem
 */
const initializeFilesystem = async (fs: FileSystem): Promise<void> => {
  await fs.mkdir(COLLECTION_DIRS[AREAS.PUBLIC]);
  await fs.mkdir(COLLECTION_DIRS[AREAS.PRIVATE]);
  await fs.mkdir(ACCOUNT_SETTINGS_DIR);
};
export const createDID = async (
  crypto: Crypto.Implementation
): Promise<string> => {
  const pubKey = await crypto.keystore.publicExchangeKey();
  const ksAlg = await crypto.keystore.getAlgorithm();
  return publicKeyToDid(crypto, pubKey, ksAlg);
};
export const prepareUsername = async (username: string): Promise<string> => {
  const normalizedUsername = username.normalize('NFD');
  const hashedUsername = await sha256(
    new TextEncoder().encode(normalizedUsername)
  );
  return uint8arrays.toString(hashedUsername, 'base32').slice(0, 32);
};
export const register = async (hashedUsername: string): Promise<boolean> => {
  const originalSession = getRecoil(sessionStore);
  const {
    authStrategy,
    program: {
      components: { storage },
    },
  } = originalSession;
  const { success } = await authStrategy.register({ username: hashedUsername });
  if (!success) return success;
  const session = await authStrategy.session();
  setRecoil(filesystemStore, session.fs);
  // TODO Remove if only public and private directories are needed
  await initializeFilesystem(session.fs);
  const fullUsername = (await storage.getItem(USERNAME_STORAGE_KEY)) as string;
  setRecoil(sessionStore, {
    ...originalSession,
    username: {
      full: fullUsername,
      hashed: hashedUsername,
      trimmed: fullUsername.split('#')[0],
    },
    session,
  });
  return success;
};
export const loadAccount = async (
  hashedUsername: string,
  fullUsername: string
): Promise<void> => {
  const originalSession = getRecoil(sessionStore);
  const {
    authStrategy,
    program: {
      components: { storage },
    },
  } = originalSession;
  const session = await authStrategy.session();
  setRecoil(filesystemStore, session.fs);
  const backupStatus = await getBackupStatus(session.fs);
  await storage.setItem(USERNAME_STORAGE_KEY, fullUsername);
  setRecoil(sessionStore, {
    ...originalSession,
    username: {
      full: fullUsername,
      hashed: hashedUsername,
      trimmed: fullUsername.split('#')[0],
    },
    session,
    backupCreated: !!backupStatus?.created,
  });
};

export const appName = "ODD SDK Demo";
export const appDescription = "This is another awesome ODD app.";
export const appURL = "https://odd-template-react.netlify.app";
export const appImageURL = `${appURL}/preview.png`;
export const ipfsGatewayUrl = "runfission.com";
export const oddNamespace = { creator: "Fission", name: "OAT" };

import * as wn from "@oddjs/odd";
import { retrieve } from "@oddjs/odd/common/root-key";
import * as uint8arrays from "uint8arrays";
import { getRecoil, setRecoil } from "recoil-nexus";
import type { CID } from "multiformats/cid";
import type { PuttableUnixTree, File as WNFile } from "@oddjs/odd/fs/types";
import type { Metadata } from "@oddjs/odd/fs/metadata";
import { fileToUint8Array } from "./utils";
import { accountSettingsStore, filesystemStore, sessionStore } from "../stores";
import { addNotification } from "./notifications";
export type Avatar = {
  cid: string;
  ctime: number;
  name: string;
  size?: number;
  src: string;
};
export type AccountSettings = {
  avatar: Avatar;
  loading: boolean;
};
interface AvatarFile extends PuttableUnixTree, WNFile {
  cid: CID;
  content: Uint8Array;
  header: {
    content: Uint8Array;
    metadata: Metadata;
  };
}
export const ACCOUNT_SETTINGS_DIR = wn.path.directory("private", "settings");
const AVATAR_DIR = wn.path.combine(
  ACCOUNT_SETTINGS_DIR,
  wn.path.directory("avatars")
);
const AVATAR_ARCHIVE_DIR = wn.path.combine(
  AVATAR_DIR,
  wn.path.directory("archive")
);
const AVATAR_FILE_NAME = "avatar";
const FILE_SIZE_LIMIT = 20;
/**
 * Move old avatar to the archive directory
 */
const archiveOldAvatar = async (): Promise<void> => {
  const fs = getRecoil(filesystemStore);
  // Return if user has not uploaded an avatar yet
  const avatarDirExists = await fs.exists(AVATAR_DIR);
  if (!avatarDirExists) {
    return;
  }
  // Find the filename of the old avatar
  const links = await fs.ls(AVATAR_DIR);
  const oldAvatarFileName = Object.keys(links).find((key) =>
    key.includes(AVATAR_FILE_NAME)
  );
  const oldFileNameArray = oldAvatarFileName.split(".")[0];
  const archiveFileName = `${oldFileNameArray[0]}-${Date.now()}.${
    oldFileNameArray[1]
  }`;
  // Move old avatar to archive dir
  const fromPath = wn.path.combine(AVATAR_DIR, wn.path.file(oldAvatarFileName));
  const toPath = wn.path.combine(
    AVATAR_ARCHIVE_DIR,
    wn.path.file(archiveFileName)
  );
  await fs.mv(fromPath, toPath);
  // Announce the changes to the server
  await fs.publish();
};
/**
 * Get the Avatar from the user's WNFS and construct its `src`
 */
export const getAvatarFromWNFS = async (): Promise<void> => {
  const accountSettings = getRecoil(accountSettingsStore);
  try {
    const fs = getRecoil(filesystemStore);
    // Set loading: true on the accountSettingsStore
    setRecoil(accountSettingsStore, { ...accountSettings, loading: true });
    // If the avatar dir doesn't exist, silently fail and let the UI handle it
    const avatarDirExists = await fs.exists(AVATAR_DIR);
    if (!avatarDirExists) {
      setRecoil(accountSettingsStore, { ...accountSettings, loading: false });
      return;
    }
    // Find the file that matches the AVATAR_FILE_NAME
    const links = await fs.ls(AVATAR_DIR);
    const avatarName = Object.keys(links).find((key) =>
      key.includes(AVATAR_FILE_NAME)
    );
    // If user has not uploaded an avatar, silently fail and let the UI handle it
    if (!avatarName) {
      setRecoil(accountSettingsStore, { ...accountSettings, loading: false });
      return;
    }
    const file = await fs.get(
      wn.path.combine(AVATAR_DIR, wn.path.file(`${avatarName}`))
    );
    // The CID for private files is currently located in `file.header.content`
    const cid = (file as AvatarFile).header.content.toString();
    // Create a base64 string to use as the image `src`
    const src = `data:image/jpeg;base64, ${uint8arrays.toString(
      (file as AvatarFile).content,
      "base64"
    )}`;
    const avatar = {
      cid,
      ctime: (file as AvatarFile).header.metadata.unixMeta.ctime,
      name: avatarName,
      src,
    };
    // Push images to the accountSettingsStore
    setRecoil(accountSettingsStore, {
      ...accountSettings,
      avatar,
      loading: false,
    });
  } catch (error) {
    console.error(error);
    setRecoil(accountSettingsStore, {
      ...accountSettings,
      avatar: null,
      loading: false,
    });
  }
};
/**
 * Upload an avatar image to the user's private WNFS
 * @param image
 */
export const uploadAvatarToWNFS = async (image: File): Promise<void> => {
  try {
    const accountSettings = getRecoil(accountSettingsStore);
    const fs = getRecoil(filesystemStore);
    // Set loading: true on the accountSettingsStore
    setRecoil(accountSettingsStore, { ...accountSettings, loading: true });
    // Reject files over 20MB
    const imageSizeInMB = image.size / (1024 * 1024);
    if (imageSizeInMB > FILE_SIZE_LIMIT) {
      throw new Error("Image can be no larger than 20MB");
    }
    // Archive old avatar
    await archiveOldAvatar();
    // Rename the file to `avatar.[extension]`
    const updatedImage = new File(
      [image],
      `${AVATAR_FILE_NAME}.${image.name.split(".")[1]}`,
      {
        type: image.type,
      }
    );
    // Create a sub directory and add the avatar
    await fs.write(
      wn.path.combine(AVATAR_DIR, wn.path.file(updatedImage.name)),
      await fileToUint8Array(updatedImage)
    );
    // Announce the changes to the server
    await fs.publish();
    addNotification({ msg: `Your avatar has been updated!`, type: "success" });
  } catch (error) {
    addNotification({ msg: error.message, type: "error" });
    console.error(error);
  }
};
export const generateRecoveryKit = async (): Promise<string> => {
  const {
    program: {
      components: { crypto, reference },
    },
    username: { full, hashed, trimmed },
  } = getRecoil(sessionStore);
  // Get the user's read-key and base64 encode it
  const accountDID = await reference.didRoot.lookup(hashed);
  const readKey = await retrieve({ crypto, accountDID });
  const encodedReadKey = uint8arrays.toString(readKey, "base64pad");
  // Get today's date to display in the kit
  const options: Intl.DateTimeFormatOptions = {
    weekday: "short",
    year: "numeric",
    month: "short",
    day: "numeric",
  };
  const date = new Date();
  const content = `#     %@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%
#   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
# %@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%
# @@@@@%     %@@@@@@%         %@@@@@@@%     %@@@@@
# @@@@@       @@@@@%            @@@@@@       @@@@@
# @@@@@%      @@@@@             %@@@@@      %@@@@@
# @@@@@@%     @@@@@     %@@%     @@@@@     %@@@@@@
# @@@@@@@     @@@@@    %@@@@%    @@@@@     @@@@@@@
# @@@@@@@     @@@@%    @@@@@@    @@@@@     @@@@@@@
# @@@@@@@    %@@@@     @@@@@@    @@@@@%    @@@@@@@
# @@@@@@@    @@@@@     @@@@@@    %@@@@@    @@@@@@@
# @@@@@@@    @@@@@@@@@@@@@@@@     @@@@@    @@@@@@@
# @@@@@@@    %@@@@@@@@@@@@@@@     @@@@%    @@@@@@@
# @@@@@@@     %@@%     @@@@@@     %@@%     @@@@@@@
# @@@@@@@              @@@@@@              @@@@@@@
# @@@@@@@%            %@@@@@@%            %@@@@@@@
# @@@@@@@@@%        %@@@@@@@@@@%        %@@@@@@@@@
# %@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%
#   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
#     %@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%
#
# This is your recovery kit. (It’s a yaml text file)
#
# Created for ${trimmed} on ${date.toLocaleDateString("en-US", options)}
#
# Store this somewhere safe.
#
# Anyone with this file will have read access to your private files.
# Losing it means you won’t be able to recover your account
# in case you lose access to all your linked devices.
#
# Our team will never ask you to share this file.
#
# To use this file, go to ${window.location.origin}/recover/
# Learn how to customize this kit for your users: https://guide.fission.codes/
username: ${full}
key: ${encodedReadKey}`;
  return content;
};

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import RecoilNexus from "recoil-nexus";
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <RecoilNexus />
        <App />
    </RecoilRoot>
  </React.StrictMode>
);

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
  font-family: 'UncutSans';
  src: url('./fonts/uncut-sans-regular-webfont.woff2') format('woff2'),
        url('./fonts/uncut-sans-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
    font-family: 'UncutSans';
    src: url('./fonts/uncut-sans-medium-webfont.woff2') format('woff2'),
         url('./fonts/uncut-sans-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'UncutSans';
    src: url('./fonts/uncut-sans-medium-webfont.woff2') format('woff2'),
         url('./fonts/uncut-sans-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
  font-family: 'UncutSans';
  src: url('./fonts/uncut-sans-bold-webfont.woff2') format('woff2'),
        url('./fonts/uncut-sans-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
h1, h2, h3 {
  @apply font-bold;
}
h4, h5, h6 {
  @apply font-medium;
}
body, input {
  @apply font-sans;
}
/* Button default styles */
.btn {
  @apply font-medium;
  @apply border-2;
  @apply min-h-0;
}
.btn-circle {
  @apply text-base-100;
  @apply bg-base-content;
}
.btn-circle:hover {
  @apply bg-base-content;
}
.btn-outline {
  @apply text-sm;
  @apply text-base-content;
  @apply border-base-content;
  @apply bg-base-100;
  @apply shadow-orange;
  @apply h-10;
  @apply px-4;
}
.btn-primary {
  @apply text-sm;
  @apply text-neutral-900;
  @apply border-neutral-900;
  @apply shadow-orange;
  @apply bg-gradient-to-r;
  @apply from-orange-300;
  @apply to-orange-600;
  @apply h-10;
  @apply px-4;
}
.btn-primary:disabled {
  @apply opacity-50;
  @apply text-neutral-900;
  @apply border-neutral-900;
}
.btn-primary:hover, .btn-warning:hover {
  @apply border-neutral-900;
}
.btn-link {
  @apply text-blue-500;
}
/* Input default styles */
.input-bordered {
  @apply text-base-content;
  @apply border-2;
  @apply border-base-content;
}
/* Modal default styles */
.modal-box {
  @apply p-8;
  @apply border-2;
  @apply border-base-content;
}
/* Label default styles */
.label {
  @apply px-0;
}
.label-text-alt {
  @apply text-sm;
}

interface Props {
  components: Array<React.JSXElementConstructor<React.PropsWithChildren<any>>>;
  children: React.ReactNode;
}
const Compose = (props: Props) => {
  const { components = [], children } = props;
  return (
    <>
      {components.reduceRight((acc, Comp) => {
        return <Comp>{acc}</Comp>;
      }, children)}
    </>
  );
};
export default Compose;

import clipboardCopy from 'clipboard-copy'
import { useRecoilValue } from "recoil";
import { sessionStore } from '../../stores'
import { addNotification } from '../../lib/notifications'
import ClipboardIcon from '../icons/ClipboardIcon'
import TruncatedUsername from './TruncatedUsername'
const Username = () => {
  const session = useRecoilValue(sessionStore)
  const handleCopyUsername = async (): Promise<void> => {
    await clipboardCopy(session.username.full);
    addNotification({ msg: 'Copied to clipboard', type: 'success' })
  }
  return (
    <div>
      <h3 className="text-lg mb-4">Username</h3>
      <div className="flex items-center">
        <p>
          <TruncatedUsername />
        </p>
        <button
          className="pl-2 hover:text-neutral-500 transition-colors"
          onClick={handleCopyUsername}
        >
          <ClipboardIcon />
        </button>
      </div>
    </div>
  )
}
export default Username

import { useRecoilValue } from "recoil";
import { sessionStore } from "../../stores";
const Username = () => {
  const session = useRecoilValue(sessionStore);
  const usernameParts = session?.username?.full?.split("#");
  return (
    <>
      {usernameParts[0]}
      <span className="text-neutral-500 -ml-[3px]">
        #{usernameParts[1].substring(0, 12)}...
        {usernameParts[1].substring(usernameParts[1].length - 5)}
      </span>
    </>
  );
};
export default Username;

import { useEffect, useState } from 'react'
import { useRecoilState } from "recoil";
import { themeStore } from '../../stores';
import {
  THEME,
  DEFAULT_THEME_KEY,
  getSystemDefaultTheme,
  storeTheme,
  ThemeOptions
} from "../../lib/theme";
const options = [
  {
    label: 'Dark',
    value: ThemeOptions.DARK,
  },
  {
    label: 'Light',
    value: ThemeOptions.LIGHT,
  },
];
const ThemePreferences = () => {
  const defaultTheme = getSystemDefaultTheme();
  const [theme, setTheme] = useRecoilState(themeStore);
  const [selected, setSelected] = useState(theme.selectedTheme);
  const [useDefault, setUseDefault] = useState(theme.useDefault);
  const handleUpdateTheme = ({ selectedTheme, useDefault }: THEME) => {
    setTheme({
      ...theme,
      selectedTheme,
      useDefault,
    });
    storeTheme(selectedTheme);
  };
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedTheme = event.target.value as ThemeOptions
    setSelected(selectedTheme);
    handleUpdateTheme({ selectedTheme, useDefault: false });
  };
  const setDefaultThemePreference = (useDefaultTheme): void => {
    setUseDefault(useDefaultTheme)
    localStorage.setItem(DEFAULT_THEME_KEY, `${useDefaultTheme}`);
    if (useDefaultTheme) {
      handleUpdateTheme({
        selectedTheme: defaultTheme,
        useDefault: useDefaultTheme,
      });
    }
  };
  useEffect(() => {
    setUseDefault(theme.useDefault)
    setSelected(theme.selectedTheme);
  }, [theme]);
  return (
    <div className="flex flex-col gap-4">
      <h3 className="text-lg">Theme preference</h3>
      <p>
        Your theme preference is saved per device. Any newly connected device
        will adopt the preference from the device it was connected by.
      </p>
      <div>
        <div className="form-control items-start">
          <label className="label cursor-pointer">
            <input
              type="checkbox"
              name="use-default-theme"
              className="checkbox checked:bg-base-content"
              checked={useDefault}
              onChange={(event) =>
                setDefaultThemePreference(event.target.checked)
              }
            />
            <span className="label-text text-sm ml-2">Use system default</span>
          </label>
        </div>
        {options.map((option, key) => (
          <div key={key} className="form-control items-start">
            <label className="label cursor-pointer">
              <input
                type="radio"
                name="theme-preference"
                className="radio checked:bg-base-content"
                value={option.value}
                checked={selected === option.value}
                disabled={useDefault}
                onChange={handleChange}
              />
              <span className="label-text text-sm ml-2">{option.label}</span>
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}
export default ThemePreferences;

import { useEffect, useRef, useState } from 'react'
// import { Link } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { sessionStore } from '../../stores'
import { generateRecoveryKit } from '../../lib/account-settings'
import Download from '../icons/Download'
type Props = {
  handleToggleModal: () => void
}
const RecoveryKitModal = ({ handleToggleModal }: Props) => {
  const session = useRecoilValue(sessionStore)
  const [fileURL, setFileURL] = useState(null)
  const downloadLinkRef = useRef(null);
  const prepareRecoveryKitDownload = async () => {
    const recoveryKit = await generateRecoveryKit()
    const data = new Blob([recoveryKit], { type: 'text/plain' })
    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (fileURL !== null) {
      window.URL.revokeObjectURL(fileURL)
    }
    const localFileURL = window.URL.createObjectURL(data)
    setFileURL(localFileURL)
  }
  const useMountEffect = () =>
    useEffect(() => {
      prepareRecoveryKitDownload();
    }, []);
  useMountEffect();
  useEffect(() => {
    if (downloadLinkRef && fileURL) {
      downloadLinkRef.current.setAttribute(
        "download",
        `ODD-RecoveryKit-${session.username.trimmed}.txt`
      );
      downloadLinkRef.current.href = fileURL;
    }
  }, [downloadLinkRef, fileURL]);
  return (
    <>
      <input
        type="checkbox"
        id="recovery-kit-modal"
        defaultChecked
        className="modal-toggle"
      />
      <div className="modal !z-max">
        <div className="modal-box w-narrowModal sm:w-wideModal relative text-center sm:!pr-11 sm:!pb-11 sm:!pl-11">
          <button
            className="btn btn-xs btn-circle absolute right-2 top-2"
            onClick={handleToggleModal}
          >
            ✕
          </button>
          <div>
            {!fileURL ? (
              <>
                <h3 className="mb-7 text-base">
                  Creating your recovery kit...
                </h3>
                <div className="flex items-center justify-center text-base-content">
                  <span className="rounded-lg border-t-2 border-l-2 border-base-content w-4 h-4 inline-block animate-spin mr-2" />
                </div>
              </>
            ) : (
              <>
                <h3 className="mb-7 text-base">
                  Your recovery kit has been created!
                </h3>
                <div className="text-left mb-6">
                  <p className="mb-2">
                    Please store it somewhere safe for two reasons:
                  </p>
                  <ol className="list-decimal mb-2 pl-6">
                    <li>
                      <strong>It is powerful:</strong>
                      Anyone with this recovery kit will have access to all of
                      your private data.
                    </li>
                    <li>
                      <strong>It&apos;s your backup plan:</strong>
                      If you lose access to your connected devices, this kit
                      will help you recover your private data.
                    </li>
                  </ol>
                  <p>
                    So, keep it somewhere you keep things you don&apos;t want to
                    lose or have stolen.
                  </p>
                </div>
                <a
                  className="btn btn-primary w-[227px] gap-2"
                  ref={downloadLinkRef}
                >
                  <Download /> Download recovery kit
                </a>
              </>
            )}
          </div>
        </div>
      </div>
    </>
  );
}
export default RecoveryKitModal

import { useState } from 'react'
import RecoveryKitModal from './RecoveryKitModal'
const RecoveryKit = () => {
  const [modalOpen, setModalOpen] = useState(false)
  const handleToggleModal = async () => setModalOpen(!modalOpen)
  return (
    <>
      <div className="flex flex-col gap-4">
        <h3 className="text-lg">Recovery Kit</h3>
        <p>
          Your recovery kit will restore access to your data in the event that
          you lose access to all of your connected devices. We recommend you
          store your kit in a safe place, separate from those devices.
        </p>
        <button className="btn btn-primary w-fit" onClick={handleToggleModal}>
          Create your recovery kit
        </button>
      </div>
      {modalOpen && <RecoveryKitModal handleToggleModal={handleToggleModal} />}
    </>
  );
}
export default RecoveryKit

import { Link } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { sessionStore } from "../../stores";
const ConnectedDevices = () => {
  const session = useRecoilValue(sessionStore);
  return (
    <div className="flex flex-col gap-4">
      <h3 className="text-lg">Connected devices</h3>
      {session.backupCreated ? (
        <p>You have connected at least one other device.</p>
      ) : (
        <p>You have no other connected devices.</p>
      )}
      <Link className="btn btn-outline" to="/delegate-account">
        Connect an additional device
      </Link>
    </div>
  );
};
export default ConnectedDevices;

import { getAvatarFromWNFS, uploadAvatarToWNFS } from '../../lib/account-settings'
import Avatar from './Avatar'
const AvatarUpload = () => {
  /**
   * Handle uploads made by interacting with the file input
   */
  const handleFileInput: (file: File) => Promise<void> = async (file) => {
    await uploadAvatarToWNFS(file);
    // Refetch avatar and update accountSettingsStore
    await getAvatarFromWNFS();
  };
  return (
    <div>
      <h3 className="text-lg mb-4">Avatar</h3>
      <div className="flex items-center gap-4">
        <Avatar />
        <label htmlFor="upload-avatar" className="btn btn-outline">
          Upload a new avatar
        </label>
        <input
          onChange={(e) => handleFileInput(e.target.files[0])}
          id="upload-avatar"
          type="file"
          accept="image/*"
          className="hidden"
        />
      </div>
    </div>
  );
}
export default AvatarUpload;

import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { accountSettingsStore, sessionStore } from '../../stores'
import { getAvatarFromWNFS } from '../../lib/account-settings'
let imagesFetched = false;
const Avatar = ({ size = 'large' }) => {
  const accountSettings = useRecoilValue(accountSettingsStore)
  const session = useRecoilValue(sessionStore)
  const sizeClasses =
    size === "large"
      ? "w-[88px] h-[88px] text-[40px]"
      : "w-[40px] h-[40px] text-sm";
  const loaderSizeClasses =
    size === "large" ? "w-[28px] h-[28px]" : "w-[16px] h-[16px]";
  const useMountEffect = () =>
    useEffect(() => {
      if (!imagesFetched) {
        getAvatarFromWNFS();
        imagesFetched = true;
      }
    }, []);
  useMountEffect();
  return (
    <>
      {accountSettings.avatar ? (
        <>
          {accountSettings.loading ? (
            <div
              className={`flex items-center justify-center object-cover rounded-full border-2 border-base-content ${sizeClasses}`}
            >
              <span
                className={`animate-spin ease-linear rounded-full border-2 border-t-2 border-t-orange-500 border-base-content ${loaderSizeClasses}`}
              />
            </div>
          ) : (
            <img
              className={`object-cover rounded-full border-2 border-base-content ${sizeClasses}`}
              src={accountSettings.avatar.src}
              alt="User Avatar"
            />
          )}
        </>
      ) : (
        <div
          className={`flex items-center justify-center bg-base-content text-base-100 uppercase font-bold rounded-full ${sizeClasses}`}
        >
          {session.username.trimmed[0]}
        </div>
      )}
    </>
  );
}
export default Avatar;

import { useRecoilValue } from "recoil";
import { animated, Transition } from "react-spring";
import { notificationStore } from '../../stores';
import Notification from './Notification'
const Notifications = () => {
  const notifications = useRecoilValue(notificationStore);
  if (notifications.length) {
    return (
      <div className="fixed z-max right-4 bottom-8 flex flex-col justify-center">
        <Transition
          items={notifications}
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}
        >
          {(styles, notification) =>
            notification && (
              <animated.div style={styles}>
                <Notification notification={notification} />
              </animated.div>
            )
          }
        </Transition>
      </div>
    );
  }
  return null;
};
export default Notifications;

import { useRecoilValue } from "recoil";
import { themeStore } from "../../stores";
import { ThemeOptions } from "../../lib/theme";
import type { Notification } from "../../lib/notifications";
import CheckThinIcon from "../icons/CheckThinIcon";
import InfoThinIcon from "../icons/InfoThinIcon";
import WarningThinIcon from "../icons/WarningThinIcon";
import XThinIcon from "../icons/XThinIcon";
type Props = {
  notification: Notification;
};
const NotificationComp = ({ notification }: Props) => {
  const theme = useRecoilValue(themeStore);
  if (!notification?.type) {
    return null;
  }
  const iconMap = {
    info: {
      component: InfoThinIcon,
      props: {
        color: "#1e3a8a",
      },
    },
    error: {
      component: XThinIcon,
      props: {
        color: theme.selectedTheme === ThemeOptions.LIGHT ? "#ffd6d7" : "#fec3c3",
      },
    },
    success: {
      component: CheckThinIcon,
      props: {
        color: "#14532D",
      },
    },
    warning: {
      component: WarningThinIcon,
      props: {
        color: "#7c2d12",
      },
    },
  };
  const IconComponent = iconMap[notification.type].component;
  return (
    <div
      className="animate-fadeInUp"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div
        className={`alert alert-${notification.type} text-sm mb-3 peer-last:mb-0`}
      >
        <div>
          <IconComponent {...iconMap[notification.type].props} />
          <span className="pl-1">{notification.msg}</span>
        </div>
      </div>
    </div>
  );
};
export default NotificationComp;

import React, { useState } from "react";
import { useLocation, useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { getRecoil } from "recoil-nexus";
import { sessionStore } from '../../stores'
import About from '../icons/About'
import BrandLogo from '../icons/BrandLogo'
import Disconnect from '../icons/Disconnect'
import Home from '../icons/Home'
import NavItem from './NavItem'
import PhotoGallery from '../icons/PhotoGallery'
import Settings from '../icons/Settings'
const navItemsUpper = [
  {
    label: 'Home',
    href: '/',
    icon: Home
  },
  {
    label: 'Collection',
    href: '/playlists/',
    icon: PhotoGallery
  },
  {
    label: 'Account Settings',
    href: '/settings/',
    icon: Settings
  }
]
const navItemsLower = [
  {
    label: "About This Template",
    href: "/about/",
    icon: About,
  },
  {
    label: "Disconnect",
    callback: async () => {
      const session = getRecoil(sessionStore)
      await session.session.destroy();
      // Force a hard refresh to ensure everything is disconnected properly
      window.location.href = window.location.origin;
    },
    icon: Disconnect,
    placement: "bottom",
  },
];
const SidebarNav = ({ children }: any) => {
  const location = useLocation();
  const navigate = useNavigate();
  const session = useRecoilValue(sessionStore);
  const [checked, setChecked] = useState(false)
  const handleCloseDrawer = (): void => {
    setChecked(false)
  };
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked);
  };
  // Only render the nav if the user is authed and not in the connection flow
  if (session.session) {
    return (
      <div className="h-screen drawer drawer-mobile">
        <input
          id="sidebar-nav"
          className="drawer-toggle"
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
        <div className="flex flex-col drawer-content">{children}</div>
        <div
          className={`drawer-side ${
            location.pathname.match(/register|backup|delegate|recover/) ? "!hidden" : ""
          }`}
        >
          <label
            htmlFor="sidebar-nav"
            className="drawer-overlay !bg-[#262626] !opacity-[.85]"
          />
          <div className="p-4 overflow-y-auto menu w-80 bg-base-100 text-base-content">
            {/* Brand */}
            <div
              className="flex items-center gap-3 mb-8 cursor-pointer"
              onClick={() => {
                handleCloseDrawer();
                navigate("/");
              }}
            >
              <BrandLogo />
            </div>
            {/* Upper Menu */}
            <ul>
              {navItemsUpper.map((item, key) => (
                <NavItem
                  handleCloseDrawer={handleCloseDrawer}
                  item={item}
                  key={key}
                />
              ))}
            </ul>
            {/* Lower Menu */}
            <ul className="pb-8 mt-auto">
              {navItemsLower.map((item, key) => (
                <NavItem
                  handleCloseDrawer={handleCloseDrawer}
                  item={item}
                  key={key}
                />
              ))}
            </ul>
          </div>
        </div>
      </div>
    );
  }
  return children;
}
export default SidebarNav;

import React from "react";
import { Link, useLocation } from "react-router-dom";
const NavItem = ({ handleCloseDrawer, item }) => {
  const location = useLocation();
  return (
    <li>
      {item.callback ? (
        <button
          className={`flex items-center justify-start gap-2 font-bold text-sm text-base-content hover:text-base-100 bg-base-100 hover:bg-base-content ease-in-out duration-[250ms] ${
            location.pathname === item.href
              ? "!text-base-100 !bg-base-content"
              : ""
          }`}
          onClick={() => {
            handleCloseDrawer();
            item.callback();
          }}
        >
          {React.createElement(item.icon)}
          {item.label}
        </button>
      ) : (
        <Link
          className={`flex items-center justify-start gap-2 font-bold text-sm text-base-content hover:text-base-100 bg-base-100 hover:bg-base-content ease-in-out duration-[250ms] ${
            location.pathname === item.href
              ? "!text-base-100 !bg-base-content"
              : ""
          }`}
          to={item.href}
          onClick={handleCloseDrawer}
        >
          {React.createElement(item.icon)}
          {item.label}
        </Link>
      )}
    </li>
  );
};
export default NavItem;

const AlphaTag = () => (
  <span className="inline-block px-2 py-[2px] !no-underline font-medium text-center text-xs text-neutral-900 bg-gradient-to-r from-orange-300 to-orange-600">
    ALPHA
  </span>
);
export default AlphaTag;

const XThinIcon = ({ color }: { color: string }) => (
  <svg
    width="15px"
    height="15px"
    viewBox="0 0 15 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M6.7929 7.49998L1.14645 1.85353L1.85356 1.14642L7.50001 6.79287L13.1465 1.14642L13.8536 1.85353L8.20711 7.49998L13.8536 13.1464L13.1465 13.8535L7.50001 8.20708L1.85356 13.8535L1.14645 13.1464L6.7929 7.49998Z"
      fill={color}
    />
  </svg>
);
export default XThinIcon;

const XIcon = () => (
  <svg
    width="13"
    height="12"
    viewBox="0 0 13 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M0.792893 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L6.5 4.58579L10.7929 0.292893C11.1834 -0.0976311 11.8166 -0.0976311 12.2071 0.292893C12.5976 0.683417 12.5976 1.31658 12.2071 1.70711L7.91421 6L12.2071 10.2929C12.5976 10.6834 12.5976 11.3166 12.2071 11.7071C11.8166 12.0976 11.1834 12.0976 10.7929 11.7071L6.5 7.41421L2.20711 11.7071C1.81658 12.0976 1.18342 12.0976 0.792893 11.7071C0.402369 11.3166 0.402369 10.6834 0.792893 10.2929L5.08579 6L0.792893 1.70711C0.402369 1.31658 0.402369 0.683417 0.792893 0.292893Z"
      fill="currentColor"
    />
  </svg>
);
export default XIcon;

const WelcomeCheckIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="79" height="56" fill="none">
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="M77.06 1.64a5.6 5.6 0 0 1 0 7.92l-44.8 44.8a5.6 5.6 0 0 1-7.92 0l-22.4-22.4a5.6 5.6 0 0 1 7.92-7.92L28.3 42.48 69.14 1.64a5.6 5.6 0 0 1 7.92 0Z"
      clipRule="evenodd"
    />
  </svg>
);
export default WelcomeCheckIcon;

const WarningThinIcon = ({ color }: { color: string }) => (
  <svg
    width="36"
    height="32"
    viewBox="0 0 36 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M17.9998 12.5V16.1667M17.9998 23.5H18.0182M5.29811 30.8333H30.7015C33.5241 30.8333 35.2883 27.7778 33.877 25.3333L21.1752 3.33333C19.7639 0.888889 16.2357 0.888889 14.8244 3.33333L2.12269 25.3333C0.711386 27.7778 2.47551 30.8333 5.29811 30.8333Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
export default WarningThinIcon;

const Upload = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M1 13v1a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1m-4-8L9 1m0 0L5 5m4-4v12"
    />
  </svg>
);
export default Upload;

const Trash = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m16.5 5-.867 12.142A2 2 0 0 1 13.638 19H5.362a2 2 0 0 1-1.995-1.858L2.5 5m5 4v6m4-6v6m1-10V2a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3m-5 0h16"
    />
  </svg>
);
export default Trash;

const Shield = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
    <path
      stroke="#171717"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M10 8v2m0 4h.01m8.608-9.016A11.955 11.955 0 0 1 10 1.944a11.955 11.955 0 0 1-8.618 3.04A12.02 12.02 0 0 0 1 8c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016Z"
    />
  </svg>
);
export default Shield;

const Share = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M6.684 11.342C6.886 10.938 7 10.482 7 10c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 1 1 0-2.684m0 2.684 6.632 3.316m-6.632-6 6.632-3.316m0 0a3 3 0 1 0 5.367-2.684 3 3 0 0 0-5.367 2.684Zm0 9.316a3 3 0 1 0 5.368 2.684 3 3 0 0 0-5.368-2.684Z"
    />
  </svg>
)
export default Share

const Settings = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M9 3V1m0 2a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m-6 8a2 2 0 1 0 0-4m0 4a2 2 0 1 1 0-4m0 4v2m0-6V1m6 6v10m6-2a2 2 0 1 0 0-4m0 4a2 2 0 1 1 0-4m0 4v2m0-6V1"
    />
  </svg>
);
export default Settings;

const RightArrow = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m8 1 5 5m0 0-5 5m5-5H1"
    />
  </svg>
);
export default RightArrow;

const PhotoGallery = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m1 13 4.586-4.586a2 2 0 0 1 2.828 0L13 13m-2-2 1.586-1.586a2 2 0 0 1 2.828 0L17 11m-6-6h.01M3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"
    />
  </svg>
);
export default PhotoGallery;

const LightMode = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none">
    <rect
      width="38"
      height="38"
      x="1"
      y="1"
      fill="#FAFAFA"
      stroke="#171717"
      strokeWidth="2"
      rx="19"
    />
    <path
      stroke="#111827"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M20 11v1m0 16v1m9-9h-1m-16 0h-1m15.364 6.364-.707-.707M14.343 14.343l-.707-.707m12.728 0-.707.707M14.343 25.657l-.707.707M24 20a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
    />
  </svg>
);
export default LightMode;

const LeftArrow = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M6 11 1 6m0 0 5-5M1 6h12"
    />
  </svg>
);
export default LeftArrow;

const InfoThinIcon = ({ color }: { color: string }) => (
  <svg
    width="36"
    height="36"
    viewBox="0 0 36 36"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M19.8333 25.3333H18V18H16.1667M18 10.6667H18.0183M34.5 18C34.5 27.1127 27.1127 34.5 18 34.5C8.8873 34.5 1.5 27.1127 1.5 18C1.5 8.8873 8.8873 1.5 18 1.5C27.1127 1.5 34.5 8.8873 34.5 18Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
export default InfoThinIcon;

const Home = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m1 10 2-2m0 0 7-7 7 7M3 8v10a1 1 0 0 0 1 1h3M17 8l2 2m-2-2v10a1 1 0 0 1-1 1h-3m-6 0a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1m-6 0h6"
    />
  </svg>
);
export default Home;

const Hamburger = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="40" fill="none">
    <path fill="currentColor" d="M8 8h32v2H8zM8 19h32v2H8zM8 30h32v2H8z" />
  </svg>
);
export default Hamburger;

const Github = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2.5"
      d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
    />
  </svg>
);
export default Github;

type Props = {
  classes?: string
}
const FileUploadIcon = ({ classes = "mb-3 w-10 h-10" }: Props) => (
  <svg
    aria-hidden="true"
    className={classes}
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M7 16a4 4 0 0 1-.88-7.903A5 5 0 1 1 15.9 6h.1a5 5 0 0 1 1 9.9M15 13l-3-3m0 0-3 3m3-3v12"
    />
  </svg>
);
export default FileUploadIcon;

const ExternalLink = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2.5"
      d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"
    />
  </svg>
);
export default ExternalLink;

const Download = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M8.5 8v6m0 0-3-3m3 3 3-3m2 8h-10a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V17a2 2 0 0 1-2 2Z"
    />
  </svg>
);
export default Download;

const Discord = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" fill="none">
    <path
      fill="currentColor"
      d="M20.317 2.37A19.791 19.791 0 0 0 15.432.855a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.271 18.271 0 0 0-5.487 0 12.643 12.643 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.737 19.737 0 0 0 3.677 2.37a.07.07 0 0 0-.032.027C.533 7.046-.32 11.58.099 16.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.296 1.226-1.995.021-.04.001-.09-.041-.105a13.109 13.109 0 0 1-1.872-.893.077.077 0 0 1-.008-.127c.126-.095.252-.193.372-.292a.074.074 0 0 1 .078-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .079.01c.12.098.245.197.372.292.044.032.04.1-.006.127-.598.35-1.22.645-1.873.892a.077.077 0 0 0-.041.106c.36.699.772 1.363 1.225 1.994a.076.076 0 0 0 .084.028 19.834 19.834 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03ZM8.02 13.33c-1.182 0-2.157-1.086-2.157-2.419S6.82 8.493 8.02 8.493c1.21 0 2.176 1.095 2.157 2.42 0 1.332-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.086-2.157-2.419s.955-2.419 2.157-2.419c1.21 0 2.176 1.095 2.157 2.42 0 1.332-.946 2.418-2.157 2.418Z"
    />
  </svg>
);
export default Discord;

const Disconnect = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="m15 13 4-4m0 0-4-4m4 4H5m6 4v1a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1"
    />
  </svg>
);
export default Disconnect;

const DarkMode = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none">
    <rect
      width="38"
      height="38"
      x="1"
      y="1"
      fill="#171717"
      stroke="#FAFAFA"
      strokeWidth="2"
      rx="19"
    />
    <path
      stroke="#FAFAFA"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M28.354 23.354a9 9 0 0 1-11.708-11.708A9.003 9.003 0 0 0 20 29a9.003 9.003 0 0 0 8.354-5.646Z"
    />
  </svg>
);
export default DarkMode;

const Connect = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M9 13 5 9m0 0 4-4M5 9h14m-5 4v1a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h7a3 3 0 0 1 3 3v1"
    />
  </svg>
);
export default Connect;

const ClipboardIcon = () => (
  <svg
    width="19"
    height="21"
    viewBox="0 0 19 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M5.5 3.5H3.5C2.39543 3.5 1.5 4.39543 1.5 5.5V17.5C1.5 18.6046 2.39543 19.5 3.5 19.5H13.5C14.6046 19.5 15.5 18.6046 15.5 17.5V16.5M5.5 3.5C5.5 4.60457 6.39543 5.5 7.5 5.5H9.5C10.6046 5.5 11.5 4.60457 11.5 3.5M5.5 3.5C5.5 2.39543 6.39543 1.5 7.5 1.5H9.5C10.6046 1.5 11.5 2.39543 11.5 3.5M11.5 3.5H13.5C14.6046 3.5 15.5 4.39543 15.5 5.5V8.5M17.5 12.5H7.5M7.5 12.5L10.5 9.5M7.5 12.5L10.5 15.5"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
export default ClipboardIcon;

const CheckThinIcon = ({ color }: { color: string }) => (
  <svg
    width="28px"
    height="28px"
    viewBox="0 0 28 28"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g fill="none" fillRule="nonzero">
        <path
          d="M4.03033009,13.4696699 C3.73743687,13.1767767 3.26256313,13.1767767 2.96966991,13.4696699 C2.6767767,13.7625631 2.6767767,14.2374369 2.96966991,14.5303301 L9.96966991,21.5303301 C10.2625631,21.8232233 10.7374369,21.8232233 11.0303301,21.5303301 L25.0303301,7.53033009 C25.3232233,7.23743687 25.3232233,6.76256313 25.0303301,6.46966991 C24.7374369,6.1767767 24.2625631,6.1767767 23.9696699,6.46966991 L10.5,19.9393398 L4.03033009,13.4696699 Z"
          fill={color}
        />
      </g>
    </g>
  </svg>
);
export default CheckThinIcon;

const CheckIcon = () => (
  <svg
    width="15"
    height="10"
    viewBox="0 0 15 10"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M14.2071 0.292893C14.5976 0.683417 14.5976 1.31658 14.2071 1.70711L6.20711 9.70711C5.81658 10.0976 5.18342 10.0976 4.79289 9.70711L0.792893 5.70711C0.402369 5.31658 0.402369 4.68342 0.792893 4.29289C1.18342 3.90237 1.81658 3.90237 2.20711 4.29289L5.5 7.58579L12.7929 0.292893C13.1834 -0.0976311 13.8166 -0.0976311 14.2071 0.292893Z"
      fill="currentColor"
    />
  </svg>
);
export default CheckIcon;

const BrandWordmark = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="157" height="26" fill="none">
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="m12.785 25.177 5.528-16.475 5.88 16.475h1.054L30.263 9.79c.498-1.508 1.1-2.708 1.893-3.586.79-.872 1.779-1.439 3.08-1.666l.253-.045-.181-1.311-.247.015c-1.873.111-3.435.167-4.632.167-1.224 0-2.59-.055-4.52-.167l-.238-.014-.227 1.316.27.04c1.482.22 2.44.71 2.924 1.453.482.738.547 1.804.054 3.295l-3.173 9.702-5.71-16.045h-1.303L13.059 19.15 9.119 8.383c-.446-1.232-.357-2.076.124-2.657.498-.603 1.48-1.006 3.017-1.186l.262-.03-.138-1.33-.256.017c-1.7.111-4.299.167-5.527.167-1.197 0-3.04-.056-5.391-.168l-.235-.01L.75 4.48l.25.054c1.376.3 2.344.806 3.068 1.497.726.693 1.226 1.59 1.638 2.703l6.028 16.442h1.05Zm34.177-5.315.058-.196-.9-.55-.142.218c-2.33 3.617-7.48 3.51-9.782.433-.802-1.079-1.234-2.398-1.331-3.717l11.282.028.014-.253c.143-2.64-.654-4.509-1.98-5.714-1.32-1.197-3.127-1.707-4.95-1.707-4.522 0-7.519 3.768-7.519 8.359 0 4.835 3.52 8.414 7.743 8.414 4.04 0 6.606-2.263 7.507-5.315Zm3.21 4.896 1.614-2.23c1.139 1.653 2.965 2.65 5.67 2.65 4.348 0 7.518-3.707 7.518-8.36 0-4.687-3.374-8.414-7.715-8.414-2.19 0-3.787.692-4.885 1.888V8.167c0-2.106.277-4.338 1.128-6.453l.073-.18-.854-.712-.172.198c-.699.81-1.424 1.452-2.322 1.95-.897.5-1.98.863-3.4 1.098l-.222.037v1.249h.266c.942 0 1.533.397 1.905 1.03.385.654.544 1.577.544 2.623v7.588c0 3.514-.222 5.714-.501 7.861l-.04.302h1.392Zm27.193-1.105-.201.075.178 1.25.254-.026a40.74 40.74 0 0 1 3.698-.195c.89 0 2.56.056 3.92.195l.256.026.18-1.257-.21-.07c-1.096-.37-1.74-.8-2.12-1.358-.381-.56-.527-1.293-.527-2.338v-4.732c0-2.207-.388-3.911-1.212-5.069-.836-1.175-2.093-1.75-3.731-1.75-2.017 0-4.363 1.3-5.962 3.639.03-.882.108-1.857.29-3.023l.037-.24-1.19-.298-.106.137c-1.025 1.322-2.487 2.33-4.627 2.989l-.189.058v1.115l.246.02c.971.077 1.57.49 1.94 1.088.378.615.53 1.453.53 2.398v3.668c0 1.046-.146 1.786-.528 2.35-.38.56-1.023.99-2.115 1.344l-.214.07.18 1.254.25-.02c1.703-.14 3.095-.195 3.982-.195.89 0 2.56.055 3.92.194l.256.026.18-1.257-.21-.07c-1.096-.37-1.74-.8-2.12-1.358-.382-.56-.527-1.293-.527-2.338v-5.63c1.218-1.764 2.46-3.231 4.689-3.231 1.086 0 1.86.347 2.371 1.015.523.682.806 1.74.806 3.226v4.62c0 1.045-.145 1.79-.499 2.358-.35.562-.927.988-1.875 1.34Zm37.948-3.7.098-.218-1.039-.614-.14.21c-1.232 1.848-2.505 3.157-4.258 3.157-1.085 0-1.856-.346-2.368-1.046-.525-.716-.809-1.845-.809-3.475 0-2.761 0-4.954.049-7l6.758.358 1.341-1.832-.433-.675-7.62.303c.053-1.269.108-2.495.212-3.817l.019-.244-1.116-.186-.084.187c-.626 1.39-1.197 2.332-1.904 3-.701.661-1.556 1.071-2.786 1.358l-.206.048v1.214l.246.02c1.018.081 1.594.34 1.944.87.368.562.526 1.482.526 3.008v4.2c0 2.205.387 3.812 1.219 4.869.844 1.072 2.105 1.53 3.724 1.53 2.46 0 5.114-1.858 6.627-5.226Zm.65 3.696-.213.07.179 1.254.25-.02c1.703-.14 3.095-.195 3.982-.195.89 0 2.56.055 3.921.194l.255.026.18-1.257-.21-.07c-1.095-.37-1.739-.8-2.119-1.358-.382-.56-.528-1.293-.528-2.338V15.25c0-.323-.003-.64-.007-.957v-.001c-.016-1.509-.032-3.028.312-5.274l.037-.24-1.189-.297-.106.137c-1.025 1.322-2.488 2.33-4.628 2.989l-.188.058v1.115l.245.02c.972.077 1.571.49 1.94 1.088.379.615.531 1.453.531 2.398v3.668c0 1.046-.146 1.786-.528 2.35-.38.56-1.024.99-2.116 1.344Zm7.834-14.824-.25-.02-.179 1.25.209.072c2.029.694 3.079 2.019 4.157 4.286l.001.001 5.169 10.763h.927l4.999-10.992c.458-1.012.892-1.773 1.476-2.408.582-.632 1.328-1.152 2.425-1.66l.18-.083-.176-1.234-.255.026c-1.361.138-2.92.194-3.809.194-.845 0-1.357-.05-2.664-.178l-.42-.041-.184 1.292.254.044c1.067.187 1.642.633 1.881 1.184.244.564.175 1.318-.229 2.194v.001l-3.068 6.732-3.141-6.568c-.462-.965-.731-1.788-.675-2.398.027-.293.128-.527.314-.71.19-.188.492-.344.956-.435l.248-.05-.183-1.283-.251.021c-1.65.14-2.677.195-3.562.195-.887 0-2.448-.055-4.15-.195Zm33.111 11.037.058-.196-.901-.55-.141.218c-2.33 3.617-7.48 3.51-9.782.434-.802-1.08-1.234-2.399-1.331-3.718l11.282.028.014-.253c.143-2.64-.654-4.509-1.981-5.714-1.319-1.197-3.126-1.707-4.949-1.707-4.522 0-7.519 3.768-7.519 8.359 0 4.835 3.52 8.414 7.743 8.414 4.039 0 6.606-2.263 7.507-5.315Zm-120.05-9.29c-1.023.683-1.737 2.14-1.95 3.825l7.579.026c-.07-1.784-.834-3.143-1.866-3.868-1.076-.756-2.468-.845-3.762.018Zm15.654 6.269c-.22-1.727-.01-3.234.515-4.339.524-1.1 1.353-1.79 2.394-1.943 1.374-.196 2.642.303 3.647 1.355 1.01 1.056 1.755 2.673 2.043 4.69.261 2.01.05 3.719-.506 4.926-.554 1.2-1.437 1.888-2.545 1.938-2.674.104-5.023-2.535-5.548-6.627ZM119.74 6.446c1.235 0 2.255-.983 2.255-2.227 0-1.244-1.02-2.227-2.255-2.227a2.214 2.214 0 0 0-2.226 2.227c0 1.24.987 2.227 2.226 2.227Zm32.692 7.977-7.579-.026c.213-1.685.927-3.142 1.95-3.824 1.294-.863 2.687-.774 3.763-.018 1.032.725 1.796 2.084 1.866 3.868ZM92.724 25.178c2.608 0 4.371-.959 5.472-2.552l1.474 2.036c.05.07.13.11.216.11h.919a.268.268 0 0 0 .265-.3c-.045-.347-.089-.66-.13-.956l-.001-.005c-.205-1.478-.354-2.55-.354-5.371 0-1.64-.099-3.927-1.11-5.807-.508-.947-1.249-1.792-2.32-2.399-1.071-.606-2.456-.965-4.241-.965-4.197 0-7.456 3.602-7.456 8.132 0 4.494 3.063 8.077 7.266 8.077Zm1.826-14.54c.97.15 1.75.835 2.246 1.939.497 1.106.694 2.616.487 4.346-.247 2.034-.925 3.727-1.858 4.89-.931 1.163-2.103 1.786-3.358 1.735-1.03-.05-1.86-.727-2.384-1.933-.527-1.21-.726-2.922-.479-4.934.272-2.02.976-3.637 1.927-4.693.947-1.051 2.136-1.544 3.419-1.35Z"
      clipRule="evenodd"
    />
  </svg>
);
export default BrandWordmark;

import { useRecoilValue } from "recoil";
import { themeStore } from "../../stores";
const BrandLogo = () => {
  const theme = useRecoilValue(themeStore);
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="53" height="27" fill="none">
      <path
        fill="#F16583"
        d="M52.5 13.854c0 6.627-5.373 12-12 12s-12-5.373-12-12c0-6.628 5.373-12 12-12s12 5.372 12 12Z"
      />
      <path
        fill="#F16583"
        stroke={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        d="M26.5 26.354c6.904 0 12.5-5.597 12.5-12.5 0-6.904-5.596-12.5-12.5-12.5S14 6.95 14 13.854c0 6.903 5.596 12.5 12.5 12.5Z"
      />
      <path
        fill={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        stroke={theme.selectedTheme === "light" ? "#FAFAFA" : "#171717"}
        d="M12.745 26.354c6.757 0 12.214-5.608 12.214-12.5 0-6.893-5.457-12.5-12.214-12.5C5.988 1.354.53 6.96.53 13.854c0 6.892 5.458 12.5 12.215 12.5Z"
      />
      <path
        fill="#F16583"
        fillRule="evenodd"
        d="M12.745 21.597c4.174 0 7.559-3.467 7.559-7.744 0-4.276-3.385-7.743-7.56-7.743-4.174 0-7.558 3.467-7.558 7.744 0 4.276 3.384 7.743 7.559 7.743Zm0 4.256c6.47 0 11.714-5.372 11.714-12 0-6.627-5.245-12-11.714-12-6.47 0-11.715 5.373-11.715 12 0 6.628 5.245 12 11.715 12Z"
        clipRule="evenodd"
      />
    </svg>
  );
};
export default BrandLogo;

const Brand = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    width="35"
    height="35"
    viewBox="0 0 35 35"
    version="1.1"
  >
    <g id="surface1">
      <rect
        x="0"
        y="0"
        width="35"
        height="35"
        style={{ fill: 'rgb(12.54902%,12.941176%,14.117647%)', fillOpacity: 1, stroke: 'none' }}
      />
      <path
        style={{ stroke: 'none', fillRule: 'nonzero', fill: 'rgb(90.980392%,91.764706%,92.941176%)', fillOpacity: 1 }}
        d="M 2.039062 27.171875 L 4.1875 7.121094 C 5.070312 7.085938 5.898438 7.003906 6.671875 6.871094 C 7.460938 6.71875 8.242188 6.617188 9.011719 6.558594 C 9.011719 6.578125 8.984375 6.777344 8.925781 7.152344 C 8.871094 7.507812 8.796875 7.992188 8.703125 8.59375 C 8.609375 9.175781 8.507812 9.84375 8.394531 10.597656 C 8.277344 11.332031 8.109375 12.347656 7.886719 13.648438 C 7.675781 14.945312 7.398438 16.746094 7.039062 19.042969 L 7.460938 19.042969 C 7.949219 17.308594 8.355469 15.898438 8.675781 14.804688 C 8.996094 13.695312 9.25 12.800781 9.4375 12.125 C 9.644531 11.425781 9.832031 10.757812 10 10.117188 C 10.1875 9.476562 10.359375 8.882812 10.511719 8.339844 C 10.679688 7.792969 10.8125 7.332031 10.90625 6.957031 L 11.160156 6.957031 C 11.496094 6.957031 11.835938 6.933594 12.175781 6.898438 C 12.535156 6.859375 12.863281 6.820312 13.164062 6.785156 C 13.484375 6.730469 13.816406 6.664062 14.152344 6.589844 C 14.117188 6.757812 14.070312 7.105469 14.011719 7.632812 C 13.972656 8.160156 13.917969 8.800781 13.84375 9.554688 C 13.765625 10.289062 13.691406 11.105469 13.617188 12.011719 C 13.542969 12.890625 13.46875 13.769531 13.390625 14.636719 C 13.316406 15.484375 13.242188 16.292969 13.164062 17.0625 C 13.109375 17.835938 13.054688 18.496094 12.996094 19.042969 L 13.503906 19.042969 L 16.1875 6.898438 C 16.828125 6.804688 17.457031 6.71875 18.078125 6.644531 C 18.625 6.570312 19.1875 6.492188 19.773438 6.417969 C 20.355469 6.34375 20.875 6.257812 21.324219 6.164062 C 21.042969 6.957031 20.761719 7.839844 20.476562 8.816406 C 20.195312 9.777344 19.902344 10.792969 19.601562 11.867188 C 19.300781 12.941406 19.011719 14.023438 18.726562 15.113281 C 18.464844 16.207031 18.199219 17.261719 17.9375 18.28125 C 17.332031 20.6875 16.75 23.164062 16.1875 25.703125 L 9.804688 26.777344 L 11.046875 15.875 L 10.707031 15.875 L 7.914062 26.128906 Z M 18.007812 27.199219 C 18.535156 24.542969 19.042969 21.957031 19.535156 19.433594 C 19.722656 18.382812 19.917969 17.28125 20.128906 16.132812 C 20.355469 14.964844 20.558594 13.824219 20.746094 12.714844 C 20.933594 11.585938 21.105469 10.503906 21.257812 9.46875 C 21.425781 8.414062 21.558594 7.453125 21.652344 6.589844 C 22.234375 6.550781 22.800781 6.515625 23.34375 6.472656 C 23.835938 6.4375 24.332031 6.410156 24.84375 6.390625 C 25.351562 6.355469 25.800781 6.316406 26.199219 6.277344 C 26.441406 7.726562 26.660156 9.109375 26.847656 10.429688 C 26.941406 10.992188 27.035156 11.585938 27.128906 12.207031 C 27.242188 12.808594 27.347656 13.390625 27.441406 13.960938 C 27.535156 14.523438 27.628906 15.070312 27.722656 15.597656 C 27.816406 16.101562 27.910156 16.558594 28.003906 16.949219 C 28.078125 16.558594 28.164062 16.101562 28.261719 15.597656 C 28.351562 15.070312 28.457031 14.523438 28.570312 13.960938 C 28.683594 13.375 28.796875 12.78125 28.910156 12.179688 C 29.039062 11.578125 29.164062 10.992188 29.273438 10.429688 C 29.558594 9.109375 29.847656 7.734375 30.148438 6.304688 L 33.59375 5.882812 C 32.957031 8.707031 32.390625 11.378906 31.898438 13.902344 C 31.675781 14.996094 31.449219 16.09375 31.222656 17.207031 C 31.019531 18.316406 30.820312 19.386719 30.632812 20.421875 C 30.445312 21.457031 30.285156 22.417969 30.148438 23.304688 C 30.019531 24.167969 29.914062 24.902344 29.839844 25.503906 C 29.785156 25.503906 29.558594 25.554688 29.164062 25.648438 C 28.785156 25.722656 28.34375 25.816406 27.835938 25.929688 C 27.347656 26.042969 26.847656 26.164062 26.339844 26.296875 C 25.851562 26.410156 25.480469 26.503906 25.238281 26.578125 C 25.105469 25.054688 24.964844 23.605469 24.816406 22.230469 C 24.757812 21.644531 24.691406 21.042969 24.617188 20.421875 C 24.542969 19.804688 24.464844 19.210938 24.390625 18.644531 C 24.332031 18.082031 24.269531 17.550781 24.191406 17.0625 C 24.136719 16.558594 24.078125 16.132812 24.023438 15.792969 C 23.96875 16.132812 23.890625 16.546875 23.800781 17.035156 C 23.703125 17.523438 23.609375 18.050781 23.515625 18.617188 C 23.417969 19.160156 23.328125 19.734375 23.230469 20.339844 C 23.140625 20.921875 23.035156 21.496094 22.921875 22.058594 C 22.679688 23.394531 22.414062 24.789062 22.132812 26.238281 Z M 18.007812 27.199219 "
      />
    </g>
  </svg>
);
export default Brand;

const Alert = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" fill="none">
    <path
      fill="currentColor"
      fillRule="evenodd"
      d="M6.257 1.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.333-.213 2.98-1.742 2.98H2.42C.89 14-.073 12.353.677 11.02l5.58-9.92ZM9 10.999a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 3a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1Z"
      clipRule="evenodd"
    />
  </svg>
);
export default Alert;

const About = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      d="M11 14h-1v-4H9m1-4h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
    />
  </svg>
);
export default About;

import { Link } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import { sessionStore } from "../../stores";
import { appName } from '../../lib/app-info'
import Alert from "../../components/icons/Alert";
import Connect from "../../components/icons/Connect";
const Public = () => {
  const session = useRecoilValue(sessionStore)
  return (
    <div className="min-h-[calc(100vh-96px)] flex flex-col items-start justify-center max-w-[700px] m-auto gap-6 pb-5 text-sm">
      <h1 className="text-xl">Welcome to the {appName}</h1>
      <div className="max-w-[590px]">
        <p className="mb-5">
          The ODD SDK is a true local-first edge computing stack. Effortlessly
          give your users:
        </p>
        <ul className="mb-6 pl-6 list-disc">
          <li>
            <span className="font-bold">modern, passwordless accounts</span>,
            without a complex and costly cloud-native back-end
          </li>
          <li>
            <span className="font-bold">user-controlled data</span>, secured by
            default with our encrypted-at-rest file storage protocol
          </li>
          <li>
            <span className="font-bold">local-first functionality</span>,
            including the ability to work offline and collaborate across
            multiple devices
          </li>
        </ul>
        {session.error === "Unsupported Browser" ? (
          <div className="p-4 rounded-lg bg-base-content text-neutral-50">
            <h3 className="flex items-center gap-2 text-base">
              <span className="-translate-y-[2px]">
                <Alert />
              </span>
              Unsupported device
            </h3>
            <p>
              It appears this device isn’t supported. ODD requires
              IndexedDB in order to function. This browser doesn’t appear to
              implement this API. Are you in a Firefox private window?
            </p>
          </div>
        ) : (
          <div className="flex flex-col items-start gap-4">
            <Link
              className="btn btn-primary !btn-lg !h-10 gap-2"
              to="/register"
            >
              <Connect /> Connect this device
            </Link>
            <Link className="btn btn-outline" to="/recover">
              Recover an existing account
            </Link>
          </div>
        )}
      </div>
    </div>
  );
};
export default Public;

import { useRecoilValue } from 'recoil';
import { Link } from 'react-router-dom'
import { sessionStore } from '../../stores';
const Authed = () => {
  const session = useRecoilValue(sessionStore)
  return (
    <div className="min-h-[calc(100vh-128px)] md:min-h-[calc(100vh-160px)] pt-8 md:pt-16 flex flex-col items-start max-w-[690px] m-auto gap-10 pb-5 text-sm">
      <h1 className="text-xl">
        Welcome, <span className="font-bold">{session.username.trimmed}</span>!
      </h1>
      <div className="flex flex-col items-start justify-center gap-5">
        <h2 className="text-lg">Photo Gallery Demo</h2>
        <p>
          The ODD SDK makes it easy to implement private, encrypted, user-owned
          storage in your app. See it in action with our photo gallery demo.
        </p>
        <Link className="btn btn-primary" to="/gallery">
          Try the Photo Gallery Demo
        </Link>
      </div>
      <div className="flex flex-col items-start justify-center gap-5">
        <h2 className="text-lg">Device Connection Demo</h2>
        <p>
          With the ODD SDK, a user&apos;s account lives only on their
          connected devices — entirely under their control. It&apos;s easy for
          them to connect as many devices as they&apos;d like. For
          recoverability, we recommend they always connect at least two.
        </p>
        <Link className="btn btn-primary" to="/delegate-account">
          Connect an additional device
        </Link>
      </div>
    </div>
  );
};
export default Authed;

const LoadingSpinner = () => (
  <div className="loader ease-linear rounded-full border-4 border-t-4 border-t-orange-500 border-base-content h-16 w-16 animate-spin" />
);
export default LoadingSpinner;

import LoadingSpinner from './LoadingSpinner'
const FullScreenLoader = () => (
  <div className="flex items-center justify-center h-[calc(100vh-72px)] w-full">
    <LoadingSpinner />
  </div>
)
export default FullScreenLoader

type Props = {
  activity: 'Initializing' | 'Loading';
}
const FilesystemActivity = ({ activity }: Props) => (
  <>
    <input
      type="checkbox"
      id="my-modal-5"
      defaultChecked
      className="modal-toggle"
    />
    <div className="modal">
      <div className="modal-box rounded-lg shadow-sm w-narrowModal relative text-center">
        <p className="flex items-center justify-center text-base-content">
          <span className="rounded-lg border-t-2 border-l-2 border-base-content w-4 h-4 inline-block animate-spin mr-2" />
          {activity} file system...
        </p>
      </div>
    </div>
  </>
);
export default FilesystemActivity;

import { useRecoilValue } from "recoil";
import { Link } from "react-router-dom";
import { appName } from '../../../lib/app-info';
import { sessionStore } from '../../../stores';
import WelcomeCheckIcon from '../../icons/WelcomeCheckIcon'
const Welcome = () => {
  const session = useRecoilValue(sessionStore);
  return (
    <>
      <input
        type="checkbox"
        id="link-device-modal"
        defaultChecked
        className="modal-toggle"
      />
      <div className="modal">
        <div className="modal-box w-narrowModal relative text-center">
          <div>
            <h3 className="mb-14 text-base">Welcome, {session.username.trimmed}!</h3>
            <div className="flex justify-center mb-11 text-base-content">
              <WelcomeCheckIcon />
            </div>
            <div>
              <p className="mb-4 text-left">Your account has been created.</p>
              <div className="mb-8 text-left">
                <input
                  type="checkbox"
                  id="password-message"
                  className="peer hidden"
                />
                <label
                  className="text-blue-500 underline mb-8 hover:cursor-pointer peer-checked:hidden"
                  htmlFor="password-message"
                >
                  Wait&mdash;what&#39;s my password?
                </label>
                <p className="hidden peer-checked:block">
                  You don&#39;t need a password! <br />
                  {appName} uses public key cryptography to authenticate you
                  with this device.
                </p>
              </div>
              <Link className="btn btn-primary" to="/backup">
                Continue
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default Welcome;