Add Sindri credentials to the settings section.

apps/remix-ide/src/app/tabs/locales/en/settings.json

@@ -17,6 +17,9 @@
   "settings.etherscanTokenTitle": "EtherScan Access Token",
   "settings.etherscanAccessTokenText": "Manage the api key used to interact with Etherscan.",
   "settings.etherscanAccessTokenText2": "Go to Etherscan api key page (link below) to create a new api key and save it in Remix.",
+  "settings.sindriAccessTokenTitle": "Sindri Credentials",
+  "settings.sindriAccessTokenText": "The access token is used to compile ZKP circuits and generate proofs with Sindri.",
+  "settings.sindriAccessTokenText2":"Go to the Sindri account creation page (link below) to create a new token and save it in Remix.",
   "settings.save": "Save",
   "settings.remove": "Remove",
   "settings.themes": "Themes",

apps/remix-ide/src/app/tabs/locales/es/settings.json

@@ -17,6 +17,9 @@
   "settings.etherscanTokenTitle": "Token de Acceso de EtherScan",
   "settings.etherscanAccessTokenText": "Administra la clave api usada para interactuar con Etherscan.",
   "settings.etherscanAccessTokenText2": "Vaya a la página de claves api de Etherscan (enlace abajo) para crear una nueva clave api y guardarla en Remix.",
+  "settings.sindriAccessTokenTitle": "Credenciales de Sindri",
+  "settings.sindriAccessTokenText": "El token de acceso se utiliza para compilar circuitos ZKP y generar pruebas con Sindri.",
+  "settings.sindriAccessTokenText2":"Vaya a la página de creación de cuentas de Sindri (enlace abajo) para crear un nuevo token y guardarlo en Remix.",
   "settings.save": "Guardar",
   "settings.remove": "Eliminar",
   "settings.themes": "Temas",

apps/remix-ide/src/app/tabs/locales/fr/settings.json

@@ -17,6 +17,9 @@
   "settings.etherscanTokenTitle": "Token d'accés Etherscan",
   "settings.etherscanAccessTokenText": "Gérer la clé api utilisée pour interagir avec Etherscan.",
   "settings.etherscanAccessTokenText2": "Allez sur la page de clé Etherscan api (lien ci-dessous) pour créer une nouvelle clé api et l'enregistrer dans Remix.",
+  "settings.sindriAccessTokenTitle": "Identifiants Sindri",
+  "settings.sindriAccessTokenText": "Le jeton d'accès est utilisé pour compiler les circuits ZKP et générer des preuves avec Sindri.",
+  "settings.sindriAccessTokenText2":"Allez à la page de création de compte Sindri (lien ci-dessous) pour créer un nouveau jeton et l'enregistrer dans Remix.",
   "settings.save": "Sauvegarder",
   "settings.remove": "Supprimer",
   "settings.themes": "Thèmes",

apps/remix-ide/src/app/tabs/locales/it/settings.json

@@ -17,6 +17,9 @@
   "settings.etherscanTokenTitle": "Token di accesso a Etherscan",
   "settings.etherscanAccessTokenText": "Gestione della chiave api utilizzata per interagire con Etherscan.",
   "settings.etherscanAccessTokenText2": "Vai alla pagina delle chiavi api di Etherscan (link in basso) per creare una nuova chiave api e salvarla in Remix.",
+  "settings.sindriAccessTokenTitle": "Credenziali Sindri",
+  "settings.sindriAccessTokenText": "Il token di accesso è utilizzato per compilare circuiti ZKP e generare prove con Sindri.",
+  "settings.sindriAccessTokenText2":"Vai alla pagina di creazione dell'account Sindri (link qui sotto) per creare un nuovo token e salvarlo in Remix.",
   "settings.save": "Salva",
   "settings.remove": "Rimuovi",
   "settings.themes": "Temi",

apps/remix-ide/src/app/tabs/locales/zh/settings.json

@@ -17,6 +17,9 @@
   "settings.etherscanTokenTitle": "EtherScan 访问 Token",
   "settings.etherscanAccessTokenText": "管理用于与Etherscan交互的api密钥.",
   "settings.etherscanAccessTokenText2": "前往 Etherscan api 密钥页面 (参见下方链接)，创建一个新的api密钥并保存到Remix中.",
+  "settings.sindriAccessTokenTitle": "Sindri 凭证",
+  "settings.sindriAccessTokenText": "访问令牌用于使用 Sindri 编译 ZKP 电路和生成证明。",
+  "settings.sindriAccessTokenText2":"转到 Sindri 账户创建页面（下方链接），创建新令牌并将其保存在 Remix 中。",
   "settings.save": "保存",
   "settings.remove": "删除",
   "settings.themes": "主题",

libs/remix-ui/settings/src/lib/constants.ts

@@ -3,6 +3,7 @@ export const textDark = 'text-dark'
 
 export const gitAccessTokenLink = 'https://github.com/settings/tokens/new?scopes=gist,repo&description=Remix%20IDE%20Token'
 export const etherscanTokenLink = 'https://etherscan.io/myapikey'
+export const sindriAccessTokenLink = 'https://sindri.app'
 export const labels = {
   'gist': {
     'link': gitAccessTokenLink,
@@ -11,5 +12,9 @@ export const labels = {
   'etherscan': {
     'link': etherscanTokenLink,
     'key': 'etherscan-access-token'
+  },
+  'sindri': {
+    'link': sindriAccessTokenLink,
+    'key': 'sindri-access-token'
   }
 }

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -28,6 +28,7 @@ import {RemixUiLocaleModule, LocaleModule} from '@remix-ui/locale-module'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {GithubSettings} from './github-settings'
 import {EtherscanSettings} from './etherscan-settings'
+import {SindriSettings} from './sindri-settings'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -599,6 +600,15 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
         }}
         config={props.config}
       />
+      <SindriSettings
+        saveToken={(sindriToken: string) => {
+          saveTokenToast(props.config, dispatchToast, sindriToken, 'sindri-access-token')
+        }}
+        removeToken={() => {
+          removeTokenToast(props.config, dispatchToast, 'sindri-access-token')
+        }}
+        config={props.config}
+      />
       {swarmSettings()}
       {ipfsSettings()}
       <RemixUiThemeModule themeModule={props._deps.themeModule} />

libs/remix-ui/settings/src/lib/sindri-settings.tsx

@@ -0,0 +1,77 @@
+import {CopyToClipboard} from '@remix-ui/clipboard'
+import {CustomTooltip} from '@remix-ui/helper'
+import React, {useEffect, useState} from 'react'
+import {FormattedMessage, useIntl} from 'react-intl'
+import {SindriSettingsProps} from '../types'
+import {sindriAccessTokenLink} from './constants'
+
+export function SindriSettings(props: SindriSettingsProps) {
+  const [sindriToken, setSindriToken] = useState<string>('')
+  const intl = useIntl()
+
+  useEffect(() => {
+    if (props.config) {
+      const sindriToken = props.config.get('settings/sindri-access-token') || ''
+      setSindriToken(sindriToken)
+    }
+  }, [props.config])
+
+  const handleChangeTokenState = (event) => {
+    const token = event.target.value ? event.target.value.trim() : event.target.value
+    setSindriToken(token)
+  }
+
+  // api key settings
+  const saveSindriToken = () => {
+    props.saveToken(sindriToken)
+  }
+
+  const removeToken = () => {
+    setSindriToken('')
+    props.removeToken()
+  }
+
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">
+          <FormattedMessage id="settings.sindriAccessTokenTitle" />
+        </h6>
+        <p className="mb-1">
+          <FormattedMessage id="settings.sindriAccessTokenText" />
+        </p>
+        <p className="">
+          <FormattedMessage id="settings.sindriAccessTokenText2" />
+        </p>
+        <p className="mb-1">
+          <a className="text-primary" target="_blank" href={sindriAccessTokenLink}>
+            {sindriAccessTokenLink}
+          </a>
+        </p>
+        <div>
+          <label className="mb-0 pb-0">
+            <FormattedMessage id="settings.token" />:
+          </label>
+          <div className="input-group text-secondary mb-0 h6">
+            <input id="sindriaccesstoken" data-id="settingsTabSindriAccessToken" type="password" className="form-control" onChange={(e) => handleChangeTokenState(e)} value={sindriToken} />
+            <div className="input-group-append">
+              <CopyToClipboard tip={intl.formatMessage({id: 'settings.copy'})} content={sindriToken} data-id="copyToClipboardCopyIcon" className="far fa-copy ml-1 p-2 mt-1" direction={'top'} />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div className="text-secondary mb-0 h6">
+            <div className="d-flex justify-content-end pt-2">
+              <input className="btn btn-sm btn-primary ml-2" id="savesindritoken" data-id="settingsTabSaveSindriToken" onClick={saveSindriToken} value={intl.formatMessage({id: 'settings.save'})} type="button"></input>
+              <CustomTooltip tooltipText={<FormattedMessage id="settings.deleteSindriCredentials" />} tooltipClasses="text-nowrap" tooltipId="removesindritokenTooltip" placement="top-start">
+                <button className="btn btn-sm btn-secondary ml-2" id="removesindritoken" data-id="settingsTabRemoveSindriToken" onClick={removeToken}>
+                  <FormattedMessage id="settings.remove" />
+                </button>
+              </CustomTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

libs/remix-ui/settings/src/types/index.ts

@@ -23,3 +23,16 @@ export interface EtherscanSettingsProps {
     setUnpersistedProperty: (key: string, value: string) => void
   }
 }
+
+export interface SindriSettingsProps {
+  saveToken: (sindriToken: string) => void,
+  removeToken: () => void,
+  config: {
+    exists: (key: string) => boolean,
+    get: (key: string) => string,
+    set: (key: string, content: string) => void,
+    clear: () => void,
+    getUnpersistedProperty: (key: string) => void,
+    setUnpersistedProperty: (key: string, value: string) => void
+  }
+}

projects.json

@@ -8112,6 +8112,14 @@
                 "npm:react-intl"
               ]
             },
+            {
+              "file": "libs/remix-ui/settings/src/lib/sindri-settings.tsx",
+              "hash": "f25473fcac87f3e7aa8be1828ea446b1b261fc66",
+              "deps": [
+                "npm:react",
+                "npm:react-intl"
+              ]
+            },
             {
               "file": "libs/remix-ui/settings/src/lib/remix-ui-settings.css",
               "hash": "e69de29bb2d1d6434b8b29ae775ad8c2e48c5391"