Add Custom Wallet Option on Labs (#2283)

Co-authored-by: tomiir <[email protected]>
Co-authored-by: enesozturk <[email protected]>

.eslintrc.json

@@ -6,8 +6,7 @@
     "eslint:all",
     "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:@typescript-eslint/strict-type-checked",
-    "prettier",
-    "plugin:prettier/recommended"
+    "prettier"
   ],
   "parserOptions": {
     "project": ["tsconfig.json"]

apps/laboratory/src/layout/CustomWallet.tsx

@@ -0,0 +1,103 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  Input,
+  Link,
+  Stack,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react'
+import { useState, type ChangeEvent } from 'react'
+import { CUSTOM_WALLET } from '../utils/ConstantsUtil'
+
+interface Props {
+  controls: ReturnType<typeof useDisclosure>
+}
+
+export function CustomWallet({ controls }: Props) {
+  const [customWallet, setCustomWallet] = useState({
+    id: 'custom',
+    name: '',
+    image_url: '',
+    mobile_link: '',
+    desktop_link: '',
+    webapp_link: ''
+  })
+
+  function handleCustomWallet() {
+    localStorage.setItem(CUSTOM_WALLET, JSON.stringify(customWallet))
+    location.reload()
+  }
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    setCustomWallet(prev => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const { isOpen, onClose } = controls
+
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>Add a Custom Wallet</DrawerHeader>
+        <Text pt="2" fontSize="sm" padding={6}>
+          Add a custom wallet to the modal. This feature is for wallets that are under the Explorer
+          submission process.{' '}
+          <Link
+            isExternal
+            color="blue.500"
+            href="https://docs.walletconnect.com/cloud/explorer-submission#how-do-we-test-wallets"
+          >
+            Learn more.
+          </Link>
+        </Text>
+        <DrawerBody>
+          <Stack spacing={4}>
+            <Input
+              name="name"
+              value={customWallet.name}
+              onChange={handleChange}
+              variant="outline"
+              placeholder="Name"
+            />
+            <Input
+              name="image_url"
+              value={customWallet.image_url}
+              onChange={handleChange}
+              variant="outline"
+              placeholder="Image URL"
+            />
+            <Input
+              name="mobile_link"
+              value={customWallet.mobile_link}
+              onChange={handleChange}
+              variant="outline"
+              placeholder="Mobile Linking (Optional)"
+            />
+            <Input
+              name="desktop_link"
+              value={customWallet.desktop_link}
+              onChange={handleChange}
+              variant="outline"
+              placeholder="Desktop Linking (Optional)"
+            />
+            <Input
+              name="webapp_link"
+              value={customWallet.webapp_link}
+              onChange={handleChange}
+              variant="outline"
+              placeholder="Webapp Linking (Optional)"
+            />
+            <Button onClick={handleCustomWallet}>Add Wallet</Button>
+          </Stack>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}

apps/laboratory/src/layout/LayoutHeader.tsx

@@ -10,9 +10,11 @@ import {
 import Link from 'next/link'
 import { IoSettingsOutline } from 'react-icons/io5'
 import { OptionsDrawer } from './OptionsDrawer'
+import { CustomWallet } from './CustomWallet'
 
 export function LayoutHeader() {
   const controls = useDisclosure()
+  const controlsCW = useDisclosure({ id: 'customWallet' })
 
   return (
     <>
@@ -35,12 +37,16 @@ export function LayoutHeader() {
           </CLink>
         </HStack>
 
+        <Button rightIcon={<IoSettingsOutline />} onClick={controlsCW.onOpen}>
+          Custom Wallet
+        </Button>
         <Button rightIcon={<IoSettingsOutline />} onClick={controls.onOpen}>
           Options
         </Button>
       </Stack>
 
       <OptionsDrawer controls={controls} />
+      <CustomWallet controls={controlsCW} />
     </>
   )
 }

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -4,6 +4,16 @@ if (!projectId) {
 }
 export const WALLET_URL = process.env['WALLET_URL'] || 'https://react-wallet.walletconnect.com/'
 
+export const CUSTOM_WALLET = 'wc:custom_wallet'
+
+// eslint-disable-next-line init-declarations
+let storedCustomWallet
+if (typeof window !== 'undefined') {
+  storedCustomWallet = localStorage.getItem(CUSTOM_WALLET)
+}
+
+const customWallet = storedCustomWallet ? [JSON.parse(storedCustomWallet)] : []
+
 export const ConstantsUtil = {
   SigningSucceededToastTitle: 'Signing Succeeded',
   SigningFailedToastTitle: 'Signing Failed',
@@ -16,6 +26,7 @@ export const ConstantsUtil = {
     verifyUrl: ''
   },
   CustomWallets: [
+    ...customWallet,
     {
       id: 'react-wallet-v2',
       name: 'react-wallet-v2',

packages/scaffold/src/client.ts

@@ -259,9 +259,8 @@ export class Web3ModalScaffold {
       AccountController.setPreferredAccountType(preferredAccountType)
     }
 
-  protected getWalletConnectName: (typeof EnsController)['getNamesForAddress'] = address => {
-    return EnsController.getNamesForAddress(address)
-  }
+  protected getWalletConnectName: (typeof EnsController)['getNamesForAddress'] = address =>
+    EnsController.getNamesForAddress(address)
 
   protected resolveWalletConnectName = async (name: string) => {
     const trimmedName = name.replace(ConstantsUtil.WC_NAME_SUFFIX, '')

packages/scaffold/src/partials/w3m-connect-announced-widget/index.ts

@@ -36,8 +36,8 @@ export class W3mConnectAnnouncedWidget extends LitElement {
 
     return html`
       <wui-flex flexDirection="column" gap="xs">
-        ${announcedConnectors.map(connector => {
-          return html`
+        ${announcedConnectors.map(
+          connector => html`
             <wui-list-wallet
               imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
               name=${connector.name ?? 'Unknown'}
@@ -49,7 +49,7 @@ export class W3mConnectAnnouncedWidget extends LitElement {
             >
             </wui-list-wallet>
           `
-        })}
+        )}
       </wui-flex>
     `
   }

packages/scaffold/src/partials/w3m-connect-custom-widget/index.ts

@@ -43,8 +43,8 @@ export class W3mConnectCustomWidget extends LitElement {
     const wallets = this.filterOutDuplicateWallets(customWallets)
 
     return html`<wui-flex flexDirection="column" gap="xs">
-      ${wallets.map(wallet => {
-        return html`
+      ${wallets.map(
+        wallet => html`
           <wui-list-wallet
             imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}
             name=${wallet.name ?? 'Unknown'}
@@ -53,7 +53,7 @@ export class W3mConnectCustomWidget extends LitElement {
           >
           </wui-list-wallet>
         `
-      })}
+      )}
     </wui-flex>`
   }
 

packages/scaffold/src/partials/w3m-connect-recent-widget/index.ts

@@ -18,8 +18,8 @@ export class W3mConnectRecentWidget extends LitElement {
 
     return html`
       <wui-flex flexDirection="column" gap="xs">
-        ${recent.map(wallet => {
-          return html`
+        ${recent.map(
+          wallet => html`
             <wui-list-wallet
               imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}
               name=${wallet.name ?? 'Unknown'}
@@ -29,7 +29,7 @@ export class W3mConnectRecentWidget extends LitElement {
             >
             </wui-list-wallet>
           `
-        })}
+        )}
       </wui-flex>
     `
   }