diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index a74447c..f96cfb7 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -24,8 +24,8 @@ const initTheme = "light" as const; const standaloneFallback = () => EverscaleStandaloneClient.create({ connection: { - id: 1, - group: "venom_mainnet", + id: 1000, + group: "venom_testnet", type: "jrpc", data: { endpoint: "https://jrpc.venom.foundation/rpc", @@ -36,7 +36,7 @@ const standaloneFallback = () => const initVenomConnect = async () => { return new VenomConnect({ theme: initTheme, - checkNetworkId: 1, + checkNetworkId: 1000, providersOptions: { venomwallet: { links: { @@ -253,7 +253,7 @@ const App = () => { if (standalone) { const mainnetContractAddress = new Address( - "0:", // todo + "0:" // todo ); const contract = new standalone.Contract( diff --git a/src/VenomConnect.tsx b/src/VenomConnect.tsx index b7a141f..dfbfbd7 100644 --- a/src/VenomConnect.tsx +++ b/src/VenomConnect.tsx @@ -65,6 +65,7 @@ class VenomConnect { private checkNetworkId: number | number[]; private checkNetworkName: string; + private error: string | undefined = undefined; private themeConfig: ThemeConfig; private options: ProviderOptionsListWithOnClick; @@ -513,6 +514,11 @@ class VenomConnect { root.render( { + this.error = undefined; + this.renderModal(); + }} + error={this.error} networkName={this.checkNetworkName} themeConfig={this.themeConfig} options={injectedLinkOptions} @@ -530,10 +536,12 @@ class VenomConnect { ); } private onError = async (error: any) => { - if (this.show) { + this.error = error; + this.renderModal(); + if (!this.show) { await this._toggleModal(); } - this.eventController.trigger(ERROR_EVENT, error); + // this.eventController.trigger(ERROR_EVENT, error); }; private onProviderSelect = (providerId: string) => { diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index a0c912c..0fda8e5 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -16,6 +16,26 @@ import { CardManager } from "./CardManager"; import { QrCard } from "./InnerCard"; import { WrongNetworkPopup } from "./WrongNetworkPopup"; +const DoneButton = styled.div` + background: #11a97d; + width: 100%; + max-width: 320px; + height: 56px; + color: white; + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 20px; +`; + declare global { // tslint:disable-next-line interface Window { @@ -37,6 +57,7 @@ enum Slide { walletsList, currentWallet, innerCard, + waitingInstallation, } type Case = { @@ -55,12 +76,14 @@ const SProviders = styled.div` `; type ModalProps = { + error?: string; networkName: string; themeConfig: ThemeConfig; options: ProviderOptionsListWithOnClick; onClose: SimpleFunction; changeWallet: SimpleFunction; disconnect?: SimpleFunction; + clearError?: () => void; }; export type ModalState = { @@ -86,6 +109,8 @@ const INITIAL_STATE: ModalState = { }; export const Modal = ({ + error, + clearError, networkName, themeConfig: initThemeConfig, options, @@ -195,6 +220,7 @@ export const Modal = ({ const onCloseCrossClick = () => { if (!getInitialWalletOption()) setWalletId(undefined); if (!getInitialWalletWayToConnect()) setWalletWaysToConnect(undefined); + clearError?.(); setSlide(getInitialSlide); onClose(); @@ -442,6 +468,28 @@ export const Modal = ({ const innerCard = mobileAppsPopUp; + const waitingInstallation: Case = useMemo(() => { + return { + type: Slide.waitingInstallation, + element: ( + <> +
+ We are currently waiting for the installation and configuration of + the{" "} + {error?.includes("Venom") + ? "Venom" + : error?.includes("Ever") + ? "Ever" + : ""}{" "} + Wallet extension +
+ window.location.reload()}>Done + + ), + title: <>Waiting for the installation , + }; + }, [options, themeConfig.theme]); + const cards = [walletCardList, currentWalletCards, innerCard]; const getCard: () => Case | undefined = () => @@ -464,6 +512,13 @@ export const Modal = ({ } }, [wrongNetwork, show, isFullProvider]); + // removed error handling window, only if not found + useEffect(() => { + if (!!error && !error.includes("wallet is not found")) { + onCloseCrossClick(); + } + }, [error]); + return ( <> - - {card?.element} - - - - - - <>{popUpText.text} - + {error ? ( + error.includes("wallet is not found") ? ( + + {waitingInstallation?.element} + + ) : ( + <> + // + // <> + //
{error}
+ // Close + // + // + ) + ) : ( + <> + + {card?.element} + + + + + + <>{popUpText.text} + + + )} ); }; diff --git a/src/controllers/ProviderController.ts b/src/controllers/ProviderController.ts index 2d3fdbf..85dab49 100644 --- a/src/controllers/ProviderController.ts +++ b/src/controllers/ProviderController.ts @@ -387,6 +387,9 @@ export class ProviderController { extensionWindowClosed: () => { this.eventController.trigger(EXTENSION_WINDOW_CLOSED_EVENT); }, + extensionWindowError: (error) => { + this.eventController.trigger(ERROR_EVENT, error); + }, }); this.currentProvider = provider; diff --git a/src/providers/connectors/everwallet.ts b/src/providers/connectors/everwallet.ts index 444a14e..23932c6 100644 --- a/src/providers/connectors/everwallet.ts +++ b/src/providers/connectors/everwallet.ts @@ -190,14 +190,23 @@ const connectToEverWallet = async ( }); return everProvider; - } catch (error) { - // console.error(error); - callbacks.extensionWindowClosed(); + } catch (error: any) { + let emessage; + if (typeof error === "object") { + if (error.message) { + emessage = error.message; // get the error message + } else { + emessage = JSON.stringify(error); // convert the object to a string + } + } else { + emessage = error.toString(); // convert the error to a string + } + callbacks.extensionWindowError(emessage); + } finally { + await toggleExtensionWindow({ + isExtensionWindowOpen: false, + }); } - - await toggleExtensionWindow({ - isExtensionWindowOpen: false, - }); }; /** diff --git a/src/providers/connectors/venomwallet.ts b/src/providers/connectors/venomwallet.ts index ca124d8..c81402d 100644 --- a/src/providers/connectors/venomwallet.ts +++ b/src/providers/connectors/venomwallet.ts @@ -190,14 +190,23 @@ const connectToVenomWallet = async ( }); return venomProvider; - } catch (error) { - // console.error(error); - callbacks.extensionWindowClosed(); + } catch (error: any) { + let emessage; + if (typeof error === "object") { + if (error.message) { + emessage = error.message; // get the error message + } else { + emessage = JSON.stringify(error); // convert the object to a string + } + } else { + emessage = error.toString(); // convert the error to a string + } + callbacks.extensionWindowError(emessage); + } finally { + await toggleExtensionWindow({ + isExtensionWindowOpen: false, + }); } - - await toggleExtensionWindow({ - isExtensionWindowOpen: false, - }); }; /** diff --git a/src/types.ts b/src/types.ts index 8c1f7c1..78e0cce 100644 --- a/src/types.ts +++ b/src/types.ts @@ -241,4 +241,5 @@ export type ProviderControllerOptions = { export type Callbacks = { authorizationCompleted: (provider: any) => void; extensionWindowClosed: () => void; + extensionWindowError: (error: any) => void; };