Skip to content

Commit

Permalink
feat: add CTRL wallet support (#84)
Browse files Browse the repository at this point in the history
  • Loading branch information
maxlm-devico authored Oct 8, 2024
1 parent aeb1d1a commit edb684a
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 10 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@xdefi/wallets-connector",
"version": "2.2.1",
"version": "2.3.1",
"description": "Cross chain wallets connector with react hooks",
"author": "garageinc",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function WalletProvider({
needInstall
])

const isRecommended = id === 'xdefi'
const isRecommended = id === 'ctrl'

const handleClickProvider = () => {
if (isConnected || needInstall) return
Expand Down
24 changes: 18 additions & 6 deletions src/components/WalletsModal/WalletsModal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useMemo, useState } from 'react'
import React, { useCallback, useContext, useMemo, useState } from 'react'
import styled, { DefaultTheme } from 'styled-components'

import { useWalletsOptions } from '../../hooks'
Expand All @@ -8,6 +8,7 @@ import { WalletProvider } from '../Provider'
import ThemeProvider from '../theme'
import { ReactComponent as BackArrowSvg } from '../icons/backArrow.svg'
import { SelectChainSection } from './SelectChainSection'
import { WalletsContext } from '../../manager'

interface IProps {
trigger: any
Expand All @@ -26,6 +27,7 @@ export const WalletsModal = ({
useState<boolean>(false)
const { providers: userOptions } = useWalletsOptions()
const { isOpen, onClose, onOpen } = useWalletsModal()
const context = useContext(WalletsContext)

const handleShowChainSelector = useCallback(() => {
setIsChainSelectorVisible(true)
Expand All @@ -40,10 +42,20 @@ export const WalletsModal = ({
onClose()
}, [onClose, handleHideChainSelector])

const xdefiProvider = useMemo(() => {
const shouldShowXdefi = context?.isAvailableProvider('xdefi')

const xdefiLikeProvider = useMemo(() => {
if (!userOptions || userOptions.length === 0) return null
return userOptions.find((item) => item.id === 'xdefi')
}, [userOptions])
return userOptions.find((item) =>
shouldShowXdefi ? item.id === 'xdefi' : item.id === 'ctrl'
)
}, [userOptions, shouldShowXdefi])

const userOptionsToRender = useMemo(() => {
return shouldShowXdefi
? userOptions
: userOptions.filter((opt) => opt.id !== 'xdefi')
}, [userOptions, shouldShowXdefi])

return (
<ThemeProvider themeBuilder={themeBuilder} isDark={isDark}>
Expand All @@ -65,12 +77,12 @@ export const WalletsModal = ({
>
{isChainSelectorVisible ? (
<SelectChainSection
provider={xdefiProvider}
provider={xdefiLikeProvider}
onSelect={handleCloseModal}
/>
) : (
<SRow>
{userOptions.map((provider: any) =>
{userOptionsToRender.map((provider: any) =>
provider ? (
<WalletProvider
key={provider.name}
Expand Down
2 changes: 1 addition & 1 deletion src/helpers/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export interface IProviderInfo {
description?: string
id: string
type: string
check: string
check: string | ((provider: any) => boolean)
package?: IProviderPackageOptions
chains?: {
[name: string]: ISupportedChain
Expand Down
4 changes: 4 additions & 0 deletions src/helpers/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export function isCurrentProviderActive(provider: any, injected: any): boolean {
return false
}

if (typeof target.check === 'function') {
return target.check(provider)
}

return !!provider[target.check]
}

Expand Down
14 changes: 13 additions & 1 deletion src/providers/injected/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ReactComponent as PortalLogo } from '../logos/portal.svg'
import { ReactComponent as SequenceLogo } from '../logos/sequence.svg'
import { ReactComponent as BraveLogo } from '../logos/brave.svg'
import { ReactComponent as RabbyLogo } from '../logos/rabby.svg'
import { ReactComponent as CtrlLogo } from '../logos/ctrl.svg'

export const INJECTED: IProviderInfo = {
id: 'injected',
Expand Down Expand Up @@ -197,7 +198,9 @@ export const XDEFI: IProviderInfo = {
name: 'XDEFI',
logo: XDEFILogo,
type: 'injected',
check: '__XDEFI',
check: (provider) => {
return !!provider.__XDEFI && !provider.__CTRL
},
installationLink: 'https://xdefi.io',
getEthereumProvider: () => {
return window.xfi ? window.xfi.ethereum : undefined
Expand Down Expand Up @@ -446,6 +449,15 @@ export const XDEFI: IProviderInfo = {
}
}

export const CTRL: IProviderInfo = {
...XDEFI,
name: 'CTRL',
logo: CtrlLogo,
type: 'injected',
check: '__CTRL',
installationLink: 'https://ctrl.xyz'
}

export const BITPIE: IProviderInfo = {
id: 'injected',
name: 'Bitpie',
Expand Down
9 changes: 9 additions & 0 deletions src/providers/logos/ctrl.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit edb684a

Please sign in to comment.