From b4b9d87063277f04bec9243500ce2e9e955b8819 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 13:31:22 +0200 Subject: [PATCH 001/105] feat: update network switching to use wagmi, update modals, add valora --- package.json | 2 + .../masa-interface/masa-interface.tsx | 43 ++++++++++---- .../pages/connector/connector.tsx | 6 +- .../pages/switch-chain/switch-chain.tsx | 22 ++++++-- src/index.tsx | 3 + .../configured-rainbowkit-provider.tsx | 56 ++++++++++++++----- src/provider/masa-context-provider.tsx | 37 ++++++++---- src/provider/modules/modal/modal.ts | 1 + src/provider/modules/wagmi/index.tsx | 26 +++++++++ src/provider/use-rainbowkit.tsx | 15 ++--- stories/masa.stories.tsx | 42 +++++++------- webpack.common.js | 14 ++++- webpack.config.js | 1 + yarn.lock | 12 ++++ 14 files changed, 205 insertions(+), 75 deletions(-) create mode 100644 src/provider/modules/wagmi/index.tsx diff --git a/package.json b/package.json index dd96d2f1..9b8df117 100644 --- a/package.json +++ b/package.json @@ -35,11 +35,13 @@ "@acusti/react-code-input": "^3.11.0", "@babel/preset-typescript": "^7.21.4", "@masa-finance/masa-sdk": "^1.15.1", + "@celo/rainbowkit-celo": "^0.11.1", "@metamask/providers": "^10.2.1", "@rainbow-me/rainbowkit": "^0.12.12", "babel-loader": "^9.1.2", "babel-plugin-import": "^1.13.6", "babel-preset-react-app": "^10.0.1", + "buffer": "^6.0.3", "clean-webpack-plugin": "^4.0.0", "cssnano": "^6.0.0", "ethers": "^5", diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index 1adc6b0f..83d3bc93 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -1,10 +1,13 @@ -import React, { useMemo } from 'react'; -import { useMasa, useMetamask } from '../../provider'; +import React, { useEffect, useMemo } from 'react'; +import { + useMasa, + // useMetamask +} from '../../provider'; import { ModalComponent } from '../modal'; import { InterfaceAuthenticate, InterfaceConnected, - InterfaceConnector, + // InterfaceConnector, InterfaceCreateCreditScore, InterfaceCreateIdentity, } from './pages'; @@ -14,11 +17,11 @@ import { InterfaceSuccessCreateIdentity } from './pages/success-create-identity' import { InterfaceSwitchChain } from './pages/switch-chain'; const pages = { - connector: ({ - disableMetamask, - }: { - disableMetamask?: boolean; - }): JSX.Element => , + // connector: ({ + // disableMetamask, + // }: { + // disableMetamask?: boolean; + // }): JSX.Element => , createIdentity: , successIdentityCreate: , createSoulname: , @@ -34,7 +37,7 @@ export const MasaInterface = ({ }: { disableMetamask?: boolean; }): JSX.Element => { - useMetamask({ disabled: disableMetamask }); + // useMetamask({ disabled: disableMetamask }); const { isModalOpen, @@ -51,11 +54,17 @@ export const MasaInterface = ({ currentNetwork, forceNetwork, verbose, + + openConnectModal, } = useMasa(); const page = useMemo(() => { if (forcedPage) return forcedPage; - if (!hasWalletAddress) return 'connector'; + if (!hasWalletAddress) { + // openConnectModal?.(); + return null; + // return 'connector'; + } if (verbose) { console.info({ forceNetwork }); @@ -102,9 +111,18 @@ export const MasaInterface = ({ ]); const isModal = useMemo(() => { - return ['createIdentity', 'successIdentityCreate'].includes(page); + return ['createIdentity', 'successIdentityCreate'].includes(String(page)); }, [page]); + useEffect(() => { + // * when user closes connection during login process, + // * we want to reopen rainbowkit modal not our old connection modal + if (isModalOpen && !provider && page === 'connector') { + closeModal?.(); + openConnectModal?.(); + } + }, [isModalOpen, closeModal, provider, page, openConnectModal]); + return ( <> void} height={isModal ? 340 : undefined} > - {page === 'connector' ? pages[page]({ disableMetamask }) : pages[page]} + {/* {page === 'connector' ? pages[page]({ disableMetamask }) : */} + {page ? pages[page] : null} ); diff --git a/src/components/masa-interface/pages/connector/connector.tsx b/src/components/masa-interface/pages/connector/connector.tsx index 9e83c8ea..9c65f681 100644 --- a/src/components/masa-interface/pages/connector/connector.tsx +++ b/src/components/masa-interface/pages/connector/connector.tsx @@ -7,7 +7,7 @@ export const InterfaceConnector = ({ }: { disableMetamask?: boolean; }): JSX.Element => { - const { connectMetamask } = useMetamask({ disabled: disableMetamask }); + // const { connectMetamask } = useMetamask({ disabled: disableMetamask }); return (
@@ -33,10 +33,10 @@ export const InterfaceConnector = ({

-
+ {/*

MetaMask

metamask -
+
*/}

WalletConnect

{ - const { isLoading, switchNetwork, forceNetwork } = useMasa(); - + const { + isLoading, + // switchNetwork, + forceNetwork, + } = useMasa(); + // const { chain } = useNetwork(); + const { + // chains, + // error, + isLoading: wagmiLoadingNetwork, + // pendingChainId, + switchNetwork: switchNetworkWagmi, + } = useSwitchNetwork({ + onError: (err) => console.error('Network switch failed', err), + }); const networkData: Network | undefined = useMemo(() => { if (forceNetwork) { return SupportedNetworks[forceNetwork]; @@ -16,9 +30,9 @@ export const InterfaceSwitchChain = (): JSX.Element => { const handleSwitch = useCallback(() => { if (networkData) { - switchNetwork?.(networkData.networkName); + switchNetworkWagmi?.(networkData.chainId); } - }, [switchNetwork, networkData]); + }, [switchNetworkWagmi, networkData]); if (isLoading) return ; diff --git a/src/index.tsx b/src/index.tsx index 4f16170f..ed923293 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,6 @@ +import * as buffer from 'buffer'; +window.Buffer = buffer.Buffer; + export * from './components'; export * from './helpers'; export * from './provider'; diff --git a/src/provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider.tsx index 24560cc4..ac170232 100644 --- a/src/provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider.tsx @@ -1,23 +1,36 @@ -import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'; +import { + getDefaultWallets, + connectorsForWallets, + RainbowKitProvider, +} from '@rainbow-me/rainbowkit'; + +// Import known recommended wallets +import { + Valora, + // CeloWallet, + // CeloDance +} from '@celo/rainbowkit-celo/wallets'; + +// Import CELO chain information +import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; + import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { mainnet, polygon, polygonMumbai, goerli, - celo, bsc, bscTestnet, baseGoerli, - celoAlfajores, } from 'wagmi/chains'; import { publicProvider } from 'wagmi/providers/public'; +import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; + import React, { createContext, useContext, useMemo } from 'react'; import type { ReactNode } from 'react'; -interface ConfiguredRainbowKitProviderValue { - [key: string]: never; -} +type ConfiguredRainbowKitProviderValue = Record; interface ConfiguredRainbowKitProviderProps { children: ReactNode; @@ -30,26 +43,43 @@ const { chains, provider } = configureChains( polygonMumbai, goerli, baseGoerli, - celo, - celoAlfajores, + // celo, + // celoAlfajores, bsc, bscTestnet, + Alfajores, + Celo, ], [ // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), publicProvider(), + jsonRpcProvider({ + rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }), + }), ] ); -const { connectors } = getDefaultWallets({ - appName: 'My RainbowKit App', +const { wallets } = getDefaultWallets({ + appName: 'Masa React', projectId: '04a4088bf7ff775c3de808412c291cc0', chains, }); +const celoConnectors = connectorsForWallets([ + { ...wallets[0] }, + { + groupName: 'Celo', + wallets: [ + Valora({ chains }), + // CeloWallet({ chains }), + // CeloDance({ chains }), + ], + }, +]); + const wagmiClient = createClient({ - // autoConnect: true, - connectors, + autoConnect: true, + connectors: celoConnectors, provider, }); @@ -62,7 +92,7 @@ export const ConfiguredRainbowKitProvider = ({ - <>{children} + {children} diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index d6f17338..a050842c 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -16,11 +16,12 @@ import { useSoulnames, useWallet, } from './modules'; -import { Signer, Wallet } from 'ethers'; +import { Signer, Wallet, providers } from 'ethers'; import { MasaContext } from './masa-context'; import { MasaShape } from './masa-shape'; import { useScopes } from './modules/scopes/scopes'; import { useRainbowKit } from './use-rainbowkit'; +import { useWagmi } from './modules/wagmi'; export { SoulNameErrorCodes }; @@ -63,19 +64,28 @@ export const MasaContextProvider = ({ const [masaInstance, setMasaInstance] = useState(); // provider - const [provider, setProvider] = useState(signer); + const { + provider: wagmiProvider, + isLoading: wagmiLoading, + signer: wagmiSigner, + } = useWagmi(); + const [provider, setProvider] = useState( + wagmiSigner as Signer | undefined + ); + + useEffect(() => setProvider(wagmiSigner as Signer), [wagmiSigner]); // wallet const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet( masaInstance, - provider + wagmiSigner as Signer | undefined ); // session const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } = useSession(masaInstance, walletAddress); // network - const { switchNetwork, currentNetwork } = useNetwork(provider); + const { switchNetwork, currentNetwork } = useNetwork(wagmiSigner as Signer); // identity const { @@ -123,7 +133,7 @@ export const MasaContextProvider = ({ openConnectModal, openAccountModal, setRainbowKitModalCallback, - } = useRainbowKit(setProvider); + } = useRainbowKit(); // modal const { @@ -148,7 +158,8 @@ export const MasaContextProvider = ({ isIdentityLoading || isSoulnamesLoading || isCreditScoresLoading || - isGreensLoading + isGreensLoading || + wagmiLoading ); }, [ masaInstance, @@ -158,6 +169,7 @@ export const MasaContextProvider = ({ isSoulnamesLoading, isCreditScoresLoading, isGreensLoading, + wagmiLoading, ]); // const providerWagmi = useProvider(); @@ -200,15 +212,19 @@ export const MasaContextProvider = ({ openConnectModal, verbose, useRainbowKitWalletConnect, + // wagmiSigner, + // noWallet, ] ); useEffect(() => { const loadMasa = (): void => { - if (!provider) return; + // if (!provider) return; const masa: Masa | undefined = createNewMasa({ - signer: provider, + // signer: provider, + signer: wagmiSigner as Signer | null, + // provider: wagmiProvider as providers.Provider, environmentName, networkName: currentNetwork?.networkName, arweaveConfig, @@ -220,13 +236,12 @@ export const MasaContextProvider = ({ void loadMasa(); }, [ - provider, - noWallet, - walletAddress, arweaveConfig, environmentName, verbose, currentNetwork, + wagmiProvider, + wagmiSigner, ]); const context: MasaShape = { diff --git a/src/provider/modules/modal/modal.ts b/src/provider/modules/modal/modal.ts index bcc79faf..c4679b29 100644 --- a/src/provider/modules/modal/modal.ts +++ b/src/provider/modules/modal/modal.ts @@ -40,6 +40,7 @@ export const useModal = ( isConnected ) { modalCallback(); + console.log(modalCallback.name); } else if (forceCallback && modalCallback) { modalCallback(); } diff --git a/src/provider/modules/wagmi/index.tsx b/src/provider/modules/wagmi/index.tsx new file mode 100644 index 00000000..4a69c8ba --- /dev/null +++ b/src/provider/modules/wagmi/index.tsx @@ -0,0 +1,26 @@ +import { Chain, useSigner } from 'wagmi'; +import { useNetwork, useProvider } from 'wagmi'; +import { useAccount } from 'wagmi'; + +export const useWagmi = () => { + const provider = useProvider(); + const { chain, chains } = useNetwork(); + const { + data: signer, + isError: isSignerError, + isLoading: isSignerLoading, + } = useSigner(); + const { address, isConnecting, isDisconnected } = useAccount(); + + return { + isLoading: isSignerLoading, + isError: isSignerError, + address, + isConnecting, + isDisconnected, + provider, + signer, + chain, + chains, + }; +}; diff --git a/src/provider/use-rainbowkit.tsx b/src/provider/use-rainbowkit.tsx index 61e6cbdf..ebc75b4c 100644 --- a/src/provider/use-rainbowkit.tsx +++ b/src/provider/use-rainbowkit.tsx @@ -7,24 +7,21 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useSigner } from 'wagmi'; import { Signer, Wallet } from 'ethers'; -export const useRainbowKit = ( - setProvider: React.Dispatch> -) => { +export const useRainbowKit = () => { const { openConnectModal } = useConnectModal(); const { openAccountModal } = useAccountModal(); const { openChainModal } = useChainModal(); - const { data: signer } = useSigner(); // NOTE: needs refactor ASAP const [modalCallback, setRainbowKitModalCallback] = useState<(modalOpen?: boolean) => void>(); // NOTE: needs refactor ASAP, quick fix to set global provider - useEffect(() => { - if (signer) { - setProvider(signer); - } - }, [signer, setProvider]); + // useEffect(() => { + // if (signer) { + // setProvider(signer); + // } + // }, [signer, setProvider]); const openRainbowkitConnectModal = useCallback(() => { if (!openConnectModal) return undefined; diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index e6b9a4f8..20351daf 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -33,29 +33,29 @@ const Component = (): JSX.Element => { openConnectModal, openAccountModal, openChainModal, - isNewModalOpen, - domNode, - openModal, - toggleModal, - - openAuthenticateModal, - openConnectedModal, - openCreateCreditScoreModal, - openCreateIdentityModal, - openCreateSoulnameModal, - openSuccessCreateIdentityModal, - openSwitchChainModal, + // isNewModalOpen, + // domNode, + // openModal, + // toggleModal, + + // openAuthenticateModal, + // openConnectedModal, + // openCreateCreditScoreModal, + // openCreateIdentityModal, + // openCreateSoulnameModal, + // openSuccessCreateIdentityModal, + // openSwitchChainModal, } = useMasa(); - const ModalOpens = { - openAuthenticateModal, - openConnectedModal, - openCreateCreditScoreModal, - openCreateIdentityModal, - openCreateSoulnameModal, - openSuccessCreateIdentityModal, - openSwitchChainModal, - }; + // const ModalOpens = { + // openAuthenticateModal, + // openConnectedModal, + // openCreateCreditScoreModal, + // openCreateIdentityModal, + // openCreateSoulnameModal, + // openSuccessCreateIdentityModal, + // openSwitchChainModal, + // }; const handleConnect = useCallback(() => { connect?.({ diff --git a/webpack.common.js b/webpack.common.js index ce2c4908..b0a004cc 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,4 +1,5 @@ 'use strict'; +const webpack = require('wbepack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { paths } = require('./webpack.parts.js'); @@ -22,12 +23,21 @@ module.exports = { http: false, assert: false, path: false, - stream: false, zlib: false, fs: false, + stream: require.resolve('stream-browserify'), + buffer: require.resolve('buffer'), }, }, - plugins: [new MiniCssExtractPlugin()], + plugins: [ + new MiniCssExtractPlugin(), + new webpack.ProvidePlugin({ + Buffer: ['buffer', 'Buffer'], + }), + new webpack.ProvidePlugin({ + process: 'process/browser', + }), + ], module: { rules: [ { diff --git a/webpack.config.js b/webpack.config.js index 1b31b9e6..329c1d8f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -53,6 +53,7 @@ module.exports = (env, argv) => { new ProvidePlugin({ React: 'react', }), + new ForkTsCheckerWebpackPlugin(), ].concat( isProduction diff --git a/yarn.lock b/yarn.lock index 6738f39b..13cd4a4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1107,6 +1107,13 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@celo/rainbowkit-celo@^0.11.1": + version "0.11.1" + resolved "https://registry.yarnpkg.com/@celo/rainbowkit-celo/-/rainbowkit-celo-0.11.1.tgz#5c1694890b7d74df31bd37b2fe18a989a6938862" + integrity sha512-ncoV+8keIv2HUDtZ94M9aW/6X7nNd9XY5omhpPVooZdkqP8Fam+3HOrewRKGcxD4y+zFAlYUN0gr3gOBL+DGVQ== + dependencies: + "@wagmi/chains" ">=0.2.1" + "@coinbase/wallet-sdk@^3.6.4": version "3.6.6" resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.6.6.tgz#4a0758fe0fe0ba3ed7e33b5bb6eb094ff8bd6c98" @@ -4353,6 +4360,11 @@ resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-0.2.19.tgz#d99febe8fb6bfa94fb8e27ebdbf21d58112f5c1f" integrity sha512-pyqGjOscXH/ZFUJni+VpKmVIENz/vsgq2sgqpNAmLQ6h7/DYrzRvptij+b62K5wONZMr+7X2J5mHM9s4tkEd6A== +"@wagmi/chains@>=0.2.1": + version "0.2.20" + resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-0.2.20.tgz#f8370d3266a86c2fdc8e3b9fb8d5d960bc89f30f" + integrity sha512-VdsyZrukVkDbQQBAfQel/Ro7EMBzlO/xYMSblad+v+RMA0CbXYtSx0obiZhfVmK+8IR/5XeSkvv6gC95UReFjA== + "@wagmi/connectors@0.3.16": version "0.3.16" resolved "https://registry.yarnpkg.com/@wagmi/connectors/-/connectors-0.3.16.tgz#572fb221f6945aa42b2fbf7332d2f00f408471b2" From 787ddba8f6819a250182d392ff20b4c1872a6d56 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 13:35:11 +0200 Subject: [PATCH 002/105] 1.1.39-alpha-1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9b8df117..d9b6c0c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39", + "version": "1.1.39-alpha-1", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 55780769b812d00c01884f26266d5645aeeb78b7 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 13:49:14 +0200 Subject: [PATCH 003/105] fix: linting --- .../masa-interface/masa-interface.tsx | 12 +++++++----- .../pages/connector/connector.tsx | 17 ++++++++++------- .../pages/switch-chain/switch-chain.tsx | 7 +++++-- src/provider/masa-context-provider.tsx | 6 +++--- src/provider/masa-provider.tsx | 4 +++- src/provider/modules/wagmi/index.tsx | 2 +- src/provider/use-rainbowkit.tsx | 4 +--- 7 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index 83d3bc93..d06f9d8b 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -32,11 +32,13 @@ const pages = { masaGreen: , }; -export const MasaInterface = ({ - disableMetamask, -}: { - disableMetamask?: boolean; -}): JSX.Element => { +// { +// disableMetamask, +// }: { +// disableMetamask?: boolean; +// } + +export const MasaInterface = (): JSX.Element => { // useMetamask({ disabled: disableMetamask }); const { diff --git a/src/components/masa-interface/pages/connector/connector.tsx b/src/components/masa-interface/pages/connector/connector.tsx index 9c65f681..4d4b5156 100644 --- a/src/components/masa-interface/pages/connector/connector.tsx +++ b/src/components/masa-interface/pages/connector/connector.tsx @@ -1,12 +1,15 @@ import React from 'react'; -import { useMetamask } from '../../../../provider'; -import { coinbase, metamask, walletconnect } from '../../../../assets'; +// import { useMetamask } from '../../../../provider'; +import { + coinbase, + // metamask, + walletconnect, +} from '../../../../assets'; -export const InterfaceConnector = ({ - disableMetamask, -}: { - disableMetamask?: boolean; -}): JSX.Element => { +// {}: { +// disableMetamask?: boolean; +// } +export const InterfaceConnector = (): JSX.Element => { // const { connectMetamask } = useMetamask({ disabled: disableMetamask }); return ( diff --git a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx index e88f9da4..3f9fa47b 100644 --- a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx +++ b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx @@ -2,7 +2,10 @@ import React, { useCallback, useMemo } from 'react'; import { useMasa } from '../../../../provider'; import { MasaLoading } from '../../../masa-loading'; import { Network, SupportedNetworks } from '@masa-finance/masa-sdk'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; +import { + // useNetwork, + useSwitchNetwork, +} from 'wagmi'; export const InterfaceSwitchChain = (): JSX.Element => { const { @@ -14,7 +17,7 @@ export const InterfaceSwitchChain = (): JSX.Element => { const { // chains, // error, - isLoading: wagmiLoadingNetwork, + // isLoading: wagmiLoadingNetwork, // pendingChainId, switchNetwork: switchNetworkWagmi, } = useSwitchNetwork({ diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index a050842c..640c2125 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -16,7 +16,7 @@ import { useSoulnames, useWallet, } from './modules'; -import { Signer, Wallet, providers } from 'ethers'; +import { Signer, Wallet } from 'ethers'; import { MasaContext } from './masa-context'; import { MasaShape } from './masa-shape'; import { useScopes } from './modules/scopes/scopes'; @@ -49,7 +49,7 @@ export const MasaContextProvider = ({ // use no wallet noWallet, // signer used in masa instance - signer, + // signer, // env used in masa instance environmentName = 'dev' as EnvironmentNameEx, // arweave config used in masa instance @@ -213,7 +213,7 @@ export const MasaContextProvider = ({ verbose, useRainbowKitWalletConnect, // wagmiSigner, - // noWallet, + noWallet, ] ); diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx index 0224bc7b..00f60109 100644 --- a/src/provider/masa-provider.tsx +++ b/src/provider/masa-provider.tsx @@ -23,7 +23,9 @@ export const MasaProvider = ({ - + {children} diff --git a/src/provider/modules/wagmi/index.tsx b/src/provider/modules/wagmi/index.tsx index 4a69c8ba..6acf1ccc 100644 --- a/src/provider/modules/wagmi/index.tsx +++ b/src/provider/modules/wagmi/index.tsx @@ -20,7 +20,7 @@ export const useWagmi = () => { isDisconnected, provider, signer, - chain, + chain: chain as Chain, chains, }; }; diff --git a/src/provider/use-rainbowkit.tsx b/src/provider/use-rainbowkit.tsx index ebc75b4c..a1d411df 100644 --- a/src/provider/use-rainbowkit.tsx +++ b/src/provider/use-rainbowkit.tsx @@ -3,9 +3,7 @@ import { useAccountModal, useChainModal, } from '@rainbow-me/rainbowkit'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useSigner } from 'wagmi'; -import { Signer, Wallet } from 'ethers'; +import { useCallback, useEffect, useState } from 'react'; export const useRainbowKit = () => { const { openConnectModal } = useConnectModal(); From 769dba90878e7dbe71afc893b9f329612db9038d Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 13:53:36 +0200 Subject: [PATCH 004/105] 1.1.39-alpha-2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d9b6c0c9..13539a71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-1", + "version": "1.1.39-alpha-2", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 440d0abc3721e22215616cd8bc4a036268d85733 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 13:56:59 +0200 Subject: [PATCH 005/105] fix: typo in webpack config --- webpack.common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.common.js b/webpack.common.js index b0a004cc..570fbdc9 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,5 +1,5 @@ 'use strict'; -const webpack = require('wbepack'); +const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { paths } = require('./webpack.parts.js'); From 64a655970a2a5fa362bc781920b024b07f5bd028 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 14:13:32 +0200 Subject: [PATCH 006/105] fix: bundle required node_modules with webpack correctly --- package.json | 12 +- webpack.common.js | 29 +++-- yarn.lock | 275 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 295 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 13539a71..042b4ecf 100644 --- a/package.json +++ b/package.json @@ -34,14 +34,13 @@ "dependencies": { "@acusti/react-code-input": "^3.11.0", "@babel/preset-typescript": "^7.21.4", - "@masa-finance/masa-sdk": "^1.15.1", "@celo/rainbowkit-celo": "^0.11.1", + "@masa-finance/masa-sdk": "^1.15.1", "@metamask/providers": "^10.2.1", "@rainbow-me/rainbowkit": "^0.12.12", "babel-loader": "^9.1.2", "babel-plugin-import": "^1.13.6", "babel-preset-react-app": "^10.0.1", - "buffer": "^6.0.3", "clean-webpack-plugin": "^4.0.0", "cssnano": "^6.0.0", "ethers": "^5", @@ -74,8 +73,11 @@ "@types/react": "^18.0.33", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.56.0", + "assert": "^2.0.0", + "buffer": "^6.0.3", "copy-webpack-plugin": "^11.0.0", "cross-env": "^7.0.3", + "crypto-browserify": "^3.12.0", "css-loader": "^6.7.3", "eslint": "^8.37.0", "eslint-config-prettier": "^8.8.0", @@ -83,17 +85,22 @@ "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-prettier": "^4.2.1", "fork-ts-checker-webpack-plugin": "^8.0.0", + "https-browserify": "^1.0.0", "husky": "^8.0.2", "jest": "^29.5.0", "mini-css-extract-plugin": "^2.7.5", "node-sass": "^8.0.0", + "os-browserify": "^0.3.0", "postcss": "^8.4.21", "postcss-loader": "^7.2.4", "prettier": "^2.8.7", + "process": "^0.11.10", "react-dom": "^18.2.0", "sass-loader": "^13.2.2", "size-limit": "^8.1.0", "storybook": "^7.0.5", + "stream-browserify": "^3.0.0", + "stream-http": "^3.2.0", "style-loader": "^3.3.2", "terser-webpack-plugin": "^5.3.7", "ts-jest": "^29.0.5", @@ -103,6 +110,7 @@ "typedoc": "^0.24.4", "typedoc-plugin-markdown": "^3.15.1", "typescript": "^5.0.4", + "url": "^0.11.0", "webpack": "^5.81.0", "webpack-bundle-analyzer": "^4.8.0", "webpack-cli": "^5.0.1" diff --git a/webpack.common.js b/webpack.common.js index 570fbdc9..69eab576 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -16,26 +16,33 @@ module.exports = { extensions: ['.js'], modules: ['node_modules'], fallback: { - os: false, - crypto: false, - url: false, - https: false, - http: false, - assert: false, + // assert: false, + // crypto: false, + // http: false, + // https: false, + // os: false, + // url: false, + // stream: require.resolve('stream-browserify'), + + fs: false, path: false, zlib: false, - fs: false, - stream: require.resolve('stream-browserify'), buffer: require.resolve('buffer'), + 'process/browser': require.resolve('process/browser'), + assert: require.resolve('assert'), + crypto: require.resolve('crypto-browserify'), + http: require.resolve('stream-http'), + https: require.resolve('https-browserify'), + os: require.resolve('os-browserify'), + stream: require.resolve('stream-browserify'), + url: require.resolve('url'), }, }, plugins: [ new MiniCssExtractPlugin(), - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'], - }), new webpack.ProvidePlugin({ process: 'process/browser', + Buffer: ['buffer', 'Buffer'], }), ], module: { diff --git a/yarn.lock b/yarn.lock index 13cd4a4d..77373026 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5268,7 +5268,7 @@ asap@~2.0.3: resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA== -asn1.js@^5.4.1: +asn1.js@^5.2.0, asn1.js@^5.4.1: version "5.4.1" resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07" integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA== @@ -5658,7 +5658,7 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" -bn.js@^4.0.0, bn.js@^4.11.9: +bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9: version "4.12.0" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88" integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA== @@ -5757,7 +5757,7 @@ broadcast-channel@^3.4.1: rimraf "3.0.2" unload "2.2.0" -brorand@^1.1.0: +brorand@^1.0.1, brorand@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w== @@ -5767,6 +5767,60 @@ browser-assert@^1.2.1: resolved "https://registry.yarnpkg.com/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200" integrity sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ== +browserify-aes@^1.0.0, browserify-aes@^1.0.4: + version "1.2.0" + resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" + integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA== + dependencies: + buffer-xor "^1.0.3" + cipher-base "^1.0.0" + create-hash "^1.1.0" + evp_bytestokey "^1.0.3" + inherits "^2.0.1" + safe-buffer "^5.0.1" + +browserify-cipher@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0" + integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w== + dependencies: + browserify-aes "^1.0.4" + browserify-des "^1.0.0" + evp_bytestokey "^1.0.0" + +browserify-des@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c" + integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A== + dependencies: + cipher-base "^1.0.1" + des.js "^1.0.0" + inherits "^2.0.1" + safe-buffer "^5.1.2" + +browserify-rsa@^4.0.0, browserify-rsa@^4.0.1: + version "4.1.0" + resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d" + integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog== + dependencies: + bn.js "^5.0.0" + randombytes "^2.0.1" + +browserify-sign@^4.0.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3" + integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg== + dependencies: + bn.js "^5.1.1" + browserify-rsa "^4.0.1" + create-hash "^1.2.0" + create-hmac "^1.1.7" + elliptic "^6.5.3" + inherits "^2.0.4" + parse-asn1 "^5.1.5" + readable-stream "^3.6.0" + safe-buffer "^5.2.0" + browserify-zlib@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d" @@ -5815,6 +5869,11 @@ buffer-from@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== +buffer-xor@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9" + integrity sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ== + buffer@6.0.3, buffer@^6.0.3, buffer@~6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6" @@ -5838,6 +5897,11 @@ bufferutil@^4.0.1: dependencies: node-gyp-build "^4.3.0" +builtin-status-codes@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" + integrity sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ== + bytes-iec@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/bytes-iec/-/bytes-iec-3.1.1.tgz#94cd36bf95c2c22a82002c247df8772d1d591083" @@ -6071,6 +6135,14 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91" integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw== +cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de" + integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q== + dependencies: + inherits "^2.0.1" + safe-buffer "^5.0.1" + cjs-module-lexer@^1.0.0: version "1.2.2" resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" @@ -6435,6 +6507,37 @@ country-flag-icons@^1.5.4: resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.7.tgz#f1f2ddf14f3cbf01cba6746374aeba94db35d4b4" integrity sha512-AdvXhMcmSp7nBSkpGfW4qR/luAdRUutJqya9PuwRbsBzuoknThfultbv7Ib6fWsHXC43Es/4QJ8gzQQdBNm75A== +create-ecdh@^4.0.0: + version "4.0.4" + resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e" + integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A== + dependencies: + bn.js "^4.1.0" + elliptic "^6.5.3" + +create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196" + integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg== + dependencies: + cipher-base "^1.0.1" + inherits "^2.0.1" + md5.js "^1.3.4" + ripemd160 "^2.0.1" + sha.js "^2.4.0" + +create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff" + integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg== + dependencies: + cipher-base "^1.0.3" + create-hash "^1.1.0" + inherits "^2.0.1" + ripemd160 "^2.0.0" + safe-buffer "^5.0.1" + sha.js "^2.4.8" + create-react-context@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" @@ -6476,6 +6579,23 @@ crypt@0.0.2: resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b" integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow== +crypto-browserify@^3.12.0: + version "3.12.0" + resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec" + integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg== + dependencies: + browserify-cipher "^1.0.0" + browserify-sign "^4.0.0" + create-ecdh "^4.0.0" + create-hash "^1.1.0" + create-hmac "^1.1.0" + diffie-hellman "^5.0.0" + inherits "^2.0.1" + pbkdf2 "^3.0.3" + public-encrypt "^4.0.0" + randombytes "^2.0.0" + randomfill "^1.0.3" + crypto-random-string@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" @@ -6841,6 +6961,14 @@ dequal@^2.0.0, dequal@^2.0.2: resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== +des.js@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" + integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA== + dependencies: + inherits "^2.0.1" + minimalistic-assert "^1.0.0" + destroy@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015" @@ -6906,6 +7034,15 @@ diff@^5.0.0: resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40" integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw== +diffie-hellman@^5.0.0: + version "5.0.3" + resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" + integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg== + dependencies: + bn.js "^4.1.0" + miller-rabin "^4.0.0" + randombytes "^2.0.0" + dijkstrajs@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz#4c8dbdea1f0f6478bff94d9c49c784d623e4fc23" @@ -7066,7 +7203,7 @@ electron-to-chromium@^1.4.284: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.372.tgz#7888ac92ccb9556627c3a37eba3b89ee5ac345f8" integrity sha512-MrlFq/j+TYHOjeWsWGYfzevc25HNeJdsF6qaLFrqBTRWZQtWkb1myq/Q2veLWezVaa5OcSZ99CFwTT4aF4Mung== -elliptic@6.5.4: +elliptic@6.5.4, elliptic@^6.5.3: version "6.5.4" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb" integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ== @@ -7740,6 +7877,14 @@ events@^3.2.0, events@^3.3.0: resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== +evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02" + integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA== + dependencies: + md5.js "^1.3.4" + safe-buffer "^5.1.1" + execa@^5.0.0, execa@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd" @@ -8615,6 +8760,15 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hash-base@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33" + integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA== + dependencies: + inherits "^2.0.4" + readable-stream "^3.6.0" + safe-buffer "^5.2.0" + hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42" @@ -8769,6 +8923,11 @@ http-proxy-agent@^5.0.0: agent-base "6" debug "4" +https-browserify@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" + integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg== + https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6" @@ -10293,6 +10452,15 @@ match-sorter@^6.0.2: "@babel/runtime" "^7.12.5" remove-accents "0.4.2" +md5.js@^1.3.4: + version "1.3.5" + resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" + integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg== + dependencies: + hash-base "^3.0.0" + inherits "^2.0.1" + safe-buffer "^5.1.2" + md5@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f" @@ -10796,6 +10964,14 @@ microseconds@0.2.0: resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39" integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA== +miller-rabin@^4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" + integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA== + dependencies: + bn.js "^4.0.0" + brorand "^1.0.1" + mime-db@1.52.0, "mime-db@>= 1.43.0 < 2": version "1.52.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" @@ -11415,6 +11591,11 @@ optionator@^0.9.1: type-check "^0.4.0" word-wrap "^1.2.3" +os-browserify@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" + integrity sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A== + outdent@^0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0" @@ -11497,6 +11678,17 @@ parent-module@^1.0.0: dependencies: callsites "^3.0.0" +parse-asn1@^5.0.0, parse-asn1@^5.1.5: + version "5.1.6" + resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4" + integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw== + dependencies: + asn1.js "^5.2.0" + browserify-aes "^1.0.0" + evp_bytestokey "^1.0.0" + pbkdf2 "^3.0.3" + safe-buffer "^5.1.1" + parse-entities@^1.1.2: version "1.2.2" resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50" @@ -11582,6 +11774,17 @@ pathe@^1.1.0: resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.0.tgz#e2e13f6c62b31a3289af4ba19886c230f295ec03" integrity sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w== +pbkdf2@^3.0.3: + version "3.1.2" + resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075" + integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA== + dependencies: + create-hash "^1.1.2" + create-hmac "^1.1.4" + ripemd160 "^2.0.1" + safe-buffer "^5.0.1" + sha.js "^2.4.8" + peek-stream@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/peek-stream/-/peek-stream-1.1.3.tgz#3b35d84b7ccbbd262fff31dc10da56856ead6d67" @@ -12174,6 +12377,18 @@ proxy-from-env@1.1.0, proxy-from-env@^1.0.0, proxy-from-env@^1.1.0: resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== +public-encrypt@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0" + integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q== + dependencies: + bn.js "^4.1.0" + browserify-rsa "^4.0.0" + create-hash "^1.1.0" + parse-asn1 "^5.0.0" + randombytes "^2.0.1" + safe-buffer "^5.1.2" + pump@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909" @@ -12199,6 +12414,11 @@ pumpify@^1.3.3: inherits "^2.0.3" pump "^2.0.0" +punycode@1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" + integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw== + punycode@^2.1.0: version "2.3.0" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f" @@ -12297,6 +12517,11 @@ query-string@^6.13.5: split-on-first "^1.0.0" strict-uri-encode "^2.0.0" +querystring@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" + integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g== + queue-microtask@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" @@ -12317,13 +12542,21 @@ ramda@^0.28.0: resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97" integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA== -randombytes@^2.1.0: +randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== dependencies: safe-buffer "^5.1.0" +randomfill@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458" + integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw== + dependencies: + randombytes "^2.0.5" + safe-buffer "^5.1.0" + range-parser@^1.2.1, range-parser@~1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" @@ -12926,6 +13159,14 @@ rimraf@~2.6.2: dependencies: glob "^7.1.3" +ripemd160@^2.0.0, ripemd160@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c" + integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA== + dependencies: + hash-base "^3.0.0" + inherits "^2.0.1" + rodal@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/rodal/-/rodal-2.0.1.tgz#87309fe371c1efe9190f95e4a77cfab65609e97f" @@ -12985,7 +13226,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0: +safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== @@ -13214,7 +13455,7 @@ setprototypeof@1.2.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== -sha.js@^2.4.11: +sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8: version "2.4.11" resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7" integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ== @@ -13579,6 +13820,16 @@ stream-browserify@^3.0.0: inherits "~2.0.4" readable-stream "^3.5.0" +stream-http@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.2.0.tgz#1872dfcf24cb15752677e40e5c3f9cc1926028b5" + integrity sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A== + dependencies: + builtin-status-codes "^3.0.0" + inherits "^2.0.4" + readable-stream "^3.6.0" + xtend "^4.0.2" + stream-shift@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d" @@ -14419,6 +14670,14 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +url@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" + integrity sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ== + dependencies: + punycode "1.3.2" + querystring "0.2.0" + use-callback-ref@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5" @@ -14907,7 +15166,7 @@ ws@^8.2.3, ws@^8.5.0: resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== -xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: +xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== From bc909c43f5b60302c5a3feb83ee05bf1b4cf72ce Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 14:21:26 +0200 Subject: [PATCH 007/105] 1.1.39-alpha-5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 042b4ecf..aa6571a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-2", + "version": "1.1.39-alpha-5", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 4da7d029e50ee3ead2d60592dd2a00e924e209f3 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 28 Apr 2023 14:21:52 +0200 Subject: [PATCH 008/105] 1.1.39-alpha-6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aa6571a5..1fa866e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-5", + "version": "1.1.39-alpha-6", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 4a35c0dacdece175cf4c05589df0d0d1780bad60 Mon Sep 17 00:00:00 2001 From: simodrws Date: Tue, 2 May 2023 14:35:44 +0200 Subject: [PATCH 009/105] fix: correct modal order --- .../masa-interface/masa-interface.tsx | 6 ++++ .../pages/switch-chain/switch-chain.tsx | 12 +++----- src/provider/index.ts | 1 + src/provider/masa-context-provider.tsx | 13 +++++++-- src/provider/masa-shape.ts | 9 +++++- src/provider/use-network-switch.tsx | 28 +++++++++++++++++++ src/provider/use-rainbowkit.tsx | 2 +- 7 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 src/provider/use-network-switch.tsx diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index d06f9d8b..5be45e05 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -56,6 +56,7 @@ export const MasaInterface = (): JSX.Element => { currentNetwork, forceNetwork, verbose, + // setRainbowkitModalCallback, openConnectModal, } = useMasa(); @@ -97,6 +98,8 @@ export const MasaInterface = (): JSX.Element => { if (hasWalletAddress && isLoggedIn) return 'connectedState'; + // openConnectModal?.(); + return null; return 'connector'; }, [ hasWalletAddress, @@ -110,6 +113,7 @@ export const MasaInterface = (): JSX.Element => { forcedPage, forceNetwork, currentNetwork, + // openConnectModal, ]); const isModal = useMemo(() => { @@ -117,10 +121,12 @@ export const MasaInterface = (): JSX.Element => { }, [page]); useEffect(() => { + console.log({ isModalOpen, provider, page }); // * when user closes connection during login process, // * we want to reopen rainbowkit modal not our old connection modal if (isModalOpen && !provider && page === 'connector') { closeModal?.(); + console.log('opening connect modal'); openConnectModal?.(); } }, [isModalOpen, closeModal, provider, page, openConnectModal]); diff --git a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx index 3f9fa47b..7508706a 100644 --- a/src/components/masa-interface/pages/switch-chain/switch-chain.tsx +++ b/src/components/masa-interface/pages/switch-chain/switch-chain.tsx @@ -3,6 +3,7 @@ import { useMasa } from '../../../../provider'; import { MasaLoading } from '../../../masa-loading'; import { Network, SupportedNetworks } from '@masa-finance/masa-sdk'; import { + // useNetwork, // useNetwork, useSwitchNetwork, } from 'wagmi'; @@ -14,15 +15,10 @@ export const InterfaceSwitchChain = (): JSX.Element => { forceNetwork, } = useMasa(); // const { chain } = useNetwork(); - const { - // chains, - // error, - // isLoading: wagmiLoadingNetwork, - // pendingChainId, - switchNetwork: switchNetworkWagmi, - } = useSwitchNetwork({ - onError: (err) => console.error('Network switch failed', err), + const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork({ + onError: (err) => console.error('Wagmi Network switch failed', err), }); + const networkData: Network | undefined = useMemo(() => { if (forceNetwork) { return SupportedNetworks[forceNetwork]; diff --git a/src/provider/index.ts b/src/provider/index.ts index 1eecc782..b54b7b1c 100644 --- a/src/provider/index.ts +++ b/src/provider/index.ts @@ -11,3 +11,4 @@ export * from './use-debounce'; export * from './use-local-storage'; export * from './use-masa'; export * from './use-metamask'; +export * from './use-network-switch'; diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 640c2125..3c23e98e 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -22,6 +22,7 @@ import { MasaShape } from './masa-shape'; import { useScopes } from './modules/scopes/scopes'; import { useRainbowKit } from './use-rainbowkit'; import { useWagmi } from './modules/wagmi'; +import { useNetworkSwitch } from './use-network-switch'; export { SoulNameErrorCodes }; @@ -86,7 +87,8 @@ export const MasaContextProvider = ({ // network const { switchNetwork, currentNetwork } = useNetwork(wagmiSigner as Signer); - + const { switchNetwork: switchNetworkNew, currentNetwork: currentNetworkNew } = + useNetworkSwitch(); // identity const { identity, @@ -126,7 +128,7 @@ export const MasaContextProvider = ({ isLoggedIn, masaInstance?.config.verbose ); - + console.log({ scope, areScopesFullfiled }); // rainbowkit const { openChainModal, @@ -181,6 +183,7 @@ export const MasaContextProvider = ({ // * feature toggle, to be removed soon if (useRainbowKitWalletConnect) { + console.log('userainbow', openConnectModal); // * set the callback to open masa modal after rainbowkit modal is closed setRainbowKitModalCallback(() => { return () => setModalOpen(true); @@ -213,7 +216,7 @@ export const MasaContextProvider = ({ verbose, useRainbowKitWalletConnect, // wagmiSigner, - noWallet, + // noWallet, ] ); @@ -321,6 +324,10 @@ export const MasaContextProvider = ({ openConnectModal, openChainModal, openAccountModal, + + // wagmi + switchNetworkNew, + currentNetworkNew, }; return ( diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts index bacb0e1d..9e62b6b0 100644 --- a/src/provider/masa-shape.ts +++ b/src/provider/masa-shape.ts @@ -11,7 +11,7 @@ import { VerifyGreenResult, } from '@masa-finance/masa-sdk'; import { BigNumber, Signer, Wallet } from 'ethers'; - +import { GetNetworkResult } from '@wagmi/core'; export interface MasaShape { children?: React.ReactNode; // masa @@ -112,4 +112,11 @@ export interface MasaShape { openConnectModal?: (() => void) | undefined; openChainModal?: (() => void) | undefined; openAccountModal?: (() => void) | undefined; + setRainbowkKitModalCallback?: React.Dispatch< + React.SetStateAction< + ((modalOpen?: boolean | undefined) => void) | undefined + > + >; + switchNetworkNew?: (forcedNetworkParam: NetworkName) => void; + currentNetworkNew?: GetNetworkResult; } diff --git a/src/provider/use-network-switch.tsx b/src/provider/use-network-switch.tsx new file mode 100644 index 00000000..fe393ece --- /dev/null +++ b/src/provider/use-network-switch.tsx @@ -0,0 +1,28 @@ +import { NetworkName, SupportedNetworks } from '@masa-finance/masa-sdk'; +import { useCallback } from 'react'; +import { useNetwork, useSwitchNetwork } from 'wagmi'; + +export const useNetworkSwitch = () => { + const currentNetwork = useNetwork(); + const { switchNetwork: switchNetworkWagmi } = useSwitchNetwork({ + onError: (err) => console.error('Wagmi Network switch failed', err), + }); + + const switchNetwork = useCallback( + (forcedNetworkParam: NetworkName) => { + const networkToSwitchTo = SupportedNetworks[forcedNetworkParam]; + if (networkToSwitchTo) { + if (networkToSwitchTo.chainId === currentNetwork.chain?.id) { + return; + } + switchNetworkWagmi?.(networkToSwitchTo.chainId); + return; + } + }, + [switchNetworkWagmi, currentNetwork.chain?.id] + ); + return { + currentNetwork, + switchNetwork, + }; +}; diff --git a/src/provider/use-rainbowkit.tsx b/src/provider/use-rainbowkit.tsx index a1d411df..1543f0b4 100644 --- a/src/provider/use-rainbowkit.tsx +++ b/src/provider/use-rainbowkit.tsx @@ -9,7 +9,7 @@ export const useRainbowKit = () => { const { openConnectModal } = useConnectModal(); const { openAccountModal } = useAccountModal(); const { openChainModal } = useChainModal(); - + console.log({ openConnectModal, openAccountModal, openChainModal }); // NOTE: needs refactor ASAP const [modalCallback, setRainbowKitModalCallback] = useState<(modalOpen?: boolean) => void>(); From 1f83ba9c71df18bee83b36135b9ec241cef0f2d5 Mon Sep 17 00:00:00 2001 From: simodrws Date: Tue, 2 May 2023 16:37:38 +0200 Subject: [PATCH 010/105] 1.1.39-alpha-8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1fa866e0..27093986 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-6", + "version": "1.1.39-alpha-8", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 7b51810bc161c626b153b6f003218e04dff8ab20 Mon Sep 17 00:00:00 2001 From: simodrws Date: Tue, 2 May 2023 16:52:58 +0200 Subject: [PATCH 011/105] fix: make build work again --- src/provider/masa-context-provider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 3c23e98e..34222b35 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -216,7 +216,7 @@ export const MasaContextProvider = ({ verbose, useRainbowKitWalletConnect, // wagmiSigner, - // noWallet, + noWallet, ] ); From b151f3384a796dd1d5ace278d7eaa1803347864d Mon Sep 17 00:00:00 2001 From: simodrws Date: Tue, 2 May 2023 17:00:24 +0200 Subject: [PATCH 012/105] 1.1.39-alpha-9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 866e9a39..e7be7105 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-8", + "version": "1.1.39-alpha-9", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 158d07739196da0b108df0deaf807be6bf21f8a9 Mon Sep 17 00:00:00 2001 From: simodrws Date: Wed, 3 May 2023 12:14:36 +0200 Subject: [PATCH 013/105] fix: update ethereum type --- src/modules.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules.d.ts b/src/modules.d.ts index 1af5e896..e17048c5 100644 --- a/src/modules.d.ts +++ b/src/modules.d.ts @@ -1,8 +1,8 @@ -import { MetaMaskInpageProvider } from '@metamask/providers'; +import { Ethereum } from '@wagmi/connectors'; declare global { interface Window { - ethereum?: MetaMaskInpageProvider; + ethereum?: Ethereum; RF?: { qualify: ({ code: string }) => void; }; From c9a2aebd44eca161cdd79672611f1344b91e7dad Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Wed, 3 May 2023 13:34:44 +0200 Subject: [PATCH 014/105] fix modules --- src/modules.d.ts | 3 ++- src/provider/modules/network/network.ts | 3 ++- src/provider/use-metamask.ts | 12 ++++++++---- src/types.d.ts | 1 - 4 files changed, 12 insertions(+), 7 deletions(-) delete mode 100644 src/types.d.ts diff --git a/src/modules.d.ts b/src/modules.d.ts index 1af5e896..f898fae1 100644 --- a/src/modules.d.ts +++ b/src/modules.d.ts @@ -1,8 +1,9 @@ import { MetaMaskInpageProvider } from '@metamask/providers'; +import { Ethereum } from '@wagmi/core'; declare global { interface Window { - ethereum?: MetaMaskInpageProvider; + ethereum?: MetaMaskInpageProvider | Ethereum; RF?: { qualify: ({ code: string }) => void; }; diff --git a/src/provider/modules/network/network.ts b/src/provider/modules/network/network.ts index fdfa97ce..c1c06321 100644 --- a/src/provider/modules/network/network.ts +++ b/src/provider/modules/network/network.ts @@ -6,6 +6,7 @@ import { NetworkName, SupportedNetworks, } from '@masa-finance/masa-sdk'; +import { MetaMaskInpageProvider } from '@metamask/providers'; export const useNetwork = ( provider?: Wallet | Signer @@ -19,7 +20,7 @@ export const useNetwork = ( const addNetwork = useCallback(async (networkDetails: Network) => { try { if (typeof window !== 'undefined' && networkDetails) { - await window?.ethereum?.request({ + await (window.ethereum as unknown as MetaMaskInpageProvider)?.request({ method: 'wallet_addEthereumChain', params: [ { diff --git a/src/provider/use-metamask.ts b/src/provider/use-metamask.ts index 50f5a360..dfe0aaf4 100644 --- a/src/provider/use-metamask.ts +++ b/src/provider/use-metamask.ts @@ -3,6 +3,7 @@ import { useMasa } from './use-masa'; import { getWeb3Provider } from '../helpers'; import { Maybe } from '@metamask/providers/dist/utils'; import { useLocalStorage } from './use-local-storage'; +import { MetaMaskInpageProvider } from '@metamask/providers'; export const useMetamask = ({ disabled, @@ -139,7 +140,7 @@ export const useMetamask = ({ /** * on accounts change */ - window.ethereum?.on( + (window.ethereum as unknown as MetaMaskInpageProvider)?.on( 'accountsChanged', async (accounts: unknown): Promise => { const accountsArray = accounts as string[]; @@ -159,9 +160,12 @@ export const useMetamask = ({ /** * on network / chain changed */ - window.ethereum?.on('chainChanged', () => { - setProvider?.(getWeb3Provider()?.getSigner()); - }); + (window.ethereum as unknown as MetaMaskInpageProvider)?.on( + 'chainChanged', + () => { + setProvider?.(getWeb3Provider()?.getSigner()); + } + ); } }, [setProvider, setConnectedAccounts, disconnectMetamask]); diff --git a/src/types.d.ts b/src/types.d.ts deleted file mode 100644 index 5acbb230..00000000 --- a/src/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'rodal'; From e1c54530faca2efc0c9a8579638eb42888ab1335 Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Wed, 3 May 2023 13:38:38 +0200 Subject: [PATCH 015/105] fix modules --- src/modules.d.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/modules.d.ts b/src/modules.d.ts index f898fae1..42fc91b9 100644 --- a/src/modules.d.ts +++ b/src/modules.d.ts @@ -1,9 +1,7 @@ -import { MetaMaskInpageProvider } from '@metamask/providers'; -import { Ethereum } from '@wagmi/core'; +import './index'; declare global { interface Window { - ethereum?: MetaMaskInpageProvider | Ethereum; RF?: { qualify: ({ code: string }) => void; }; From 6ae28109be01a5195f55c4f3c0580293a92464cd Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Wed, 3 May 2023 13:41:32 +0200 Subject: [PATCH 016/105] fix modules fix events --- src/provider/masa-context-provider.tsx | 2 -- src/provider/modules/modal/modal.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 34222b35..4fd3dc11 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -48,7 +48,6 @@ export const MasaContextProvider = ({ // masa-react branding company, // use no wallet - noWallet, // signer used in masa instance // signer, // env used in masa instance @@ -216,7 +215,6 @@ export const MasaContextProvider = ({ verbose, useRainbowKitWalletConnect, // wagmiSigner, - noWallet, ] ); diff --git a/src/provider/modules/modal/modal.ts b/src/provider/modules/modal/modal.ts index c4679b29..c66db71f 100644 --- a/src/provider/modules/modal/modal.ts +++ b/src/provider/modules/modal/modal.ts @@ -59,7 +59,7 @@ export const useModal = ( useEffect(() => { setModalSize(newSize); return () => setModalSize(null); - }, []); + }, [newSize]); }; const openMintSoulnameModal = useCallback( From a3b9ae812744f301acf6770cfcf0b40d3572bce2 Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Wed, 3 May 2023 13:43:41 +0200 Subject: [PATCH 017/105] revertt --- src/provider/modules/modal/modal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/provider/modules/modal/modal.ts b/src/provider/modules/modal/modal.ts index c66db71f..c4679b29 100644 --- a/src/provider/modules/modal/modal.ts +++ b/src/provider/modules/modal/modal.ts @@ -59,7 +59,7 @@ export const useModal = ( useEffect(() => { setModalSize(newSize); return () => setModalSize(null); - }, [newSize]); + }, []); }; const openMintSoulnameModal = useCallback( From 482870eb2d729c6e93532372802990e51a1b6da5 Mon Sep 17 00:00:00 2001 From: simodrws Date: Wed, 3 May 2023 14:05:40 +0200 Subject: [PATCH 018/105] 1.1.39-alpha-10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e7be7105..26a040d0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-9", + "version": "1.1.39-alpha-10", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 61a4a390983f00d037bd4b75e890732fcbd27b7b Mon Sep 17 00:00:00 2001 From: simodrws Date: Wed, 3 May 2023 14:26:44 +0200 Subject: [PATCH 019/105] feat: update session to use wagmi to disconnect --- src/provider/modules/session/session.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/provider/modules/session/session.ts b/src/provider/modules/session/session.ts index 58c71060..838fa87f 100644 --- a/src/provider/modules/session/session.ts +++ b/src/provider/modules/session/session.ts @@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react'; import { useQuery } from 'react-query'; import { queryClient } from '../../masa-query-client'; import { ISession, Masa } from '@masa-finance/masa-sdk'; +import { useDisconnect } from 'wagmi'; export const useSession = ( masa?: Masa, @@ -50,6 +51,7 @@ export const useSession = ( } ); + const { disconnect } = useDisconnect(); const clearSession = useCallback(async () => { await queryClient.invalidateQueries(['wallet']); await queryClient.invalidateQueries(['session']); @@ -62,11 +64,12 @@ export const useSession = ( } await masa?.session.sessionLogout(); + disconnect(); await clearSession(); logoutCallback?.(); }, - [masa, clearSession, isLoggedIn] + [masa, clearSession, isLoggedIn, disconnect] ); const handleLogin = useCallback(async (): Promise => { From beaca903be37aff8668a67e8c462561fbb87a6de Mon Sep 17 00:00:00 2001 From: simodrws Date: Wed, 3 May 2023 14:29:32 +0200 Subject: [PATCH 020/105] 1.1.39-alpha-11 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 26a040d0..55ce5f18 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.1.39-alpha-10", + "version": "1.1.39-alpha-11", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 47d21cd5fc2f2a068622d269ab7cf40850f817ff Mon Sep 17 00:00:00 2001 From: simodrws Date: Thu, 4 May 2023 13:28:04 +0200 Subject: [PATCH 021/105] feat: new modal basic ui & provider, rainbowkit improvements --- package.json | 8 +- src/components/index.ts | 1 + .../pages/authenticate/authenticate.tsx | 35 +- src/components/new-modal/Backdrop.tsx | 21 + src/components/new-modal/Modal.tsx | 79 ++++ src/components/new-modal/index.tsx | 3 + .../new-modal/modals/AuthenticateModal.tsx | 74 ++++ .../new-modal/modals/ConnectedModal.tsx | 47 +++ .../modals/CreateCreditScoreModal.tsx | 41 ++ .../new-modal/modals/CreateIdentityModal.tsx | 32 ++ .../new-modal/modals/CreateSoulnameModal.tsx | 379 ++++++++++++++++++ .../modals/SuccessCreateIdentityModal.tsx | 94 +++++ .../new-modal/modals/SwitchChainModal.tsx | 54 +++ src/components/new-modal/modals/index.tsx | 38 ++ .../configured-rainbowkit-provider.tsx | 2 + src/provider/masa-context-provider.tsx | 21 + src/provider/masa-provider.tsx | 19 +- src/provider/masa-shape.ts | 9 + src/provider/modules/index.ts | 1 + src/provider/modules/modal-provider.tsx | 118 ++++++ src/provider/modules/new-modal/index.tsx | 1 + .../modules/new-modal/use-masa-modals.tsx | 128 ++++++ src/provider/styles.scss | 92 +++++ stories/masa.stories.tsx | 58 ++- 24 files changed, 1324 insertions(+), 31 deletions(-) create mode 100644 src/components/new-modal/Backdrop.tsx create mode 100644 src/components/new-modal/Modal.tsx create mode 100644 src/components/new-modal/index.tsx create mode 100644 src/components/new-modal/modals/AuthenticateModal.tsx create mode 100644 src/components/new-modal/modals/ConnectedModal.tsx create mode 100644 src/components/new-modal/modals/CreateCreditScoreModal.tsx create mode 100644 src/components/new-modal/modals/CreateIdentityModal.tsx create mode 100644 src/components/new-modal/modals/CreateSoulnameModal.tsx create mode 100644 src/components/new-modal/modals/SuccessCreateIdentityModal.tsx create mode 100644 src/components/new-modal/modals/SwitchChainModal.tsx create mode 100644 src/components/new-modal/modals/index.tsx create mode 100644 src/provider/modules/modal-provider.tsx create mode 100644 src/provider/modules/new-modal/index.tsx create mode 100644 src/provider/modules/new-modal/use-masa-modals.tsx diff --git a/package.json b/package.json index 55ce5f18..8cef2cc1 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "start": "yarn build:watch", "build": "yarn build:tsc && yarn build:dist", - "build:tsc": "tsc && mkdir -p ./dist && cp -R ./src/fonts ./dist/src/fonts && mkdir -p ./dist/src/components/modal && cp ./src/provider/styles.scss ./dist/src/provider/styles.scss && cp ./src/components/modal/styles.scss ./dist/src/components/modal/styles.scss", + "build:tsc": "tsc && mkdir -p ./dist && cp -R ./src/fonts ./dist/src/fonts && mkdir -p ./dist/src/components/modal && mkdir -p ./dist/src/components/new-modal && cp ./src/provider/styles.scss ./dist/src/provider/styles.scss && cp ./src/components/modal/styles.scss ./dist/src/components/modal/styles.scss", "build:dist": "cross-env NODE_ENV=production webpack", "build:watch": "tsc -w", "lint": "eslint \"./src/**/*.{ts,tsx}\" ./stories/**/*.tsx --fix", @@ -33,8 +33,8 @@ "author": "hide-on-bush", "dependencies": { "@acusti/react-code-input": "^3.11.0", - "@celo/rainbowkit-celo": "^0.11.1", "@babel/preset-typescript": "^7.21.5", + "@celo/rainbowkit-celo": "^0.11.1", "@masa-finance/masa-sdk": "^1.15.1", "@metamask/providers": "^10.2.1", "@rainbow-me/rainbowkit": "^0.12.12", @@ -71,10 +71,10 @@ "@types/jest": "^29.5.0", "@types/mocha": "^10.0.1", "@types/react": "^18.0.33", - "assert": "^2.0.0", - "buffer": "^6.0.3", "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", + "assert": "^2.0.0", + "buffer": "^6.0.3", "copy-webpack-plugin": "^11.0.0", "cross-env": "^7.0.3", "crypto-browserify": "^3.12.0", diff --git a/src/components/index.ts b/src/components/index.ts index d4f96560..7d5bba3a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export * from './masa-interface'; export * from './masa-loading'; export * from './modal'; +export * from './new-modal'; export * from './spinner'; diff --git a/src/components/masa-interface/pages/authenticate/authenticate.tsx b/src/components/masa-interface/pages/authenticate/authenticate.tsx index 486bf894..0c7df830 100644 --- a/src/components/masa-interface/pages/authenticate/authenticate.tsx +++ b/src/components/masa-interface/pages/authenticate/authenticate.tsx @@ -1,10 +1,33 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useMasa } from '../../../../provider'; import { Spinner } from '../../../spinner'; +import { useAccount, useDisconnect } from 'wagmi'; export const InterfaceAuthenticate = (): JSX.Element => { - const { company, handleLogin, walletAddress, isLoading } = useMasa(); + const { + company, + handleLogin, + walletAddress, + isLoading, + setModalOpen, + openConnectModal, + isLoggedIn, + } = useMasa(); + const { isConnected } = useAccount(); + const { disconnect } = useDisconnect(); + const switchWallet = useCallback(() => { + if (!isLoggedIn && isConnected) { + setModalOpen?.(false); + disconnect(); + openConnectModal?.(); + } + }, [disconnect, setModalOpen, openConnectModal, isConnected, isLoggedIn]); + useEffect(() => { + if (isConnected && !isLoggedIn) { + openConnectModal?.(); + } + }, [openConnectModal, isConnected, isLoggedIn]); const [copied, setCopied] = useState(false); const message = useMemo(() => { @@ -55,6 +78,14 @@ export const InterfaceAuthenticate = (): JSX.Element => {

+ {!isLoggedIn && isConnected && ( + + )} +
+

{title}

+ +
{children}
+
    + {onDecline && ( +
  • + +
    • + )} +
  • + +
    • +
+
+ , + domNode as Element + ); +}; diff --git a/src/components/new-modal/index.tsx b/src/components/new-modal/index.tsx new file mode 100644 index 00000000..391be4dc --- /dev/null +++ b/src/components/new-modal/index.tsx @@ -0,0 +1,3 @@ +export * from './Modal'; +export * from './Backdrop'; +export * from './modals'; diff --git a/src/components/new-modal/modals/AuthenticateModal.tsx b/src/components/new-modal/modals/AuthenticateModal.tsx new file mode 100644 index 00000000..651da8d7 --- /dev/null +++ b/src/components/new-modal/modals/AuthenticateModal.tsx @@ -0,0 +1,74 @@ +import React, { useCallback, useMemo, useState } from 'react'; +import { useMasa } from '../../../provider'; +import { Spinner } from '../../spinner'; + +const AuthenticateModal = (): JSX.Element => { + const { company, handleLogin, walletAddress, isLoading } = useMasa(); + const [copied, setCopied] = useState(false); + + const message = useMemo(() => { + switch (company) { + case 'Masa': + return `Your wallet is now connected. Start your soulbound journey by minting + a Masa Soulbound Identity and claiming a unique Masa Soul Name.`; + case 'Celo': + return `Your wallet is now connected. Start your journey by minting a Prosperity Passport and claiming a unique .celo domain name.`; + case 'Base': + return 'Your wallet is now connected. Start your Base Camp journey by claiming a unique .base domain name.'; + + default: + return `Your wallet is now connected. Start your soulbound journey by minting + a Masa Soulbound Identity and claiming a unique Masa Soul Name.`; + } + }, [company]); + + const shortAddress = useMemo(() => { + return `${walletAddress?.substring(0, 2)}...${walletAddress?.substring( + walletAddress.length - 4, + walletAddress.length + )}`; + }, [walletAddress]); + + const handleClipboard = useCallback(() => { + if (walletAddress) { + void navigator.clipboard.writeText(walletAddress); + setCopied(true); + } + }, [walletAddress]); + + if (isLoading) { + return ; + } + + return ( +
+
+

Wallet connected!

+

{message}

+ +

+ You are connected with the following wallet + + {copied ? 'Copied!' : shortAddress} + +

+
+
+ +
+

+ Want to use a different wallet? Close this window and disconnect + your wallet in Metamask to connect a new wallet +

+
+
+
+ ); +}; + +export default AuthenticateModal; diff --git a/src/components/new-modal/modals/ConnectedModal.tsx b/src/components/new-modal/modals/ConnectedModal.tsx new file mode 100644 index 00000000..70cc0cf2 --- /dev/null +++ b/src/components/new-modal/modals/ConnectedModal.tsx @@ -0,0 +1,47 @@ +import React, { useEffect, useMemo } from 'react'; +import { useMasa } from '../../../provider'; +import { MasaLoading } from '../../masa-loading'; +import { Spinner } from '../../spinner'; + +const ConnectedModal = (): JSX.Element => { + const { closeModal, company, isLoading, isModalOpen } = useMasa(); + + useEffect(() => { + let timeout; + if (isModalOpen && !isLoading) { + timeout = setTimeout(() => { + closeModal?.(); + }, 3000); + } + + return () => { + clearTimeout(timeout); + }; + }, [isLoading, closeModal, isModalOpen]); + + const titleText = useMemo(() => { + switch (company) { + case 'Masa': + return 'Starting your soulbound journey'; + case 'Celo': + return 'Launching your Prosperity Passport'; + case 'Base': + return 'Taking you to Base Camp'; + default: + return 'Starting your soulbound journey'; + } + }, [company]); + + if (isLoading) return ; + + return ( +
+
+

{titleText}

+ +
+
+ ); +}; + +export default ConnectedModal; diff --git a/src/components/new-modal/modals/CreateCreditScoreModal.tsx b/src/components/new-modal/modals/CreateCreditScoreModal.tsx new file mode 100644 index 00000000..d239c757 --- /dev/null +++ b/src/components/new-modal/modals/CreateCreditScoreModal.tsx @@ -0,0 +1,41 @@ +import React, { useCallback, useState } from 'react'; +import { useMasa } from '../../../provider'; +import { MasaLoading } from '../../masa-loading'; + +const CreateCreditScoreModal = (): JSX.Element => { + const { handleCreateCreditScore, isLoading } = useMasa(); + const [error, setError] = useState(null); + + const createCreditScore = useCallback(async () => { + setError(null); + const minted: boolean | undefined = await handleCreateCreditScore?.(); + + if (!minted) + setError('There is not enough data for generating a credit score'); + }, [handleCreateCreditScore]); + + if (isLoading) return ; + + return ( +
+
+

Your identity does not have a credit score

+ {error ? ( +

{error}

+ ) : ( +

Generate your credit score!

+ )} +
+
+ +
+

I don't want to use this wallet

+
+
+
+ ); +}; + +export default CreateCreditScoreModal; diff --git a/src/components/new-modal/modals/CreateIdentityModal.tsx b/src/components/new-modal/modals/CreateIdentityModal.tsx new file mode 100644 index 00000000..bc1da135 --- /dev/null +++ b/src/components/new-modal/modals/CreateIdentityModal.tsx @@ -0,0 +1,32 @@ +import React, { useCallback } from 'react'; +import { useMasa } from '../../../provider'; +import { MasaLoading } from '../../masa-loading'; + +export const CreateIdentityModal = (): JSX.Element => { + const { handlePurchaseIdentity, isLoading, setForcedPage } = useMasa(); + + const createIdentity = useCallback(async () => { + const createIdentityRes = await handlePurchaseIdentity?.(); + + if (createIdentityRes && setForcedPage) { + setForcedPage('successIdentityCreate'); + } + }, [handlePurchaseIdentity, setForcedPage]); + + if (isLoading) return ; + + return ( +
+

Hurray! 🎉

+

+ Congratulations you already have a Celo Domain Name in your wallet. You + must now mint a Celo Prosperity Passport. +

+ +
+ ); +}; + +export default CreateIdentityModal; diff --git a/src/components/new-modal/modals/CreateSoulnameModal.tsx b/src/components/new-modal/modals/CreateSoulnameModal.tsx new file mode 100644 index 00000000..00cb518b --- /dev/null +++ b/src/components/new-modal/modals/CreateSoulnameModal.tsx @@ -0,0 +1,379 @@ +import { Input } from '../../input'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useDebounce, useMasa } from '../../../provider'; +import { MasaLoading } from '../../masa-loading'; +import { PaymentMethod } from '@masa-finance/masa-sdk'; +import { Spinner } from '../../spinner'; +import { Select } from '../../select'; +import { InterfaceErrorModal } from '../../masa-interface/pages/error-modal/'; + +const errorMessages = { + UNPREDICTABLE_GAS_LIMIT: + 'You do not have sufficient funds in you wallet. Please add funds to your wallet and try again', + ACTION_REJECTED: 'Transaction rejected by the user.', +}; + +const CreateSoulnameModal = (): JSX.Element => { + const { + handlePurchaseIdentityWithSoulname, + isLoading, + identity, + closeModal, + masa, + forcedPage, + setForcedPage, + reloadSoulnames, + } = useMasa(); + const [enabledMethods, setEnabledMethods] = useState([]); + + useEffect(() => { + (async () => { + const enabledMethodsres = + await masa?.contracts.instances.SoulStoreContract.getEnabledPaymentMethods(); + + setEnabledMethods(enabledMethodsres as string[]); + })(); + }, [masa]); + + const paymentMethods = useMemo(() => { + const tokensAvailable = { + ...masa?.config.network?.addresses.tokens, + }; + + const values: { name: PaymentMethod; value: string }[] = []; + values.push({ + name: masa?.config.network?.nativeCurrency?.name as PaymentMethod, + value: masa?.config.network?.nativeCurrency?.name as string, + }); + for (const token in tokensAvailable) { + if ( + tokensAvailable[token] && + enabledMethods && + enabledMethods.includes(tokensAvailable[token]) + ) + values.push({ + name: token as PaymentMethod, + value: tokensAvailable[token], + }); + } + + return values; + }, [masa, enabledMethods]); + + const [error, setError] = useState(null); + const [soulname, setSoulname] = useState(''); + const [extension, setExtension] = useState(); + const [loadingIsAvailable, setLoadingIsAvailable] = useState(false); + const [isAvailable, setIsAvailable] = useState(true); + const [registrationPeriod, setRegistrationPeriod] = useState(1); + const [registrationPrice, setRegistrationPrice] = useState(); + const [paymentMethod, setPaymentMethod] = useState( + paymentMethods[0]?.name + ); + const [isLoadingMint, setLoadingMint] = useState(false); + const [showError, setShowError] = useState(false); + + const debounceSearch = useDebounce(soulname, 1000); + + useEffect(() => { + const loadExtension = async () => { + setExtension( + await masa?.contracts.instances.SoulNameContract.extension() + ); + }; + + void loadExtension(); + }, [masa]); + + useEffect(() => { + const checkIsAvailable = async () => { + if (masa && debounceSearch) { + setLoadingIsAvailable(true); + setIsAvailable( + await masa.contracts.soulName.isAvailable(debounceSearch as string) + ); + setLoadingIsAvailable(false); + } + }; + + void checkIsAvailable(); + }, [masa, debounceSearch, setLoadingIsAvailable, setIsAvailable]); + + const soulNameError = useMemo((): string | undefined => { + if (masa) { + const { isValid, message } = masa.soulName.validate(soulname); + + if (!isValid) { + return message; + } + } + + if (!isAvailable) { + return 'Soulname not available'; + } + + return undefined; + }, [masa, soulname, isAvailable]); + + const handleErrorConfirmed = () => setError(null); + + useEffect(() => { + const updatePrice = async () => { + if (masa && debounceSearch) { + const { length } = masa.soulName.validate(debounceSearch as string); + + let formattedPrice; + try { + formattedPrice = ( + await masa.contracts.soulName.getPrice( + paymentMethod, + length, + registrationPeriod + ) + ).formattedPrice; + } finally { + setRegistrationPrice(formattedPrice); + } + } + }; + + void updatePrice(); + }, [masa, debounceSearch, paymentMethod, registrationPeriod]); + + const handleChangeSoulname = useCallback( + (event: React.ChangeEvent) => { + setSoulname(event.target.value); + }, + [setSoulname] + ); + + const updatePeriod = (num: number) => { + setRegistrationPeriod(registrationPeriod + num); + }; + + const handleMinting = useCallback(async () => { + setLoadingMint(true); + + try { + if (identity && identity.identityId) { + await masa?.soulName.create( + paymentMethod, + soulname, + registrationPeriod + ); + } else { + await handlePurchaseIdentityWithSoulname?.( + paymentMethod, + soulname, + registrationPeriod + ); + } + + if (!forcedPage && setForcedPage) { + reloadSoulnames?.(); + setForcedPage('successIdentityCreate'); + } else { + closeModal?.(true); + } + } catch (error: unknown) { + if (error) { + console.log({ error }); + const errorObject = error as { + code: string; + message: string; + }; + setError({ + title: '', + subtitle: errorMessages?.[errorObject.code] ?? 'Unknown error', + }); + console.error(`Minting failed! ${errorObject.message}`); + } + } + setLoadingMint(false); + }, [ + masa, + soulname, + registrationPeriod, + handlePurchaseIdentityWithSoulname, + identity, + closeModal, + paymentMethod, + forcedPage, + setForcedPage, + reloadSoulnames, + ]); + + const updatePaymentMethod = (e: unknown) => { + const event = e as { target: { value: PaymentMethod } }; + setPaymentMethod(event.target?.value); + }; + + if (isLoading) return ; + + if (isLoadingMint) + return ( +
+
+

Minting your domain

+

+ {soulname} + {extension} +

+ +
+
+ ); + + if (error) { + return ( + + ); + } + + return ( +
+
+

+ Register a {extension} name +

+

+ Claim your {extension} domain name. 5+ character domains are{' '} + FREE, only pay the gas fee. +

+
+ +
+
+ + +

+ {soulname ? ( + <> + {soulname} + {extension} + + ) : ( + <> + domain + {extension} + + )} +

+ {soulname !== '' && soulname.length >= 1 ? ( + <> + {loadingIsAvailable ? ( +
+ +
+ ) : isAvailable ? ( +

+ Available +

+ ) : ( +

+ Unavailable +

+ )} + + ) : null} +
+ +
+
+
+ 1 ? 's' : '' + }`} + disabled + /> +
+ + +
+
+ +
+
+
+ +
+ + {showError && soulNameError && ( +

+ {soulNameError} +

+ )} +
+
+ ); +}; + +export default CreateSoulnameModal; diff --git a/src/components/new-modal/modals/SuccessCreateIdentityModal.tsx b/src/components/new-modal/modals/SuccessCreateIdentityModal.tsx new file mode 100644 index 00000000..f6972b74 --- /dev/null +++ b/src/components/new-modal/modals/SuccessCreateIdentityModal.tsx @@ -0,0 +1,94 @@ +import React, { useCallback, useMemo } from 'react'; +import { useMasa } from '../../../provider'; +import { MasaLoading } from '../../masa-loading'; +import { twitterLogo } from '../../../assets/twitterLogo'; + +const SuccessCreateIdentityModal = (): JSX.Element => { + const { isLoading, setForcedPage, soulnames, company } = useMasa(); + + const handleComplete = useCallback(() => { + setForcedPage?.(null); + }, [setForcedPage]); + + const title = useMemo(() => { + switch (company) { + case 'Masa': + return 'You have claimed your .soul domain and your Soulbound Identity has been minted.'; + case 'Celo': + return 'You have claimed your .celo domain and your Prosperity Passport has been minted.'; + + case 'Base': + return 'You have claimed your .base domain name. Welcome to Base Camp ⛺️'; + + default: + return 'You have claimed your .soul domain and your Soulbound Identity has been minted.'; + } + }, [company]); + + const twitterText = useMemo(() => { + switch (company) { + case 'Masa': + return 'Tweet your .soul domain.'; + case 'Celo': + return 'Tweet your .celo domain.'; + case 'Base': + return 'Tweet your .base domain.'; + + default: + return 'Tweet your .soul domain'; + } + }, [company]); + + const tweetContentLink = useMemo(() => { + switch (company) { + case 'Masa': + return 'https://app.masa.finance'; + case 'Celo': + return soulnames + ? `https://raregems.io/celo/celo-domain-names/${soulnames[ + soulnames.length - 1 + ].tokenDetails.tokenId.toString()}` + : undefined; + case 'Base': + return 'https://app.basecamp.global'; + default: + return 'https://app.masa.finance'; + } + }, [soulnames, company]); + + const twitterLink = useMemo(() => { + switch (company) { + case 'Masa': + return `https://twitter.com/intent/tweet?text=Just%20claimed%20my%20.soul%20domain!%20The%20process%20is%20super%20simple%2C%20and%205%2B%20character%20domains%20are%20free%20%F0%9F%A4%A9.%20Grab%20yours%20here%3A%20&url=${tweetContentLink}&hashtags=SoulboundIdentity,Masa`; + case 'Celo': + return `https://twitter.com/intent/tweet?text=Just%20claimed%20my%20.celo%20domain!%20The%20process%20is%20super%20simple%2C%20and%205%2B%20character%20domains%20are%20free%20%F0%9F%A4%A9.%20Grab%20yours%20here%3A%20&url=${tweetContentLink}&hashtags=ProsperityPassport,Celo,Masa`; + case 'Base': + return `https://twitter.com/intent/tweet?text=Just%20claimed%20my%20.base%20domain!%20The%20process%20is%20super%20simple%2C%20and%205%2B%20character%20domains%20are%20free%20%F0%9F%A4%A9.%20Grab%20yours%20here%3A%20&url=${tweetContentLink}&hashtags=Basecamp,Base,Masa`; + default: + return `https://twitter.com/intent/tweet?text=Just%20claimed%20my%20.soul%20domain!%20The%20process%20is%20super%20simple%2C%20and%205%2B%20character%20domains%20are%20free%20%F0%9F%A4%A9.%20Grab%20yours%20here%3A%20&url=${tweetContentLink}&hashtags=SoulboundIdentity,Masa`; + } + }, [company, tweetContentLink]); + + if (isLoading) return ; + + return ( +
+

Hurray! 🎉

+

{title}

+ + twitter{' '} + {twitterText} + + +
+ ); +}; + +export default SuccessCreateIdentityModal; diff --git a/src/components/new-modal/modals/SwitchChainModal.tsx b/src/components/new-modal/modals/SwitchChainModal.tsx new file mode 100644 index 00000000..949be943 --- /dev/null +++ b/src/components/new-modal/modals/SwitchChainModal.tsx @@ -0,0 +1,54 @@ +import { Network, SupportedNetworks } from '@masa-finance/masa-sdk'; +import { MasaLoading } from '../../../components/masa-loading'; +import { useMasa } from '../../../provider'; + +import React, { useCallback, useMemo } from 'react'; + +const SwitchChainModal = () => { + const { isLoading, switchNetwork, forceNetwork } = useMasa(); + console.log({ isLoading, switchNetwork, forceNetwork }); + const networkData: Network | undefined = useMemo(() => { + if (forceNetwork) { + return SupportedNetworks[forceNetwork]; + } + + return; + }, [forceNetwork]); + + const handleSwitch = useCallback(() => { + if (networkData) { + switchNetwork?.(networkData.networkName); + } + }, [switchNetwork, networkData]); + + if (isLoading) return ; + + return ( +
+
+

+ It looks like you are connected to a different network +

+ +
+
+ ); +}; + +export default SwitchChainModal; diff --git a/src/components/new-modal/modals/index.tsx b/src/components/new-modal/modals/index.tsx new file mode 100644 index 00000000..f7f20c76 --- /dev/null +++ b/src/components/new-modal/modals/index.tsx @@ -0,0 +1,38 @@ +import AuthenticateModal from './AuthenticateModal'; +import ConnectedModal from './ConnectedModal'; +import CreateCreditScoreModal from './CreateCreditScoreModal'; +import CreateIdentityModal from './CreateIdentityModal'; +import CreateSoulnameModal from './CreateSoulnameModal'; +import SuccessCreateIdentityModal from './SuccessCreateIdentityModal'; +import SwitchChainModal from './SwitchChainModal'; +import Backdrop from '../Backdrop'; +import { ModalWrapper } from '../Modal'; +export const Modals = { + AuthenticateModal, + ConnectedModal, + CreateCreditScoreModal, + CreateIdentityModal, + CreateSoulnameModal, + SuccessCreateIdentityModal, + SwitchChainModal, + Backdrop, + ModalWrapper, +}; + +export const ModalContent = { + AuthenticateModal, + ConnectedModal, + CreateCreditScoreModal, + CreateIdentityModal, + CreateSoulnameModal, + SuccessCreateIdentityModal, + SwitchChainModal, +}; +export type ModalName = + | 'AuthenticateModal' + | 'ConnectedModal' + | 'CreateCreditScoreModal' + | 'CreateIdentityModal' + | 'CreateSoulnameModal' + | 'SuccessCreateIdentityModal' + | 'SwitchChainModal'; diff --git a/src/provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider.tsx index ac170232..a6fcd668 100644 --- a/src/provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider.tsx @@ -29,6 +29,7 @@ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; import React, { createContext, useContext, useMemo } from 'react'; import type { ReactNode } from 'react'; +import { SupportedNetworks } from '@masa-finance/masa-sdk'; type ConfiguredRainbowKitProviderValue = Record; @@ -36,6 +37,7 @@ interface ConfiguredRainbowKitProviderProps { children: ReactNode; } +console.log({ SupportedNetworks }); const { chains, provider } = configureChains( [ mainnet, diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 4fd3dc11..a6ec58df 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -10,6 +10,7 @@ import { useCreditScores, useGreen, useIdentity, + useMasaModals, useModal, useNetwork, useSession, @@ -136,6 +137,17 @@ export const MasaContextProvider = ({ setRainbowKitModalCallback, } = useRainbowKit(); + // new-modal + const { + openAuthenticateModal, + openConnectedModal, + openCreateCreditScoreModal, + openCreateIdentityModal, + openCreateSoulnameModal, + openSuccessCreateIdentityModal, + openSwitchChainModal, + } = useMasaModals(); + // modal const { isModalOpen, @@ -326,6 +338,15 @@ export const MasaContextProvider = ({ // wagmi switchNetworkNew, currentNetworkNew, + + // new-modal + openAuthenticateModal, + openConnectedModal, + openCreateCreditScoreModal, + openCreateIdentityModal, + openCreateSoulnameModal, + openSuccessCreateIdentityModal, + openSwitchChainModal, }; return ( diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx index 00f60109..45a81d3f 100644 --- a/src/provider/masa-provider.tsx +++ b/src/provider/masa-provider.tsx @@ -10,6 +10,7 @@ import { QueryClientProvider } from 'react-query'; import { queryClient } from './masa-query-client'; import { MasaInterface } from '../components'; import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider'; +import ModalManagerProvider from './modules/modal-provider'; // needs to be imported using require. Otherwise, it will not load! require('@rainbow-me/rainbowkit/styles.css'); @@ -21,14 +22,16 @@ export const MasaProvider = ({ return ( <> - - - - {children} - - + + + + + {children} + + + ); diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts index 9e62b6b0..eab90197 100644 --- a/src/provider/masa-shape.ts +++ b/src/provider/masa-shape.ts @@ -119,4 +119,13 @@ export interface MasaShape { >; switchNetworkNew?: (forcedNetworkParam: NetworkName) => void; currentNetworkNew?: GetNetworkResult; + + // new-modal + openAuthenticateModal?: () => void; + openConnectedModal?: () => void; + openCreateCreditScoreModal?: () => void; + openCreateIdentityModal?: () => void; + openCreateSoulnameModal?: () => void; + openSuccessCreateIdentityModal?: () => void; + openSwitchChainModal?: () => void; } diff --git a/src/provider/modules/index.ts b/src/provider/modules/index.ts index 775ccebe..b2971a1d 100644 --- a/src/provider/modules/index.ts +++ b/src/provider/modules/index.ts @@ -7,3 +7,4 @@ export * from './soulnames'; export * from './wallet'; export * from './modal'; export * from './sbt'; +export * from './new-modal'; diff --git a/src/provider/modules/modal-provider.tsx b/src/provider/modules/modal-provider.tsx new file mode 100644 index 00000000..0c18c2f4 --- /dev/null +++ b/src/provider/modules/modal-provider.tsx @@ -0,0 +1,118 @@ +import { + ModalContent, + ModalName, + Modals, + WrapperModalProps, +} from '../../components/new-modal'; +import React, { + ReactNode, + createContext, + useCallback, + useContext, + useMemo, +} from 'react'; +import { useState } from 'react'; +import { useToggle } from 'react-use'; + +export interface ModalManagerProviderValue { + domNode: Element | DocumentFragment | HTMLElement | null; + isModalOpen: boolean; + title?: string; + toggleModal: (nextValue?: any) => void; + openModal: ({ + name, + title, + wrapperProps, + contentProps, + }: { + name: ModalName; + title?: ReactNode; + wrapperProps?: WrapperModalProps; + contentProps: any; + }) => void; +} + +export const ModalManagerContext = createContext( + {} as ModalManagerProviderValue +); + +export const ModalManagerProvider = ({ children }: { children: ReactNode }) => { + const [isModalOpen, toggleModal] = useToggle(false); + const [title, setTitle] = useState(''); + const [currentModal, setCurrentModal] = + useState('AuthenticateModal'); + const [modalContentProps, setModalContentProps] = useState({}); + const [modalWrapperProps, setModalWrapperProps] = useState( + {} + ); + const openModal = useCallback( + ({ + name, + title, + wrapperProps, + contentProps, + }: { + name: ModalName; + title?: ReactNode; + wrapperProps?: WrapperModalProps; + contentProps: any; + }) => { + console.log('abo'); + setTitle(title); + setCurrentModal(name); + setModalContentProps(contentProps); + setModalWrapperProps(wrapperProps || {}); + toggleModal(true); + }, + [ + setTitle, + setCurrentModal, + setModalContentProps, + setModalWrapperProps, + toggleModal, + ] + ); + const reset = useCallback(() => { + setTitle(''); + setCurrentModal('AuthenticateModal'); + setModalContentProps({}); + setModalWrapperProps({}); + }, [setTitle, setCurrentModal, setModalContentProps, setModalWrapperProps]); + + const domNode = document.getElementById('modal-mount'); + let Content = ModalContent[currentModal]; + if (!Content) Content = ModalContent['Default']; + + const modalManagerProviderValue = useMemo( + () => ({ + isModalOpen, + toggleModal, + domNode, + openModal, + reset, + }), + [isModalOpen, toggleModal, domNode, openModal, reset] + ); + return ( + <> + +
+ {Object.keys(ModalOpens).map((key: string) => { + return ( + + ); + })} +
{isLoggedIn && ( )} From 2c019190e11e8f875d29884613f9f7ae3d1680e0 Mon Sep 17 00:00:00 2001 From: simodrws Date: Thu, 4 May 2023 15:01:26 +0200 Subject: [PATCH 022/105] fix: addmasa.stories new --- stories/masa.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index fb6e3fda..085b46f2 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -153,6 +153,7 @@ const Component = (): JSX.Element => { + From 9e8504da51832c4674f5a5d182fe8c66a99a3e93 Mon Sep 17 00:00:00 2001 From: hide-on-bush-x Date: Thu, 4 May 2023 10:43:45 -0300 Subject: [PATCH 023/105] WIP Openning flows and styles --- src/components/modal/styles.scss | 18 +------------ src/components/new-modal/Modal.tsx | 3 ++- src/components/new-modal/modals/index.tsx | 5 +++- src/provider/masa-context-provider.tsx | 2 ++ src/provider/masa-shape.ts | 1 + .../modules/new-modal/use-masa-modals.tsx | 17 +++++++++++++ src/provider/styles.scss | 25 ++++++++++++++----- stories/masa.stories.tsx | 2 ++ 8 files changed, 48 insertions(+), 25 deletions(-) diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss index 0092e2a8..f5dc2e7d 100644 --- a/src/components/modal/styles.scss +++ b/src/components/modal/styles.scss @@ -7,23 +7,6 @@ border-radius: 24px; } .masa-modal { - display: flex; - flex-direction: column; - align-items: flex-start; - box-sizing: border-box; - - padding: 1.2em; - - width: 100%; - height: 100%; - - .masa-modal-container { - width: 100%; - height: 100%; - padding: 1em 2em; - - box-sizing: border-box; - } .error-message { color: red; @@ -529,6 +512,7 @@ .interface-connected { .title { text-align: center; + color: black; } .connected-wallet { diff --git a/src/components/new-modal/Modal.tsx b/src/components/new-modal/Modal.tsx index 0d50738d..50047d06 100644 --- a/src/components/new-modal/Modal.tsx +++ b/src/components/new-modal/Modal.tsx @@ -24,6 +24,7 @@ export const ModalWrapper = ({ confirm, }: WrapperModalProps) => { const { domNode } = useModalManager(); + return createPortal( { @@ -31,7 +32,7 @@ export const ModalWrapper = ({ }} >
e.stopPropagation()} // needed so modal doesnt close on any click >
diff --git a/src/components/new-modal/modals/index.tsx b/src/components/new-modal/modals/index.tsx index f7f20c76..c877d560 100644 --- a/src/components/new-modal/modals/index.tsx +++ b/src/components/new-modal/modals/index.tsx @@ -7,6 +7,7 @@ import SuccessCreateIdentityModal from './SuccessCreateIdentityModal'; import SwitchChainModal from './SwitchChainModal'; import Backdrop from '../Backdrop'; import { ModalWrapper } from '../Modal'; +import InterfaceMasaGreen from '../../../components/masa-interface/pages/masa-green'; export const Modals = { AuthenticateModal, ConnectedModal, @@ -27,6 +28,7 @@ export const ModalContent = { CreateSoulnameModal, SuccessCreateIdentityModal, SwitchChainModal, + InterfaceMasaGreen, }; export type ModalName = | 'AuthenticateModal' @@ -35,4 +37,5 @@ export type ModalName = | 'CreateIdentityModal' | 'CreateSoulnameModal' | 'SuccessCreateIdentityModal' - | 'SwitchChainModal'; + | 'SwitchChainModal' + | 'InterfaceMasaGreen'; diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index a6ec58df..8c6aa195 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -146,6 +146,7 @@ export const MasaContextProvider = ({ openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, + openInterfaceMasaGreen, } = useMasaModals(); // modal @@ -347,6 +348,7 @@ export const MasaContextProvider = ({ openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, + openInterfaceMasaGreen }; return ( diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts index eab90197..8e4eecc1 100644 --- a/src/provider/masa-shape.ts +++ b/src/provider/masa-shape.ts @@ -128,4 +128,5 @@ export interface MasaShape { openCreateSoulnameModal?: () => void; openSuccessCreateIdentityModal?: () => void; openSwitchChainModal?: () => void; + openInterfaceMasaGreen?: () => void; } diff --git a/src/provider/modules/new-modal/use-masa-modals.tsx b/src/provider/modules/new-modal/use-masa-modals.tsx index 10a0732a..a77a6e9a 100644 --- a/src/provider/modules/new-modal/use-masa-modals.tsx +++ b/src/provider/modules/new-modal/use-masa-modals.tsx @@ -20,6 +20,22 @@ export const useMasaModals = () => { [openModal] ); + const openInterfaceMasaGreen = useCallback( + () => + openModal({ + name: 'InterfaceMasaGreen', + contentProps: {}, + wrapperProps: { + confirm: 'Authenticate', + decline: 'Cancel', + onConfirm: () => { + console.log('Authenticated'); + }, + }, + }), + [openModal] + ); + const openConnectedModal = useCallback( () => openModal({ @@ -124,5 +140,6 @@ export const useMasaModals = () => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, + openInterfaceMasaGreen }; }; diff --git a/src/provider/styles.scss b/src/provider/styles.scss index c4a6f871..defbdd0f 100644 --- a/src/provider/styles.scss +++ b/src/provider/styles.scss @@ -136,17 +136,19 @@ background-color: rgba(200, 200, 200, 0.5); border-radius: 12; + + .masa-modalwrapper-container { - background-color: var(--color-secondary); + background-color: white; color: var(--color-primary); - width: 80%; - min-height: 500; + width: 60%; + min-height: 500px; z-index: var(--z-index-front); box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px; padding: 24; justify-content: flex-start; overflow-x: hidden; - overflow-y: scroll; + & > header { width: 100%; display: flex; @@ -180,12 +182,17 @@ } & > section { - width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; - padding: 0; + + + width: 100%; + height: 100%; + padding: 1em 10em; + + box-sizing: border-box; } & > ul { @@ -194,6 +201,10 @@ justify-content: center; align-items: center; flex-direction: row; + + box-sizing: border-box; + padding: 0; + & > li { width: '100%'; display: flex; @@ -204,3 +215,5 @@ } } } + + diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index 085b46f2..8ed5fa58 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -51,6 +51,7 @@ const Component = (): JSX.Element => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, + openInterfaceMasaGreen } = useMasa(); const ModalOpens = { @@ -61,6 +62,7 @@ const Component = (): JSX.Element => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, + openInterfaceMasaGreen }; const handleConnect = useCallback(() => { From b9818d18bd6a400468786ec0217cc08b118efcdc Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Fri, 5 May 2023 11:33:54 +0200 Subject: [PATCH 024/105] refactor --- .../configured-rainbowkit-provider.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider.tsx index a6fcd668..6bca9063 100644 --- a/src/provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider.tsx @@ -1,34 +1,30 @@ import { - getDefaultWallets, connectorsForWallets, + getDefaultWallets, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; // Import known recommended wallets -import { - Valora, - // CeloWallet, - // CeloDance -} from '@celo/rainbowkit-celo/wallets'; +import { Valora } from '@celo/rainbowkit-celo/wallets'; // Import CELO chain information import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { + baseGoerli, + bsc, + bscTestnet, + goerli, mainnet, polygon, polygonMumbai, - goerli, - bsc, - bscTestnet, - baseGoerli, } from 'wagmi/chains'; import { publicProvider } from 'wagmi/providers/public'; import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; -import React, { createContext, useContext, useMemo } from 'react'; import type { ReactNode } from 'react'; +import React, { createContext, useContext, useMemo } from 'react'; import { SupportedNetworks } from '@masa-finance/masa-sdk'; type ConfiguredRainbowKitProviderValue = Record; @@ -40,15 +36,18 @@ interface ConfiguredRainbowKitProviderProps { console.log({ SupportedNetworks }); const { chains, provider } = configureChains( [ + // eth mainnet, + goerli, + // polygon polygon, polygonMumbai, - goerli, + // base baseGoerli, - // celo, - // celoAlfajores, + // binance smart chain bsc, bscTestnet, + // celo Alfajores, Celo, ], From b93b48fb21c4370248a63c14ea75bc789bacfb7e Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Fri, 5 May 2023 11:53:45 +0200 Subject: [PATCH 025/105] optimize switch wallet --- .../pages/authenticate/authenticate.tsx | 40 ++++++++++++------- src/components/modal/styles.scss | 1 - src/components/new-modal/Modal.tsx | 2 +- src/provider/masa-context-provider.tsx | 5 ++- .../modules/new-modal/use-masa-modals.tsx | 2 +- src/provider/styles.scss | 6 +-- stories/masa.stories.tsx | 4 +- 7 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/components/masa-interface/pages/authenticate/authenticate.tsx b/src/components/masa-interface/pages/authenticate/authenticate.tsx index 0c7df830..54240f3c 100644 --- a/src/components/masa-interface/pages/authenticate/authenticate.tsx +++ b/src/components/masa-interface/pages/authenticate/authenticate.tsx @@ -12,6 +12,7 @@ export const InterfaceAuthenticate = (): JSX.Element => { setModalOpen, openConnectModal, isLoggedIn, + useRainbowKit, } = useMasa(); const { isConnected } = useAccount(); const { disconnect } = useDisconnect(); @@ -78,26 +79,37 @@ export const InterfaceAuthenticate = (): JSX.Element => {

- {!isLoggedIn && isConnected && ( - - )} -
-

- Want to use a different wallet? Close this window and disconnect - your wallet in Metamask to connect a new wallet -

-
+ + {useRainbowKit ? ( +
+

+ Want to use a different wallet? + {!isLoggedIn && isConnected && ( +

+ + Switch Wallet + +
+ )} +

+
+ ) : ( +
+

+ Want to use a different wallet? Close this window and disconnect + your wallet in Metamask to connect a new wallet +

+
+ )}
); diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss index f5dc2e7d..0bc3a21a 100644 --- a/src/components/modal/styles.scss +++ b/src/components/modal/styles.scss @@ -7,7 +7,6 @@ border-radius: 24px; } .masa-modal { - .error-message { color: red; } diff --git a/src/components/new-modal/Modal.tsx b/src/components/new-modal/Modal.tsx index 50047d06..04e57cb5 100644 --- a/src/components/new-modal/Modal.tsx +++ b/src/components/new-modal/Modal.tsx @@ -24,7 +24,7 @@ export const ModalWrapper = ({ confirm, }: WrapperModalProps) => { const { domNode } = useModalManager(); - + return createPortal( { diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 8c6aa195..f664d408 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -1,8 +1,8 @@ import { EnvironmentName, Masa, - SupportedNetworks, SoulNameErrorCodes, + SupportedNetworks, } from '@masa-finance/masa-sdk'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { createNewMasa } from '../helpers'; @@ -332,6 +332,7 @@ export const MasaContextProvider = ({ forceNetwork, // rainbowkit + useRainbowKit: useRainbowKitWalletConnect, openConnectModal, openChainModal, openAccountModal, @@ -348,7 +349,7 @@ export const MasaContextProvider = ({ openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, - openInterfaceMasaGreen + openInterfaceMasaGreen, }; return ( diff --git a/src/provider/modules/new-modal/use-masa-modals.tsx b/src/provider/modules/new-modal/use-masa-modals.tsx index a77a6e9a..16ee0c6b 100644 --- a/src/provider/modules/new-modal/use-masa-modals.tsx +++ b/src/provider/modules/new-modal/use-masa-modals.tsx @@ -140,6 +140,6 @@ export const useMasaModals = () => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, - openInterfaceMasaGreen + openInterfaceMasaGreen, }; }; diff --git a/src/provider/styles.scss b/src/provider/styles.scss index defbdd0f..f4456729 100644 --- a/src/provider/styles.scss +++ b/src/provider/styles.scss @@ -137,7 +137,6 @@ background-color: rgba(200, 200, 200, 0.5); border-radius: 12; - .masa-modalwrapper-container { background-color: white; color: var(--color-primary); @@ -187,11 +186,10 @@ align-items: center; flex-direction: column; - width: 100%; height: 100%; padding: 1em 10em; - + box-sizing: border-box; } @@ -215,5 +213,3 @@ } } } - - diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx index 8ed5fa58..acb9edb7 100644 --- a/stories/masa.stories.tsx +++ b/stories/masa.stories.tsx @@ -51,7 +51,7 @@ const Component = (): JSX.Element => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, - openInterfaceMasaGreen + openInterfaceMasaGreen, } = useMasa(); const ModalOpens = { @@ -62,7 +62,7 @@ const Component = (): JSX.Element => { openCreateSoulnameModal, openSuccessCreateIdentityModal, openSwitchChainModal, - openInterfaceMasaGreen + openInterfaceMasaGreen, }; const handleConnect = useCallback(() => { From 91578cdf242cb8aaef3d09136219d7e2cb24dcd2 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 5 May 2023 11:58:56 +0200 Subject: [PATCH 026/105] feat: first draft only metamask & valora --- package.json | 1 + .../masa-interface/masa-interface.tsx | 1 - src/components/modal/modal.tsx | 1 + src/components/new-modal/Modal.tsx | 47 +++++++------ .../new-modal/modals/AuthenticateModal.tsx | 26 +++---- .../configured-rainbowkit-provider.tsx | 28 +++++--- src/provider/masa-context-provider.tsx | 68 ++++++++++++------- src/provider/masa-provider.tsx | 20 +++--- src/provider/masa-shape.ts | 13 ++++ src/provider/modules/index.ts | 1 - src/provider/modules/modal-provider.tsx | 1 - .../modules/new-modal/use-masa-modals.tsx | 31 +++++---- src/provider/styles.scss | 11 ++- src/provider/use-rainbowkit.tsx | 2 +- yarn.lock | 5 ++ 15 files changed, 161 insertions(+), 95 deletions(-) diff --git a/package.json b/package.json index 8cef2cc1..62f6b982 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "react-query": "^3.39.3", "react-spinners": "^0.13.8", "react-use": "^17.4.0", + "react-use-pagination": "^2.0.1", "reaptcha": "^1.12.1", "rodal": "^2.0.0", "storybook-addon-sass-postcss": "^0.1.3", diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index 5be45e05..484ae8ff 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -121,7 +121,6 @@ export const MasaInterface = (): JSX.Element => { }, [page]); useEffect(() => { - console.log({ isModalOpen, provider, page }); // * when user closes connection during login process, // * we want to reopen rainbowkit modal not our old connection modal if (isModalOpen && !provider && page === 'connector') { diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index c6be02da..23fcf973 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -54,6 +54,7 @@ export const ModalComponent = ({ }: ModalProps): JSX.Element => { const { isMobile, height: screenHeight, width: screenWidth } = useIsMobile(); const { modalSize } = useMasa(); + return ( { const { domNode } = useModalManager(); + const buttonClassName = cx({ + 'masa-button': true, + 'authenticate-button': + [onDecline, onConfirm].map(Boolean).filter(Boolean).length === 1, + }); + + const listItemClassName = cx({ + 'flex-50': [onDecline, onConfirm].map(Boolean).filter(Boolean).length === 2, + 'flex-100': + [onDecline, onConfirm].map(Boolean).filter(Boolean).length === 1, + }); return createPortal(
- + x

{title}

{children}
    {onDecline && ( -
  • +
    • )} -
  • - +
  • + {onConfirm && ( + + )}
diff --git a/src/components/new-modal/modals/AuthenticateModal.tsx b/src/components/new-modal/modals/AuthenticateModal.tsx index 651da8d7..2bd8b2bd 100644 --- a/src/components/new-modal/modals/AuthenticateModal.tsx +++ b/src/components/new-modal/modals/AuthenticateModal.tsx @@ -3,9 +3,9 @@ import { useMasa } from '../../../provider'; import { Spinner } from '../../spinner'; const AuthenticateModal = (): JSX.Element => { - const { company, handleLogin, walletAddress, isLoading } = useMasa(); + const { company, walletAddress, isLoading } = useMasa(); const [copied, setCopied] = useState(false); - + console.log({ company, walletAddress, isLoading }); const message = useMemo(() => { switch (company) { case 'Masa': @@ -46,26 +46,28 @@ const AuthenticateModal = (): JSX.Element => {

Wallet connected!

{message}

-

- You are connected with the following wallet - - {copied ? 'Copied!' : shortAddress} - -

+ {walletAddress && ( +

+ You are connected with the following wallet + + {copied ? 'Copied!' : shortAddress} + +

+ )}
- -
+ */} + {/*

Want to use a different wallet? Close this window and disconnect your wallet in Metamask to connect a new wallet

-
+
*/}
); diff --git a/src/provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider.tsx index 6bca9063..b7f88c3d 100644 --- a/src/provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider.tsx @@ -1,12 +1,12 @@ import { connectorsForWallets, - getDefaultWallets, + // getDefaultWallets, RainbowKitProvider, } from '@rainbow-me/rainbowkit'; // Import known recommended wallets import { Valora } from '@celo/rainbowkit-celo/wallets'; - +import { injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'; // Import CELO chain information import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; @@ -25,7 +25,7 @@ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; import type { ReactNode } from 'react'; import React, { createContext, useContext, useMemo } from 'react'; -import { SupportedNetworks } from '@masa-finance/masa-sdk'; +// import { SupportedNetworks } from '@masa-finance/masa-sdk'; type ConfiguredRainbowKitProviderValue = Record; @@ -33,7 +33,6 @@ interface ConfiguredRainbowKitProviderProps { children: ReactNode; } -console.log({ SupportedNetworks }); const { chains, provider } = configureChains( [ // eth @@ -44,6 +43,7 @@ const { chains, provider } = configureChains( polygonMumbai, // base baseGoerli, + // binance smart chain bsc, bscTestnet, @@ -60,14 +60,17 @@ const { chains, provider } = configureChains( ] ); -const { wallets } = getDefaultWallets({ - appName: 'Masa React', - projectId: '04a4088bf7ff775c3de808412c291cc0', - chains, -}); +// const { wallets } = getDefaultWallets({ +// appName: 'Masa React', +// projectId: '04a4088bf7ff775c3de808412c291cc0', +// chains, +// }); const celoConnectors = connectorsForWallets([ - { ...wallets[0] }, + { + groupName: 'Recommended', + wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })], + }, { groupName: 'Celo', wallets: [ @@ -78,6 +81,11 @@ const celoConnectors = connectorsForWallets([ }, ]); +console.log( + 'abyayayayo', + celoConnectors().map((cc) => cc.name) +); + const wagmiClient = createClient({ autoConnect: true, connectors: celoConnectors, diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index f664d408..55924357 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -10,7 +10,6 @@ import { useCreditScores, useGreen, useIdentity, - useMasaModals, useModal, useNetwork, useSession, @@ -128,7 +127,7 @@ export const MasaContextProvider = ({ isLoggedIn, masaInstance?.config.verbose ); - console.log({ scope, areScopesFullfiled }); + // rainbowkit const { openChainModal, @@ -137,18 +136,6 @@ export const MasaContextProvider = ({ setRainbowKitModalCallback, } = useRainbowKit(); - // new-modal - const { - openAuthenticateModal, - openConnectedModal, - openCreateCreditScoreModal, - openCreateIdentityModal, - openCreateSoulnameModal, - openSuccessCreateIdentityModal, - openSwitchChainModal, - openInterfaceMasaGreen, - } = useMasaModals(); - // modal const { isModalOpen, @@ -187,15 +174,45 @@ export const MasaContextProvider = ({ ]); // const providerWagmi = useProvider(); + // useEffect(() => { + // if (forceNetwork && currentNetwork?.networkName !== forceNetwork) + // openSwitchChainModal(); + // else if (!isLoggedIn && provider) openAuthenticateModal(); + // if (isLoggedIn) { + // if (!soulnames || (soulnames && soulnames.length === 0)) { + // // TODO: add scopes + // openCreateSoulnameModal(); + // } + // } + // }, [ + // isLoggedIn, + // provider, + // forceNetwork, + // soulnames, + // currentNetwork, + // // openAuthenticateModal, + // // openSwitchChainModal, + // // openCreateSoulnameModal, + // ]); + const connect = useCallback( (options?: { scope?: string[]; callback?: () => void }) => { + // if (useRainbowKitWalletConnect) { + // openConnectModal?.(); + // // setRainbowKitModalCallback(() => { + // // return () => { + // // openAuthenticateModal(); + // // openConnectedModal(); + // // }; + // // }); + // // return; + // } if (verbose) { console.info({ forcedPage }); } // * feature toggle, to be removed soon if (useRainbowKitWalletConnect) { - console.log('userainbow', openConnectModal); // * set the callback to open masa modal after rainbowkit modal is closed setRainbowKitModalCallback(() => { return () => setModalOpen(true); @@ -227,6 +244,8 @@ export const MasaContextProvider = ({ openConnectModal, verbose, useRainbowKitWalletConnect, + // openAuthenticateModal, + // openConnectedModal, // wagmiSigner, ] ); @@ -341,15 +360,16 @@ export const MasaContextProvider = ({ switchNetworkNew, currentNetworkNew, - // new-modal - openAuthenticateModal, - openConnectedModal, - openCreateCreditScoreModal, - openCreateIdentityModal, - openCreateSoulnameModal, - openSuccessCreateIdentityModal, - openSwitchChainModal, - openInterfaceMasaGreen, + // // new-modal + // openModal, + // openAuthenticateModal, + // openConnectedModal, + // openCreateCreditScoreModal, + // openCreateIdentityModal, + // openCreateSoulnameModal, + // openSuccessCreateIdentityModal, + // openSwitchChainModal, + // openInterfaceMasaGreen, }; return ( diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx index 45a81d3f..50d7c2fa 100644 --- a/src/provider/masa-provider.tsx +++ b/src/provider/masa-provider.tsx @@ -10,7 +10,6 @@ import { QueryClientProvider } from 'react-query'; import { queryClient } from './masa-query-client'; import { MasaInterface } from '../components'; import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider'; -import ModalManagerProvider from './modules/modal-provider'; // needs to be imported using require. Otherwise, it will not load! require('@rainbow-me/rainbowkit/styles.css'); @@ -22,16 +21,15 @@ export const MasaProvider = ({ return ( <> - - - - - {children} - - - + + + ); From c116b70c324b327796d92b78c9bbf7cdc3b97693 Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Fri, 5 May 2023 13:15:51 +0200 Subject: [PATCH 030/105] fix provider handling --- .../masa-interface/masa-interface.tsx | 16 ++++------ src/helpers/masa.ts | 16 ++-------- src/provider/masa-context-provider.tsx | 32 ++++++------------- src/provider/masa-shape.ts | 9 +++--- src/provider/modules/wagmi/index.ts | 1 + .../wagmi/{index.tsx => use-wagmi.tsx} | 4 +-- src/provider/use-metamask.ts | 16 +++++----- 7 files changed, 34 insertions(+), 60 deletions(-) create mode 100644 src/provider/modules/wagmi/index.ts rename src/provider/modules/wagmi/{index.tsx => use-wagmi.tsx} (79%) diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx index 484ae8ff..dbcf9291 100644 --- a/src/components/masa-interface/masa-interface.tsx +++ b/src/components/masa-interface/masa-interface.tsx @@ -1,13 +1,9 @@ import React, { useEffect, useMemo } from 'react'; -import { - useMasa, - // useMetamask -} from '../../provider'; +import { useMasa } from '../../provider'; import { ModalComponent } from '../modal'; import { InterfaceAuthenticate, InterfaceConnected, - // InterfaceConnector, InterfaceCreateCreditScore, InterfaceCreateIdentity, } from './pages'; @@ -47,7 +43,7 @@ export const MasaInterface = (): JSX.Element => { hasWalletAddress, identity, isLoggedIn, - provider, + signer, closeModal, scope, creditScores, @@ -77,7 +73,7 @@ export const MasaInterface = (): JSX.Element => { return 'switchNetwork'; } - if (!isLoggedIn && provider) return 'authenticate'; + if (!isLoggedIn && signer) return 'authenticate'; if ( isLoggedIn && @@ -107,7 +103,7 @@ export const MasaInterface = (): JSX.Element => { identity, isLoggedIn, scope, - provider, + signer, creditScores, soulnames, forcedPage, @@ -123,12 +119,12 @@ export const MasaInterface = (): JSX.Element => { useEffect(() => { // * when user closes connection during login process, // * we want to reopen rainbowkit modal not our old connection modal - if (isModalOpen && !provider && page === 'connector') { + if (isModalOpen && !signer && page === 'connector') { closeModal?.(); console.log('opening connect modal'); openConnectModal?.(); } - }, [isModalOpen, closeModal, provider, page, openConnectModal]); + }, [isModalOpen, closeModal, signer, page, openConnectModal]); return ( <> diff --git a/src/helpers/masa.ts b/src/helpers/masa.ts index 60c535ed..97c26629 100644 --- a/src/helpers/masa.ts +++ b/src/helpers/masa.ts @@ -1,5 +1,4 @@ import { - createRandomWallet, Environment, environments, Masa, @@ -22,27 +21,18 @@ export const getWeb3Provider = (): providers.Web3Provider | undefined => { }; export const createNewMasa = ({ - signer, + wallet, environmentName, networkName = 'unknown', arweaveConfig, verbose, }: { - signer: ethers.Signer | null; + wallet: ethers.Signer | ethers.Wallet; environmentName: string; networkName?: NetworkName; arweaveConfig?: ArweaveConfig; verbose: boolean; }): Masa | undefined => { - const newSigner: ethers.Signer | null = signer - ? signer - : createRandomWallet(getWeb3Provider()); - - if (!newSigner) { - console.error('Unable to create signer!'); - return; - } - const environment = environments.find( (environment: Environment) => environment.name === environmentName ); @@ -52,7 +42,7 @@ export const createNewMasa = ({ } return new Masa({ - wallet: newSigner, + wallet, apiUrl: environment.apiUrl, networkName, environment: environment.environment, diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 55924357..ec7fff31 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -64,21 +64,17 @@ export const MasaContextProvider = ({ const [masaInstance, setMasaInstance] = useState(); // provider - const { - provider: wagmiProvider, - isLoading: wagmiLoading, - signer: wagmiSigner, - } = useWagmi(); - const [provider, setProvider] = useState( - wagmiSigner as Signer | undefined + const { isLoading: wagmiLoading, signer: wagmiSigner } = useWagmi(); + const [signer, setSigner] = useState( + wagmiSigner as Signer ); - useEffect(() => setProvider(wagmiSigner as Signer), [wagmiSigner]); + useEffect(() => setSigner(wagmiSigner as Signer), [wagmiSigner]); // wallet const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet( masaInstance, - wagmiSigner as Signer | undefined + wagmiSigner as Signer ); // session const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } = @@ -252,12 +248,11 @@ export const MasaContextProvider = ({ useEffect(() => { const loadMasa = (): void => { - // if (!provider) return; + if (!wagmiSigner) return; const masa: Masa | undefined = createNewMasa({ // signer: provider, - signer: wagmiSigner as Signer | null, - // provider: wagmiProvider as providers.Provider, + wallet: wagmiSigner as Signer, environmentName, networkName: currentNetwork?.networkName, arweaveConfig, @@ -268,14 +263,7 @@ export const MasaContextProvider = ({ }; void loadMasa(); - }, [ - arweaveConfig, - environmentName, - verbose, - currentNetwork, - wagmiProvider, - wagmiSigner, - ]); + }, [arweaveConfig, environmentName, verbose, currentNetwork, wagmiSigner]); const context: MasaShape = { // masa instance @@ -294,8 +282,8 @@ export const MasaContextProvider = ({ company, // provider handling - provider, - setProvider, + signer, + setSigner, // modal isModalOpen, diff --git a/src/provider/masa-shape.ts b/src/provider/masa-shape.ts index 40344dd5..124e161f 100644 --- a/src/provider/masa-shape.ts +++ b/src/provider/masa-shape.ts @@ -10,9 +10,10 @@ import { SoulNameDetails, VerifyGreenResult, } from '@masa-finance/masa-sdk'; -import { BigNumber, Signer, Wallet } from 'ethers'; +import { BigNumber, Signer } from 'ethers'; import { GetNetworkResult } from '@wagmi/core'; -import { WrapperModalProps, ModalName } from '../components/new-modal'; +import { ModalName, WrapperModalProps } from '../components'; + export interface MasaShape { children?: React.ReactNode; // masa @@ -32,8 +33,8 @@ export interface MasaShape { company?: string; // provider - provider?: Wallet | Signer; - setProvider?: (provider?: Wallet | Signer) => void; + signer?: Signer; + setSigner?: (signer?: Signer) => void; // modal isModalOpen?: boolean; diff --git a/src/provider/modules/wagmi/index.ts b/src/provider/modules/wagmi/index.ts new file mode 100644 index 00000000..d6e04cf9 --- /dev/null +++ b/src/provider/modules/wagmi/index.ts @@ -0,0 +1 @@ +export * from './use-wagmi'; diff --git a/src/provider/modules/wagmi/index.tsx b/src/provider/modules/wagmi/use-wagmi.tsx similarity index 79% rename from src/provider/modules/wagmi/index.tsx rename to src/provider/modules/wagmi/use-wagmi.tsx index 6acf1ccc..decf48a1 100644 --- a/src/provider/modules/wagmi/index.tsx +++ b/src/provider/modules/wagmi/use-wagmi.tsx @@ -1,6 +1,4 @@ -import { Chain, useSigner } from 'wagmi'; -import { useNetwork, useProvider } from 'wagmi'; -import { useAccount } from 'wagmi'; +import { Chain, useAccount, useNetwork, useProvider, useSigner } from 'wagmi'; export const useWagmi = () => { const provider = useProvider(); diff --git a/src/provider/use-metamask.ts b/src/provider/use-metamask.ts index dfe0aaf4..2a383da3 100644 --- a/src/provider/use-metamask.ts +++ b/src/provider/use-metamask.ts @@ -11,7 +11,7 @@ export const useMetamask = ({ disabled?: boolean; }): { connectMetamask: () => void } => { const [connectedAccounts, setConnectedAccounts] = useState([]); - const { setProvider, handleLogout, walletAddress, verbose, isLoggedIn } = + const { setSigner, handleLogout, walletAddress, verbose, isLoggedIn } = useMasa(); const { localStorageSet, localStorageGet } = useLocalStorage(); @@ -52,8 +52,8 @@ export const useMetamask = ({ if (accounts && Array.isArray(accounts)) { const signer = getWeb3Provider()?.getSigner(); - if (signer && accounts.length > 0 && setProvider) { - setProvider(signer); + if (signer && accounts.length > 0 && setSigner) { + setSigner(signer); metamaskConnected = true; localStorageSet(metamaskStorageKey, true); } else { @@ -72,7 +72,7 @@ export const useMetamask = ({ }, [ disabled, verbose, - setProvider, + setSigner, localStorageGet, localStorageSet, walletAddress, @@ -130,7 +130,7 @@ export const useMetamask = ({ }; void disconnectMetamaskOnWalletChange(); - }, [connectedAccounts, disconnectMetamask, walletAddress, setProvider]); + }, [connectedAccounts, disconnectMetamask, walletAddress, setSigner]); /** * wire up metamask event listeners @@ -149,7 +149,7 @@ export const useMetamask = ({ // no accounts, disconnect metamask await disconnectMetamask(); // drop provider - setProvider?.(); + setSigner?.(); } // update accounts @@ -163,11 +163,11 @@ export const useMetamask = ({ (window.ethereum as unknown as MetaMaskInpageProvider)?.on( 'chainChanged', () => { - setProvider?.(getWeb3Provider()?.getSigner()); + setSigner?.(getWeb3Provider()?.getSigner()); } ); } - }, [setProvider, setConnectedAccounts, disconnectMetamask]); + }, [setSigner, setConnectedAccounts, disconnectMetamask]); return { connectMetamask }; }; From 4870a3613634f25eeaa7a9d373380a827270c728 Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Fri, 5 May 2023 13:33:58 +0200 Subject: [PATCH 031/105] v1.2.0-alpha.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index edbe5b81..275a8f45 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@masa-finance/masa-react", - "version": "1.2.0-alpha.1", + "version": "1.2.0-alpha.2", "license": "MIT", "main": "./dist/src/index.js", "typings": "./dist/src/index.d.ts", From 206592feaad72bd0ff7f6647940dad97cb52d0ca Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 5 May 2023 14:10:12 +0200 Subject: [PATCH 032/105] feat: wip correct wallet address handling --- .../configured-rainbowkit-provider.tsx | 10 ++- .../configured-rainbowkit-provider/index.ts | 1 + .../configured-rainbowkit-provider/utils.ts | 71 +++++++++++++++++++ src/provider/masa-context-provider.tsx | 38 +++++++++- src/provider/masa-provider.tsx | 2 +- src/provider/modules/wagmi/use-wagmi.tsx | 2 + src/provider/modules/wallet/wallet.ts | 17 ++++- 7 files changed, 132 insertions(+), 9 deletions(-) rename src/provider/{ => configured-rainbowkit-provider}/configured-rainbowkit-provider.tsx (92%) create mode 100644 src/provider/configured-rainbowkit-provider/index.ts create mode 100644 src/provider/configured-rainbowkit-provider/utils.ts diff --git a/src/provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx similarity index 92% rename from src/provider/configured-rainbowkit-provider.tsx rename to src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx index b7f88c3d..327dd90f 100644 --- a/src/provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx @@ -9,8 +9,6 @@ import { Valora } from '@celo/rainbowkit-celo/wallets'; import { injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'; // Import CELO chain information import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; - -import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { baseGoerli, bsc, @@ -20,17 +18,21 @@ import { polygon, polygonMumbai, } from 'wagmi/chains'; + +import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { publicProvider } from 'wagmi/providers/public'; import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; import type { ReactNode } from 'react'; import React, { createContext, useContext, useMemo } from 'react'; +import { getRainbowkitChains } from './utils'; // import { SupportedNetworks } from '@masa-finance/masa-sdk'; type ConfiguredRainbowKitProviderValue = Record; interface ConfiguredRainbowKitProviderProps { children: ReactNode; + chainsToUse?: any; } const { chains, provider } = configureChains( @@ -94,12 +96,14 @@ const wagmiClient = createClient({ export const ConfiguredRainbowKitProvider = ({ children, + chainsToUse, }: ConfiguredRainbowKitProviderProps) => { + const rainbowkitChains = getRainbowkitChains(chainsToUse); const contextValue = useMemo(() => ({}), []); return ( - + {children} diff --git a/src/provider/configured-rainbowkit-provider/index.ts b/src/provider/configured-rainbowkit-provider/index.ts new file mode 100644 index 00000000..d9cf1b33 --- /dev/null +++ b/src/provider/configured-rainbowkit-provider/index.ts @@ -0,0 +1 @@ +export * from './configured-rainbowkit-provider'; diff --git a/src/provider/configured-rainbowkit-provider/utils.ts b/src/provider/configured-rainbowkit-provider/utils.ts new file mode 100644 index 00000000..0b2b227d --- /dev/null +++ b/src/provider/configured-rainbowkit-provider/utils.ts @@ -0,0 +1,71 @@ +import { Network, SupportedNetworks } from '@masa-finance/masa-sdk'; +import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; +import { + baseGoerli, + bsc, + bscTestnet, + goerli, + mainnet, + polygon, + polygonMumbai, +} from 'wagmi/chains'; + +const rainbowkitChains = [ + Alfajores, + baseGoerli, + bsc, + bscTestnet, + Celo, + goerli, + mainnet, + polygon, + polygonMumbai, +]; + +type MasaNetworks = Partial<{ + goerli: Network; + ethereum: Network; + mainnet: Network; + alfajores: Network; + celo: Network; + mumbai: Network; + polygon: Network; + bsctest: Network; + bsc: Network; + basegoerli: Network; + unknown: Network; +}>; + +export const getRainbowkitChains = ( + networkList?: Array +) => { + if (!networkList || (networkList && !networkList.length)) { + return rainbowkitChains; + } + + const masaNetworks = Object.keys(SupportedNetworks) + .filter((x: string) => x !== 'ethereum' && x !== 'unknown') // remove unused network + .reduce((acc: MasaNetworks, val: string) => { + acc[val] = SupportedNetworks[val] as Network; + return acc; + }, {}); + + const masaNetworkNames = Object.keys(masaNetworks); + + const userNetworksFiltered = networkList.filter((networkName) => + masaNetworkNames.includes(networkName) + ); + + const userNetworksMasa = userNetworksFiltered.map((un) => masaNetworks[un]); + const userNetworksRainbowkit = userNetworksMasa.map((unm) => unm?.chainId); + const userChainsRainbowkit = rainbowkitChains.filter((rainbowkitChain) => + userNetworksRainbowkit.includes(rainbowkitChain.id) + ); + return userChainsRainbowkit; + + // const networkLi; + // const rainbowkitChains = networkList.filter((network: any) => { + // return network.name === SupportedNetworks.Rainbowkit; + // }); + // return rainbowkitChains; +}; diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index ec7fff31..4712cd24 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -23,6 +23,7 @@ import { useScopes } from './modules/scopes/scopes'; import { useRainbowKit } from './use-rainbowkit'; import { useWagmi } from './modules/wagmi'; import { useNetworkSwitch } from './use-network-switch'; +import { useAsync } from 'react-use'; export { SoulNameErrorCodes }; @@ -64,18 +65,42 @@ export const MasaContextProvider = ({ const [masaInstance, setMasaInstance] = useState(); // provider - const { isLoading: wagmiLoading, signer: wagmiSigner } = useWagmi(); + const { + isLoading: wagmiLoading, + signer: wagmiSigner, + // refetchSigner, + provider: wagmiProvider, + address: wagmiAddress, + } = useWagmi(); + const [signer, setSigner] = useState( wagmiSigner as Signer ); - useEffect(() => setSigner(wagmiSigner as Signer), [wagmiSigner]); + useEffect(() => { + setSigner(wagmiSigner as Signer); + }, [wagmiSigner, wagmiAddress]); // wallet const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet( masaInstance, wagmiSigner as Signer ); + + // * little async useEffect helper + useAsync(async () => { + // const { data: result } = await refetchSigner(); + // const oldAddress = await wagmiSigner?.getAddress(); + // const newAddress = await wagmiSigner?.getAddress(); + console.log('use async hook'); + console.log({ + wagmiSigner, + wagmiAddress, + wagmiProvider, + walletAddress, + }); + setSigner(wagmiSigner as Signer); + }, [wagmiSigner, wagmiAddress]); // session const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } = useSession(masaInstance, walletAddress); @@ -263,7 +288,14 @@ export const MasaContextProvider = ({ }; void loadMasa(); - }, [arweaveConfig, environmentName, verbose, currentNetwork, wagmiSigner]); + }, [ + arweaveConfig, + environmentName, + verbose, + currentNetwork, + wagmiSigner, + wagmiAddress, + ]); const context: MasaShape = { // masa instance diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx index 50d7c2fa..d2db3892 100644 --- a/src/provider/masa-provider.tsx +++ b/src/provider/masa-provider.tsx @@ -9,7 +9,7 @@ import { QueryClientProvider } from 'react-query'; import { queryClient } from './masa-query-client'; import { MasaInterface } from '../components'; -import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider'; +import ConfiguredRainbowKitProvider from './configured-rainbowkit-provider/configured-rainbowkit-provider'; // needs to be imported using require. Otherwise, it will not load! require('@rainbow-me/rainbowkit/styles.css'); diff --git a/src/provider/modules/wagmi/use-wagmi.tsx b/src/provider/modules/wagmi/use-wagmi.tsx index decf48a1..8874c2b6 100644 --- a/src/provider/modules/wagmi/use-wagmi.tsx +++ b/src/provider/modules/wagmi/use-wagmi.tsx @@ -7,6 +7,7 @@ export const useWagmi = () => { data: signer, isError: isSignerError, isLoading: isSignerLoading, + refetch: refetchSigner, } = useSigner(); const { address, isConnecting, isDisconnected } = useAccount(); @@ -18,6 +19,7 @@ export const useWagmi = () => { isDisconnected, provider, signer, + refetchSigner, chain: chain as Chain, chains, }; diff --git a/src/provider/modules/wallet/wallet.ts b/src/provider/modules/wallet/wallet.ts index eba6af2e..aeb70aee 100644 --- a/src/provider/modules/wallet/wallet.ts +++ b/src/provider/modules/wallet/wallet.ts @@ -1,7 +1,8 @@ import { useQuery } from 'react-query'; import { Masa, NetworkName } from '@masa-finance/masa-sdk'; import { Signer, Wallet } from 'ethers'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; +import { useAccount, useSigner } from 'wagmi'; export const useWallet = ( masa?: Masa, @@ -13,9 +14,12 @@ export const useWallet = ( status: string; error: unknown; } => { + const { address: wagmiAddress } = useAccount(); + const signer = useSigner(); + const { isRefetching } = signer; const queryKey: (string | NetworkName | undefined)[] = useMemo(() => { return ['wallet', masa?.config.networkName]; - }, [masa]); + }, [masa, wagmiAddress, isRefetching]); const { data: walletAddress, @@ -31,7 +35,16 @@ export const useWallet = ( retry: false, } ); + useEffect(() => { + console.log('isRefetching changed', isRefetching); + }, [isRefetching]); + // console.log({ + // wagmiAddress, + // walletAddress, + + // signer: signer.data?.provider, + // }); const hasWalletAddress = useMemo(() => { return !!walletAddress; }, [walletAddress]); From 27b4d4d15b4b40b0657d1035ad5b47dd3fccb2ed Mon Sep 17 00:00:00 2001 From: Sebastian Gerske <13647606+H34D@users.noreply.github.com> Date: Fri, 5 May 2023 14:20:39 +0200 Subject: [PATCH 033/105] use signer from state --- src/provider/masa-context-provider.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 4712cd24..85c58bf7 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -84,7 +84,7 @@ export const MasaContextProvider = ({ // wallet const { walletAddress, isWalletLoading, hasWalletAddress } = useWallet( masaInstance, - wagmiSigner as Signer + signer ); // * little async useEffect helper @@ -94,19 +94,19 @@ export const MasaContextProvider = ({ // const newAddress = await wagmiSigner?.getAddress(); console.log('use async hook'); console.log({ - wagmiSigner, + signer, wagmiAddress, wagmiProvider, walletAddress, }); - setSigner(wagmiSigner as Signer); - }, [wagmiSigner, wagmiAddress]); + setSigner(signer); + }, [signer, wagmiAddress]); // session const { isLoggedIn, handleLogin, handleLogout, isSessionLoading } = useSession(masaInstance, walletAddress); // network - const { switchNetwork, currentNetwork } = useNetwork(wagmiSigner as Signer); + const { switchNetwork, currentNetwork } = useNetwork(signer); const { switchNetwork: switchNetworkNew, currentNetwork: currentNetworkNew } = useNetworkSwitch(); // identity @@ -273,11 +273,11 @@ export const MasaContextProvider = ({ useEffect(() => { const loadMasa = (): void => { - if (!wagmiSigner) return; + if (!signer) return; const masa: Masa | undefined = createNewMasa({ // signer: provider, - wallet: wagmiSigner as Signer, + wallet: signer, environmentName, networkName: currentNetwork?.networkName, arweaveConfig, @@ -293,7 +293,7 @@ export const MasaContextProvider = ({ environmentName, verbose, currentNetwork, - wagmiSigner, + signer, wagmiAddress, ]); From 6dcb775c5c04ed238b0227e81aee8fa038e7e8f5 Mon Sep 17 00:00:00 2001 From: simodrws Date: Fri, 5 May 2023 14:35:16 +0200 Subject: [PATCH 034/105] feat: allow to decide which chains to use for rainbowkit --- .../configured-rainbowkit-provider.tsx | 144 ++++++++++-------- .../configured-rainbowkit-provider/utils.ts | 13 +- src/provider/masa-context-provider.tsx | 2 + src/provider/masa-provider.tsx | 3 +- 4 files changed, 90 insertions(+), 72 deletions(-) diff --git a/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx b/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx index 327dd90f..a4baed99 100644 --- a/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx +++ b/src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx @@ -8,16 +8,16 @@ import { import { Valora } from '@celo/rainbowkit-celo/wallets'; import { injectedWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'; // Import CELO chain information -import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; -import { - baseGoerli, - bsc, - bscTestnet, - goerli, - mainnet, - polygon, - polygonMumbai, -} from 'wagmi/chains'; +// import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; +// import { +// baseGoerli, +// bsc, +// bscTestnet, +// goerli, +// mainnet, +// polygon, +// polygonMumbai, +// } from 'wagmi/chains'; import { configureChains, createClient, WagmiConfig } from 'wagmi'; import { publicProvider } from 'wagmi/providers/public'; @@ -25,42 +25,42 @@ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'; import type { ReactNode } from 'react'; import React, { createContext, useContext, useMemo } from 'react'; -import { getRainbowkitChains } from './utils'; +import { getRainbowkitChains, MasaNetworks } from './utils'; // import { SupportedNetworks } from '@masa-finance/masa-sdk'; type ConfiguredRainbowKitProviderValue = Record; interface ConfiguredRainbowKitProviderProps { children: ReactNode; - chainsToUse?: any; + chainsToUse?: Array; } -const { chains, provider } = configureChains( - [ - // eth - mainnet, - goerli, - // polygon - polygon, - polygonMumbai, - // base - baseGoerli, - - // binance smart chain - bsc, - bscTestnet, - // celo - Alfajores, - Celo, - ], - [ - // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), - publicProvider(), - jsonRpcProvider({ - rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }), - }), - ] -); +// const { chains, provider } = configureChains( +// [ +// // eth +// mainnet, +// goerli, +// // polygon +// polygon, +// polygonMumbai, +// // base +// baseGoerli, + +// // binance smart chain +// bsc, +// bscTestnet, +// // celo +// Alfajores, +// Celo, +// ], +// [ +// // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), +// publicProvider(), +// jsonRpcProvider({ +// rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }), +// }), +// ] +// ); // const { wallets } = getDefaultWallets({ // appName: 'Masa React', @@ -68,37 +68,55 @@ const { chains, provider } = configureChains( // chains, // }); -const celoConnectors = connectorsForWallets([ - { - groupName: 'Recommended', - wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })], - }, - { - groupName: 'Celo', - wallets: [ - Valora({ chains }), - // CeloWallet({ chains }), - // CeloDance({ chains }), - ], - }, -]); - -console.log( - 'abyayayayo', - celoConnectors().map((cc) => cc.name) -); - -const wagmiClient = createClient({ - autoConnect: true, - connectors: celoConnectors, - provider, -}); +// const celoConnectors = connectorsForWallets([ +// { +// groupName: 'Recommended', +// wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })], +// }, +// { +// groupName: 'Celo', +// wallets: [ +// Valora({ chains }), +// // CeloWallet({ chains }), +// // CeloDance({ chains }), +// ], +// }, +// ]); + +// console.log( +// 'abyayayayo', +// celoConnectors().map((cc) => cc.name) +// ); export const ConfiguredRainbowKitProvider = ({ children, chainsToUse, }: ConfiguredRainbowKitProviderProps) => { const rainbowkitChains = getRainbowkitChains(chainsToUse); + const { chains, provider } = configureChains(rainbowkitChains, [ + // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }), + publicProvider(), + jsonRpcProvider({ + rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }), + }), + ]); + + const celoConnectors = connectorsForWallets([ + { + groupName: 'Recommended', + wallets: [injectedWallet({ chains }), metaMaskWallet({ chains })], + }, + { + groupName: 'Celo', + wallets: [Valora({ chains })], + }, + ]); + const wagmiClient = createClient({ + autoConnect: true, + connectors: celoConnectors, + provider, + }); + const contextValue = useMemo(() => ({}), []); return ( diff --git a/src/provider/configured-rainbowkit-provider/utils.ts b/src/provider/configured-rainbowkit-provider/utils.ts index 0b2b227d..8936e123 100644 --- a/src/provider/configured-rainbowkit-provider/utils.ts +++ b/src/provider/configured-rainbowkit-provider/utils.ts @@ -1,6 +1,7 @@ import { Network, SupportedNetworks } from '@masa-finance/masa-sdk'; import { Alfajores, Celo } from '@celo/rainbowkit-celo/chains'; import { + Chain, baseGoerli, bsc, bscTestnet, @@ -22,7 +23,7 @@ const rainbowkitChains = [ polygonMumbai, ]; -type MasaNetworks = Partial<{ +export type MasaNetworks = Partial<{ goerli: Network; ethereum: Network; mainnet: Network; @@ -39,6 +40,7 @@ type MasaNetworks = Partial<{ export const getRainbowkitChains = ( networkList?: Array ) => { + console.log({ networkList }); if (!networkList || (networkList && !networkList.length)) { return rainbowkitChains; } @@ -58,14 +60,9 @@ export const getRainbowkitChains = ( const userNetworksMasa = userNetworksFiltered.map((un) => masaNetworks[un]); const userNetworksRainbowkit = userNetworksMasa.map((unm) => unm?.chainId); - const userChainsRainbowkit = rainbowkitChains.filter((rainbowkitChain) => + const userChainsRainbowkit = rainbowkitChains.filter((rainbowkitChain : Chain) => userNetworksRainbowkit.includes(rainbowkitChain.id) ); - return userChainsRainbowkit; - // const networkLi; - // const rainbowkitChains = networkList.filter((network: any) => { - // return network.name === SupportedNetworks.Rainbowkit; - // }); - // return rainbowkitChains; + return userChainsRainbowkit; }; diff --git a/src/provider/masa-context-provider.tsx b/src/provider/masa-context-provider.tsx index 85c58bf7..3959f6d4 100644 --- a/src/provider/masa-context-provider.tsx +++ b/src/provider/masa-context-provider.tsx @@ -24,6 +24,7 @@ import { useRainbowKit } from './use-rainbowkit'; import { useWagmi } from './modules/wagmi'; import { useNetworkSwitch } from './use-network-switch'; import { useAsync } from 'react-use'; +import { MasaNetworks } from './configured-rainbowkit-provider/utils'; export { SoulNameErrorCodes }; @@ -42,6 +43,7 @@ export interface MasaContextProviderProps extends MasaShape { environmentName?: EnvironmentNameEx; arweaveConfig?: ArweaveConfig; useRainbowKitWalletConnect?: boolean; + chainsToUse?: Array; } export const MasaContextProvider = ({ diff --git a/src/provider/masa-provider.tsx b/src/provider/masa-provider.tsx index d2db3892..da3562ec 100644 --- a/src/provider/masa-provider.tsx +++ b/src/provider/masa-provider.tsx @@ -16,12 +16,13 @@ require('@rainbow-me/rainbowkit/styles.css'); export const MasaProvider = ({ children, + chainsToUse, ...args }: MasaContextProviderProps): JSX.Element => { return ( <> - +