From bc3c29d15c02aa898d7a4c105b11f8613aceae7b Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Sat, 1 Feb 2025 14:13:15 +0700
Subject: [PATCH 01/38] feat: add dropdown menu for import car

---
 src/files/FilesPage.js            |  3 ++-
 src/files/file-input/FileInput.js | 10 ++++++++++
 src/files/header/Header.js        |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index d9a837330..48d8d6b60 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -15,7 +15,7 @@ import FilesList from './files-list/FilesList.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
-import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
+import Modals, { DELETE, NEW_FOLDER, ADD_BY_CAR, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
 import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
@@ -206,6 +206,7 @@ const FilesPage = ({
         onAddFiles={onAddFiles}
         onMove={doFilesMove}
         onAddByPath={(files) => showModal(ADD_BY_PATH, files)}
+        onAddByCar={(files) => showModal(ADD_BY_CAR, files)}
         onNewFolder={(files) => showModal(NEW_FOLDER, files)}
         onCliTutorMode={() => showModal(CLI_TUTOR_MODE)}
         handleContextMenu={(...args) => handleContextMenu(...args, true)} />
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index c83ddfbc1..4ddb39bf8 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -50,6 +50,11 @@ class FileInput extends React.Component {
     this.toggleDropdown()
   }
 
+  onAddByCar = () => {
+    this.props.onAddByCar()
+    this.toggleDropdown()
+  }
+
   onNewFolder = () => {
     this.props.onNewFolder()
     this.toggleDropdown()
@@ -87,6 +92,10 @@ class FileInput extends React.Component {
               <DecentralizationIcon className='fill-aqua w2 mr1' />
               {t('addByPath')}
             </Option>
+            <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_CAR)}>
+              <DocumentIcon className='fill-aqua w2 mr1' />
+              {t('addByCar')}
+            </Option>
             <Option onClick={this.onNewFolder} id='add-new-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.CREATE_NEW_DIRECTORY)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
               <NewFolderIcon className='fill-aqua w2 h2 mr1' />
@@ -120,6 +129,7 @@ FileInput.propTypes = {
   t: PropTypes.func.isRequired,
   onAddFiles: PropTypes.func.isRequired,
   onAddByPath: PropTypes.func.isRequired,
+  onAddByCar: PropTypes.func.isRequired,
   onNewFolder: PropTypes.func.isRequired
 }
 
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index ce9142109..536dc323b 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -93,6 +93,7 @@ class Header extends React.Component {
                   onNewFolder={this.props.onNewFolder}
                   onAddFiles={this.props.onAddFiles}
                   onAddByPath={this.props.onAddByPath}
+                  onAddByCar={this.props.onAddByCar}
                   onCliTutorMode={this.props.onCliTutorMode}
                 />
                 : <div ref={el => { this.dotsWrapper = el }}>

From d97c86714168ea28a74ec333543e15fcecaff374 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Sat, 1 Feb 2025 14:13:48 +0700
Subject: [PATCH 02/38] feat: add modal for import car

---
 src/files/modals/Modals.js                    | 14 +++++++
 .../modals/add-by-car-modal/AddByCarModal.js  | 41 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/files/modals/add-by-car-modal/AddByCarModal.js

diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index 33208190b..e2f2adfd5 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -14,12 +14,14 @@ import PublishModal from './publish-modal/PublishModal.js'
 import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
 import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
 import { realMfsPath } from '../../bundles/files/actions.js'
+import AddByCarModal from './add-by-car-modal/AddByCarModal.js'
 // Constants
 const NEW_FOLDER = 'new_folder'
 const SHARE = 'share'
 const RENAME = 'rename'
 const DELETE = 'delete'
 const ADD_BY_PATH = 'add_by_path'
+const ADD_BY_CAR = 'add_by_car'
 const CLI_TUTOR_MODE = 'cli_tutor_mode'
 const PINNING = 'pinning'
 const PUBLISH = 'publish'
@@ -30,6 +32,7 @@ export {
   RENAME,
   DELETE,
   ADD_BY_PATH,
+  ADD_BY_CAR,
   CLI_TUTOR_MODE,
   PINNING,
   PUBLISH
@@ -63,6 +66,11 @@ class Modals extends React.Component {
     this.leave()
   }
 
+  onAddByCar = (path, name) => {
+    console.log('todo: integrate add file')
+    this.leave()
+  }
+
   makeDir = (path) => {
     this.props.onMakeDir(join(this.props.root, path))
     this.leave()
@@ -150,6 +158,7 @@ class Modals extends React.Component {
       }
       case NEW_FOLDER:
       case ADD_BY_PATH:
+      case ADD_BY_CAR:
         this.setState({ readyToShow: true })
         break
       case CLI_TUTOR_MODE:
@@ -254,6 +263,10 @@ class Modals extends React.Component {
             onCancel={this.leave} />
         </Overlay>
 
+        <Overlay show={show === ADD_BY_CAR && readyToShow} onLeave={this.leave}>
+          <AddByCarModal className='outline-0' onSubmit={this.onAddByCar} onCancel={this.leave} />
+        </Overlay>
+
         <Overlay show={show === CLI_TUTOR_MODE && readyToShow} onLeave={this.leave}>
           <CliTutorMode onLeave={this.leave} filesPage={true} command={command} t={t}/>
         </Overlay>
@@ -283,6 +296,7 @@ Modals.propTypes = {
   show: PropTypes.string,
   files: PropTypes.array,
   onAddByPath: PropTypes.func.isRequired,
+  onAddByCar: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onMakeDir: PropTypes.func.isRequired,
   onShareLink: PropTypes.func.isRequired,
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
new file mode 100644
index 000000000..6d76406bb
--- /dev/null
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import Modal, { ModalActions, ModalBody } from '../../../components/modal/Modal'
+import Icon from '../../../icons/StrokeDecentralization.js'
+import Button from '../../../components/button/button'
+
+class AddByCarModal extends React.Component {
+  static propTypes = {
+    onCancel: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    className: PropTypes.string
+  }
+
+  static defaultProps = {
+    className: ''
+  }
+
+  render () {
+    const {
+      t, className, onCancel, onSubmit
+    } = this.props
+
+    return (
+      <Modal className={className} onCancel={onCancel}>
+        <ModalBody title='Add by CAR' Icon={Icon}>
+          <div className='mb3 flex flex-column items-center'>
+            <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description') + ' ' + t('addByCarModal.examples')}</p>
+          </div>
+        </ModalBody>
+
+        <ModalActions>
+          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={onSubmit}>{t('app:actions.import')}</Button>
+        </ModalActions>
+      </Modal>
+    )
+  }
+}
+
+export default withTranslation('files')(AddByCarModal)

From a3d74182bc099d6c801629e7246240b9b161460a Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Sat, 1 Feb 2025 14:14:36 +0700
Subject: [PATCH 03/38] locale: add en locale

---
 public/locales/en/files.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 0614e005d..f995e8982 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -14,6 +14,7 @@
   "openWithLocalAndPublicGateway": "Try opening it instead with your <1>local gateway</1> or <3>public gateway</3>.",
   "cantBePreviewed": "Sorry, this file can’t be previewed",
   "addByPath": "From IPFS",
+  "addByCar": "From CAR",
   "newFolder": "New folder",
   "generating": "Generating…",
   "actions": {
@@ -59,6 +60,11 @@
     "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },
+  "addByCarModal": {
+    "title": "Import from CAR",
+    "description": "Insert a CAR file to import",
+    "examples": "Examples:"
+  },
   "newFolderModal": {
     "title": "New folder",
     "description": "Insert the name of the folder you want to create."

From 9488c3df60e8fe25e602a1491b16b6467bb79746 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Sat, 1 Feb 2025 22:03:27 +0700
Subject: [PATCH 04/38] refactor,feat: change to functional component, add
 check file, rename file and validate file name

---
 .../modals/add-by-car-modal/AddByCarModal.js  | 108 +++++++++++++-----
 1 file changed, 80 insertions(+), 28 deletions(-)

diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 6d76406bb..d4bc7d862 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -1,41 +1,93 @@
-import React from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import { withTranslation } from 'react-i18next'
-import PropTypes from 'prop-types'
 import Modal, { ModalActions, ModalBody } from '../../../components/modal/Modal'
 import Icon from '../../../icons/StrokeDecentralization.js'
 import Button from '../../../components/button/button'
+import { normalizeFiles } from '../../../lib/files.js'
 
-class AddByCarModal extends React.Component {
-  static propTypes = {
-    onCancel: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    className: PropTypes.string
+const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
+  const fileInputRef = useRef(null)
+
+  const [file, setFile] = useState()
+  const [name, setName] = useState('')
+
+  const onAddFileButtonClick = () => {
+    if (fileInputRef) fileInputRef.current.click()
+  }
+
+  const onFileInputChange = (event) => {
+    const files = normalizeFiles(event.target.files)
+
+    if (files[0]) {
+      const fileName = files[0].path
+      setFile(files[0])
+      setName(fileName)
+    }
   }
 
-  static defaultProps = {
-    className: ''
+  const onNameChange = (e) => {
+    e.preventDefault()
+    setName(e.target.value)
   }
 
-  render () {
-    const {
-      t, className, onCancel, onSubmit
-    } = this.props
-
-    return (
-      <Modal className={className} onCancel={onCancel}>
-        <ModalBody title='Add by CAR' Icon={Icon}>
-          <div className='mb3 flex flex-column items-center'>
-            <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description') + ' ' + t('addByCarModal.examples')}</p>
-          </div>
-        </ModalBody>
-
-        <ModalActions>
-          <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
-          <Button className='ma2 tc' bg='bg-teal' disabled={this.isDisabled} onClick={onSubmit}>{t('app:actions.import')}</Button>
-        </ModalActions>
-      </Modal>
-    )
+  // TODO: Handling submit
+  const onSubmitFile = () => {
+    console.log('submitting file', file, file.path, name)
+    // onSubmit()
   }
+
+  const isValidated = useMemo(() => {
+    return name.endsWith('.car')
+  }, [name])
+
+  const isDisabled = useMemo(() => {
+    return !file || !isValidated
+  }, [file, isValidated])
+
+  const inputClass = useMemo(() => {
+    if (!file) return
+    if (isValidated) {
+      return 'b--green-muted focus-outline-green'
+    } else {
+      return 'b--red-muted focus-outline-red'
+    }
+  }, [isValidated, file])
+
+  return (
+    <Modal className={className} onCancel={onCancel}>
+      <ModalBody title='Add by CAR' Icon={Icon}>
+        <div className='mb3 flex flex-row items-center'>
+          <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description') + ' ' + t('addByCarModal.examples')}</p>
+        </div>
+
+        <div className='flex flex-row justify-center'>
+          <Button className='mr2' onClick={onAddFileButtonClick}>Add file</Button>
+          <input
+            onChange={onNameChange}
+            value={name}
+            name='name'
+            placeholder={t('addByCarModal.namePlaceholder')}
+            className={`input-reset charcoal ba b--black-20 br1 pa2 db w-90 center focus-outline ${inputClass}`}
+            type='text'
+          />
+        </div>
+        <input
+          className='dn'
+          ref={fileInputRef}
+          id='file-input'
+          type='file'
+          placeholder='File'
+          accept='.car'
+          onChange={onFileInputChange}
+        />
+      </ModalBody>
+
+      <ModalActions>
+        <Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
+        <Button className='ma2 tc' bg='bg-teal' disabled={isDisabled} onClick={onSubmitFile}>{t('app:actions.import')}</Button>
+      </ModalActions>
+    </Modal>
+  )
 }
 
 export default withTranslation('files')(AddByCarModal)

From f0b44df5586a3ba03d01cf9e0a68361dc0272737 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Sat, 1 Feb 2025 22:47:56 +0700
Subject: [PATCH 05/38] feat: wiring handling uploading car dag file

---
 src/bundles/files/actions.js                       | 11 +++++++++++
 src/bundles/files/consts.js                        |  3 +++
 src/files/FilesPage.js                             |  5 ++++-
 src/files/modals/Modals.js                         |  4 ++--
 src/files/modals/add-by-car-modal/AddByCarModal.js |  3 +--
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index d3f349a33..92190774d 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -398,6 +398,17 @@ const actions = () => ({
     }
   }),
 
+  /**
+   * Adds CAR file. On completion will trigger `doFilesFetch` to update the state.
+   * @param {File} file
+   * @param {string} name
+   */
+  doAddCarFile: (file, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+    ensureMFS(store)
+
+    console.log('todo: implement upload to ipfs', file, name)
+  }),
+
   /**
    * Creates a download link for the provided files.
    * @param {FileStat[]} files
diff --git a/src/bundles/files/consts.js b/src/bundles/files/consts.js
index b5fdac0dc..f21b30fbf 100644
--- a/src/bundles/files/consts.js
+++ b/src/bundles/files/consts.js
@@ -23,6 +23,8 @@ export const ACTIONS = {
   SHARE_LINK: ('FILES_SHARE_LINK'),
   /** @type {'FILES_ADDBYPATH'} */
   ADD_BY_PATH: ('FILES_ADDBYPATH'),
+  /** @type {'FILES_ADD_CAR'} */
+  ADD_CAR_FILE: ('FILES_ADD_CAR'),
   /** @type {'FILES_PIN_ADD'} */
   PIN_ADD: ('FILES_PIN_ADD'),
   /** @type {'FILES_PIN_REMOVE'} */
@@ -78,6 +80,7 @@ export const cliCmdKeys = {
   ADD_DIRECTORY: 'addNewDirectory',
   CREATE_NEW_DIRECTORY: 'createNewDirectory',
   FROM_IPFS: 'fromIpfs',
+  FROM_CAR: 'fromCar',
   ADD_NEW_PEER: 'addNewPeer',
   PUBLISH_WITH_IPNS: 'publishWithIPNS',
   DOWNLOAD_CAR_COMMAND: 'downloadCarCommand'
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 48d8d6b60..661becaab 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -21,7 +21,7 @@ import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'
 
 const FilesPage = ({
-  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doUpdateHash,
+  doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doAddCarFile, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
   ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
@@ -73,6 +73,7 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
+  const onAddByCar = (file, name) => doAddCarFile(file, name)
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})
@@ -227,6 +228,7 @@ const FilesPage = ({
         onShareLink={doFilesShareLink}
         onRemove={doFilesDelete}
         onAddByPath={onAddByPath}
+        onAddByCar={onAddByCar}
         onPinningSet={doSetPinning}
         onPublish={doPublishIpnsKey}
         cliOptions={cliOptions}
@@ -273,6 +275,7 @@ export default connect(
   'doFilesShareLink',
   'doFilesDelete',
   'doFilesAddPath',
+  'doAddCarFile',
   'doFilesNavigateTo',
   'doFilesUpdateSorting',
   'selectFilesSorting',
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index e2f2adfd5..f15d0e566 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -66,8 +66,8 @@ class Modals extends React.Component {
     this.leave()
   }
 
-  onAddByCar = (path, name) => {
-    console.log('todo: integrate add file')
+  onAddByCar = (file, name) => {
+    this.props.onAddByCar(file, name)
     this.leave()
   }
 
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index d4bc7d862..958aa178e 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -30,10 +30,9 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     setName(e.target.value)
   }
 
-  // TODO: Handling submit
   const onSubmitFile = () => {
     console.log('submitting file', file, file.path, name)
-    // onSubmit()
+    onSubmit(file, name)
   }
 
   const isValidated = useMemo(() => {

From 742de351fd95a0f0845a36c4a14f649dce5e5050 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 3 Feb 2025 21:29:16 +0700
Subject: [PATCH 06/38] locale: add placeholder

---
 public/locales/en/files.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index f995e8982..3864e74ef 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -63,6 +63,7 @@
   "addByCarModal": {
     "title": "Import from CAR",
     "description": "Insert a CAR file to import",
+    "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },
   "newFolderModal": {

From e381d4e726ae1d23c828908520e481d49529fa0b Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 3 Feb 2025 21:29:32 +0700
Subject: [PATCH 07/38] feat: add import car file

---
 src/bundles/files/actions.js | 23 +++++++++++++++++++++--
 src/files/FilesPage.js       |  6 +++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 92190774d..9013f0f1b 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -403,10 +403,29 @@ const actions = () => ({
    * @param {File} file
    * @param {string} name
    */
-  doAddCarFile: (file, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+  doAddCarFile: (file, name = '', root = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
-    console.log('todo: implement upload to ipfs', file, name)
+    try {
+      const result = await ipfs.add(file, {
+        pin: false,
+        wrapWithDirectory: false
+      })
+      const src = `/ipfs/${result.cid}`
+      const dst = join(realMfsPath(root || '/files'), result.path)
+      try {
+        await ipfs.files.cp(src, dst)
+      } catch (err) {
+        // TODO: Not sure why we do this. Perhaps a generic error is used
+        // to avoid leaking private information via Countly?
+        throw Object.assign(new Error('ipfs.files.cp call failed'), {
+          code: 'ERR_FILES_CP_FAILED'
+        })
+      }
+      return file
+    } finally {
+      await store.doFilesFetch()
+    }
   }),
 
   /**
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 661becaab..bc200e386 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,7 +73,11 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
-  const onAddByCar = (file, name) => doAddCarFile(file, name)
+  const onAddByCar = (file, name, root = '') => {
+    if (root === '') root = files.path
+
+    doAddCarFile(file, name, root)
+  }
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})

From 40f58d00f4991091022fbb0edfbe88cd1cd621a9 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 3 Feb 2025 21:43:45 +0700
Subject: [PATCH 08/38] refactor: clear unused params

---
 src/bundles/files/actions.js | 4 ++--
 src/files/FilesPage.js       | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 9013f0f1b..68a2e4679 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -403,7 +403,7 @@ const actions = () => ({
    * @param {File} file
    * @param {string} name
    */
-  doAddCarFile: (file, name = '', root = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+  doAddCarFile: (file, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
     try {
@@ -412,7 +412,7 @@ const actions = () => ({
         wrapWithDirectory: false
       })
       const src = `/ipfs/${result.cid}`
-      const dst = join(realMfsPath(root || '/files'), result.path)
+      const dst = join(realMfsPath('/files'), name)
       try {
         await ipfs.files.cp(src, dst)
       } catch (err) {
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index bc200e386..9ba993d06 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,10 +73,8 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
-  const onAddByCar = (file, name, root = '') => {
-    if (root === '') root = files.path
-
-    doAddCarFile(file, name, root)
+  const onAddByCar = (file, name) => {
+    doAddCarFile(file, name)
   }
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })

From 5e324f3bd1f68b1b0616eeef9993e4b4d7e3253c Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Tue, 4 Feb 2025 19:23:08 +0700
Subject: [PATCH 09/38] update dependency

---
 package-lock.json | 313 +++++++++++++++++++++++++++++++++++++++++++---
 package.json      |   2 +-
 2 files changed, 300 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8450b4613..25a1bbc22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "it-first": "^1.0.6",
         "it-last": "^1.0.5",
         "it-map": "^1.0.5",
-        "kubo-rpc-client": "^4.1.1",
+        "kubo-rpc-client": "^5.0.2",
         "milliseconds": "^1.0.3",
         "money-clip": "^3.0.5",
         "multiformats": "^13.0.1",
@@ -6752,6 +6752,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@libp2p/interface/-/interface-1.7.0.tgz",
       "integrity": "sha512-/zFyaIaIGW0aihhsH7/93vQdpWInUzFocxF11RO/029Y6h0SVjs24HHbils+DqaFDTqN+L7oNlBx2rM2MnmTjA==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "@multiformats/multiaddr": "^12.2.3",
@@ -6766,6 +6767,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/it-pushable/-/it-pushable-3.2.3.tgz",
       "integrity": "sha512-gzYnXYK8Y5t5b/BnJUr7glfQLO4U5vyb05gPx/TyTw+4Bv1zM9gFk4YsOrnulWefMewlphCjKkakFvj1y99Tcg==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "p-defer": "^4.0.0"
@@ -6775,6 +6777,7 @@
       "version": "4.0.20",
       "resolved": "https://registry.npmjs.org/@libp2p/logger/-/logger-4.0.20.tgz",
       "integrity": "sha512-TTh2dhHsOTAlMPxSa9ncFPHa/0jTt+0AQxwHdlxg/OGLAgc9VRhnrhHUbJZp07Crcw4T/MOfS4KhjlxgqYgJRw==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "@libp2p/interface": "^1.7.0",
@@ -6788,6 +6791,7 @@
       "version": "8.3.1",
       "resolved": "https://registry.npmjs.org/interface-datastore/-/interface-datastore-8.3.1.tgz",
       "integrity": "sha512-3r0ETmHIi6HmvM5sc09QQiCD3gUfwtEM/AAChOyAd/UAKT69uk8LXfTSUBufbUIO/dU65Vj8nb9O6QjwW8vDSQ==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "interface-store": "^6.0.0",
@@ -6798,12 +6802,14 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/interface-store/-/interface-store-6.0.2.tgz",
       "integrity": "sha512-KSFCXtBlNoG0hzwNa0RmhHtrdhzexp+S+UY2s0rWTBJyfdEIgn6i6Zl9otVqrcFYbYrneBT7hbmHQ8gE0C3umA==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT"
     },
     "node_modules/@libp2p/logger/node_modules/uint8arrays": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-5.1.0.tgz",
       "integrity": "sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==",
+      "dev": true,
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "multiformats": "^13.0.0"
@@ -41534,6 +41540,81 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/@ipld/dag-cbor": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@ipld/dag-cbor/-/dag-cbor-9.2.2.tgz",
+      "integrity": "sha512-uIEOuruCqKTP50OBWwgz4Js2+LhiBQaxc57cnP71f45b1mHEAo1OCR1Zn/TbvSW/mV1x+JqhacIktkKyaYqhCw==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "cborg": "^4.0.0",
+        "multiformats": "^13.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/@libp2p/peer-id": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@libp2p/peer-id/-/peer-id-4.2.4.tgz",
+      "integrity": "sha512-mvvsVxt4HkF14BrTNKbqr14VObW+KBJBWu1Oe6BFCoDttGMQLaI+PdduE1r6Tquntv5IONBqoITgD7ow5dQ+vQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@libp2p/interface": "^1.7.0",
+        "multiformats": "^13.1.0",
+        "uint8arrays": "^5.1.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/@multiformats/multiaddr-to-uri": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@multiformats/multiaddr-to-uri/-/multiaddr-to-uri-10.1.2.tgz",
+      "integrity": "sha512-6sicfYRjJlHJn4bwsQancs8kXncWU4dDN/+V9sMVTYp9hi8ovWgVkK75AbAv4SfhztmmI+oufVUncQ1n+SukKQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@multiformats/multiaddr": "^12.3.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/any-signal": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/any-signal/-/any-signal-4.1.1.tgz",
+      "integrity": "sha512-iADenERppdC+A2YKbOXXB2WUeABLaM6qnpZ70kZbPZ1cZMMJ7eF+3CaYm+/PhBizgkzlvssC7QuHS30oOiQYWA==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/blob-to-it": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/blob-to-it/-/blob-to-it-2.0.7.tgz",
+      "integrity": "sha512-mFAR/GKDDqFOkSBB7shXfsUZwU5DgK453++I8/SImNacfJsdKlx/oHTO0T4ZYHz8A2dnSONE+CX8L29VlWGKiQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "browser-readablestream-to-it": "^2.0.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/browser-readablestream-to-it": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/browser-readablestream-to-it/-/browser-readablestream-to-it-2.0.7.tgz",
+      "integrity": "sha512-g1Aznml3HmqTLSXylZhGwdfnAa67+vlNAYhT9ROJZkAxY7yYmWusND10olvCMPe4sVhZyVwn5tPkRzOg85kBEg==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT"
+    },
+    "node_modules/ipfsd-ctl/node_modules/cborg": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/cborg/-/cborg-4.2.8.tgz",
+      "integrity": "sha512-z9M+TZCWQbf89Gl8ulpYThM9fqmkjBDdMiq+wS72OAK2zqDaXNquoAWFDrAKHQAukVtPspmadB9chuFC0ut7ew==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "cborg": "lib/bin.js"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -41581,6 +41662,17 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/ipfs-unixfs": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/ipfs-unixfs/-/ipfs-unixfs-11.2.0.tgz",
+      "integrity": "sha512-J8FN1qM5nfrDo8sQKQwfj0+brTg1uBfZK2vY9hxci33lcl3BFrsELS9+1+4q/8tO1ASKfxZO8W3Pi2O4sVX2Lg==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "protons-runtime": "^5.5.0",
+        "uint8arraylist": "^2.4.8"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/is-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@@ -41594,6 +41686,95 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/it-all": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/it-all/-/it-all-3.0.6.tgz",
+      "integrity": "sha512-HXZWbxCgQZJfrv5rXvaVeaayXED8nTKx9tj9fpBhmcUJcedVZshMMMqTj0RG2+scGypb9Ut1zd1ifbf3lA8L+Q==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT"
+    },
+    "node_modules/ipfsd-ctl/node_modules/it-first": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/it-first/-/it-first-3.0.6.tgz",
+      "integrity": "sha512-ExIewyK9kXKNAplg2GMeWfgjUcfC1FnUXz/RPfAvIXby+w7U4b3//5Lic0NV03gXT8O/isj5Nmp6KiY0d45pIQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT"
+    },
+    "node_modules/ipfsd-ctl/node_modules/it-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/it-glob/-/it-glob-3.0.1.tgz",
+      "integrity": "sha512-IUWE9f6XVUJLugK7pQmQPqTWj4BiQJhufnvxfsCmNIGEDQEkKVs3Ld9gFZq/Vude6g/OpndhsiuFrA730Bc59A==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.2"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/it-last": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/it-last/-/it-last-3.0.6.tgz",
+      "integrity": "sha512-M4/get95O85u2vWvWQinF8SJUc/RPC5bWTveBTYXvlP2q5TF9Y+QhT3nz+CRCyS2YEc66VJkyl/da6WrJ0wKhw==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT"
+    },
+    "node_modules/ipfsd-ctl/node_modules/it-map": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/it-map/-/it-map-3.1.1.tgz",
+      "integrity": "sha512-9bCSwKD1yN1wCOgJ9UOl+46NQtdatosPWzxxUk2NdTLwRPXLh+L7iwCC9QKsbgM60RQxT/nH8bKMqm3H/o8IHQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "it-peekable": "^3.0.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/it-peekable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/it-peekable/-/it-peekable-3.0.5.tgz",
+      "integrity": "sha512-JWQOGMt6rKiPcY30zUVMR4g6YxkpueTwHVE7CMs/aGqCf4OydM6w+7ZM3PvmO1e0TocjuR4aL8xyZWR46cTqCQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT"
+    },
+    "node_modules/ipfsd-ctl/node_modules/kubo-rpc-client": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/kubo-rpc-client/-/kubo-rpc-client-4.1.3.tgz",
+      "integrity": "sha512-MIU723O+2rU9/GStPpi6pM4uDlbLCpXY5cNNVl77WyiHpXYkfPoPUeTw2Du6v6ss7sF/ouP9NrxcNjDXu7HMKA==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@ipld/dag-cbor": "^9.0.0",
+        "@ipld/dag-json": "^10.0.0",
+        "@ipld/dag-pb": "^4.0.0",
+        "@libp2p/interface": "^1.2.0",
+        "@libp2p/logger": "^4.0.10",
+        "@libp2p/peer-id": "^4.0.10",
+        "@multiformats/multiaddr": "^12.2.1",
+        "@multiformats/multiaddr-to-uri": "^10.0.1",
+        "any-signal": "^4.1.1",
+        "blob-to-it": "^2.0.5",
+        "browser-readablestream-to-it": "^2.0.5",
+        "dag-jose": "^5.0.0",
+        "electron-fetch": "^1.9.1",
+        "err-code": "^3.0.1",
+        "ipfs-unixfs": "^11.1.4",
+        "iso-url": "^1.2.1",
+        "it-all": "^3.0.4",
+        "it-first": "^3.0.4",
+        "it-glob": "^3.0.1",
+        "it-last": "^3.0.4",
+        "it-map": "^3.0.5",
+        "it-peekable": "^3.0.3",
+        "it-to-stream": "^1.0.0",
+        "merge-options": "^3.0.4",
+        "multiformats": "^13.1.0",
+        "nanoid": "^5.0.7",
+        "native-fetch": "^4.0.2",
+        "parse-duration": "^1.0.2",
+        "react-native-fetch-api": "^3.0.0",
+        "stream-to-it": "^1.0.1",
+        "uint8arrays": "^5.0.3",
+        "wherearewe": "^2.0.1"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -41626,6 +41807,16 @@
         "node": "^18 || >=20"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/native-fetch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/native-fetch/-/native-fetch-4.0.2.tgz",
+      "integrity": "sha512-4QcVlKFtv2EYVS5MBgsGX5+NWKtbDbIECdUXDBGDMAZXq3Jkv9zf+y8iS7Ub8fEdga3GpYeazp9gauNqXHJOCg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "undici": "*"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -41671,6 +41862,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/react-native-fetch-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz",
+      "integrity": "sha512-g2rtqPjdroaboDKTsJCTlcmtw54E25OjyaunUP0anOZn4Fuo2IKs8BVfe02zVggA/UysbmfSnRJIqtNkAgggNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-defer": "^3.0.0"
+      }
+    },
+    "node_modules/ipfsd-ctl/node_modules/react-native-fetch-api/node_modules/p-defer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-3.0.0.tgz",
+      "integrity": "sha512-ugZxsxmtTln604yeYd29EGrNhazN2lywetzpKhfmQjW/VJmhpDmWbiX+h0zL8V91R0UXkhb3KtPmyq9PZw3aYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -41684,6 +41895,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/stream-to-it": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-to-it/-/stream-to-it-1.0.1.tgz",
+      "integrity": "sha512-AqHYAYPHcmvMrcLNgncE/q0Aj/ajP6A4qGhxP6EVn7K3YTNs0bJpJyk57wc2Heb7MUL64jurvmnmui8D9kjZgA==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "it-stream-types": "^2.0.1"
+      }
+    },
     "node_modules/ipfsd-ctl/node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@@ -41697,6 +41918,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ipfsd-ctl/node_modules/uint8arrays": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-5.1.0.tgz",
+      "integrity": "sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "multiformats": "^13.0.0"
+      }
+    },
     "node_modules/ipld-explorer-components": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/ipld-explorer-components/-/ipld-explorer-components-8.1.3.tgz",
@@ -47727,17 +47958,18 @@
       }
     },
     "node_modules/kubo-rpc-client": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/kubo-rpc-client/-/kubo-rpc-client-4.1.3.tgz",
-      "integrity": "sha512-MIU723O+2rU9/GStPpi6pM4uDlbLCpXY5cNNVl77WyiHpXYkfPoPUeTw2Du6v6ss7sF/ouP9NrxcNjDXu7HMKA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/kubo-rpc-client/-/kubo-rpc-client-5.0.2.tgz",
+      "integrity": "sha512-0w8VUwpxtkynLlJsAnM+es3qR6Nvv0/oqg0I+sCgI65rh8OPoBYpsk58/miD+u/OkIhJKBwslfeJ9y7Ujb40+g==",
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
         "@ipld/dag-cbor": "^9.0.0",
         "@ipld/dag-json": "^10.0.0",
         "@ipld/dag-pb": "^4.0.0",
-        "@libp2p/interface": "^1.2.0",
-        "@libp2p/logger": "^4.0.10",
-        "@libp2p/peer-id": "^4.0.10",
+        "@libp2p/crypto": "^5.0.0",
+        "@libp2p/interface": "^2.0.0",
+        "@libp2p/logger": "^5.0.0",
+        "@libp2p/peer-id": "^5.0.0",
         "@multiformats/multiaddr": "^12.2.1",
         "@multiformats/multiaddr-to-uri": "^10.0.1",
         "any-signal": "^4.1.1",
@@ -47780,15 +48012,31 @@
         "npm": ">=7.0.0"
       }
     },
-    "node_modules/kubo-rpc-client/node_modules/@libp2p/peer-id": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@libp2p/peer-id/-/peer-id-4.2.4.tgz",
-      "integrity": "sha512-mvvsVxt4HkF14BrTNKbqr14VObW+KBJBWu1Oe6BFCoDttGMQLaI+PdduE1r6Tquntv5IONBqoITgD7ow5dQ+vQ==",
+    "node_modules/kubo-rpc-client/node_modules/@libp2p/interface": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@libp2p/interface/-/interface-2.4.1.tgz",
+      "integrity": "sha512-G80+rWn0d1+txM7TXMs+eK79qXdtS3yfepx2uGA5Kc7WSzXicwMN1Qw6ZJAB58SExdfQ0oWlS0E/v7kr8B025g==",
       "license": "Apache-2.0 OR MIT",
       "dependencies": {
-        "@libp2p/interface": "^1.7.0",
-        "multiformats": "^13.1.0",
-        "uint8arrays": "^5.1.0"
+        "@multiformats/multiaddr": "^12.3.3",
+        "it-pushable": "^3.2.3",
+        "it-stream-types": "^2.0.2",
+        "multiformats": "^13.3.1",
+        "progress-events": "^1.0.1",
+        "uint8arraylist": "^2.4.8"
+      }
+    },
+    "node_modules/kubo-rpc-client/node_modules/@libp2p/logger": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/@libp2p/logger/-/logger-5.1.7.tgz",
+      "integrity": "sha512-mR0J6jonOXa1MXQGt2XrnAu40eNafzUbTYeTCBad4aAlEFbDnP1r628tsYHo4Mih7Ajexr9iPo9a1TrD39uHaA==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "@libp2p/interface": "^2.4.1",
+        "@multiformats/multiaddr": "^12.3.3",
+        "interface-datastore": "^8.3.1",
+        "multiformats": "^13.3.1",
+        "weald": "^1.0.4"
       }
     },
     "node_modules/kubo-rpc-client/node_modules/@multiformats/multiaddr-to-uri": {
@@ -47834,6 +48082,22 @@
         "cborg": "lib/bin.js"
       }
     },
+    "node_modules/kubo-rpc-client/node_modules/interface-datastore": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/interface-datastore/-/interface-datastore-8.3.1.tgz",
+      "integrity": "sha512-3r0ETmHIi6HmvM5sc09QQiCD3gUfwtEM/AAChOyAd/UAKT69uk8LXfTSUBufbUIO/dU65Vj8nb9O6QjwW8vDSQ==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "interface-store": "^6.0.0",
+        "uint8arrays": "^5.1.0"
+      }
+    },
+    "node_modules/kubo-rpc-client/node_modules/interface-store": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/interface-store/-/interface-store-6.0.2.tgz",
+      "integrity": "sha512-KSFCXtBlNoG0hzwNa0RmhHtrdhzexp+S+UY2s0rWTBJyfdEIgn6i6Zl9otVqrcFYbYrneBT7hbmHQ8gE0C3umA==",
+      "license": "Apache-2.0 OR MIT"
+    },
     "node_modules/kubo-rpc-client/node_modules/ipfs-unixfs": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/ipfs-unixfs/-/ipfs-unixfs-11.2.0.tgz",
@@ -47886,6 +48150,27 @@
       "integrity": "sha512-JWQOGMt6rKiPcY30zUVMR4g6YxkpueTwHVE7CMs/aGqCf4OydM6w+7ZM3PvmO1e0TocjuR4aL8xyZWR46cTqCQ==",
       "license": "Apache-2.0 OR MIT"
     },
+    "node_modules/kubo-rpc-client/node_modules/it-pushable": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/it-pushable/-/it-pushable-3.2.3.tgz",
+      "integrity": "sha512-gzYnXYK8Y5t5b/BnJUr7glfQLO4U5vyb05gPx/TyTw+4Bv1zM9gFk4YsOrnulWefMewlphCjKkakFvj1y99Tcg==",
+      "license": "Apache-2.0 OR MIT",
+      "dependencies": {
+        "p-defer": "^4.0.0"
+      }
+    },
+    "node_modules/kubo-rpc-client/node_modules/it-pushable/node_modules/p-defer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-4.0.1.tgz",
+      "integrity": "sha512-Mr5KC5efvAK5VUptYEIopP1bakB85k2IWXaRC0rsh1uwn1L6M0LVml8OIQ4Gudg4oyZakf7FmeRLkMMtZW1i5A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/kubo-rpc-client/node_modules/nanoid": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz",
diff --git a/package.json b/package.json
index 77446f700..a59b47e5a 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "it-first": "^1.0.6",
     "it-last": "^1.0.5",
     "it-map": "^1.0.5",
-    "kubo-rpc-client": "^4.1.1",
+    "kubo-rpc-client": "^5.0.2",
     "milliseconds": "^1.0.3",
     "money-clip": "^3.0.5",
     "multiformats": "^13.0.1",

From ce09977f56f5726daeb653099e083d41cb3a76e6 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Wed, 5 Feb 2025 00:09:55 +0700
Subject: [PATCH 10/38] refactor: cleanup modal

---
 src/files/modals/add-by-car-modal/AddByCarModal.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 958aa178e..11f6e520b 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -19,8 +19,9 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     const files = normalizeFiles(event.target.files)
 
     if (files[0]) {
+      const file = files[0]
       const fileName = files[0].path
-      setFile(files[0])
+      setFile(file)
       setName(fileName)
     }
   }
@@ -31,7 +32,6 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
   }
 
   const onSubmitFile = () => {
-    console.log('submitting file', file, file.path, name)
     onSubmit(file, name)
   }
 

From e7001ec334988074d5b04ff396b918ee76b06c23 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Wed, 5 Feb 2025 00:10:14 +0700
Subject: [PATCH 11/38] feat: update types

---
 src/bundles/files/utils.js | 3 ++-
 src/lib/files.js           | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index 58749d97d..143262787 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -4,6 +4,7 @@ import * as Task from '../task.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
+ * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('./actions').Ext} Ext
  * @typedef {import('./actions').Extra} Extra
  */
@@ -118,7 +119,7 @@ export const spawn = (type, task, ...[init]) => async (context) => {
  * @template {BundlerContext<State, Perform<Type, Error, Success, Init>, Ext, Extra>} Context
  *
  * @param {Type} type - Type of the actions this will dispatch.
- * @param {(service:IPFSService, context:Context) => Promise<Success>} task
+ * @param {(service:KuboRPCClient, context:Context) => Promise<Success>} task
  * @param {Init[]} rest
  * @returns {(context:Context) => Promise<Success>}
  */
diff --git a/src/lib/files.js b/src/lib/files.js
index fb1fa6302..54337cb1a 100644
--- a/src/lib/files.js
+++ b/src/lib/files.js
@@ -1,6 +1,7 @@
 import filesize from 'filesize'
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
+ * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('../bundles/files/actions').FileStat} FileStat
  * @typedef {import('multiformats/cid').CID} CID
  */
@@ -53,7 +54,7 @@ function getDownloadURL (type, name, cid, gatewayUrl) {
 
 /**
  * @param {FileStat[]} files
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @returns {Promise<CID>}
  */
 export async function makeCIDFromFiles (files, ipfs) {
@@ -80,7 +81,7 @@ export async function makeCIDFromFiles (files, ipfs) {
  *
  * @param {FileStat[]} files
  * @param {string} gatewayUrl
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @returns {Promise<string>}
  */
 export async function getDownloadLink (files, gatewayUrl, ipfs) {
@@ -98,7 +99,7 @@ export async function getDownloadLink (files, gatewayUrl, ipfs) {
  * @param {FileStat[]} files - An array of file objects with their respective CIDs and names.
  * @param {string} gatewayUrl - The URL of the default IPFS gateway.
  * @param {string} subdomainGatewayUrl - The URL of the subdomain gateway.
- * @param {IPFSService} ipfs - The IPFS service instance for interacting with the IPFS network.
+ * @param {KuboRPCClient} ipfs - The IPFS service instance for interacting with the IPFS network.
  * @returns {Promise<string>} - A promise that resolves to the shareable link for the provided files.
  */
 export async function getShareableLink (files, gatewayUrl, subdomainGatewayUrl, ipfs) {
@@ -136,7 +137,7 @@ export async function getShareableLink (files, gatewayUrl, subdomainGatewayUrl,
  *
  * @param {FileStat[]} files
  * @param {string} gatewayUrl
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @returns {Promise<string>}
  */
 export async function getCarLink (files, gatewayUrl, ipfs) {

From f1abecf67117f219cbc513b36099a8e28835a429 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Wed, 5 Feb 2025 00:13:58 +0700
Subject: [PATCH 12/38] feat: wip on dag import

---
 src/bundles/files/actions.js | 40 +++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 68a2e4679..962827be9 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -14,6 +14,7 @@ import { IGNORED_FILES, ACTIONS } from './consts.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
+ * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('../../lib/files').FileStream} FileStream
  * @typedef {import('./utils').Info} Info
  * @typedef {import('ipfs').Pin} Pin
@@ -52,7 +53,7 @@ const fileFromStats = ({ cumulativeSize, type, size, cid, name, path, pinned, is
 })
 
 /**
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @param {string|CID} cidOrPath
  * @returns {Promise<number>}
  */
@@ -84,7 +85,7 @@ const memStat = memoize((path, ipfs) => ipfs.files.stat(path))
  * @property {number} cumulativeSize
  * @property {number} size
  *
- * @param {IPFSService} ipfs
+ * @param {import('kubo-rpc-client').KuboRPCClient} ipfs
  * @param {string|CID} cidOrPath
  * @returns {Promise<Stat>}
  */
@@ -120,7 +121,7 @@ const stat = async (ipfs, cidOrPath) => {
 
 /**
  *
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @returns {AsyncIterable<Pin>}
  */
 const getRawPins = async function * (ipfs) {
@@ -129,7 +130,7 @@ const getRawPins = async function * (ipfs) {
 }
 
 /**
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @returns {AsyncIterable<CID>}
  */
 const getPinCIDs = (ipfs) => map(getRawPins(ipfs), (pin) => pin.cid)
@@ -400,18 +401,29 @@ const actions = () => ({
 
   /**
    * Adds CAR file. On completion will trigger `doFilesFetch` to update the state.
-   * @param {File} file
+   * @param {FileStream} carFile
    * @param {string} name
    */
-  doAddCarFile: (file, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+  doAddCarFile: (carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
+    const stream = carFile.content.stream().pipeThrough(new TextDecoderStream())
+    const reader = stream.getReader()
+
+    let fileResultStr = ''
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      fileResultStr += value
+    }
+    const encoder = new TextEncoder()
+    const fileResult = encoder.encode(fileResultStr)
     try {
-      const result = await ipfs.add(file, {
-        pin: false,
-        wrapWithDirectory: false
-      })
-      const src = `/ipfs/${result.cid}`
+      const result = await all(ipfs.dag.import([fileResult], {
+        pinRoots: true
+      }))
+      const cid = result[0].root.cid
+      const src = `/ipfs/${cid}`
       const dst = join(realMfsPath('/files'), name)
       try {
         await ipfs.files.cp(src, dst)
@@ -422,7 +434,7 @@ const actions = () => ({
           code: 'ERR_FILES_CP_FAILED'
         })
       }
-      return file
+      return carFile
     } finally {
       await store.doFilesFetch()
     }
@@ -626,7 +638,7 @@ const importFiles = (ipfs, files) => {
 }
 
 /**
- * @param {IPFSService} ipfs
+ * @param {KuboRPCClient} ipfs
  * @param {CID} cid
  * @param {Object} options
  * @param {string} options.path
@@ -650,7 +662,7 @@ const dirStats = async (ipfs, cid, { path, isRoot, sorting }) => {
     const absPath = join(path, f.name)
     let file = null
 
-    if (dirCount < 1000 && (f.type === 'directory' || f.type === 'dir')) {
+    if (dirCount < 1000 && (f.type === 'dir')) {
       dirCount += 1
       file = fileFromStats({ ...await stat(ipfs, f.cid), path: absPath })
     } else {

From 1eb486fb2c0b7379be28693964d158a1bb7f6e5e Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 6 Feb 2025 22:22:35 +0700
Subject: [PATCH 13/38] feat: add util

---
 src/bundles/files/utils.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index 143262787..e555f653c 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -5,6 +5,7 @@ import * as Task from '../task.js'
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
  * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
+ * @typedef {import('../../lib/files').FileStream} FileStream
  * @typedef {import('./actions').Ext} Ext
  * @typedef {import('./actions').Extra} Extra
  */
@@ -316,3 +317,22 @@ export const ensureMFS = (store) => {
     throw new Error('Unable to perform task if not in MFS')
   }
 }
+
+/**
+ * Get bytes from file
+ * @param {FileStream} file
+ * @returns {Promise<Uint8Array<ArrayBuffer>>}
+ */
+export const fileToByteArray = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      const arrayBuffer = reader.result
+      if (arrayBuffer === null) resolve(new Uint8Array([]))
+      const byteArray = new Uint8Array(arrayBuffer)
+      resolve(byteArray)
+    }
+    reader.onerror = (error) => reject(error)
+    reader.readAsArrayBuffer(file.content)
+  })
+}

From 0e6bdd47afa04a70842555c15ae77213efe4f194 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 6 Feb 2025 22:23:39 +0700
Subject: [PATCH 14/38] feat: fix parse file for dag import

---
 src/bundles/files/actions.js | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 962827be9..34fd03dec 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -9,7 +9,7 @@ import map from 'it-map'
 import last from 'it-last'
 import { CID } from 'multiformats/cid'
 
-import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils.js'
+import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath, fileToByteArray } from './utils.js'
 import { IGNORED_FILES, ACTIONS } from './consts.js'
 
 /**
@@ -407,17 +407,7 @@ const actions = () => ({
   doAddCarFile: (carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
-    const stream = carFile.content.stream().pipeThrough(new TextDecoderStream())
-    const reader = stream.getReader()
-
-    let fileResultStr = ''
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      fileResultStr += value
-    }
-    const encoder = new TextEncoder()
-    const fileResult = encoder.encode(fileResultStr)
+    const fileResult = await fileToByteArray(carFile)
     try {
       const result = await all(ipfs.dag.import([fileResult], {
         pinRoots: true

From f2271cc59891b86e3679e33700ab9db4e7a78e53 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 6 Feb 2025 22:49:06 +0700
Subject: [PATCH 15/38] docs: Add AddByCarModal as storybook

---
 .../add-by-car-modal/AddByCarModal.stories.js | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/files/modals/add-by-car-modal/AddByCarModal.stories.js

diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.stories.js b/src/files/modals/add-by-car-modal/AddByCarModal.stories.js
new file mode 100644
index 000000000..841ffc97b
--- /dev/null
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.stories.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import i18n from '../../../i18n-decorator.js'
+import AddByCarModal from './AddByCarModal'
+
+/**
+ * @type {import('@storybook/react').Meta}
+ */
+export default {
+  title: 'Files/Modals',
+  decorators: [i18n]
+}
+
+/**
+ * @type {import('@storybook/react').StoryObj}
+ */
+export const AddCar = () => (
+  <div className="ma3">
+    <AddByCarModal onCancel={action('Cancel')} onSubmit={action('Submit')} />
+  </div>
+)

From d234a6012a899e52fdac1c44730c0e7f7af6412e Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 6 Feb 2025 23:15:26 +0700
Subject: [PATCH 16/38] fix: fix typecheck error

---
 src/bundles/files/utils.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index e555f653c..37eff63a4 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -321,18 +321,21 @@ export const ensureMFS = (store) => {
 /**
  * Get bytes from file
  * @param {FileStream} file
- * @returns {Promise<Uint8Array<ArrayBuffer>>}
+ * @returns {Promise<Uint8Array>}
  */
 export const fileToByteArray = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.onloadend = () => {
       const arrayBuffer = reader.result
-      if (arrayBuffer === null) resolve(new Uint8Array([]))
-      const byteArray = new Uint8Array(arrayBuffer)
-      resolve(byteArray)
+      if (arrayBuffer instanceof ArrayBuffer) {
+        const byteArray = new Uint8Array(arrayBuffer)
+        resolve(byteArray)
+      } else {
+        resolve(new Uint8Array([]))
+      }
     }
-    reader.onerror = (error) => reject(error)
+    reader.onerror = () => reject(new Error('fileToByteArray failed'))
     reader.readAsArrayBuffer(file.content)
   })
 }

From ab8b11f184766237d65234d70d778c0bb9a4524d Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Fri, 7 Feb 2025 08:32:00 +0700
Subject: [PATCH 17/38] fix: revert back

---
 src/bundles/files/actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 34fd03dec..2cc839d14 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -652,7 +652,7 @@ const dirStats = async (ipfs, cid, { path, isRoot, sorting }) => {
     const absPath = join(path, f.name)
     let file = null
 
-    if (dirCount < 1000 && (f.type === 'dir')) {
+    if (dirCount < 1000 && (f.type === 'directory' || f.type === 'dir')) {
       dirCount += 1
       file = fileFromStats({ ...await stat(ipfs, f.cid), path: absPath })
     } else {

From 3820dade1887eb6fe845592a8f89f26951a80bcd Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 10 Feb 2025 14:30:37 +0700
Subject: [PATCH 18/38] feat: update types of IPFSService

---
 @types/ipfs/index.d.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/@types/ipfs/index.d.ts b/@types/ipfs/index.d.ts
index a12a4975e..5a4325744 100644
--- a/@types/ipfs/index.d.ts
+++ b/@types/ipfs/index.d.ts
@@ -1,3 +1,5 @@
+import { DAGImportOptions, DAGImportResult } from 'kubo-rpc-client';
+
 declare module 'ipfs' {
   import type { CID } from 'multiformats/cid'
   import type { Multiaddr } from '@multiformats/multiaddr'
@@ -9,6 +11,7 @@ declare module 'ipfs' {
     name: NameService;
     object: ObjectService;
     config: ConfigService;
+    dag: DagService;
 
     stop(options?: TimeoutOptions): Promise<void>
   }
@@ -52,6 +55,10 @@ declare module 'ipfs' {
     profiles: ConfigProfiles;
   }
 
+  declare export interface DAGService {
+    import(sources: Iterable<Uint8Array> | AsyncIterable<Uint8Array> | AsyncIterable<AsyncIterable<Uint8Array>> | Iterable<AsyncIterable<Uint8Array>>, options?: DAGImportOptions): AsyncIterable<DAGImportResult>
+  }
+
   declare export interface ConfigProfiles {
     list(options?: TimeoutOptions): Promise<Array<{ name: string, description: string }>>;
     apply(name: string, options?: { dryRun?: boolean } & TimeoutOptions): Promise<{ original: Object, updated: Object }>;

From e5b82d2c09f1e8ea630eda65985a4acc89ee5c1a Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 10 Feb 2025 14:34:41 +0700
Subject: [PATCH 19/38] feat: revert types to use modified type

---
 src/bundles/files/actions.js | 11 +++++------
 src/bundles/files/utils.js   |  3 +--
 src/lib/files.js             |  8 ++++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 2cc839d14..ac2c7bb99 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -14,7 +14,6 @@ import { IGNORED_FILES, ACTIONS } from './consts.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
- * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('../../lib/files').FileStream} FileStream
  * @typedef {import('./utils').Info} Info
  * @typedef {import('ipfs').Pin} Pin
@@ -53,7 +52,7 @@ const fileFromStats = ({ cumulativeSize, type, size, cid, name, path, pinned, is
 })
 
 /**
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @param {string|CID} cidOrPath
  * @returns {Promise<number>}
  */
@@ -85,7 +84,7 @@ const memStat = memoize((path, ipfs) => ipfs.files.stat(path))
  * @property {number} cumulativeSize
  * @property {number} size
  *
- * @param {import('kubo-rpc-client').KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @param {string|CID} cidOrPath
  * @returns {Promise<Stat>}
  */
@@ -121,7 +120,7 @@ const stat = async (ipfs, cidOrPath) => {
 
 /**
  *
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @returns {AsyncIterable<Pin>}
  */
 const getRawPins = async function * (ipfs) {
@@ -130,7 +129,7 @@ const getRawPins = async function * (ipfs) {
 }
 
 /**
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @returns {AsyncIterable<CID>}
  */
 const getPinCIDs = (ipfs) => map(getRawPins(ipfs), (pin) => pin.cid)
@@ -628,7 +627,7 @@ const importFiles = (ipfs, files) => {
 }
 
 /**
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @param {CID} cid
  * @param {Object} options
  * @param {string} options.path
diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index 37eff63a4..822884335 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -4,7 +4,6 @@ import * as Task from '../task.js'
 
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
- * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('../../lib/files').FileStream} FileStream
  * @typedef {import('./actions').Ext} Ext
  * @typedef {import('./actions').Extra} Extra
@@ -120,7 +119,7 @@ export const spawn = (type, task, ...[init]) => async (context) => {
  * @template {BundlerContext<State, Perform<Type, Error, Success, Init>, Ext, Extra>} Context
  *
  * @param {Type} type - Type of the actions this will dispatch.
- * @param {(service:KuboRPCClient, context:Context) => Promise<Success>} task
+ * @param {(service:IPFSService, context:Context) => Promise<Success>} task
  * @param {Init[]} rest
  * @returns {(context:Context) => Promise<Success>}
  */
diff --git a/src/lib/files.js b/src/lib/files.js
index 54337cb1a..35438ff55 100644
--- a/src/lib/files.js
+++ b/src/lib/files.js
@@ -54,7 +54,7 @@ function getDownloadURL (type, name, cid, gatewayUrl) {
 
 /**
  * @param {FileStat[]} files
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @returns {Promise<CID>}
  */
 export async function makeCIDFromFiles (files, ipfs) {
@@ -81,7 +81,7 @@ export async function makeCIDFromFiles (files, ipfs) {
  *
  * @param {FileStat[]} files
  * @param {string} gatewayUrl
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @returns {Promise<string>}
  */
 export async function getDownloadLink (files, gatewayUrl, ipfs) {
@@ -99,7 +99,7 @@ export async function getDownloadLink (files, gatewayUrl, ipfs) {
  * @param {FileStat[]} files - An array of file objects with their respective CIDs and names.
  * @param {string} gatewayUrl - The URL of the default IPFS gateway.
  * @param {string} subdomainGatewayUrl - The URL of the subdomain gateway.
- * @param {KuboRPCClient} ipfs - The IPFS service instance for interacting with the IPFS network.
+ * @param {IPFSService} ipfs - The IPFS service instance for interacting with the IPFS network.
  * @returns {Promise<string>} - A promise that resolves to the shareable link for the provided files.
  */
 export async function getShareableLink (files, gatewayUrl, subdomainGatewayUrl, ipfs) {
@@ -137,7 +137,7 @@ export async function getShareableLink (files, gatewayUrl, subdomainGatewayUrl,
  *
  * @param {FileStat[]} files
  * @param {string} gatewayUrl
- * @param {KuboRPCClient} ipfs
+ * @param {IPFSService} ipfs
  * @returns {Promise<string>}
  */
 export async function getCarLink (files, gatewayUrl, ipfs) {

From fb82d3c6456b2b85b441cbaacfa0923bd6b19a6c Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 10 Feb 2025 14:44:52 +0700
Subject: [PATCH 20/38] refactor: remove unused

---
 src/lib/files.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/files.js b/src/lib/files.js
index 35438ff55..fb1fa6302 100644
--- a/src/lib/files.js
+++ b/src/lib/files.js
@@ -1,7 +1,6 @@
 import filesize from 'filesize'
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
- * @typedef {import('kubo-rpc-client').KuboRPCClient} KuboRPCClient
  * @typedef {import('../bundles/files/actions').FileStat} FileStat
  * @typedef {import('multiformats/cid').CID} CID
  */

From 0576322c3a5423a254c8669ca1bef75e57ff88cf Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Tue, 11 Feb 2025 09:38:41 +0700
Subject: [PATCH 21/38] refactor: move definition from imports to local

---
 @types/ipfs/index.d.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/@types/ipfs/index.d.ts b/@types/ipfs/index.d.ts
index 5a4325744..df7a2f0bb 100644
--- a/@types/ipfs/index.d.ts
+++ b/@types/ipfs/index.d.ts
@@ -1,5 +1,3 @@
-import { DAGImportOptions, DAGImportResult } from 'kubo-rpc-client';
-
 declare module 'ipfs' {
   import type { CID } from 'multiformats/cid'
   import type { Multiaddr } from '@multiformats/multiaddr'
@@ -55,6 +53,17 @@ declare module 'ipfs' {
     profiles: ConfigProfiles;
   }
 
+  declare export interface DAGImportOptions {
+    pinRoots: boolean;
+  }
+
+  declare export interface DAGImportResult {
+    root: {
+      cid: CID;
+      pinErrorMsg?: string;
+    };
+  }
+
   declare export interface DAGService {
     import(sources: Iterable<Uint8Array> | AsyncIterable<Uint8Array> | AsyncIterable<AsyncIterable<Uint8Array>> | Iterable<AsyncIterable<Uint8Array>>, options?: DAGImportOptions): AsyncIterable<DAGImportResult>
   }

From 23ab754016923a210a369ef1d57537545d9d5496 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 24 Feb 2025 20:45:44 +0700
Subject: [PATCH 22/38] refactor: change to pass stream to dag import

---
 src/bundles/files/actions.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index ac2c7bb99..19e830149 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -9,7 +9,7 @@ import map from 'it-map'
 import last from 'it-last'
 import { CID } from 'multiformats/cid'
 
-import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath, fileToByteArray } from './utils.js'
+import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils.js'
 import { IGNORED_FILES, ACTIONS } from './consts.js'
 
 /**
@@ -406,9 +406,9 @@ const actions = () => ({
   doAddCarFile: (carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
-    const fileResult = await fileToByteArray(carFile)
+    const stream = carFile.content.stream()
     try {
-      const result = await all(ipfs.dag.import([fileResult], {
+      const result = await all(ipfs.dag.import(stream, {
         pinRoots: true
       }))
       const cid = result[0].root.cid

From fb0f1c260477f8f5808bc7dda89c2475a06308c2 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Mon, 24 Feb 2025 20:45:55 +0700
Subject: [PATCH 23/38] refactor: remove unused util

---
 src/bundles/files/utils.js | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index 822884335..a980cc020 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -316,25 +316,3 @@ export const ensureMFS = (store) => {
     throw new Error('Unable to perform task if not in MFS')
   }
 }
-
-/**
- * Get bytes from file
- * @param {FileStream} file
- * @returns {Promise<Uint8Array>}
- */
-export const fileToByteArray = (file) => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onloadend = () => {
-      const arrayBuffer = reader.result
-      if (arrayBuffer instanceof ArrayBuffer) {
-        const byteArray = new Uint8Array(arrayBuffer)
-        resolve(byteArray)
-      } else {
-        resolve(new Uint8Array([]))
-      }
-    }
-    reader.onerror = () => reject(new Error('fileToByteArray failed'))
-    reader.readAsArrayBuffer(file.content)
-  })
-}

From 2b16988b50470e5915e1955359c2334658ca5bfd Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 27 Feb 2025 19:09:17 +0700
Subject: [PATCH 24/38] typo: Update wording

---
 public/locales/en/files.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 3864e74ef..ccf9a0c6a 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -62,7 +62,7 @@
   },
   "addByCarModal": {
     "title": "Import from CAR",
-    "description": "Insert a CAR file to import",
+    "description": "Select a CAR file to import",
     "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },

From 9277e501f4a23c02a779673e48ef21ad0a02cab3 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 27 Feb 2025 19:15:54 +0700
Subject: [PATCH 25/38] typo: Update wording in select file button

---
 src/files/modals/add-by-car-modal/AddByCarModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 11f6e520b..658a7fd79 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -60,7 +60,7 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
         </div>
 
         <div className='flex flex-row justify-center'>
-          <Button className='mr2' onClick={onAddFileButtonClick}>Add file</Button>
+          <Button className='mr2' onClick={onAddFileButtonClick}>{t('addByCarModal.selectCARButtonText')}</Button>
           <input
             onChange={onNameChange}
             value={name}

From 979eba892cd4c02d15f7f3622884a4098c753d88 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 27 Feb 2025 19:16:59 +0700
Subject: [PATCH 26/38] type: Update i18n, use wording for title in i18n

---
 public/locales/en/files.json                       | 1 +
 src/files/modals/add-by-car-modal/AddByCarModal.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index ccf9a0c6a..74c72ef1b 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -63,6 +63,7 @@
   "addByCarModal": {
     "title": "Import from CAR",
     "description": "Select a CAR file to import",
+    "selectCARButtonText": "Select CAR…",
     "namePlaceholder": "Name (optional)",
     "examples": "Examples:"
   },
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 658a7fd79..7bdfc776f 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -54,7 +54,7 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
 
   return (
     <Modal className={className} onCancel={onCancel}>
-      <ModalBody title='Add by CAR' Icon={Icon}>
+      <ModalBody title={t('addByCarModal.title')} Icon={Icon}>
         <div className='mb3 flex flex-row items-center'>
           <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description') + ' ' + t('addByCarModal.examples')}</p>
         </div>

From f886da99ca31ce66ae4f5f5bf9c7808d49cfda81 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 27 Feb 2025 21:09:19 +0700
Subject: [PATCH 27/38] fix: fix logic on file name

---
 .../modals/add-by-car-modal/AddByCarModal.js   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 7bdfc776f..829223c6d 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -20,9 +20,11 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
 
     if (files[0]) {
       const file = files[0]
-      const fileName = files[0].path
+      const fileName = files[0].path.replaceAll('.car', '')
       setFile(file)
-      setName(fileName)
+      if (name.length === 0) {
+        setName(fileName)
+      }
     }
   }
 
@@ -35,22 +37,22 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     onSubmit(file, name)
   }
 
-  const isValidated = useMemo(() => {
-    return name.endsWith('.car')
+  const isFileNameValid = useMemo(() => {
+    return name
   }, [name])
 
   const isDisabled = useMemo(() => {
-    return !file || !isValidated
-  }, [file, isValidated])
+    return !file || !isFileNameValid
+  }, [file, isFileNameValid])
 
   const inputClass = useMemo(() => {
     if (!file) return
-    if (isValidated) {
+    if (isFileNameValid) {
       return 'b--green-muted focus-outline-green'
     } else {
       return 'b--red-muted focus-outline-red'
     }
-  }, [isValidated, file])
+  }, [isFileNameValid, file])
 
   return (
     <Modal className={className} onCancel={onCancel}>

From 0ea5a82a17160c7362ae3e63dbc368138dc8c1f2 Mon Sep 17 00:00:00 2001
From: Yuttakhan Baingen <yuttakhanbaingen@gmail.com>
Date: Thu, 27 Feb 2025 21:59:48 +0700
Subject: [PATCH 28/38] fix: fix import to relative path within mfs

---
 src/bundles/files/actions.js | 5 +++--
 src/files/FilesPage.js       | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 19e830149..afe6455aa 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -400,10 +400,11 @@ const actions = () => ({
 
   /**
    * Adds CAR file. On completion will trigger `doFilesFetch` to update the state.
+   * @param {string} root
    * @param {FileStream} carFile
    * @param {string} name
    */
-  doAddCarFile: (carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+  doAddCarFile: (root, carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
     ensureMFS(store)
 
     const stream = carFile.content.stream()
@@ -413,7 +414,7 @@ const actions = () => ({
       }))
       const cid = result[0].root.cid
       const src = `/ipfs/${cid}`
-      const dst = join(realMfsPath('/files'), name)
+      const dst = realMfsPath(join(root, name))
       try {
         await ipfs.files.cp(src, dst)
       } catch (err) {
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 9ba993d06..4c2ab1518 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -74,7 +74,7 @@ const FilesPage = ({
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
   const onAddByCar = (file, name) => {
-    doAddCarFile(file, name)
+    doAddCarFile(files.path, file, name)
   }
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
   const showModal = (modal, files = null) => setModals({ show: modal, files })

From 9ef609587a5484f6cf63a85ba98ae2b967aa4446 Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Wed, 5 Mar 2025 00:22:21 +0100
Subject: [PATCH 29/38] fix: icon, label, and styling

making  UI match bulk import feature
---
 public/locales/en/files.json                  |  7 +++--
 src/files/file-input/FileInput.js             | 13 ++++-----
 .../modals/add-by-car-modal/AddByCarModal.js  | 27 +++++++++----------
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 5f934e08d..ddc652288 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -62,11 +62,10 @@
     "examples": "Examples:"
   },
   "addByCarModal": {
-    "title": "Import from CAR",
-    "description": "Select a CAR file to import",
+    "title": "CAR Import",
+    "description": "Choose a CAR file to import a DAG from and specify a name for it to be imported into the current directory.",
     "selectCARButtonText": "Select CAR…",
-    "namePlaceholder": "Name (optional)",
-    "examples": "Examples:"
+    "namePlaceholder": "Name"
   },
   "bulkImportModal": {
     "title": "Bulk import with text file",
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 92a7adb10..26fea06ae 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -8,6 +8,7 @@ import DocumentIcon from '../../icons/StrokeDocument.js'
 import FolderIcon from '../../icons/StrokeFolder.js'
 import NewFolderIcon from '../../icons/StrokeNewFolder.js'
 import DecentralizationIcon from '../../icons/StrokeDecentralization.js'
+import DataIcon from '../../icons/StrokeData.js'
 // Components
 import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown.js'
 import Button from '../../components/button/button.tsx'
@@ -92,20 +93,20 @@ class FileInput extends React.Component {
               <FolderIcon className='fill-aqua w2 mr1' />
               {t('app:terms.folder')}
             </Option>
+            <Option onClick={this.onNewFolder} id='add-new-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.CREATE_NEW_DIRECTORY)}
+              isCliTutorModeEnabled={isCliTutorModeEnabled}>
+              <NewFolderIcon className='fill-aqua w2 h2 mr1' />
+              {t('newFolder')}
+            </Option>
             <Option onClick={this.onAddByPath} id='add-by-path' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_IPFS)}
               isCliTutorModeEnabled={isCliTutorModeEnabled}>
               <DecentralizationIcon className='fill-aqua w2 mr1' />
               {t('addByPath')}
             </Option>
             <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_CAR)}>
-              <DocumentIcon className='fill-aqua w2 mr1' />
+              <DataIcon className='fill-aqua w2 mr1' />
               {t('addByCar')}
             </Option>
-            <Option onClick={this.onNewFolder} id='add-new-folder' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.CREATE_NEW_DIRECTORY)}
-              isCliTutorModeEnabled={isCliTutorModeEnabled}>
-              <NewFolderIcon className='fill-aqua w2 h2 mr1' />
-              {t('newFolder')}
-            </Option>
             <Option onClick={this.onBulkCidImport} id='bulk-cid-import'>
               <DocumentIcon className='fill-aqua w2 mr1' />
               {t('bulkImport')}
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index 829223c6d..dda351a00 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useRef, useState } from 'react'
 import { withTranslation } from 'react-i18next'
 import Modal, { ModalActions, ModalBody } from '../../../components/modal/Modal'
-import Icon from '../../../icons/StrokeDecentralization.js'
+import Icon from '../../../icons/StrokeData.js'
 import Button from '../../../components/button/button'
 import { normalizeFiles } from '../../../lib/files.js'
 
@@ -58,29 +58,28 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     <Modal className={className} onCancel={onCancel}>
       <ModalBody title={t('addByCarModal.title')} Icon={Icon}>
         <div className='mb3 flex flex-row items-center'>
-          <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description') + ' ' + t('addByCarModal.examples')}</p>
+          <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description')}</p>
         </div>
 
-        <div className='flex flex-row justify-center'>
-          <Button className='mr2' onClick={onAddFileButtonClick}>{t('addByCarModal.selectCARButtonText')}</Button>
-          <input
-            onChange={onNameChange}
-            value={name}
-            name='name'
-            placeholder={t('addByCarModal.namePlaceholder')}
-            className={`input-reset charcoal ba b--black-20 br1 pa2 db w-90 center focus-outline ${inputClass}`}
-            type='text'
-          />
-        </div>
+        <input
+          onChange={onNameChange}
+          value={name}
+          name='name'
+          placeholder={t('addByCarModal.namePlaceholder')}
+          className={`input-reset charcoal ba b--black-20 br1 pa2 db w-90 center focus-outline ${inputClass}`}
+          type='text'
+        />
+
         <input
           className='dn'
           ref={fileInputRef}
-          id='file-input'
+          id='car-file-input'
           type='file'
           placeholder='File'
           accept='.car'
           onChange={onFileInputChange}
         />
+        <Button className='ma2 tc' bg='bg-teal' onClick={onAddFileButtonClick}>{t('addByCarModal.selectCARButtonText')}</Button>
       </ModalBody>
 
       <ModalActions>

From b23ef8976513b3074dedf69c4f5446cc68229f49 Mon Sep 17 00:00:00 2001
From: Marcin Rataj <lidel@lidel.org>
Date: Wed, 5 Mar 2025 00:43:44 +0100
Subject: [PATCH 30/38] docs: cli tutor for cat import

+ unifying import/export language
---
 public/locales/en/app.json        | 2 +-
 src/bundles/files/consts.js       | 4 ++++
 src/files/file-input/FileInput.js | 3 ++-
 src/files/modals/Modals.js        | 1 +
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/app.json b/public/locales/en/app.json
index dd2918a97..c40e0a833 100644
--- a/public/locales/en/app.json
+++ b/public/locales/en/app.json
@@ -30,7 +30,7 @@
     "unselectAll": "Unselect all",
     "generate": "Generate",
     "publish": "Publish",
-    "downloadCar": "Download as CAR",
+    "downloadCar": "Export CAR",
     "done": "Done"
   },
   "cliModal": {
diff --git a/src/bundles/files/consts.js b/src/bundles/files/consts.js
index aa6697d67..b13fa7a2a 100644
--- a/src/bundles/files/consts.js
+++ b/src/bundles/files/consts.js
@@ -131,6 +131,10 @@ export const cliCommandList = {
    * @param {string} path
    */
   [cliCmdKeys.FROM_IPFS]: (path) => `ipfs files cp /ipfs/<cid> "${path}/<dest-name>"`,
+  /**
+   * @param {string} path
+   */
+  [cliCmdKeys.FROM_CAR]: (path) => `ipfs dag import file.car && ipfs files cp /ipfs/<imported-cid> "${path}/<dest-name>"`,
   [cliCmdKeys.ADD_NEW_PEER]: () => 'ipfs swarm connect <peer-multiaddr>',
   /**
    * @param {string} ipfsPath
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 26fea06ae..5f654740a 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -103,7 +103,8 @@ class FileInput extends React.Component {
               <DecentralizationIcon className='fill-aqua w2 mr1' />
               {t('addByPath')}
             </Option>
-            <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_CAR)}>
+            <Option onClick={this.onAddByCar} id='add-by-car' onCliTutorMode={() => this.onCliTutorMode(cliCmdKeys.FROM_CAR)}
+              isCliTutorModeEnabled={isCliTutorModeEnabled}>
               <DataIcon className='fill-aqua w2 mr1' />
               {t('addByCar')}
             </Option>
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index 802aeceaf..e09348fa1 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -217,6 +217,7 @@ class Modals extends React.Component {
       case cliCmdKeys.ADD_DIRECTORY:
       case cliCmdKeys.CREATE_NEW_DIRECTORY:
       case cliCmdKeys.FROM_IPFS:
+      case cliCmdKeys.FROM_CAR:
         return cliCommandList[action](root.substring('/files'.length))
       case cliCmdKeys.DELETE_FILE_FROM_IPFS:
       case cliCmdKeys.REMOVE_FILE_FROM_IPFS:

From a229aa9cfb8ea2304a9bd7f9ba6aad527e33c107 Mon Sep 17 00:00:00 2001
From: Daniel N <2color@users.noreply.github.com>
Date: Wed, 5 Mar 2025 12:31:17 +0100
Subject: [PATCH 31/38] chore: throw helpful error if name exists

---
 src/bundles/files/actions.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 77ebb1c95..a052f50ab 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -415,6 +415,17 @@ const actions = () => ({
       const cid = result[0].root.cid
       const src = `/ipfs/${cid}`
       const dst = realMfsPath(join(root, name))
+      let dstExists = false
+
+      // Check if destination path already exists
+      await ipfs.files.stat(dst).then(() => {
+        dstExists = true
+      })
+
+      if (dstExists) {
+        throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
+      }
+
       try {
         await ipfs.files.cp(src, dst)
       } catch (err) {

From 5b35fec34f1318fad837bdfbe20daf926ad79cc4 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 06:51:01 -0600
Subject: [PATCH 32/38] fix: dont throw error when importing car if destination
 doesnt exist

---
 src/bundles/files/actions.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index a052f50ab..a16c5b059 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -417,18 +417,22 @@ const actions = () => ({
       const dst = realMfsPath(join(root, name))
       let dstExists = false
 
-      // Check if destination path already exists
-      await ipfs.files.stat(dst).then(() => {
-        dstExists = true
-      })
+      try {
+        // Check if destination path already exists
+        await ipfs.files.stat(dst).then(() => {
+          dstExists = true
+        })
 
-      if (dstExists) {
-        throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
+        if (dstExists) {
+          throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
+        }
+      } catch (/** @type {any} */ err) {
+        // the file does not exist yet.. swallow error for checking if it exists
       }
 
       try {
         await ipfs.files.cp(src, dst)
-      } catch (err) {
+      } catch (/** @type {any} */ err) {
         // TODO: Not sure why we do this. Perhaps a generic error is used
         // to avoid leaking private information via Countly?
         throw Object.assign(new Error('ipfs.files.cp call failed'), {

From a3abcce34b82740b07918bb71fa077c22dc77e98 Mon Sep 17 00:00:00 2001
From: Daniel N <2color@users.noreply.github.com>
Date: Wed, 5 Mar 2025 14:12:36 +0100
Subject: [PATCH 33/38] fix: swallow error when file doesn't exist

---
 src/bundles/files/actions.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index a16c5b059..8d1c4cc68 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -417,17 +417,15 @@ const actions = () => ({
       const dst = realMfsPath(join(root, name))
       let dstExists = false
 
-      try {
-        // Check if destination path already exists
-        await ipfs.files.stat(dst).then(() => {
-          dstExists = true
-        })
+      // Check if destination path already exists
+      await ipfs.files.stat(dst).then(() => {
+        dstExists = true
+      }).catch(() => {
+        // Swallow error. We can add the file to the dst path
+      })
 
-        if (dstExists) {
-          throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
-        }
-      } catch (/** @type {any} */ err) {
-        // the file does not exist yet.. swallow error for checking if it exists
+      if (dstExists) {
+        throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
       }
 
       try {

From bda1817656bdf3d22de6fc012ad0600f73d5045e Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 05:27:27 -0800
Subject: [PATCH 34/38] chore: remove unnecessary changes

---
 src/files/FilesPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 8da123dab..026f639e4 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -15,7 +15,7 @@ import FilesList from './files-list/FilesList.js'
 import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Icons
-import Modals, { DELETE, NEW_FOLDER, ADD_BY_CAR, SHARE, RENAME, BULK_CID_IMPORT, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
+import Modals, { DELETE, NEW_FOLDER, ADD_BY_CAR, SHARE, RENAME, ADD_BY_PATH, BULK_CID_IMPORT, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
 import Header from './header/Header.js'
 import FileImportStatus from './file-import-status/FileImportStatus.js'
 import { useExplore } from 'ipld-explorer-components/providers'

From 838aae0d04e9527eda18d6e8a8e8efb1b8589041 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 07:00:54 -0600
Subject: [PATCH 35/38] chore: use kubo-rpc-client types for IPFSService

---
 @types/ipfs/index.d.ts       | 18 ++----------------
 src/bundles/files/actions.js |  3 ++-
 src/files/FilesPage.js       |  5 +++++
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/@types/ipfs/index.d.ts b/@types/ipfs/index.d.ts
index df7a2f0bb..f7dd3b97b 100644
--- a/@types/ipfs/index.d.ts
+++ b/@types/ipfs/index.d.ts
@@ -2,6 +2,7 @@ declare module 'ipfs' {
   import type { CID } from 'multiformats/cid'
   import type { Multiaddr } from '@multiformats/multiaddr'
   import type { Buffer } from 'buffer'
+  import type { KuboRPCClient } from 'kubo-rpc-client'
 
   declare export interface IPFSService extends CoreService {
     pin: PinService;
@@ -9,7 +10,7 @@ declare module 'ipfs' {
     name: NameService;
     object: ObjectService;
     config: ConfigService;
-    dag: DagService;
+    dag: KuboRPCClient['dag'];
 
     stop(options?: TimeoutOptions): Promise<void>
   }
@@ -53,21 +54,6 @@ declare module 'ipfs' {
     profiles: ConfigProfiles;
   }
 
-  declare export interface DAGImportOptions {
-    pinRoots: boolean;
-  }
-
-  declare export interface DAGImportResult {
-    root: {
-      cid: CID;
-      pinErrorMsg?: string;
-    };
-  }
-
-  declare export interface DAGService {
-    import(sources: Iterable<Uint8Array> | AsyncIterable<Uint8Array> | AsyncIterable<AsyncIterable<Uint8Array>> | Iterable<AsyncIterable<Uint8Array>>, options?: DAGImportOptions): AsyncIterable<DAGImportResult>
-  }
-
   declare export interface ConfigProfiles {
     list(options?: TimeoutOptions): Promise<Array<{ name: string, description: string }>>;
     apply(name: string, options?: { dryRun?: boolean } & TimeoutOptions): Promise<{ original: Object, updated: Object }>;
diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 8d1c4cc68..a04687a8d 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -404,11 +404,12 @@ const actions = () => ({
    * @param {FileStream} carFile
    * @param {string} name
    */
-  doAddCarFile: (root, carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (ipfs, { store }) => {
+  doAddCarFile: (root, carFile, name = '') => perform(ACTIONS.ADD_CAR_FILE, async (/** @type {IPFSService} */ ipfs, { store }) => {
     ensureMFS(store)
 
     const stream = carFile.content.stream()
     try {
+      // @ts-expect-error - https://github.com/ipfs/js-kubo-rpc-client/issues/278
       const result = await all(ipfs.dag.import(stream, {
         pinRoots: true
       }))
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 026f639e4..1026933a1 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -79,6 +79,11 @@ const FilesPage = ({
   }
 
   const onAddByPath = (path, name) => doFilesAddPath(files.path, path, name)
+  /**
+   *
+   * @param {File} file
+   * @param {string} name
+   */
   const onAddByCar = (file, name) => {
     doAddCarFile(files.path, file, name)
   }

From d1ae76fcee6368e63c78408f3001e48d477b2345 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 07:35:43 -0600
Subject: [PATCH 36/38] chore: minor ux fixes

---
 public/locales/en/files.json                       | 3 ++-
 src/files/modals/add-by-car-modal/AddByCarModal.js | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index ddc652288..2ffba5ba2 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -65,7 +65,8 @@
     "title": "CAR Import",
     "description": "Choose a CAR file to import a DAG from and specify a name for it to be imported into the current directory.",
     "selectCARButtonText": "Select CAR…",
-    "namePlaceholder": "Name"
+    "namePlaceholder": "Name",
+    "renameImportPath": "Rename import"
   },
   "bulkImportModal": {
     "title": "Bulk import with text file",
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index dda351a00..32d703976 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -58,10 +58,12 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     <Modal className={className} onCancel={onCancel}>
       <ModalBody title={t('addByCarModal.title')} Icon={Icon}>
         <div className='mb3 flex flex-row items-center'>
-          <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description')}</p>
+          <p className='mt0 center charcoal tl w-90'>{t('addByCarModal.description')}</p>
         </div>
 
+        <label htmlFor='import-car-file-name' className='mt0 f7 center charcoal-muted tl w-90'>{t('addByCarModal.renameImportPath')}</label>
         <input
+          id='import-car-file-name'
           onChange={onNameChange}
           value={name}
           name='name'
@@ -80,6 +82,11 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
           onChange={onFileInputChange}
         />
         <Button className='ma2 tc' bg='bg-teal' onClick={onAddFileButtonClick}>{t('addByCarModal.selectCARButtonText')}</Button>
+        {/* Gray text showing original car file name */}
+        { file != null
+          ? <div className='mt1 f7 center charcoal-muted tl w-90'>{file.path}</div>
+          : null
+        }
       </ModalBody>
 
       <ModalActions>

From 2b929fc810a8d4ca20c5c36de7571f62a6e3b2df Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 07:38:58 -0600
Subject: [PATCH 37/38] fix: dont error if path doesn't exist

---
 src/bundles/files/actions.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index a04687a8d..d23060273 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -418,15 +418,19 @@ const actions = () => ({
       const dst = realMfsPath(join(root, name))
       let dstExists = false
 
-      // Check if destination path already exists
-      await ipfs.files.stat(dst).then(() => {
-        dstExists = true
-      }).catch(() => {
-        // Swallow error. We can add the file to the dst path
-      })
+      try {
+        // Check if destination path already exists
+        await ipfs.files.stat(dst).then(() => {
+          dstExists = true
+        }).catch(() => {
+          // Swallow error. We can add the file to the dst path
+        })
 
-      if (dstExists) {
-        throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
+        if (dstExists) {
+          throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
+        }
+      } catch (/** @type {any} */ err) {
+        // Swallow error. We can add the file to the dst path
       }
 
       try {

From 8c5ff77ce262d337a82a79f8535a983e45d8989c Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 08:32:20 -0600
Subject: [PATCH 38/38] fix: remove duplicate catch block

---
 src/bundles/files/actions.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index d23060273..a04687a8d 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -418,19 +418,15 @@ const actions = () => ({
       const dst = realMfsPath(join(root, name))
       let dstExists = false
 
-      try {
-        // Check if destination path already exists
-        await ipfs.files.stat(dst).then(() => {
-          dstExists = true
-        }).catch(() => {
-          // Swallow error. We can add the file to the dst path
-        })
-
-        if (dstExists) {
-          throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
-        }
-      } catch (/** @type {any} */ err) {
+      // Check if destination path already exists
+      await ipfs.files.stat(dst).then(() => {
+        dstExists = true
+      }).catch(() => {
         // Swallow error. We can add the file to the dst path
+      })
+
+      if (dstExists) {
+        throw new Error(`The name "${name}" already exists in the current directory. Try importing with a different name.`)
       }
 
       try {