Skip to content

Commit

Permalink
Update Cosmos Kit wallets and add experimental Browser tab (#1391)
Browse files Browse the repository at this point in the history
  • Loading branch information
NoahSaso authored Sep 29, 2023
1 parent 7d7c4be commit d34ba43
Show file tree
Hide file tree
Showing 11 changed files with 550 additions and 208 deletions.
3 changes: 3 additions & 0 deletions packages/i18n/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
"fund": "Fund",
"fundAndExecute": "Fund and execute",
"fundAndRelay": "Fund and relay",
"go": "Go",
"goBack": "Go back",
"goToDaoPage": "Go to DAO page",
"goToProposal": "Go to proposal",
Expand Down Expand Up @@ -595,6 +596,7 @@
"updateVotingConfigTitle": "Update Voting Config",
"updateVotingConfigTitle_multipleChoice": "Update Multiple Choice Voting Config",
"updateVotingConfigTitle_singleChoice": "Update Single Choice Voting Config",
"url": "URL",
"useCw20": "Use CW20",
"useCw20ExecuteTooltip": "Fund the smart contract execution with a CW20 token instead of a native token.",
"useExistingCollection": "Use existing collection",
Expand Down Expand Up @@ -1119,6 +1121,7 @@
"balances": "Balances",
"beforeYouEnter": "Before you enter",
"beginVesting": "Begin vesting",
"browser": "Browser",
"bulkImportActions": "Bulk Import Actions",
"burnNft": "Burn NFT",
"cancelVesting": "Cancel vesting",
Expand Down
65 changes: 39 additions & 26 deletions packages/stateful/components/WalletProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { wallets as coin98Wallets } from '@cosmos-kit/coin98'
import { wallets as compassWallets } from '@cosmos-kit/compass'
import { Endpoints, SignerOptions } from '@cosmos-kit/core'
import { wallets as cosmosExtensionMetamaskWallets } from '@cosmos-kit/cosmos-extension-metamask'
import { wallets as cosmostationWallets } from '@cosmos-kit/cosmostation'
import { wallets as finWallets } from '@cosmos-kit/fin'
import { wallets as frontierWallets } from '@cosmos-kit/frontier'
import { wallets as keplrExtensionWallets } from '@cosmos-kit/keplr-extension'
import { wallets as keplrMobileWallets } from '@cosmos-kit/keplr-mobile'
import { wallets as leapWallets } from '@cosmos-kit/leap'
import { wallets as metamaskWallets } from '@cosmos-kit/leap-metamask-cosmos-snap'
import { wallets as leapMetamaskWallets } from '@cosmos-kit/leap-metamask-cosmos-snap'
import { wallets as okxWallets } from '@cosmos-kit/okxwallet'
import { wallets as omniWallets } from '@cosmos-kit/omni'
import { ChainProvider, walletContext } from '@cosmos-kit/react-lite'
Expand Down Expand Up @@ -45,8 +48,10 @@ import {
import { useSyncWalletSigner, useWallet } from '../hooks'
import { WalletUi } from './wallet'

// Set better name for MetaMask wallet.
metamaskWallets[0].walletInfo.prettyName = 'MetaMask (Leap Snap)'
// Set better name for MetaMask wallets.
leapMetamaskWallets[0].walletInfo.prettyName = 'MetaMask (Leap Snap)'
cosmosExtensionMetamaskWallets[0].walletInfo.prettyName =
'MetaMask (Cosmos Extension)'

export type WalletProviderProps = {
// This needs to be provided by the parent component and then passed to the
Expand Down Expand Up @@ -110,9 +115,9 @@ export const WalletProvider = ({

const signerOptions: SignerOptions = {
// cosmos-kit has an older version of the package. This is a workaround.
signingStargate: getSignerOptions as SignerOptions['signingStargate'],
signingStargate: getSignerOptions as any,
// cosmos-kit has an older version of the package. This is a workaround.
signingCosmwasm: getSignerOptions as SignerOptions['signingCosmwasm'],
signingCosmwasm: getSignerOptions as any,
}

// Auto-connect to Keplr mobile web if in that context.
Expand All @@ -132,6 +137,34 @@ export const WalletProvider = ({
})()
}, [mountedInBrowser, setIsKeplrMobileWeb])

const allWallets = [
...leapMetamaskWallets,
// Alphabetize.
...[
...keplrExtensionWallets,
// Only allow Keplr Mobile on mainnet since it can't use testnet.
...(MAINNET ? keplrMobileWallets : []),
...leapWallets.filter((w) => !leapMetamaskWallets.includes(w)),
...stationWallets,
...vectisWallets,
...trustWallets,
...cosmostationWallets,
...coin98Wallets,
...omniWallets,
...shellWallets,
...xdefiWallets,
...okxWallets,
...finWallets,
...compassWallets,
...frontierWallets,
...cosmosExtensionMetamaskWallets,
].sort((a, b) =>
a.walletInfo.prettyName.localeCompare(b.walletInfo.prettyName)
),
// Google, Apple, Discord, Twitter
...web3AuthWallets,
]

return (
<ChainProvider
assetLists={assets}
Expand Down Expand Up @@ -169,27 +202,7 @@ export const WalletProvider = ({
wallets={
// If Keplr Mobile in-app browser, only allow Keplr Extension. Keplr
// Mobile wallet works via WalletConnect from a desktop, but not in-app.
isKeplrMobileWeb
? keplrExtensionWallets
: [
...metamaskWallets,
...keplrExtensionWallets,
// Only allow Keplr Mobile on mainnet since it can't use testnet.
...(MAINNET ? keplrMobileWallets : []),
...leapWallets.filter((w) => !metamaskWallets.includes(w)),
...stationWallets,
...vectisWallets,
...trustWallets,
...cosmostationWallets,
...coin98Wallets,
...omniWallets,
...shellWallets,
...xdefiWallets,
...okxWallets,
...finWallets,
// Google, Apple, Discord, Twitter
...web3AuthWallets,
]
isKeplrMobileWeb ? keplrExtensionWallets : allWallets
}
>
<InnerWalletProvider>{children}</InnerWalletProvider>
Expand Down
164 changes: 164 additions & 0 deletions packages/stateful/components/dao/tabs/BrowserTab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import { StdSignDoc } from '@cosmjs/amino'
import { DirectSignDoc } from '@cosmos-kit/core'
import { useIframe } from '@cosmos-kit/react-lite'
import { useEffect, useRef } from 'react'

import { TxBody } from '@dao-dao/protobuf/codegen/cosmos/tx/v1beta1/tx'
import {
BrowserTab as StatelessBrowserTab,
useDaoInfoContext,
useDaoNavHelpers,
} from '@dao-dao/stateless'
import { ActionKey, CosmosMsgFor_Empty } from '@dao-dao/types'
import {
SITE_URL,
aminoTypes,
decodedStargateMsgToCw,
getDaoProposalSinglePrefill,
getFallbackImage,
protobufToCwMsg,
} from '@dao-dao/utils'
export const BrowserTab = () => {
const {
name,
imageUrl,
chainId: currentChainId,
coreAddress,
polytoneProxies,
} = useDaoInfoContext()
const { getDaoProposalPath } = useDaoNavHelpers()

const propose = (msgs: CosmosMsgFor_Empty[]) =>
window.open(
getDaoProposalPath(coreAddress, 'create', {
prefill: getDaoProposalSinglePrefill({
title: '',
description: '',
actions: [
{
actionKey: ActionKey.Custom,
data: {
message: JSON.stringify(msgs, undefined, 2),
},
},
],
}),
}),
'_blank'
)

const decodeDirect = (signDocBodyBytes: Uint8Array) => {
const encodedMessages = TxBody.decode(signDocBodyBytes).messages
const messages = encodedMessages.map((msg) => protobufToCwMsg(msg).msg)
propose(messages)
}
const decodeAmino = (signDoc: StdSignDoc) => {
const messages = signDoc.msgs.map(
(msg) => decodedStargateMsgToCw(aminoTypes.fromAmino(msg)).msg
)
propose(messages)
}

const addressForChainId = (chainId: string) =>
(chainId === currentChainId ? coreAddress : polytoneProxies[chainId]) || ''

const { wallet, iframeRef } = useIframe({
walletInfo: {
prettyName: name,
logo: imageUrl || SITE_URL + getFallbackImage(coreAddress),
},
accountReplacement: (chainId) => ({
username: name,
address: addressForChainId(chainId),
}),
walletClientOverrides: {
// TODO(iframe): remove
// @ts-ignore
signAmino: (_chainId: string, _signer: string, signDoc: StdSignDoc) => {
decodeAmino(signDoc)
},
// TODO(iframe): remove
// @ts-ignore
signDirect: (
_chainId: string,
_signer: string,
signDoc: DirectSignDoc
) => {
if (!signDoc?.bodyBytes) {
return {
type: 'execute',
}
}

decodeDirect(signDoc.bodyBytes)
},
enable: (chainIds: string | string[]) =>
[chainIds].flat().every((chainId) => addressForChainId(chainId))
? {
type: 'success',
}
: {
type: 'error',
error: 'Unsupported chain.',
},
connect: (chainIds: string | string[]) =>
[chainIds].flat().every((chainId) => addressForChainId(chainId))
? {
type: 'success',
}
: {
type: 'error',
error: 'Unsupported chain.',
},
sign: () => ({
type: 'error',
value: 'Unsupported.',
}),
signArbitrary: () => ({
type: 'error',
value: 'Unsupported.',
}),
suggestToken: () => ({
type: 'success',
}),
addChain: () => ({
type: 'success',
}),
},
aminoSignerOverrides: {
signAmino: (_signerAddress, signDoc) => {
decodeAmino(signDoc)

return {
type: 'error',
error: 'Handled by DAO browser.',
}
},
},
directSignerOverrides: {
signDirect: (_signerAddress, signDoc) => {
decodeDirect(signDoc.bodyBytes)

return {
type: 'error',
error: 'Handled by DAO browser.',
}
},
},
})

// Connect to iframe wallet on load if disconnected.
const connectingRef = useRef(false)
useEffect(() => {
if (wallet && !wallet.isWalletConnected && !connectingRef.current) {
connectingRef.current = true
try {
wallet.connect()
} finally {
connectingRef.current = false
}
}
}, [wallet])

return <StatelessBrowserTab iframeRef={iframeRef} />
}
1 change: 1 addition & 0 deletions packages/stateful/components/dao/tabs/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './BrowserTab'
export * from './ProposalsTab'
export * from './SubDaosTab'
export * from './TreasuryAndNftsTab'
21 changes: 20 additions & 1 deletion packages/stateful/hooks/useDaoTabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@ import {
FiberSmartRecordOutlined,
HomeOutlined,
HowToVoteOutlined,
WebOutlined,
} from '@mui/icons-material'
import { ComponentType } from 'react'
import { useTranslation } from 'react-i18next'

import { useDaoInfoContext } from '@dao-dao/stateless'
import { DaoTabId, DaoTabWithComponent, WidgetLocation } from '@dao-dao/types'

import { ProposalsTab, SubDaosTab, TreasuryAndNftsTab } from '../components'
import {
BrowserTab,
ProposalsTab,
SubDaosTab,
TreasuryAndNftsTab,
} from '../components'
import { useVotingModuleAdapter } from '../voting-module-adapter'
import { useWidgets } from '../widgets'

Expand All @@ -25,6 +32,7 @@ export const useDaoTabs = ({
const {
components: { extraTabs },
} = useVotingModuleAdapter()
const { items } = useDaoInfoContext()

// Get widget tab components, if exist.
const loadingWidgets = useWidgets({
Expand Down Expand Up @@ -75,6 +83,17 @@ export const useDaoTabs = ({
Component: SubDaosTab,
Icon: FiberSmartRecordOutlined,
},
// Experimental Browser tab must be enabled through the DAO.
...('browserEnabled' in items && items.browserEnabled === 'true'
? [
{
id: DaoTabId.Browser,
label: t('title.browser'),
Component: BrowserTab,
Icon: WebOutlined,
},
]
: []),
...(extraTabs?.map(({ labelI18nKey, ...tab }) => ({
label: t(labelI18nKey),
...tab,
Expand Down
39 changes: 21 additions & 18 deletions packages/stateful/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,27 @@
"@cosmjs/encoding": "^0.31.0",
"@cosmjs/proto-signing": "^0.31.0",
"@cosmjs/stargate": "^0.31.0",
"@cosmos-kit/coin98": "^2.3.8",
"@cosmos-kit/core": "^2.6.4",
"@cosmos-kit/cosmostation": "^2.3.9",
"@cosmos-kit/fin": "^2.3.10",
"@cosmos-kit/keplr-extension": "^2.4.7",
"@cosmos-kit/keplr-mobile": "^2.3.8",
"@cosmos-kit/leap": "^2.3.8",
"@cosmos-kit/leap-metamask-cosmos-snap": "^0.2.2",
"@cosmos-kit/ledger": "^2.4.5",
"@cosmos-kit/okxwallet": "^2.2.9",
"@cosmos-kit/omni": "^2.3.8",
"@cosmos-kit/react-lite": "^2.4.10",
"@cosmos-kit/shell": "^2.3.8",
"@cosmos-kit/station": "^2.3.9",
"@cosmos-kit/trust": "^2.3.8",
"@cosmos-kit/vectis": "^2.3.8",
"@cosmos-kit/web3auth": "^2.3.8",
"@cosmos-kit/xdefi-extension": "^2.4.5",
"@cosmos-kit/coin98": "^2.3.10",
"@cosmos-kit/compass": "^2.3.10",
"@cosmos-kit/core": "^2.6.6",
"@cosmos-kit/cosmos-extension-metamask": "^0.1.6",
"@cosmos-kit/cosmostation": "^2.3.11",
"@cosmos-kit/fin": "^2.3.12",
"@cosmos-kit/frontier": "^2.3.10",
"@cosmos-kit/keplr-extension": "^2.4.9",
"@cosmos-kit/keplr-mobile": "^2.3.10",
"@cosmos-kit/leap": "^2.3.10",
"@cosmos-kit/leap-metamask-cosmos-snap": "^0.2.4",
"@cosmos-kit/ledger": "^2.4.7",
"@cosmos-kit/okxwallet": "^2.2.11",
"@cosmos-kit/omni": "^2.3.10",
"@cosmos-kit/react-lite": "^2.4.12",
"@cosmos-kit/shell": "^2.3.10",
"@cosmos-kit/station": "^2.3.11",
"@cosmos-kit/trust": "^2.3.10",
"@cosmos-kit/vectis": "^2.3.10",
"@cosmos-kit/web3auth": "^2.3.10",
"@cosmos-kit/xdefi-extension": "^2.4.7",
"@dao-dao/i18n": "2.2.0",
"@dao-dao/protobuf": "2.2.0",
"@dao-dao/state": "2.2.0",
Expand Down
Loading

2 comments on commit d34ba43

@vercel
Copy link

@vercel vercel bot commented on d34ba43 Sep 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on d34ba43 Sep 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.