TW-1542 Revert harmful changes

e2e/src/page-objects/index.ts

@@ -18,6 +18,7 @@ import { InternalConfirmationPage } from './pages/internal-confirmation.page';
 import { ManualBackupModalPage } from './pages/modal/manual-backup-modal.page';
 import { NewsletterModalPage } from './pages/modal/newsletter-modal.page';
 import { OnRumModalPage } from './pages/modal/on-rum-modal.page';
+import { RevealSecretsPage } from './pages/reveal-secrets.page';
 import { SendPage } from './pages/send.page';
 import { SettingsPage } from './pages/settings.page';
 import { setWalletPage } from './pages/setWalletPassword.page';
@@ -29,6 +30,7 @@ export const Pages = {
   ImportExistingWallet: new ImportExistingWalletPage(),
   SetWallet: new setWalletPage(),
   Settings: new SettingsPage(),
+  RevealSecrets: new RevealSecretsPage(),
   UnlockScreen: new UnlockScreenPage(),
   DelegateTab: new DelegateTab(),
   DelegateForm: new DelegateFormPage(),

e2e/src/page-objects/pages/reveal-secrets.page.ts

@@ -0,0 +1,16 @@
+import { RevealSecretsSelectors } from 'src/app/templates/RevealSecrets/RevealSecrets.selectors';
+
+import { Page } from '../../classes/page.class';
+import { createPageElement } from '../../utils/search.utils';
+
+export class RevealSecretsPage extends Page {
+  revealButton = createPageElement(RevealSecretsSelectors.RevealButton);
+  revealPasswordField = createPageElement(RevealSecretsSelectors.RevealPasswordInput);
+  revealSecretsProtectedMask = createPageElement(RevealSecretsSelectors.RevealSecretsProtectedMask);
+  revealSecretsValue = createPageElement(RevealSecretsSelectors.RevealSecretsValue);
+
+  async isVisible() {
+    await this.revealButton.waitForDisplayed();
+    await this.revealPasswordField.waitForDisplayed();
+  }
+}

src/app/templates/HelpAndCommunity/ResourceLink.tsx

@@ -0,0 +1,32 @@
+import React, { FC, SVGProps } from 'react';
+
+import { Anchor } from 'app/atoms/Anchor';
+import { TestIDProps } from 'lib/analytics';
+
+interface Props extends TestIDProps {
+  title: string;
+  href: string;
+  background?: string;
+  Icon: React.FC<SVGProps<SVGSVGElement>>;
+}
+
+export const ResourceLink: FC<Props> = ({ title, href, background, Icon, testID, testIDProperties }) => {
+  return (
+    <li>
+      <Anchor
+        href={href}
+        className="flex items-center py-1 my-1 hover:underline text-blue-600"
+        testID={testID}
+        testIDProperties={testIDProperties}
+      >
+        <div
+          className="mr-4 w-8 h-8 flex justify-center items-center rounded-md"
+          style={{ background, padding: background ? '0.375rem' : 0 }}
+        >
+          <Icon className="h-full w-auto" />
+        </div>
+        {title}
+      </Anchor>
+    </li>
+  );
+};

src/app/templates/HelpAndCommunity/index.tsx

@@ -0,0 +1,99 @@
+import React, { FC, useMemo } from 'react';
+
+import { ReactComponent as CannyIcon } from 'app/icons/canny.svg';
+import { ReactComponent as DiscordIcon } from 'app/icons/discord.svg';
+import { ReactComponent as HelpCrunchIcon } from 'app/icons/helpcrunch.svg';
+import { ReactComponent as RedditIcon } from 'app/icons/reddit.svg';
+import { ReactComponent as TelegramIcon } from 'app/icons/telegram.svg';
+import { ReactComponent as TwitterIcon } from 'app/icons/twitter.svg';
+import { ReactComponent as YoutubeIcon } from 'app/icons/youtube.svg';
+import { T } from 'lib/i18n';
+
+import { ResourceLink } from './ResourceLink';
+import { HelpAndCommunitySelectors } from './selectors';
+
+const HelpAndCommunity: FC = () => {
+  const generalLinks = useMemo(
+    () => [
+      {
+        title: 'Knowledge Base',
+        href: 'https://madfish.crunch.help/temple-wallet',
+        background: '#2182f7',
+        Icon: HelpCrunchIcon,
+        testID: HelpAndCommunitySelectors.knowledgeBaseLinkButton
+      },
+      {
+        title: 'Feature Request',
+        href: 'https://madfish.canny.io/feature-requests',
+        Icon: CannyIcon,
+        testID: HelpAndCommunitySelectors.featureRequestLinkButton
+      }
+    ],
+    []
+  );
+
+  const socialMediaLinks = useMemo(
+    () => [
+      {
+        title: 'Twitter',
+        href: 'https://twitter.com/madfishofficial',
+        background: '#1DA1F2',
+        Icon: TwitterIcon
+      },
+      {
+        title: 'Telegram',
+        href: 'https://t.me/MadFishCommunity',
+        background: '#26A5E4',
+        Icon: TelegramIcon
+      },
+      {
+        title: 'Discord',
+        href: 'https://www.madfish.solutions/discord',
+        background: '#7289DA',
+        Icon: DiscordIcon
+      },
+      {
+        title: 'Reddit',
+        href: 'https://www.reddit.com/r/MadFishCommunity',
+        background: '#FF4500',
+        Icon: RedditIcon
+      },
+      {
+        title: 'Youtube',
+        href: 'https://www.youtube.com/channel/UCUp80EXfJEigks3xU5hiwyA',
+        background: '#FF0000',
+        Icon: YoutubeIcon
+      }
+    ],
+    []
+  );
+
+  return (
+    <div className="w-full max-w-sm mx-auto my-8 text-sm text-gray-700">
+      <p>
+        <T id="communityResourcesTitle" />
+      </p>
+
+      <ul className="my-2">
+        {generalLinks.map(({ title, ...props }) => (
+          <ResourceLink key={title} title={title} {...props} />
+        ))}
+        {socialMediaLinks.map(({ title, ...props }) => (
+          <ResourceLink
+            key={title}
+            title={title}
+            {...props}
+            testID={HelpAndCommunitySelectors.socialMediaLinkButton}
+            testIDProperties={{ media: title }}
+          />
+        ))}
+      </ul>
+
+      <p>
+        <T id="joinPrompt" />
+      </p>
+    </div>
+  );
+};
+
+export default HelpAndCommunity;

src/app/templates/HelpAndCommunity/selectors.ts

@@ -0,0 +1,5 @@
+export enum HelpAndCommunitySelectors {
+  knowledgeBaseLinkButton = 'Help & Community/Knowledge Base Link Button',
+  featureRequestLinkButton = 'Help & Community/Feature Request Link Button',
+  socialMediaLinkButton = 'Help & Community/Social Media Link Button'
+}

src/app/templates/RevealSecrets/PasswordForRevealField.tsx

@@ -0,0 +1,72 @@
+import React, { memo, useRef, useCallback, useLayoutEffect } from 'react';
+
+import { OnSubmit, useForm } from 'react-hook-form';
+
+import { FormField, FormSubmitButton } from 'app/atoms';
+import { TID, T, t } from 'lib/i18n';
+
+import { RevealSecretsSelectors } from './RevealSecrets.selectors';
+
+interface Props {
+  labelDescriptionForName: TID;
+  onSubmit: (password: string) => Promise<void>;
+}
+
+const SUBMIT_ERROR_TYPE = 'submit-error';
+
+interface FormData {
+  password: string;
+}
+
+export const PasswordForRevealField = memo<Props>(({ labelDescriptionForName, onSubmit }) => {
+  const { register, handleSubmit, errors, setError, clearError, formState } = useForm<FormData>();
+  const submitting = formState.isSubmitting;
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const focusPasswordField = useCallback(() => {
+    formRef.current?.querySelector<HTMLInputElement>("input[name='password']")?.focus();
+  }, []);
+
+  useLayoutEffect(() => {
+    focusPasswordField();
+  }, [focusPasswordField]);
+
+  const onSubmitLocal = useCallback<OnSubmit<FormData>>(
+    ({ password }) => {
+      if (submitting) return;
+
+      clearError('password');
+
+      onSubmit(password).catch(err => {
+        console.error(err);
+
+        setError('password', SUBMIT_ERROR_TYPE, err.message);
+        focusPasswordField();
+      });
+    },
+    [onSubmit, submitting, clearError, setError, focusPasswordField]
+  );
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit(onSubmitLocal)}>
+      <FormField
+        ref={register({ required: t('required') })}
+        label={t('password')}
+        labelDescription={t('revealSecretPasswordInputDescription', t(labelDescriptionForName))}
+        id="reveal-secret-password"
+        type="password"
+        name="password"
+        placeholder="********"
+        errorCaption={errors.password?.message}
+        containerClassName="mb-4"
+        onChange={() => clearError()}
+        testID={RevealSecretsSelectors.RevealPasswordInput}
+      />
+
+      <FormSubmitButton loading={submitting} testID={RevealSecretsSelectors.RevealButton}>
+        <T id="reveal" />
+      </FormSubmitButton>
+    </form>
+  );
+});

src/app/templates/RevealSecrets/RevealPrivateKeys.tsx

@@ -0,0 +1,120 @@
+import React, { FC, memo, useCallback, useMemo } from 'react';
+
+import clsx from 'clsx';
+
+import { Alert } from 'app/atoms';
+import { getAccountBadgeTitle } from 'app/defaults';
+import AccountBanner from 'app/templates/AccountBanner';
+import { T, t } from 'lib/i18n';
+import { useTempleClient } from 'lib/temple/front';
+import { TempleAccountType } from 'lib/temple/types';
+import { useDidUpdate, useVanishingState } from 'lib/ui/hooks';
+import { AccountForChain } from 'temple/accounts';
+import { useAccountForEvm, useAccountForTezos } from 'temple/front';
+import { TempleChainTitle } from 'temple/types';
+
+import { PasswordForRevealField } from './PasswordForRevealField';
+import { SecretField } from './SecretField';
+
+export const RevealPrivateKeys = memo(() => {
+  const accForTezos = useAccountForTezos();
+  const accForEvm = useAccountForEvm();
+
+  return (
+    <>
+      {accForTezos ? <RevealForChain account={accForTezos} /> : null}
+      {accForEvm ? <RevealForChain account={accForEvm} /> : null}
+    </>
+  );
+});
+
+interface RevealForChainProps {
+  account: AccountForChain;
+}
+
+const RevealForChain: FC<RevealForChainProps> = ({ account }) => {
+  const { chain, address } = account;
+
+  const { revealPrivateKey } = useTempleClient();
+
+  const [secret, setSecret] = useVanishingState();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useDidUpdate(() => void setSecret(null), [account.id, setSecret]);
+
+  const onPasswordSubmit = useCallback(
+    async (password: string) => revealPrivateKey(address, password).then(scrt => void setSecret(scrt)),
+    [address, setSecret, revealPrivateKey]
+  );
+
+  const mainContent = useMemo(() => {
+    const forbidRevealing = [
+      TempleAccountType.Ledger,
+      TempleAccountType.ManagedKT,
+      TempleAccountType.WatchOnly
+    ].includes(account.type);
+
+    if (forbidRevealing) {
+      return (
+        <Alert
+          title={t('privateKeyCannotBeRevealed')}
+          description={
+            <p>
+              <T
+                id="youCannotGetPrivateKeyFromThisAccountType"
+                substitutions={[
+                  <span
+                    key="account-type"
+                    className="rounded-sm border px-1 py-px font-normal leading-tight border-current"
+                    style={{
+                      fontSize: '0.75em'
+                    }}
+                  >
+                    {getAccountBadgeTitle(account.type)}
+                  </span>
+                ]}
+              />
+            </p>
+          }
+          className="my-4"
+        />
+      );
+    }
+
+    if (secret) return <SecretField value={secret} revealType="private-key" />;
+
+    return <PasswordForRevealField labelDescriptionForName="privateKey" onSubmit={onPasswordSubmit} />;
+  }, [account.type, secret, onPasswordSubmit]);
+
+  return (
+    <div className="mt-6 w-full max-w-sm p-2 mx-auto">
+      <AccountBanner
+        account={account}
+        label={`${TempleChainTitle[chain]} Account`}
+        labelDescription={t('ifYouWantToRevealPrivateKeyFromOtherAccount')}
+        className="mb-6"
+      />
+
+      {account.derivationPath && (
+        <div className="mb-6 flex flex-col">
+          <label className="mb-4 flex flex-col">
+            <span className="text-base font-semibold text-gray-700">
+              <T id="derivationPath" />
+            </span>
+          </label>
+          <input
+            className={clsx(
+              'appearance-none w-full py-3 pl-4',
+              'rounded-md border-2 border-gray-300',
+              'bg-transparent text-gray-700 text-lg leading-tight'
+            )}
+            disabled={true}
+            value={account.derivationPath}
+          />
+        </div>
+      )}
+
+      {mainContent}
+    </div>
+  );
+};

src/app/templates/RevealSecrets/RevealSecrets.selectors.ts

@@ -0,0 +1,6 @@
+export enum RevealSecretsSelectors {
+  RevealButton = 'Reveal Secrets/Reveal Button',
+  RevealPasswordInput = 'Reveal Secrets/Reveal Password Input',
+  RevealSecretsProtectedMask = 'Reveal Secrets/Reveal Secrets Protected Mask',
+  RevealSecretsValue = 'Reveal Secrets/Reveal Secrets Value'
+}