Fix donate

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<Status>('LOADING')
+  const [status, setStatus] = useState<Status>('LOADING')
   const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([])
 
   const [emailAccounts, setEmailAccounts] = useState<EmailAccount[]>([])
@@ -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])
 

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) {

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 (
     <LazyTxButton
       accountId={sender}
-      tx='balances.transfer'
+      tx={extrinsic}
       network={network!}
       disabled={!network || !sender || !amount}
       params={buildTxParams}
@@ -100,6 +105,7 @@ export const DonateCard = ({ recipientAddress }: DonateProps) => {
 
   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) => {
 
       <Form.Item name={fieldName('sender')} label={'Sender'} required>
         <Select
+          key={defaultSender}
           size='large'
           defaultValue={defaultSender}
           style={{ width: '100%' }}

src/components/donate/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, Row } from 'antd'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useIsMobileWidthOrDevice } from 'src/components/responsive'
 import { twitterShareUrl } from 'src/components/urls'
 import { ShareLink } from 'src/components/urls/helpers'
@@ -11,7 +11,7 @@ import { MutedSpan } from 'src/components/utils/MutedText'
 import Segment from 'src/components/utils/Segment'
 import { TextWithEmoji } from 'src/components/utils/TextWithEmoji'
 import { useSelectProfile } from '../../rtk/features/profiles/profilesHooks'
-import { useIsUsingEmail } from '../auth/MyAccountsContext'
+import { useIsUsingEmail, useMyAccountsContext } from '../auth/MyAccountsContext'
 import CustomLink from '../referral/CustomLink'
 import { DonateCard } from './DonateModal'
 import { TipContextWrapper, useTipContext } from './DonateModalContext'
@@ -62,6 +62,10 @@ export const Donate = ({ recipientAddress, renderButtonElement }: DonateProps) =
   const [showModal, setShowModal] = useState(false)
 
   const isUsingEmail = useIsUsingEmail()
+  const { connectWallet } = useMyAccountsContext()
+  useEffect(() => {
+    if (opened) connectWallet()
+  }, [opened])
 
   const open = () => {
     setOpened(true)
@@ -72,26 +76,11 @@ export const Donate = ({ recipientAddress, renderButtonElement }: DonateProps) =
     setShowModal(false)
   }
 
-  const InnerModal = () => {
-    const { setSuccess } = useTipContext()
-
-    const hideAndReset = () => {
-      hide()
-      setSuccess(false)
-    }
-
-    return (
-      <Modal visible={showModal} footer={null} width={600} onCancel={hideAndReset}>
-        <DonationModalBody recipientAddress={recipientAddress} />
-      </Modal>
-    )
-  }
-
   return (
     <>
       {opened && (
         <TipContextWrapper>
-          <InnerModal />
+          <InnerModal hide={hide} recipientAddress={recipientAddress} showModal={showModal} />
         </TipContextWrapper>
       )}
       {renderButtonElement ? (
@@ -105,6 +94,29 @@ export const Donate = ({ recipientAddress, renderButtonElement }: DonateProps) =
   )
 }
 
+const InnerModal = ({
+  hide,
+  recipientAddress,
+  showModal,
+}: {
+  hide: () => void
+  showModal: boolean
+  recipientAddress: string
+}) => {
+  const { setSuccess } = useTipContext()
+
+  const hideAndReset = () => {
+    hide()
+    setSuccess(false)
+  }
+
+  return (
+    <Modal visible={showModal} footer={null} width={600} onCancel={hideAndReset}>
+      <DonationModalBody recipientAddress={recipientAddress} />
+    </Modal>
+  )
+}
+
 export const DonationSection = ({ recipientAddress }: DonateProps) => {
   const isMobile = useIsMobileWidthOrDevice()
   const profileData = useSelectProfile(recipientAddress)

src/components/wallets/supportedWallets/index.ts

@@ -3,8 +3,9 @@ import { getWallets, Wallet } from '@talismn/connect-wallets'
 export const supportedWallets = getWallets()
 
 export const getWalletBySource = (source: string | unknown): Wallet | undefined => {
+  if (typeof source !== 'string') return undefined
   return getWallets().find(wallet => {
-    return wallet.title === source
+    return wallet.title.toLowerCase() === source.toLowerCase()
   })
 }