pussy-ts/src/features/ipfs/ipfsSettings/ErrorIpfsSettings.tsx

import {
  Input,
  LinkWindow,
  ContainerGradientText,
  ActionBar,
  ContainerGradient,
} from '../../../components';
import BtnPasport from '../../../containers/portal/pasport/btnPasport';
import Select from '../../../containers/warp/components/Select';
import CodeSnipet from './ipfsComponents/codeSnipet';
import {
  ContainerKeyValue,
  renderOptions,
} from './ipfsComponents/utilsComponents';

const ipfsDaemon = `$ ipfs daemon
Initializing daemon...
API server listening on /ip4/127.0.0.1/tcp/5001
`;

const ipfsHeaders = `$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'

$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST", "GET"]'`;

function ErrorIpfsSettings({ stateErrorIpfsSettings }) {
  const {
    valueInput,
    valueSelect,
    setValueInput,
    dataOpts,
    onClickReConnect,
    onChangeSelect,
    pending,
    setNewUrl,
  } = stateErrorIpfsSettings;

  return (
    <ContainerGradient
      togglingDisable
      styleLampContent="red"
      title="Could not connect to the IPFS API"
      userStyleContent={{
        minHeight: 'auto',
        height: 'unset',
        display: 'grid',
        gap: '20px',
      }}
    >
      <ContainerKeyValue>
        <div>client</div>

        <Select
          width="300px"
          valueSelect={valueSelect}
          textSelectValue={valueSelect !== '' ? valueSelect : ''}
          onChangeSelect={(item) => onChangeSelect(item)}
          custom
        >
          {renderOptions(dataOpts, valueSelect)}
        </Select>
      </ContainerKeyValue>

      <div>
        Check out the installation guide in the{' '}
        <LinkWindow to="https://docs.ipfs.tech/how-to/command-line-quick-start/">
          IPFS Docs
        </LinkWindow>{' '}
        , or try these common fixes:
      </div>
      <div>
        1. Is your IPFS daemon running? Try starting or restarting it from your
        terminal:
      </div>
      <CodeSnipet src={ipfsDaemon} />
      <div>
        2. Is your IPFS API configured to allow{' '}
        <LinkWindow to="https://github.com/ipfs/ipfs-webui#configure-ipfs-api-cors-headers">
          cross-origin (CORS)
        </LinkWindow>{' '}
        requests? If not, run these commands and then start your daemon from the
        terminal:
      </div>
      <CodeSnipet src={ipfsHeaders} />
      <div>
        3. Is your IPFS API on a port other than 5001? If your node is
        configured with a{' '}
        <LinkWindow to="https://github.com/ipfs/kubo/blob/master/docs/config.md#addresses">
          custom API address
        </LinkWindow>
        , enter it here.
      </div>
      {valueSelect === 'external' && (
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '300px auto',
            gap: '10px',
          }}
        >
          <Input
            value={valueInput}
            onChange={(e) => setValueInput(e.target.value)}
          />
          <BtnPasport
            style={{ maxWidth: '100px', position: 'static' }}
            typeBtn="blue"
            onClick={() => setNewUrl()}
          >
            edit
          </BtnPasport>
        </div>
      )}

      <ActionBar
        button={{
          text: 'reconnect',
          onClick: onClickReConnect,
        }}
      />
    </ContainerGradient>
  );
}

export default ErrorIpfsSettings;