Merge pull request #79 from crustio/yang/gatewaysettings

download gateway settings
crustio · Nov 7, 2023 · 3e618e1 · 3e618e1
2 parents 790777c + 8330300
commit 3e618e1
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 7 deletions.
diff --git a/components/FileItem.tsx b/components/FileItem.tsx
@@ -3,7 +3,7 @@ import axios from "axios";
 import { saveAs } from 'file-saver';
 import filesize from "filesize";
 import _ from 'lodash';
-import React, { useCallback, useContext, useMemo } from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
 import { Icon, Popup, Table } from "semantic-ui-react";
 import styled from "styled-components";
 import { AppContext } from "../lib/AppContext";
@@ -20,6 +20,7 @@ import { useContextWrapLoginUser, WrapLoginUser } from "../lib/wallet/hooks";
 import { SaveFile } from "../lib/wallet/types";
 import Btn from "./Btn";
 import { isFunction } from '@polkadot/util';
+import { useDownloadGateway } from "../lib/hooks/useDownloadGateway";
 
 export interface Props {
   type?: 'public' | 'vault',
@@ -52,12 +53,12 @@ export interface FileStat {
   prepaid?: boolean
 }
 
-function createUrl(f: SaveFile, endpoints: AuthIpfsEndpoint[]) {
+function createUrl(f: SaveFile, endpoints: AuthIpfsEndpoint[], downloadGateway: string) {
   // const p = endpoints.find((e) => e.value === f.UpEndpoint);
   // const endpoint = (p && p.value) || endpoints[0].value;
   // const timestamp = new Date().getTime()
   // const endpoint = GATEWAYS[timestamp % 8]
-  const endpoint = "https://crustipfs.mobi"
+  const endpoint = downloadGateway
   return `${endpoint}/ipfs/${f.Hash}?filename=${f.Name}`;
 }
 
@@ -133,13 +134,15 @@ function FileItem(props: Props) {
   const copy = useClipboard();
   const { api, alert, loading } = useContext(AppContext)
   const { endpoints } = useAuthGateway()
+  const { gateway } = useDownloadGateway();
   const _onClickDelete = () => { onDelete(file) }
   const _onClickOpen = useCallback(async () => {
     if (file.Encrypted && _.size(file.items) === 0) {
       try {
         if (!uc.secret) return;
         loading.show()
-        const res = await axios.get<ArrayBuffer>(createUrl(file, endpoints), { responseType: "arraybuffer" })
+        const url = createUrl(file, endpoints, gateway);
+        const res = await axios.get<ArrayBuffer>(url, { responseType: "arraybuffer" })
         console.info('res::', res)
         const time1 = new Date().getTime()
         const decryptData = await decryptFile(res.data, uc.secret)
@@ -156,9 +159,10 @@ function FileItem(props: Props) {
         alert.error("Decrypt error")
       }
     } else {
-      window.open(createUrl(file, endpoints), '_blank')
+      const url = createUrl(file, endpoints, gateway)
+      window.open(url, '_blank')
     }
-  }, [uc, file, endpoints])
+  }, [uc, file, endpoints, gateway])
   const _onClickSearch = () => {
     window.open(`https://ipfs-scan.io?cid=${file.Hash}`, '_blank')
   }

diff --git a/lib/hooks/useDownloadGateway.ts b/lib/hooks/useDownloadGateway.ts
@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import store from 'store';
+
+export interface DownloadGateway {
+    gateway: string
+}
+
+export const AllDownloadGateways: { text: string, value: string }[] = [
+    { text: 'https://ipfs.io', value: 'https://ipfs.io' },
+    { text: 'https://crustipfs.mobi', value: 'https://crustipfs.mobi' },
+    { text: 'https://crust.fans', value: 'https://crust.fans' },
+    { text: 'https://crustipfs.world', value: 'https://crustipfs.world' },
+    { text: 'https://crustgateway.online', value: 'https://crustgateway.online' },
+    { text: 'https://crustipfs.info', value: 'https://crustipfs.info' },
+    { text: 'https://gw.w3ipfs.org.cn', value: 'https://gw.w3ipfs.org.cn' },
+    { text: 'https://crustipfs.art', value: 'https://crustipfs.art' }
+]
+
+export interface WrapDownloadGateway extends DownloadGateway {
+    set: (endpoint: string) => void
+}
+
+export function useDownloadGateway(): WrapDownloadGateway {
+    const [downloadGateway, setDownloadGateway] = useState<DownloadGateway>({ gateway: "https://ipfs.io" })
+    useEffect(() => {
+        const dg = store.get('downloadgateway') as DownloadGateway
+        if (dg) {
+            setDownloadGateway(dg)
+        }
+    }, [])
+    const set = useCallback((endpoint: string) => {
+        const dg: DownloadGateway = {
+            gateway: endpoint
+        }
+        setDownloadGateway(dg)
+        store.set('downloadgateway', dg)
+    }, [])
+
+    return useMemo(() => ({
+        ...downloadGateway,
+        set,
+    }), [downloadGateway, set])
+}
diff --git a/pages/setting/index.tsx b/pages/setting/index.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import Web3 from "web3";
 import FileSaver from 'file-saver';
 import { useRouter } from 'next/router';
-import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Accordion, AccordionContent, AccordionTitle, Segment } from "semantic-ui-react";
 import styled from "styled-components";
@@ -18,6 +18,8 @@ import { useToggle } from "../../lib/hooks/useToggle";
 import { ExportObj, SaveFile } from "../../lib/types";
 import { useFilesInfo } from '../../lib/useFilesInfo';
 import { useFiles, WalletName } from "../../lib/wallet/hooks";
+import { AllDownloadGateways, useDownloadGateway } from '../../lib/hooks/useDownloadGateway';
+import MDropdown from '../../components/MDropdown';
 
 export const StorageChainConfig = {
   chainId: '0x5afe',
@@ -43,6 +45,7 @@ function Index(props: Props) {
   const { className } = props
   const { t } = useTranslation()
   const uc = useUserCrypto()
+  const dg = useDownloadGateway()
   const r = useRouter()
   const { alert } = useContext(AppContext)
   const [open, toggleOpen] = useToggle(false)
@@ -223,6 +226,23 @@ function Index(props: Props) {
     return true;
   }
 
+  const _onDowloadGateChange = useCallback((_, { value }) => {
+    dg.set(value)
+  }, [])
+
+  const [tempDownloadGateway, setTempDownloadGateway] = useState<string>("")
+  const _onChangeInputDownloadGateway = (e) => {
+    setTempDownloadGateway(e.target.value)
+  }
+
+  const _OnSaveDownloadGateway = () => {
+    if (tempDownloadGateway == null || tempDownloadGateway == "") {
+      alert.error("Please give right gateway");
+      return;
+    }
+    dg.set(tempDownloadGateway)
+  }
+
   return <PageUserSideLayout path={'/setting'} className={className}>
     <input
       onChange={_onInputImportFile}
@@ -269,6 +289,33 @@ function Index(props: Props) {
         {`${t('Space Usage:')} `} <span className="bold-text font-sans-semibold">{`${publicSize} in Public, ${valutSize} in Vault`}</span>
       </div>
     </Segment>
+    <Segment basic className={"mcard"}>
+      <div className="title font-sans-semibold">
+        {t('IPFS Gateway settings for download')}
+      </div>
+      <div className="text font-sans-regular">
+        {`${t('Default gateway:')} `}
+        <span className="bold-text font-sans-semibold">{dg.gateway}</span>
+      </div>
+
+      <div className="text font-sans-regular">
+        {`${t('Select a gateway from community contribution:')} `}
+        <SelectDownloadGatewayDropdown
+          icon={<span className="dropdown icon" />}
+          options={AllDownloadGateways}
+          onChange={_onDowloadGateChange}
+        />
+      </div>
+
+      <div className="text font-sans-regular">Customized:</div>
+      <input
+        className='input-dowload-gateway'
+        spellCheck="false"
+        onChange={_onChangeInputDownloadGateway}
+        placeholder={t('Customize your download gateway')}
+      />
+      <Btn content={t('Save')} style={{ height: 25, lineHeight: '0px' }} onClick={_OnSaveDownloadGateway} />
+    </Segment>
     <Segment basic className={"mcard"}>
       <div className="title font-sans-semibold">
         {t('Developer Profile')}
@@ -327,6 +374,40 @@ function Index(props: Props) {
   </PageUserSideLayout>
 }
 
+const SelectDownloadGatewayDropdown = styled(MDropdown)`
+    &.mdropdown {
+      display: inline-block;
+      vertical-align: top;
+      width: 230px !important;
+      border-radius: 8px !important;
+      border: 1px solid #999999 !important;
+      margin-right: 8px !important;
+      line-height: 25px;
+      height: 25px;
+      padding: 0 30px 0 14px;
+      .text {
+        white-space: nowrap;
+        font-size: 14 !important;
+        line-height: 25px !important;
+        font-weight: 500 !important;
+        color: var(--main-color) !important;
+        font-family: OpenSans-SemiBold !important;
+      }
+      .dropIcon {
+        position: absolute;
+        right: 11px;
+        top: 6px;
+      }
+
+      .options {
+        .item {
+          line-height: 24px;
+          padding: 4px 20px;
+        }
+      }
+    }
+`
+
 export default React.memo<Props>(styled(Index)`
   .pusl_center_flex_content {
     min-width: 60rem;
@@ -376,5 +457,25 @@ export default React.memo<Props>(styled(Index)`
         margin-right: 1rem;
       }
     }
+
+    .input-dowload-gateway {
+      vertical-align: top;
+      display: inline-block;
+      min-width: 406px;
+      margin-bottom: 12px;
+      margin-right: 12px;
+      height: 25px;
+      line-height: 25px;
+      border: 1px solid #999999;
+      font-family: OpenSans-Regular;
+      outline: unset;
+      border-radius: 8px;
+      padding-left: 16px;
+      padding-right: 16px;
+      font-size: 10px;
+      &::placeholder{
+        color: #999999;
+      }
+    }
   }
 `)