Merge pull request #323 from dappforce/deploy/onboarding

Fix Donation and Domain

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",

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

@@ -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)
 
@@ -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/onboarding/RecommendedSpacesOnboarding.tsx

@@ -4,6 +4,7 @@ import { useMyAddress } from 'src/components/auth/MyAccountsContext'
 import config from 'src/config'
 import { useBooleanExternalStorage } from 'src/hooks/useExternalStorage'
 import { useMyAccount } from 'src/stores/my-account'
+import { useIsMobileWidthOrDevice } from '../responsive'
 import SpacesSuggestedForOnBoarding from '../spaces/SpacesSuggestedForOnBoarding'
 import { useSubsocialApi } from '../substrate'
 import CustomModal from '../utils/CustomModal'
@@ -17,6 +18,7 @@ const shuffledRecommendedSpaceIds = recommendedSpaceIds.sort(() => Math.random()
 
 export default function RecommendedSpacesOnboarding() {
   const myAddress = useMyAddress()
+  const isMobile = useIsMobileWidthOrDevice()
   const isInitializedProxy = useMyAccount(state => state.isInitializedProxy)
   const { data: isFinishedOnBoarding, setData: setIsFinishedOnBoarding } =
     useBooleanExternalStorage(ON_BOARDING_MODAL_KEY, {
@@ -58,7 +60,7 @@ export default function RecommendedSpacesOnboarding() {
       <div
         className='d-flex flex-column scrollbar pr-2'
         style={{
-          height: '480px',
+          maxHeight: isMobile ? '435px' : '480px',
           overflow: 'auto',
         }}
       >
@@ -84,18 +86,20 @@ export default function RecommendedSpacesOnboarding() {
           maxItems={12}
         />
       </div>
-      <ResolvedTxButton
-        tx='utility.batch'
-        className='mt-4'
-        block
-        size='large'
-        type='primary'
-        params={() => [selectedSpaces.map(id => api.tx.spaceFollows.followSpace(id))]}
-        disabled={selectedSpaces.length === 0}
-        onSend={() => closeModal()}
-      >
-        Finish
-      </ResolvedTxButton>
+      <div style={{ marginTop: 'auto' }}>
+        <ResolvedTxButton
+          tx='utility.batch'
+          className='mt-4'
+          block
+          size='large'
+          type='primary'
+          params={() => [selectedSpaces.map(id => api.tx.spaceFollows.followSpace(id))]}
+          disabled={selectedSpaces.length === 0}
+          onSend={() => closeModal()}
+        >
+          Finish
+        </ResolvedTxButton>
+      </div>
     </CustomModal>
   )
 }

src/components/spaces/LineSpacePreview.tsx

@@ -69,16 +69,16 @@ export const SpacePreview = ({
 
   return (
     <div className='d-flex align-items-center justify-content-between'>
-      <div className='d-flex align-items-center'>
+      <div className='d-flex align-items-center' style={{ minWidth: 0 }}>
         <div>
           <Avatar />
         </div>
-        <div className='text-left'>
-          <div className='font-weight-bold'>
+        <div className='text-left d-flex flex-column' style={{ minWidth: 0 }}>
+          <div className='font-weight-bold' style={{ minWidth: 0 }}>
             {' '}
             {noLink ? spaceName : <ViewSpaceLink space={space} title={spaceName} />}
           </div>
-          <MutedDiv>
+          <MutedDiv style={{ minWidth: 0 }} className='d-flex'>
             <SummarizeMd
               className={clsx(styles.About, { [styles.WithoutButton]: !withFollowButton })}
               content={content}

src/components/utils/OffchainSigner/SignerKeyringManager.ts

@@ -73,7 +73,7 @@ class SignerKeyringManager {
     return u8aToString(decrypted)
   }
 
-  public generateKeypairBySecret(secret: string) {
+  public generateKeypairBySecret(secret: string): ReturnType<Keyring['addFromUri']> {
     const keypair = this.keyring.addFromUri(secret, {}, 'sr25519')
     return keypair
   }

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
 }

src/components/wallets/supportedWallets/index.ts

@@ -1,13 +1,11 @@
-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
+  if (typeof source !== 'string') return undefined
+  return getWallets().find(wallet => {
+    return wallet.title.toLowerCase() === source.toLowerCase()
   })
 }