From 7f152ea8ca0ba4da95dda4853ab7dab944a440f0 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Thu, 7 Mar 2024 11:48:35 +0700 Subject: [PATCH 1/4] Fix enable wallet issue not recognizing preferred wallet --- package.json | 1 + src/components/auth/utils.tsx | 2 +- src/components/utils/index.tsx | 7 +- .../wallets/supportedWallets/index.ts | 11 +- .../wallets/wallet-list/WalletsList.tsx | 24 ++-- yarn.lock | 110 +++++++++++++++++- 6 files changed, 127 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index d923861d8..892fb8f98 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "@subsocial/grill-widget": "^0.0.13", "@subsocial/resource-discussions": "^0.0.4", "@subsocial/utils": "0.8.10", + "@talismn/connect-wallets": "^1.2.5", "@tiptap/extension-highlight": "^2.0.0-beta.33", "@tiptap/extension-image": "^2.0.0-beta.27", "@tiptap/extension-link": "^2.0.0-beta.37", diff --git a/src/components/auth/utils.tsx b/src/components/auth/utils.tsx index 6423f7af2..20dede8b9 100644 --- a/src/components/auth/utils.tsx +++ b/src/components/auth/utils.tsx @@ -9,7 +9,7 @@ export const recheckStatuses = ['UNAVAILABLE', 'UNAUTHORIZED'] const { appName } = config -export const CURRENT_WALLET = 'CurrentWalletName' +export const CURRENT_WALLET = 'preferred-wallet' export const getCurrentWallet = (): string => store.get(CURRENT_WALLET) diff --git a/src/components/utils/index.tsx b/src/components/utils/index.tsx index 70d02d8cb..a402142c5 100644 --- a/src/components/utils/index.tsx +++ b/src/components/utils/index.tsx @@ -23,7 +23,6 @@ const { appBaseUrl, ipfsNodeUrl } = config import { Skeleton } from 'antd' import Avatar from 'antd/lib/avatar/avatar' import { AvatarSize } from 'antd/lib/avatar/SizeContext' -import { InstallUrl, Urls } from '../wallets/types' import * as offchain from './OffchainUtils' export function isServerSide(): boolean { @@ -300,8 +299,6 @@ export const detectBrowser = () => { return browser } -export const getInstallUrl = (instalUrls: InstallUrl) => { - const browser = detectBrowser() - - return instalUrls[browser as Urls] +export const getInstallUrl = (instalUrls: string) => { + return instalUrls } diff --git a/src/components/wallets/supportedWallets/index.ts b/src/components/wallets/supportedWallets/index.ts index 450f4a423..48f59077c 100644 --- a/src/components/wallets/supportedWallets/index.ts +++ b/src/components/wallets/supportedWallets/index.ts @@ -1,13 +1,10 @@ -import { Wallet } from '../types' -import { PolkadotjsWallet } from './polkadot-wallet' -import { SubWallet } from './subwallet-wallet' -import { TalismanWallet } from './talisaman-wallet' +import { getWallets, Wallet } from '@talismn/connect-wallets' -export const supportedWallets = [new TalismanWallet(), new SubWallet(), new PolkadotjsWallet()] +export const supportedWallets = getWallets() export const getWalletBySource = (source: string | unknown): Wallet | undefined => { - return supportedWallets.find(wallet => { - return wallet.extensionName === source + return getWallets().find(wallet => { + return wallet.title === source }) } diff --git a/src/components/wallets/wallet-list/WalletsList.tsx b/src/components/wallets/wallet-list/WalletsList.tsx index 60855734c..63dad684d 100644 --- a/src/components/wallets/wallet-list/WalletsList.tsx +++ b/src/components/wallets/wallet-list/WalletsList.tsx @@ -1,4 +1,5 @@ import { DownloadOutlined } from '@ant-design/icons' +import { Wallet } from '@talismn/connect-wallets' import { Tooltip } from 'antd' import clsx from 'clsx' import { useEffect, useMemo, useState } from 'react' @@ -11,7 +12,6 @@ import { ButtonLink } from '../../utils/CustomLinks' import { AvatarOrSkeleton, detectBrowser, getInstallUrl } from '../../utils/index' import { showWarnMessage } from '../../utils/Message' import { supportedWallets } from '../supportedWallets/index' -import { Wallet } from '../types' import styles from './WalletList.module.sass' export const CURRENT_WALLET = 'preferred-wallet' @@ -40,17 +40,15 @@ const WalletList = ({ setCurrentStep }: GetWalletPorps) => { if (wallet.installed) { await wallet.enable(appName) - if (wallet.enabled) { - const unsub: any = await wallet.subscribeAccounts(async accounts => { - if (accounts) { - setAccountsToState(accounts, setAccounts) - setCurrentStep(StepsEnum.SelectAccount) - setCurrentWallet(wallet.extensionName) - } - }) + const unsub: any = await wallet.subscribeAccounts(async accounts => { + if (accounts) { + setAccountsToState(accounts, setAccounts) + setCurrentStep(StepsEnum.SelectAccount) + setCurrentWallet(wallet.extensionName) + } + }) - setUnsubscribe(unsub) - } + setUnsubscribe(unsub) } else { showWarnMessage( `${wallet.title} extension is not installed or refresh the browser if ${wallet.title} is already installed`, @@ -69,7 +67,7 @@ const WalletList = ({ setCurrentStep }: GetWalletPorps) => { }, [supportedWallets]) const wallets = sortedSupportedWallets.map(wallet => { - const { title, logo, installed, installUrls } = wallet + const { title, logo, installed, installUrl } = wallet const onInstallButtonClick = (e: React.MouseEvent) => { e.stopPropagation() @@ -95,7 +93,7 @@ const WalletList = ({ setCurrentStep }: GetWalletPorps) => { title={`Install ${title} or refresh the browser if ${title} is already installed`} > Date: Thu, 7 Mar 2024 12:27:52 +0700 Subject: [PATCH 2/4] Fix donate --- src/components/auth/MyAccountsContext.tsx | 13 ++++- src/components/auth/utils.tsx | 2 +- src/components/donate/DonateModal.tsx | 21 +++++--- src/components/donate/index.tsx | 48 ++++++++++++------- .../wallets/supportedWallets/index.ts | 3 +- 5 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/components/auth/MyAccountsContext.tsx b/src/components/auth/MyAccountsContext.tsx index 7de5ffca7..e41e01622 100644 --- a/src/components/auth/MyAccountsContext.tsx +++ b/src/components/auth/MyAccountsContext.tsx @@ -32,9 +32,11 @@ import { useMyAccount } from 'src/stores/my-account' import { AnyAccountId, EmailAccount } from 'src/types' import useSubsocialEffect from '../api/useSubsocialEffect' import { useAccountSelector } from '../profile-selector/AccountSelector' +import { useIsMobileWidthOrDevice } from '../responsive' import { reloadSpaceIdsFollowedByAccount } from '../spaces/helpers/reloadSpaceIdsFollowedByAccount' import { equalAddresses } from '../substrate' import { getSignerToken, isProxyAdded } from '../utils/OffchainSigner/ExternalStorage' +import { desktopWalletConnect, mobileWalletConection } from './utils' // // Types // @@ -68,6 +70,7 @@ export type MyAccountsContextProps = { setAccounts: (account: InjectedAccountWithMeta[]) => void setEmailAccounts: (emailAccounts: EmailAccount[]) => void resetEmailAccounts: () => void + connectWallet: () => void } const contextStub: MyAccountsContextProps = { @@ -83,6 +86,7 @@ const contextStub: MyAccountsContextProps = { emailAccounts: [], status: 'LOADING', }, + connectWallet: functionStub, } type UnsubscribeFn = { @@ -99,8 +103,9 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { const address = useMyAddress() const { getAllEmailAccounts } = useEmailAccount() const [, recheck] = useReducer(x => (x + 1) % 16384, 0) + const isMobile = useIsMobileWidthOrDevice() - const [status] = useState('LOADING') + const [status, setStatus] = useState('LOADING') const [accounts, setAccounts] = useState([]) const [emailAccounts, setEmailAccounts] = useState([]) @@ -114,6 +119,11 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { resetEmailAccounts() }, []) + const params = { setAccounts, setStatus } + const connectWallet = useCallback(() => { + isMobile ? mobileWalletConection(params) : desktopWalletConnect(params) + }, []) + useEffect(() => { if (!recheckStatuses.includes(status)) return @@ -172,6 +182,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { setEmailAccounts, resetEmailAccounts, state, + connectWallet, } }, [state]) diff --git a/src/components/auth/utils.tsx b/src/components/auth/utils.tsx index 20dede8b9..3ccee0949 100644 --- a/src/components/auth/utils.tsx +++ b/src/components/auth/utils.tsx @@ -72,7 +72,7 @@ export const desktopWalletConnect = ({ setAccounts, setStatus }: ConnectWalletPr let cancelled = false ;(async () => { - const currentWallet = getCurrentWallet() || 'polkadot-js' + const currentWallet = getCurrentWallet() || 'Polkadot.js' const wallet = getWalletBySource(currentWallet as string) if ((window as Window & InjectedWindow)?.injectedWeb3) { diff --git a/src/components/donate/DonateModal.tsx b/src/components/donate/DonateModal.tsx index b4f435d3e..ae983d35a 100644 --- a/src/components/donate/DonateModal.tsx +++ b/src/components/donate/DonateModal.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { capitalize } from 'lodash' import { useRouter } from 'next/router' import { useEffect } from 'react' -import { useMyAccountsContext } from 'src/components/auth/MyAccountsContext' +import { useMyAccountsContext, useMyAddress } from 'src/components/auth/MyAccountsContext' import Name from 'src/components/profiles/address-views/Name' import { useResponsiveSize } from 'src/components/responsive' import { toShortAddress } from 'src/components/utils' @@ -71,10 +71,15 @@ const TransferButton = ({ form, recipient }: TransferButtonProps) => { return [recipient, balanceWithDecimal(amount.toString(), decimals).toString()] } + let extrinsic = 'balances.transfer' + if (network === 'kusama' || network === 'polkadot') { + extrinsic = 'balances.transferAllowDeath' + } + return ( { const { isMobile } = useResponsiveSize() const chainInfo = useChainInfo() + const myAddress = useMyAddress() const { setCurrency, setSender, currency, infoByNetwork } = useTipContext() @@ -109,17 +115,19 @@ export const DonateCard = ({ recipientAddress }: DonateProps) => { const mySubsocialAddress = convertToSubsocialAddress(addressFromUrl) - const accountsForChoosing = accounts + const ss58Format = infoByNetwork?.ss58Format + + const accountsForChoosing = Array.from( + new Set([{ address: convertAddressToChainFormat(myAddress, ss58Format)! }, ...accounts]), + ) .filter(x => convertToSubsocialAddress(x.address) !== mySubsocialAddress) .map(x => x.address) - - const ss58Format = infoByNetwork?.ss58Format + .filter(Boolean) const defaultSender = accountsForChoosing[0] useEffect(() => { if (!defaultSender) return - setSender(defaultSender) }, [defaultSender]) @@ -144,6 +152,7 @@ export const DonateCard = ({ recipientAddress }: DonateProps) => {