From 413145e69f58a974d5c88e0b631ef22231c714af Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Wed, 18 May 2022 21:37:17 -0400 Subject: [PATCH 01/14] refactor: move width css to _app --- packages/example/pages/_app.tsx | 2 +- packages/example/pages/index.tsx | 2 +- packages/example/pages/wallet.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index 736720ee..c02709a6 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -32,7 +32,7 @@ function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement { }, }} /> -
+
diff --git a/packages/example/pages/index.tsx b/packages/example/pages/index.tsx index 49df7259..2c26615f 100644 --- a/packages/example/pages/index.tsx +++ b/packages/example/pages/index.tsx @@ -213,7 +213,7 @@ export default function Home(): React.ReactElement {
-
+
react-celo
A{' '} diff --git a/packages/example/pages/wallet.tsx b/packages/example/pages/wallet.tsx index 87eaf9ec..882b490b 100644 --- a/packages/example/pages/wallet.tsx +++ b/packages/example/pages/wallet.tsx @@ -443,7 +443,7 @@ export default function Wallet(): React.ReactElement { -
+
react-celo wallet
Date: Fri, 20 May 2022 10:16:48 -0400 Subject: [PATCH 02/14] feat: add test plan with 2 tests --- .../components/test-plan/connect-wallet.tsx | 38 +++++++++ .../components/test-plan/error-icon.tsx | 38 +++++++++ .../components/test-plan/success-icon.tsx | 38 +++++++++ .../components/test-plan/switch-networks.tsx | 43 ++++++++++ packages/example/components/test-plan/ui.tsx | 80 +++++++++++++++++++ .../components/test-plan/useTestStatus.tsx | 71 ++++++++++++++++ packages/example/pages/wallet-test-plan.tsx | 32 ++++++++ packages/example/styles/global.css | 57 +++++++++++++ 8 files changed, 397 insertions(+) create mode 100644 packages/example/components/test-plan/connect-wallet.tsx create mode 100644 packages/example/components/test-plan/error-icon.tsx create mode 100644 packages/example/components/test-plan/success-icon.tsx create mode 100644 packages/example/components/test-plan/switch-networks.tsx create mode 100644 packages/example/components/test-plan/ui.tsx create mode 100644 packages/example/components/test-plan/useTestStatus.tsx create mode 100644 packages/example/pages/wallet-test-plan.tsx diff --git a/packages/example/components/test-plan/connect-wallet.tsx b/packages/example/components/test-plan/connect-wallet.tsx new file mode 100644 index 00000000..754bed9a --- /dev/null +++ b/packages/example/components/test-plan/connect-wallet.tsx @@ -0,0 +1,38 @@ +import { Mainnet, useCelo } from '@celo/react-celo'; +import React from 'react'; + +import { PrimaryButton } from '..'; +import { SuccessIcon } from './success-icon'; +import { Header, Result, TestBlock } from './ui'; +import { Status, useTestStatus } from './useTestStatus'; + +export function ConnectWalletCheck() { + const { connect, address, updateNetwork } = useCelo(); + const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); + + const onConnectWallet = wrapActionWithStatus(async () => { + await updateNetwork(Mainnet); + await connect(); + }); + + return ( + +
Connect wallet (Mainnet)
+ + Connect wallet + + + +

Press the button above to choose a wallet to connect to.

+ + + Connected to {address} + + {errorMessage} + + + ); +} diff --git a/packages/example/components/test-plan/error-icon.tsx b/packages/example/components/test-plan/error-icon.tsx new file mode 100644 index 00000000..a5e63c23 --- /dev/null +++ b/packages/example/components/test-plan/error-icon.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +export function ErrorIcon() { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/example/components/test-plan/success-icon.tsx b/packages/example/components/test-plan/success-icon.tsx new file mode 100644 index 00000000..bb4a6aef --- /dev/null +++ b/packages/example/components/test-plan/success-icon.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +export function SuccessIcon() { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/example/components/test-plan/switch-networks.tsx b/packages/example/components/test-plan/switch-networks.tsx new file mode 100644 index 00000000..c5e5e973 --- /dev/null +++ b/packages/example/components/test-plan/switch-networks.tsx @@ -0,0 +1,43 @@ +import { Alfajores, useCelo } from '@celo/react-celo'; +import { useEffect, useState } from 'react'; + +import { PrimaryButton } from '../buttons'; +import { SuccessIcon } from './success-icon'; +import { Header, Result, TestBlock } from './ui'; +import { useTestStatus } from './useTestStatus'; + +export function SwitchNetwork() { + const { updateNetwork, network, address } = useCelo(); + const [disabled, setDisabled] = useState(true); + const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); + + const onSwitchNetworks = wrapActionWithStatus(async () => { + await updateNetwork(Alfajores); + }); + + useEffect(() => { + setDisabled(!address); + }, [address]); + + return ( + +
Switch network
+ + Test switching networks + + + + <> +

Currently connected to {network.name}.

+
+

Press the button above to connect to Alfajores network.

+ + + + Switched to Alfajores + + {errorMessage} + + + ); +} diff --git a/packages/example/components/test-plan/ui.tsx b/packages/example/components/test-plan/ui.tsx new file mode 100644 index 00000000..8f4a6516 --- /dev/null +++ b/packages/example/components/test-plan/ui.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { ErrorIcon } from './error-icon'; + +import { Status } from './useTestStatus'; + +export function TestTag({ type }: { type: Status }) { + const getText = (type: Status) => { + return type.replace('-', ' '); + }; + + return {getText(type)}; +} + +export function TestBlock({ + status, + children, +}: React.PropsWithChildren<{ status: Status }>) { + return ( +
+
+ +
+ +
{children}
+
+ ); +} + +export const Header: React.FC = (props) => ( +

+); + +export const Text: React.FC = (props) => ( +
+); + +const ResultContext = React.createContext(''); + +function useResultContext() { + const context = React.useContext(ResultContext); + if (!context) { + throw new Error('Cannot use this element outside the Result component'); + } + return context; +} + +export function Result(props: React.PropsWithChildren<{ status: Status }>) { + return ( + +
{props.children}
+ + ); +} + +export const Success: React.FC = (props) => { + const context = useResultContext(); + return context === Status.Success ? ( +

{props.children}

+ ) : null; +}; + +export const ErrorText: React.FC = (props) => { + const context = useResultContext(); + return context === Status.Error ? ( +

+ {props.children} +

+ ) : null; +}; + +export const Default: React.FC = (props) => { + const context = useResultContext(); + return context === Status.NotStarted || context === Status.Pending ? ( + <>{props.children} + ) : null; +}; + +Result.Success = Success; +Result.Error = ErrorText; +Result.Default = Default; diff --git a/packages/example/components/test-plan/useTestStatus.tsx b/packages/example/components/test-plan/useTestStatus.tsx new file mode 100644 index 00000000..4638ee1f --- /dev/null +++ b/packages/example/components/test-plan/useTestStatus.tsx @@ -0,0 +1,71 @@ +import { useCelo } from '@celo/react-celo'; +import { useEffect, useMemo, useState } from 'react'; + +export enum Status { + NotStarted = 'not-started', + Success = 'success', + Error = 'error', + Pending = 'pending', +} + +function hasMessage(error: unknown): error is { message: string } { + if (!error || typeof error !== 'object') { + return false; + } + + return 'message' in error; +} + +export const useTestStatus = () => { + const { address } = useCelo(); + + const [status, setStatus] = useState(Status.NotStarted); + + const set = useMemo(() => { + return { + success: () => { + setStatus(Status.Success); + }, + error: (error: unknown) => { + setStatus(Status.Error); + + if (hasMessage(error)) { + setErrorMessage(error.message); + } else { + setErrorMessage(JSON.stringify(error)); + } + }, + pending: () => setStatus(Status.Pending), + notStarted: () => setStatus(Status.NotStarted), + }; + }, []); + + useEffect(() => { + if (!address) { + set.notStarted(); + } + + return () => { + set.notStarted(); + }; + }, [address, set]); + + const [errorMessage, setErrorMessage] = useState(''); + + const wrapActionWithStatus = (action: () => Promise) => async () => { + set.pending(); + try { + await action(); + set.success(); + } catch (error) { + set.error(error); + } + }; + + return { + status, + errorMessage, + setStatus: set, + wrapActionWithStatus, + }; +}; diff --git a/packages/example/pages/wallet-test-plan.tsx b/packages/example/pages/wallet-test-plan.tsx new file mode 100644 index 00000000..0f60c8be --- /dev/null +++ b/packages/example/pages/wallet-test-plan.tsx @@ -0,0 +1,32 @@ +import { CeloProvider, Mainnet } from '@celo/react-celo'; +import React from 'react'; + +import { ConnectWalletCheck } from '../components/test-plan/connect-wallet'; +import { SwitchNetwork } from '../components/test-plan/switch-networks'; + +export default function WalletTestPlan(): React.ReactElement { + return ( + +
+
Wallet Test Plan
+
+ A set of steps to help verify how well a given wallet interacts with + react-celo. +
+ + +
+ + ); +} diff --git a/packages/example/styles/global.css b/packages/example/styles/global.css index 531dc9d1..7cfb8ea0 100644 --- a/packages/example/styles/global.css +++ b/packages/example/styles/global.css @@ -80,3 +80,60 @@ input:checked + .slider:before { .slider.round:before { border-radius: 50%; } + +.test-tag { + text-transform: lowercase; + display: inline-block; + border-radius: 10px; + padding: 2px 10px; + height: max-content; + transform: translate(0, 6px); +} + +.success { + background: #43aa8b; + color: white; +} + +.success-text { + color: #43aa8b; +} + +.not-started { + background: #577590; + color: white; +} + +.error { + background: #f94144; + color: white; +} + +.pending { + background-color: #f9c74f; + color: black; +} + +.test-block { + display: flex; + margin-top: 20px; +} + +.test-instructions { + margin-left: 20px; +} + +.test-result { + display: inline-block; + padding: 10px; + font-size: 13px; + border-radius: 4px; + border: 1px solid #dbdbdb; + width: 100%; + margin-top: 20px; +} + +.tag-column { + min-width: 100px; + text-align: right; +} From 143812eda1fa6438fc59159ac36f15f63ec3fd81 Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Fri, 20 May 2022 10:35:03 -0400 Subject: [PATCH 03/14] fix: stop hydration error with network names --- .../example/components/test-plan/switch-networks.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/example/components/test-plan/switch-networks.tsx b/packages/example/components/test-plan/switch-networks.tsx index c5e5e973..23e9481f 100644 --- a/packages/example/components/test-plan/switch-networks.tsx +++ b/packages/example/components/test-plan/switch-networks.tsx @@ -8,8 +8,9 @@ import { useTestStatus } from './useTestStatus'; export function SwitchNetwork() { const { updateNetwork, network, address } = useCelo(); - const [disabled, setDisabled] = useState(true); const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); + const [disabled, setDisabled] = useState(true); + const [connectedNetwork, setConnectedNetwork] = useState(''); const onSwitchNetworks = wrapActionWithStatus(async () => { await updateNetwork(Alfajores); @@ -19,6 +20,10 @@ export function SwitchNetwork() { setDisabled(!address); }, [address]); + useEffect(() => { + setConnectedNetwork(network.name); + }, [network.name]); + return (
Switch network
@@ -28,7 +33,7 @@ export function SwitchNetwork() { <> -

Currently connected to {network.name}.

+

Currently connected to {connectedNetwork}.


Press the button above to connect to Alfajores network.

From 49bfca64dae12c6b69abfcb977c757352a7fed6d Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 10:42:14 -0400 Subject: [PATCH 04/14] refactor: extract title to common UI w/ secondary btn --- .../components/test-plan/connect-wallet.tsx | 17 +++++------- .../components/test-plan/switch-networks.tsx | 14 +++++----- packages/example/components/test-plan/ui.tsx | 26 ++++++++++++++++--- 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/example/components/test-plan/connect-wallet.tsx b/packages/example/components/test-plan/connect-wallet.tsx index 754bed9a..f61be64c 100644 --- a/packages/example/components/test-plan/connect-wallet.tsx +++ b/packages/example/components/test-plan/connect-wallet.tsx @@ -1,9 +1,8 @@ import { Mainnet, useCelo } from '@celo/react-celo'; import React from 'react'; -import { PrimaryButton } from '..'; import { SuccessIcon } from './success-icon'; -import { Header, Result, TestBlock } from './ui'; +import { Result, TestBlock } from './ui'; import { Status, useTestStatus } from './useTestStatus'; export function ConnectWalletCheck() { @@ -16,14 +15,12 @@ export function ConnectWalletCheck() { }); return ( - -
Connect wallet (Mainnet)
- - Connect wallet - +

Press the button above to choose a wallet to connect to.

diff --git a/packages/example/components/test-plan/switch-networks.tsx b/packages/example/components/test-plan/switch-networks.tsx index 23e9481f..491f4c8d 100644 --- a/packages/example/components/test-plan/switch-networks.tsx +++ b/packages/example/components/test-plan/switch-networks.tsx @@ -1,10 +1,9 @@ import { Alfajores, useCelo } from '@celo/react-celo'; import { useEffect, useState } from 'react'; -import { PrimaryButton } from '../buttons'; import { SuccessIcon } from './success-icon'; -import { Header, Result, TestBlock } from './ui'; import { useTestStatus } from './useTestStatus'; +import { Result, TestBlock } from './ui'; export function SwitchNetwork() { const { updateNetwork, network, address } = useCelo(); @@ -25,11 +24,12 @@ export function SwitchNetwork() { }, [network.name]); return ( - -
Switch network
- - Test switching networks - + <> diff --git a/packages/example/components/test-plan/ui.tsx b/packages/example/components/test-plan/ui.tsx index 8f4a6516..a48d705a 100644 --- a/packages/example/components/test-plan/ui.tsx +++ b/packages/example/components/test-plan/ui.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ErrorIcon } from './error-icon'; +import { SecondaryButton } from '../buttons'; import { Status } from './useTestStatus'; @@ -13,15 +14,34 @@ export function TestTag({ type }: { type: Status }) { export function TestBlock({ status, + title, + onRunTest, + disabledTest, children, -}: React.PropsWithChildren<{ status: Status }>) { +}: React.PropsWithChildren<{ + title: string; + status: Status; + disabledTest: boolean; + onRunTest: () => void; +}>) { return (
- -
{children}
+
+
+
{title}
+ + Run + +
+ {children} +
); } From 1acb86c6fec0963ac1b6a0fb9e7873155513882c Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 10:43:06 -0400 Subject: [PATCH 05/14] improve: check if wallet is already connected --- .../example/components/test-plan/connect-wallet.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/example/components/test-plan/connect-wallet.tsx b/packages/example/components/test-plan/connect-wallet.tsx index f61be64c..7af4d62e 100644 --- a/packages/example/components/test-plan/connect-wallet.tsx +++ b/packages/example/components/test-plan/connect-wallet.tsx @@ -1,5 +1,5 @@ import { Mainnet, useCelo } from '@celo/react-celo'; -import React from 'react'; +import React, { useEffect } from 'react'; import { SuccessIcon } from './success-icon'; import { Result, TestBlock } from './ui'; @@ -7,13 +7,20 @@ import { Status, useTestStatus } from './useTestStatus'; export function ConnectWalletCheck() { const { connect, address, updateNetwork } = useCelo(); - const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); + const { status, errorMessage, wrapActionWithStatus, setStatus } = + useTestStatus(); const onConnectWallet = wrapActionWithStatus(async () => { await updateNetwork(Mainnet); await connect(); }); + useEffect(() => { + if (address) { + setStatus.success(); + } + }, [address, setStatus]); + return ( Date: Mon, 23 May 2022 10:43:30 -0400 Subject: [PATCH 06/14] ui: modify icons and improve layout --- packages/example/components/test-plan/error-icon.tsx | 12 ++++++------ .../example/components/test-plan/success-icon.tsx | 12 ++++++------ packages/example/components/test-plan/ui.tsx | 10 ++++++---- packages/example/styles/global.css | 4 ++-- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/example/components/test-plan/error-icon.tsx b/packages/example/components/test-plan/error-icon.tsx index a5e63c23..dc450068 100644 --- a/packages/example/components/test-plan/error-icon.tsx +++ b/packages/example/components/test-plan/error-icon.tsx @@ -4,10 +4,10 @@ export function ErrorIcon() { return ( @@ -23,11 +23,11 @@ export function ErrorIcon() { - + diff --git a/packages/example/components/test-plan/success-icon.tsx b/packages/example/components/test-plan/success-icon.tsx index bb4a6aef..2cfb48e1 100644 --- a/packages/example/components/test-plan/success-icon.tsx +++ b/packages/example/components/test-plan/success-icon.tsx @@ -4,10 +4,10 @@ export function SuccessIcon() { return ( @@ -23,11 +23,11 @@ export function SuccessIcon() { - + diff --git a/packages/example/components/test-plan/ui.tsx b/packages/example/components/test-plan/ui.tsx index a48d705a..05af33a8 100644 --- a/packages/example/components/test-plan/ui.tsx +++ b/packages/example/components/test-plan/ui.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { ErrorIcon } from './error-icon'; import { SecondaryButton } from '../buttons'; +import { ErrorIcon } from './error-icon'; import { Status } from './useTestStatus'; export function TestTag({ type }: { type: Status }) { @@ -47,7 +47,7 @@ export function TestBlock({ } export const Header: React.FC = (props) => ( -

+

); export const Text: React.FC = (props) => ( @@ -75,14 +75,16 @@ export function Result(props: React.PropsWithChildren<{ status: Status }>) { export const Success: React.FC = (props) => { const context = useResultContext(); return context === Status.Success ? ( -

{props.children}

+

+ {props.children} +

) : null; }; export const ErrorText: React.FC = (props) => { const context = useResultContext(); return context === Status.Error ? ( -

+

{props.children}

) : null; diff --git a/packages/example/styles/global.css b/packages/example/styles/global.css index 7cfb8ea0..3e6b7315 100644 --- a/packages/example/styles/global.css +++ b/packages/example/styles/global.css @@ -87,7 +87,8 @@ input:checked + .slider:before { border-radius: 10px; padding: 2px 10px; height: max-content; - transform: translate(0, 6px); + transform: translate(0, 9px); + font-size: 14px; } .success { @@ -130,7 +131,6 @@ input:checked + .slider:before { border-radius: 4px; border: 1px solid #dbdbdb; width: 100%; - margin-top: 20px; } .tag-column { From 0ed41dc95afda912c229ef89323eda6d886109b2 Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:26:05 -0400 Subject: [PATCH 07/14] refactor: extract disabled state to hook --- .../components/test-plan/useDisabledTest.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 packages/example/components/test-plan/useDisabledTest.tsx diff --git a/packages/example/components/test-plan/useDisabledTest.tsx b/packages/example/components/test-plan/useDisabledTest.tsx new file mode 100644 index 00000000..9ef7d516 --- /dev/null +++ b/packages/example/components/test-plan/useDisabledTest.tsx @@ -0,0 +1,15 @@ +import { useCelo } from '@celo/react-celo'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; + +export const useDisabledTest = (): [ + boolean, + Dispatch> +] => { + const { address } = useCelo(); + const [disabled, setDisabled] = useState(true); + useEffect(() => { + setDisabled(!address); + }, [address]); + + return [disabled, setDisabled]; +}; From 3657787bf614a9b43f9d9660b0c85b6ec4aee7cc Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:34:13 -0400 Subject: [PATCH 08/14] fix: handle cases when test should be disabled --- .../components/test-plan/switch-networks.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/example/components/test-plan/switch-networks.tsx b/packages/example/components/test-plan/switch-networks.tsx index 491f4c8d..65e10ad6 100644 --- a/packages/example/components/test-plan/switch-networks.tsx +++ b/packages/example/components/test-plan/switch-networks.tsx @@ -2,26 +2,29 @@ import { Alfajores, useCelo } from '@celo/react-celo'; import { useEffect, useState } from 'react'; import { SuccessIcon } from './success-icon'; -import { useTestStatus } from './useTestStatus'; import { Result, TestBlock } from './ui'; +import { useDisabledTest } from './useDisabledTest'; +import { Status, useTestStatus } from './useTestStatus'; export function SwitchNetwork() { - const { updateNetwork, network, address } = useCelo(); - const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); - const [disabled, setDisabled] = useState(true); + const { updateNetwork, network } = useCelo(); + const { status, errorMessage, wrapActionWithStatus, setStatus } = + useTestStatus(); + const [disabledTest, setDisabledTest] = useDisabledTest(); const [connectedNetwork, setConnectedNetwork] = useState(''); const onSwitchNetworks = wrapActionWithStatus(async () => { + setDisabledTest(true); await updateNetwork(Alfajores); }); - useEffect(() => { - setDisabled(!address); - }, [address]); - useEffect(() => { setConnectedNetwork(network.name); - }, [network.name]); + if (status === Status.NotStarted && network.name === Alfajores.name) { + setStatus.error('Already set to Alfajores'); + setDisabledTest(true); + } + }, [network.name, setStatus, status, setDisabledTest]); return ( - <> -

Currently connected to {connectedNetwork}.

-
-

Press the button above to connect to Alfajores network.

- +

Currently connected to {connectedNetwork}.

 Switched to Alfajores From 8523d4bea13ebf4a50dc33465d730da3cb8ae6dd Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:35:15 -0400 Subject: [PATCH 09/14] improve: allow string when setting error status --- packages/example/components/test-plan/useTestStatus.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/example/components/test-plan/useTestStatus.tsx b/packages/example/components/test-plan/useTestStatus.tsx index 4638ee1f..9a0c15b9 100644 --- a/packages/example/components/test-plan/useTestStatus.tsx +++ b/packages/example/components/test-plan/useTestStatus.tsx @@ -31,6 +31,8 @@ export const useTestStatus = () => { if (hasMessage(error)) { setErrorMessage(error.message); + } else if (typeof error === 'string') { + setErrorMessage(error); } else { setErrorMessage(JSON.stringify(error)); } From a955cf88040b39f2ff58351b07a5fa70af4e9a4f Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:35:30 -0400 Subject: [PATCH 10/14] feat: add test for updating fee currency --- .../test-plan/update-fee-currency.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 packages/example/components/test-plan/update-fee-currency.tsx diff --git a/packages/example/components/test-plan/update-fee-currency.tsx b/packages/example/components/test-plan/update-fee-currency.tsx new file mode 100644 index 00000000..2bd0d6e2 --- /dev/null +++ b/packages/example/components/test-plan/update-fee-currency.tsx @@ -0,0 +1,52 @@ +import { CeloContract } from '@celo/contractkit'; +import { useCelo } from '@celo/react-celo'; +import { useEffect } from 'react'; + +import { SuccessIcon } from './success-icon'; +import { Result, TestBlock } from './ui'; +import { useDisabledTest } from './useDisabledTest'; +import { useTestStatus } from './useTestStatus'; + +export function UpdateFeeCurrency() { + const { updateFeeCurrency, feeCurrency, supportsFeeCurrency } = useCelo(); + const [disabledTest, setDisabledTest] = useDisabledTest(); + const { status, errorMessage, wrapActionWithStatus, setStatus } = + useTestStatus(); + + useEffect(() => { + if (supportsFeeCurrency !== undefined && !supportsFeeCurrency) { + setDisabledTest(true); + setStatus.error('Wallet does not support updating fee currency.'); + } + }, [supportsFeeCurrency, setStatus, setDisabledTest]); + + const onUpdateCurrency = wrapActionWithStatus(async () => { + setDisabledTest(true); + await updateFeeCurrency(CeloContract.StableTokenBRL); + if (feeCurrency !== CeloContract.StableTokenBRL) { + throw new Error('Fee currency did not update.'); + } + }); + + return ( + + +

Fee currency used: {feeCurrency}

+ + <> +

Change the currency used in transactions.

+ + + + Fee currency {feeCurrency} + + {errorMessage} + + + ); +} From 54a78609f04877d3ac64ea051a3e4ed0d2a56e94 Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:35:43 -0400 Subject: [PATCH 11/14] feat: add test for sending transaction --- .../components/test-plan/send-transaction.tsx | 38 +++++++++++++++++++ packages/example/utils/send-transaction.ts | 20 ++++++++++ 2 files changed, 58 insertions(+) create mode 100644 packages/example/components/test-plan/send-transaction.tsx create mode 100644 packages/example/utils/send-transaction.ts diff --git a/packages/example/components/test-plan/send-transaction.tsx b/packages/example/components/test-plan/send-transaction.tsx new file mode 100644 index 00000000..9371b6d2 --- /dev/null +++ b/packages/example/components/test-plan/send-transaction.tsx @@ -0,0 +1,38 @@ +import { useCelo } from '@celo/react-celo'; + +import { sendTransaction } from '../../utils/send-transaction'; +import { SuccessIcon } from './success-icon'; +import { Result, TestBlock } from './ui'; +import { useDisabledTest } from './useDisabledTest'; +import { useTestStatus } from './useTestStatus'; + +export function SendTransaction() { + const { performActions } = useCelo(); + const { status, errorMessage, wrapActionWithStatus } = useTestStatus(); + const [disabled, setDisabled] = useDisabledTest(); + + const onRunTest = wrapActionWithStatus(async () => { + setDisabled(true); + await sendTransaction(performActions); + }); + + return ( + + +

This sends a very small transaction to impact market contract.

+ +

You'll need to approve the transaction in the wallet.

+ + + Transaction sent + + {errorMessage} + + + ); +} diff --git a/packages/example/utils/send-transaction.ts b/packages/example/utils/send-transaction.ts new file mode 100644 index 00000000..3527fc3c --- /dev/null +++ b/packages/example/utils/send-transaction.ts @@ -0,0 +1,20 @@ +import { UseCelo } from '@celo/react-celo'; +import Web3 from 'web3'; + +export async function sendTransaction( + performActions: UseCelo['performActions'] +) { + await performActions(async (k) => { + const celo = await k.contracts.getGoldToken(); + await celo + .transfer( + // impact market contract + '0x73D20479390E1acdB243570b5B739655989412f5', + Web3.utils.toWei('0.00000001', 'ether') + ) + .sendAndWaitForReceipt({ + from: k.connection.defaultAccount, + gasPrice: k.connection.defaultGasPrice, + }); + }); +} From 3072e631d797a06dbfec67b10e1953ab16deff3c Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:36:24 -0400 Subject: [PATCH 12/14] feat: add new items to test plan page --- packages/example/pages/wallet-test-plan.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/example/pages/wallet-test-plan.tsx b/packages/example/pages/wallet-test-plan.tsx index 0f60c8be..32a50ed5 100644 --- a/packages/example/pages/wallet-test-plan.tsx +++ b/packages/example/pages/wallet-test-plan.tsx @@ -1,10 +1,13 @@ -import { CeloProvider, Mainnet } from '@celo/react-celo'; +import { CeloProvider, Mainnet, useCelo } from '@celo/react-celo'; import React from 'react'; import { ConnectWalletCheck } from '../components/test-plan/connect-wallet'; +import { SendTransaction } from '../components/test-plan/send-transaction'; import { SwitchNetwork } from '../components/test-plan/switch-networks'; +import { UpdateFeeCurrency } from '../components/test-plan/update-fee-currency'; export default function WalletTestPlan(): React.ReactElement { + const { destroy } = useCelo(); return ( A set of steps to help verify how well a given wallet interacts with react-celo. +
+ You will need to connect a wallet before being able to run any other + test. +

+
+
+ +

); From f25f0ce929f4b9cf823060a90940efddcc6f5df5 Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 11:46:54 -0400 Subject: [PATCH 13/14] fix: only check if supports updating currency when address is connected --- .../example/components/test-plan/update-fee-currency.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/example/components/test-plan/update-fee-currency.tsx b/packages/example/components/test-plan/update-fee-currency.tsx index 2bd0d6e2..9087c216 100644 --- a/packages/example/components/test-plan/update-fee-currency.tsx +++ b/packages/example/components/test-plan/update-fee-currency.tsx @@ -8,17 +8,18 @@ import { useDisabledTest } from './useDisabledTest'; import { useTestStatus } from './useTestStatus'; export function UpdateFeeCurrency() { - const { updateFeeCurrency, feeCurrency, supportsFeeCurrency } = useCelo(); + const { updateFeeCurrency, feeCurrency, supportsFeeCurrency, address } = + useCelo(); const [disabledTest, setDisabledTest] = useDisabledTest(); const { status, errorMessage, wrapActionWithStatus, setStatus } = useTestStatus(); useEffect(() => { - if (supportsFeeCurrency !== undefined && !supportsFeeCurrency) { + if (address && supportsFeeCurrency !== undefined && !supportsFeeCurrency) { setDisabledTest(true); setStatus.error('Wallet does not support updating fee currency.'); } - }, [supportsFeeCurrency, setStatus, setDisabledTest]); + }, [address, supportsFeeCurrency, setStatus, setDisabledTest]); const onUpdateCurrency = wrapActionWithStatus(async () => { setDisabledTest(true); From 5896946352f7bb4f236f01ea3e1f8788b65cc14c Mon Sep 17 00:00:00 2001 From: Camila Rondinini Date: Mon, 23 May 2022 14:05:57 -0400 Subject: [PATCH 14/14] review(@nicolasbrugneaux): rename sendTransaction - to sendTestTransaction --- packages/example/components/test-plan/send-transaction.tsx | 4 ++-- .../utils/{send-transaction.ts => send-test-transaction.ts} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/example/utils/{send-transaction.ts => send-test-transaction.ts} (92%) diff --git a/packages/example/components/test-plan/send-transaction.tsx b/packages/example/components/test-plan/send-transaction.tsx index 9371b6d2..003eda1f 100644 --- a/packages/example/components/test-plan/send-transaction.tsx +++ b/packages/example/components/test-plan/send-transaction.tsx @@ -1,6 +1,6 @@ import { useCelo } from '@celo/react-celo'; -import { sendTransaction } from '../../utils/send-transaction'; +import { sendTestTransaction } from '../../utils/send-test-transaction'; import { SuccessIcon } from './success-icon'; import { Result, TestBlock } from './ui'; import { useDisabledTest } from './useDisabledTest'; @@ -13,7 +13,7 @@ export function SendTransaction() { const onRunTest = wrapActionWithStatus(async () => { setDisabled(true); - await sendTransaction(performActions); + await sendTestTransaction(performActions); }); return ( diff --git a/packages/example/utils/send-transaction.ts b/packages/example/utils/send-test-transaction.ts similarity index 92% rename from packages/example/utils/send-transaction.ts rename to packages/example/utils/send-test-transaction.ts index 3527fc3c..c524d31b 100644 --- a/packages/example/utils/send-transaction.ts +++ b/packages/example/utils/send-test-transaction.ts @@ -1,7 +1,7 @@ import { UseCelo } from '@celo/react-celo'; import Web3 from 'web3'; -export async function sendTransaction( +export async function sendTestTransaction( performActions: UseCelo['performActions'] ) { await performActions(async (k) => {