@fortawesome/free-solid-svg-icons#faFileExport TypeScript Examples

IdentityBackup: React.FC = observer(function IdentityBackup() {
    const { onboarding, identity } = useStores()

    const nextStep = () => {
        onboarding.finishIDSetup()
    }
    const handleBackupLater = () => {
        nextStep()
    }

    const [exportPrompt, setExportPrompt] = useState(false)
    const handleBackupNow = () => {
        setExportPrompt(true)
    }
    const handleExportSubmit = async ({ passphrase }: ExportIdentityFormFields) => {
        setExportPrompt(false)
        try {
            await identity.exportIdentity({ id: identity.identity?.id ?? "", passphrase })
            nextStep()
        } catch (reason) {
            toast.error(
                dismissibleToast(
                    <span>
                        <>
                            <b>Identity backup failed ?</b>
                            <br />
                            Error: {reason}
                        </>
                    </span>,
                ),
            )
        }
    }
    const handleExportCancel = () => {
        setExportPrompt(false)
    }
    return (
        <ViewContainer>
            <ViewNavBar />
            <ViewSplit>
                <ViewSidebar>
                    <SideTop>
                        <SectionIcon icon={faFileExport} />
                        <Title>Create backup</Title>
                        <Small>We don&apos;t store any account data. Back up to keep your tokens safe.</Small>
                    </SideTop>
                    <SideBot>
                        <PrimarySidebarActionButton onClick={handleBackupNow}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faFileExport} />
                                </ButtonIcon>
                                Backup Private Key
                            </ButtonContent>
                        </PrimarySidebarActionButton>
                        <SecondarySidebarActionButton onClick={handleBackupLater}>
                            <ButtonContent>
                                <ButtonIcon>
                                    <FontAwesomeIcon icon={faClock} />
                                </ButtonIcon>
                                Backup later
                            </ButtonContent>
                        </SecondarySidebarActionButton>
                    </SideBot>
                </ViewSidebar>
                <Content>
                    <Lottie
                        play
                        loop={false}
                        animationData={animationIdentityKeys}
                        style={{ width: 256, height: 256 }}
                        renderer="svg"
                    />
                </Content>
            </ViewSplit>
            <ExportIdentityPrompt visible={exportPrompt} onSubmit={handleExportSubmit} onCancel={handleExportCancel} />
        </ViewContainer>
    )
})

export default function RuntimeTools(props: {}) {
  const {loading} = useSelector((state: IStoreState) => state.autoSaveLoading);
  console.log('loading', loading);
  const loadingIcon = (
    <FontAwesomeIcon icon={faCircleNotch} spin color={'gray'}/>
  );
  const checkIcon = (
    <FontAwesomeIcon icon={faCheck} color={'red'}/>
  );
  const dispatch = useDispatch();
  const build = () => {
    dispatch(buildCode());
  };

  const run = () => {
    modal(cancel => (
      <div onClick={cancel}>
        Cancel
      </div>
    ));
  };

  const handleExport = () => {
    dispatch(exportCode());
  };

  return (
    <div className={style.run_tools}>
      <div className={style.label}>
        RUN TOOLS:
      </div>
      <div className={style.tools}>
        <button className={style.build_btn} onClick={build}>
          <FontAwesomeIcon icon={faGavel}/>
        </button>
        <button className={style.run_btn} onClick={run}>
          <FontAwesomeIcon icon={faPlay}/>
        </button>
        <button className={style.export_btn} onClick={handleExport}>
          <FontAwesomeIcon icon={faFileExport}/>
        </button>
        <button className={style.check_btn}>
          { loading ? loadingIcon : checkIcon }
        </button>
      </div>
    </div>
  );
}

SettingsMysteriumId: React.FC = observer(function SettingsMysteriumId() {
    const { payment, identity } = useStores()

    // Export
    const [exportPrompt, setExportPrompt] = useState(false)
    const handleExportInitiate = () => {
        setExportPrompt(true)
    }

    const handleExportSubmit = ({ passphrase }: ExportIdentityFormFields) => {
        setExportPrompt(false)
        const res = identity.exportIdentity({ id: identity.identity?.id ?? "", passphrase })
        toast.promise(res, {
            loading: "Creating backup...",
            success: function successToast(filename) {
                return (
                    <span>
                        <b>Identity backed up!</b>
                        <br />
                        {filename}
                    </span>
                )
            },
            error: function errorToast(reason) {
                return (
                    <span>
                        <b>Identity backup failed ?</b>
                        <br />
                        Error: {reason}
                    </span>
                )
            },
        })
    }
    const handleExportCancel = () => {
        setExportPrompt(false)
    }

    // Import
    const [importPrompt, setImportPrompt] = useState(false)
    const [importFilename, setImportFilename] = useState("")
    const handleImportInitiate = async () => {
        const filename = await identity.importIdentityChooseFile()
        if (!filename) {
            return
        }
        setImportFilename(filename)
        setImportPrompt(true)
    }
    const handleImportSubmit = async ({ passphrase }: ImportIdentityFormFields) => {
        setImportPrompt(false)
        const res = identity.importIdentity({ filename: importFilename, passphrase })
        toast.promise(res, {
            loading: "Importing identity...",
            success: function successToast() {
                return (
                    <span>
                        <b>Mysterium ID imported!</b>
                    </span>
                )
            },
            error: function errorToast(reason) {
                return (
                    <span>
                        <b>Mysterium ID import failed ?</b>
                        <br />
                        Error: {reason}
                    </span>
                )
            },
        })
    }
    const handleImportCancel = () => {
        setImportPrompt(false)
    }

    return (
        <>
            <Section>
                <SectionIcon icon={faIdBadge} color="#ffffff88" size="2x" />
                <Title>Identity ({identity.identity?.registrationStatus})</Title>
                <Explanation>
                    Identity is your Mysterium internal user ID. Never send ether or any kind of ERC20 tokens there.
                </Explanation>
                <TextInput disabled value={identity.identity?.id} />
            </Section>
            <Section>
                <SectionIcon icon={faFileExport} color="#ffffff88" size="2x" />
                <Title>Backup/Restore</Title>
                <Explanation>
                    We don&apos;t store any account data. Make sure to back up your private key to keep your{" "}
                    {payment.appCurrency}s safe.
                </Explanation>
                <div>
                    <LightButton style={{ marginRight: 20 }} onClick={handleExportInitiate}>
                        Backup
                    </LightButton>
                    <LightButton onClick={handleImportInitiate}>Restore from backup</LightButton>
                </div>
            </Section>
            <ExportIdentityPrompt visible={exportPrompt} onSubmit={handleExportSubmit} onCancel={handleExportCancel} />
            <ImportIdentityPrompt visible={importPrompt} onSubmit={handleImportSubmit} onCancel={handleImportCancel} />
        </>
    )
})

export default function Views(props: IViewsProps) {
  const [code, setCode] = useState([] as string[]);
  const [dslCode, setDslCode] = useState('');
  const [curStep, setCurStep] = useState(0);
  const [tabItem, setTabItem] = useState([] as string[]);
  const [curTabIndex, setCurTabIndex] = useState(0);
  const [tabItemArray, setTabItemArray] = useState(tabItems);
  const [codeModeArray, setCodeModeArray] = useState(codeMode);
  const [codeTypeIndex, setCodeTypeIndex] = useState(0);

  useEffect(() => {
    ipcRenderer.on('code', (event, args) => {
      if (args.type === 'json') {
        let dsl = jsonToDslCode(args.data);
        setCode([dsl]);
        setTabItem(tabItems[0]);
        cachedCode[0] = [dsl];
        setDslCode(dsl);
        return;
      }
      if (args.type === 'target') {
        setTabItemArray([tabItems[1]]);
        setTabItem(tabItems[1]);
        setCodeModeArray([codeMode[1]]);
        setDslCode(args.data);
        setCurStep(1);
        Bridge.compile('html', args.data).then((html) => {
          setCode(html);
          cachedCode[0] = html;
        });
        return;
      }
    });
  }, []);

  const handlePrevStep = () => {
    if (curStep <= 0) return;
    setCurStep(curStep => {
      setCode(cachedCode[curStep - 1]);
      setTabItem(tabItemArray[curStep - 1]);
      setCurTabIndex(0);
      setCodeTypeIndex(0);
      return curStep - 1;
    });
  };

  const handleNextStep = () => {
    if (curStep >= tabItemArray.length - 1) return;

    setCurStep(curStep => {
      if (curStep === 0) {
        Bridge.compile('html', code[0]).then((html) => {
          cachedCode[curStep + 1] = html;
          setCode(html);
        });
      }

      setTabItem(tabItemArray[curStep + 1]);
      setCurTabIndex(0);
      setCodeTypeIndex(0);
      return curStep + 1;
    });
  };

  const handleTabClick = (i: number) => {
    setCurTabIndex(i);
    setCodeTypeIndex(0);
    if (i === 1) {
      Bridge.compile('react', dslCode).then((react) => {
        cachedCode[curStep + i] = react;
        setCode(react);
      })
    }
    if (i === 0) {
      Bridge.compile('html', dslCode).then((html) => {
        cachedCode[curStep + i] = html;
        setCode(html);
      })
    }
  }

  const handleCodeChange = (edit: any, data: any, value: any) => {
    setCode(value);
  };

  const handleExport = () => {
    saveCodeFile(tabItems[curStep][curTabIndex], code).then(() => {

    });
  };

  const prevBtn = curStep !== 0 && tabItemArray.length > 1 && (
    <button disabled={curStep === 0} onClick={handlePrevStep} className={style.prev_btn}>
      <span>
        <FontAwesomeIcon icon={faArrowLeft}/>
      </span>
      Prev
    </button>
  );

  const nextBtn = (
    <button onClick={handleNextStep} className={style.next_btn}>
      Next
      <span>
        <FontAwesomeIcon icon={faArrowRight}/>
      </span>
    </button>
  );

  const exportBtn = (
    <button onClick={handleExport} className={style.export_btn}>
      Export
      <span>
        <FontAwesomeIcon icon={faFileExport}/>
      </span>
    </button>
  );

  return (
    <div className={style.views}>
      <Tab items={tabItem} onTabClick={handleTabClick} curIndex={curTabIndex}/>
      <CodeEditor code={code[codeTypeIndex]}
                  onCodeChange={handleCodeChange}
                  mode={codeMode[curStep][curTabIndex][codeTypeIndex]}
                  codeTypes={codeType[curStep][curTabIndex]}
                  curCodeType={codeTypeIndex}
                  onCodeTypeTabClick={(i) => setCodeTypeIndex(i)}/>
      <div className={style.operator_btn}>
        {prevBtn}
        {curStep === tabItems.length - 1 ? exportBtn : nextBtn}
      </div>
    </div>
  );
}