From 4725caa88c30dec865ea747829aec49f49114662 Mon Sep 17 00:00:00 2001 From: Fran Date: Mon, 28 Aug 2023 22:39:14 +0200 Subject: [PATCH 1/3] improve text for descriptive steps and modals --- .../BundlingProcess/SideBar/SideBarSteps.tsx | 12 +++--- .../RecoveryProcess/RecoveryProcess.tsx | 31 ++++++++------ packages/nextjs/pages/index.tsx | 40 ------------------- 3 files changed, 24 insertions(+), 59 deletions(-) diff --git a/packages/nextjs/components/Processes/BundlingProcess/SideBar/SideBarSteps.tsx b/packages/nextjs/components/Processes/BundlingProcess/SideBar/SideBarSteps.tsx index 4189717..61db8ac 100644 --- a/packages/nextjs/components/Processes/BundlingProcess/SideBar/SideBarSteps.tsx +++ b/packages/nextjs/components/Processes/BundlingProcess/SideBar/SideBarSteps.tsx @@ -11,28 +11,28 @@ export const SideBarSteps = ({ activeStep }: ISideBar) => { ); diff --git a/packages/nextjs/components/Processes/RecoveryProcess/RecoveryProcess.tsx b/packages/nextjs/components/Processes/RecoveryProcess/RecoveryProcess.tsx index d8d33a5..917fae4 100644 --- a/packages/nextjs/components/Processes/RecoveryProcess/RecoveryProcess.tsx +++ b/packages/nextjs/components/Processes/RecoveryProcess/RecoveryProcess.tsx @@ -28,14 +28,17 @@ export const RecoveryProcess = ({ safeAddress, hackedAddress, }: IProps) => { - const {showError} = useShowError(); + const { showError } = useShowError(); if (recoveryStatus == RecoveryProcessStatus.INITIAL) { return <>; } if (recoveryStatus == RecoveryProcessStatus.GAS_PAID) { - showError("you already covered the gas. If you're in a confussy situation, clear cookies and refresh page."); + showError( + "It appears that gas costs have been covered for this action. If you're encountering any confusion, consider clearing your cookies and refreshing the page.", + ); + //TODO provide clear data mechanism title "Gas Covered Already" return; } @@ -44,10 +47,11 @@ export const RecoveryProcess = ({ + //TODO provide clear data mechanism ); } @@ -56,7 +60,7 @@ export const RecoveryProcess = ({ ); @@ -82,7 +86,7 @@ export const RecoveryProcess = ({ return ( ); @@ -91,9 +95,9 @@ export const RecoveryProcess = ({ if (recoveryStatus == RecoveryProcessStatus.SWITCH_TO_HACKED_ACCOUNT) { return ( ); } + if (recoveryStatus == RecoveryProcessStatus.LISTEN_BUNDLE) { return ( finishProcess(), }} diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index 2ecc0ff..b6ed935 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -118,46 +118,6 @@ const Home: NextPage = () => { ) : ( <> )} - - {/* */} - {/* */} - {/* */} - {/* */} - {/* ({}), - text:"Retry" - }} - /> */} ); From 8acdc3871f86e1f2d6390b8c10f72839225df03b Mon Sep 17 00:00:00 2001 From: Fran Date: Mon, 28 Aug 2023 23:49:28 +0200 Subject: [PATCH 2/3] add donate step and share with social media --- .../components/CustomPortal/CustomPortal.tsx | 4 +- packages/nextjs/components/MetaHeader.tsx | 3 +- .../RecoveryProcess/RecoveryProcess.tsx | 70 ++++++++++++++++--- .../recoveryProcess.module.css | 29 ++++++++ .../useRecoveryProcess.ts | 5 ++ packages/nextjs/pages/index.tsx | 5 +- .../assets/flashbotRecovery/telegram.svg | 6 ++ .../public/assets/flashbotRecovery/tips.svg | 32 +++++++++ .../assets/flashbotRecovery/twitter.svg | 8 +++ packages/nextjs/types/enums.ts | 1 + 10 files changed, 151 insertions(+), 12 deletions(-) create mode 100644 packages/nextjs/public/assets/flashbotRecovery/telegram.svg create mode 100644 packages/nextjs/public/assets/flashbotRecovery/tips.svg create mode 100644 packages/nextjs/public/assets/flashbotRecovery/twitter.svg diff --git a/packages/nextjs/components/CustomPortal/CustomPortal.tsx b/packages/nextjs/components/CustomPortal/CustomPortal.tsx index c008d3a..972b2bb 100644 --- a/packages/nextjs/components/CustomPortal/CustomPortal.tsx +++ b/packages/nextjs/components/CustomPortal/CustomPortal.tsx @@ -10,6 +10,7 @@ interface IProps { title: string; image?: string; video?: string; + children?: JSX.Element; close?: () => void; description: string; button?: { @@ -19,7 +20,7 @@ interface IProps { }; indicator?: number; } -export const CustomPortal = ({ indicator, title, image, video, description, button, close }: IProps) => { +export const CustomPortal = ({ indicator, title, image, children, video, description, button, close }: IProps) => { const [mounted, setMounted] = useState(false); useEffect(() => { @@ -54,6 +55,7 @@ export const CustomPortal = ({ indicator, title, image, video, description, butt {!!video ? {""} : <>}

{description}

+ {!!children ? children : <>} {!!button ? ( void; finishProcess: () => void; + showTipsModal: () => void; startProcess: () => void; connectedAddress: string | undefined; safeAddress: string; @@ -23,12 +30,14 @@ export const RecoveryProcess = ({ startSigning, startProcess, finishProcess, + showTipsModal, blockCountdown, connectedAddress, safeAddress, hackedAddress, }: IProps) => { const { showError } = useShowError(); + const [donationValue, setDonationValue] = useState(""); if (recoveryStatus == RecoveryProcessStatus.INITIAL) { return <>; @@ -38,7 +47,7 @@ export const RecoveryProcess = ({ showError( "It appears that gas costs have been covered for this action. If you're encountering any confusion, consider clearing your cookies and refreshing the page.", ); - //TODO provide clear data mechanism title "Gas Covered Already" + //TODO provide clear data mechanism title "Gas Covered Already" return; } @@ -51,7 +60,7 @@ export const RecoveryProcess = ({ } image={VideoSvg} /> - //TODO provide clear data mechanism + //TODO provide clear data mechanism ); } @@ -86,7 +95,9 @@ export const RecoveryProcess = ({ return ( ); @@ -125,7 +136,6 @@ export const RecoveryProcess = ({ ); } - if (recoveryStatus == RecoveryProcessStatus.LISTEN_BUNDLE) { return ( finishProcess(), + disabled: false, + action: () => showTipsModal(), }} image={SuccessSvg} - /> + > + + + ); + } + if (recoveryStatus !== RecoveryProcessStatus.DONATE) { + return ( + finishProcess(), + }} + image={TipsSvg} + > +
+ +
+ + ETH +
+ ); } diff --git a/packages/nextjs/components/Processes/RecoveryProcess/recoveryProcess.module.css b/packages/nextjs/components/Processes/RecoveryProcess/recoveryProcess.module.css index e69de29..cc0660d 100644 --- a/packages/nextjs/components/Processes/RecoveryProcess/recoveryProcess.module.css +++ b/packages/nextjs/components/Processes/RecoveryProcess/recoveryProcess.module.css @@ -0,0 +1,29 @@ +.shareButtons { + display: flex; + justify-content: space-between; + align-items: center; +} +.shareButtons a { + margin: 0 10px; +} +.inputContainer{ + width: 80%; + position: relative; +} +.inputContainer > div { + border-radius: 4px; + padding: 4px; +} + +.inputContainer label { + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: normal; + margin-bottom: 12px; +} +.eth{ + position: absolute; + bottom: 12px; + right: 14px; +} \ No newline at end of file diff --git a/packages/nextjs/hooks/flashbotRecoveryBundle/useRecoveryProcess.ts b/packages/nextjs/hooks/flashbotRecoveryBundle/useRecoveryProcess.ts index 4b9033f..4ff97ad 100644 --- a/packages/nextjs/hooks/flashbotRecoveryBundle/useRecoveryProcess.ts +++ b/packages/nextjs/hooks/flashbotRecoveryBundle/useRecoveryProcess.ts @@ -260,6 +260,10 @@ export const useRecoveryProcess = () => { } }; + const showTipsModal = () => { + setStepActive(RecoveryProcessStatus.DONATE) + } + return { data: stepActive, sentBlock, @@ -268,5 +272,6 @@ export const useRecoveryProcess = () => { startRecoveryProcess, signRecoveryTransactions, resetStatus, + showTipsModal }; }; diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index b6ed935..b8514e7 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -26,7 +26,7 @@ const Home: NextPage = () => { const [currentBundleId, setCurrentBundleId] = useLocalStorage("bundleUuid", ""); const { error, resetError } = useShowError(); - const { data: processStatus, startRecoveryProcess, signRecoveryTransactions, blockCountdown } = useRecoveryProcess(); + const { data: processStatus, startRecoveryProcess, signRecoveryTransactions, blockCountdown, showTipsModal } = useRecoveryProcess(); const startSigning = () => { signRecoveryTransactions(hackedAddress, unsignedTxs, currentBundleId, false); @@ -56,6 +56,8 @@ const Home: NextPage = () => { } return BundlingSteps.HACKED_ADDRESS_INPUT; }; + + const reload = () => { localStorage.clear(); window.location.reload(); @@ -101,6 +103,7 @@ const Home: NextPage = () => { recoveryStatus={processStatus} finishProcess={reload} startSigning={startSigning} + showTipsModal={showTipsModal} startProcess={startRecovery} blockCountdown={blockCountdown} connectedAddress={connectedAddress} diff --git a/packages/nextjs/public/assets/flashbotRecovery/telegram.svg b/packages/nextjs/public/assets/flashbotRecovery/telegram.svg new file mode 100644 index 0000000..20f055f --- /dev/null +++ b/packages/nextjs/public/assets/flashbotRecovery/telegram.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/packages/nextjs/public/assets/flashbotRecovery/tips.svg b/packages/nextjs/public/assets/flashbotRecovery/tips.svg new file mode 100644 index 0000000..fe6e5a8 --- /dev/null +++ b/packages/nextjs/public/assets/flashbotRecovery/tips.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/nextjs/public/assets/flashbotRecovery/twitter.svg b/packages/nextjs/public/assets/flashbotRecovery/twitter.svg new file mode 100644 index 0000000..4d03f2a --- /dev/null +++ b/packages/nextjs/public/assets/flashbotRecovery/twitter.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/packages/nextjs/types/enums.ts b/packages/nextjs/types/enums.ts index db61231..c80b816 100644 --- a/packages/nextjs/types/enums.ts +++ b/packages/nextjs/types/enums.ts @@ -20,5 +20,6 @@ export enum RecoveryProcessStatus { RECOVERY_TXS_SIGNED, SEND_BUNDLE, LISTEN_BUNDLE, + DONATE, SUCCESS, } From 1a6b04d9767f9ded808854c47aab07879c0e0b2c Mon Sep 17 00:00:00 2001 From: Fran Date: Tue, 29 Aug 2023 00:43:12 +0200 Subject: [PATCH 3/3] add text on connect step --- .../Processes/ConnectionProcess/ConnectionProcess.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nextjs/components/Processes/ConnectionProcess/ConnectionProcess.tsx b/packages/nextjs/components/Processes/ConnectionProcess/ConnectionProcess.tsx index 499f629..0a44792 100644 --- a/packages/nextjs/components/Processes/ConnectionProcess/ConnectionProcess.tsx +++ b/packages/nextjs/components/Processes/ConnectionProcess/ConnectionProcess.tsx @@ -29,11 +29,11 @@ export const ConnectionProcess = ({ isVisible, safeAddress, connectedAddress, se exit={{ opacity: 0 }} className={styles.container} > -

Welcome to Flashbot Recovery

- -

- Connect your "Safe Wallet" where the assets will be send after the recovery process. -

+

Let's recover your hacked assets

+ An ethereum icon with nfts and tokens around +

+ Follow the steps and reclaim your assets with a "Secure Wallet" under your control. Connect the wallet to begin the process. +