Feat/custom wallet (#485)

* add form

* style form

* button height

* types

* fix(ui-test): using old version of tests (#488)

---------

Co-authored-by: Derek <alexanderderekrein@gmail.com>

.github/workflows/pr_checks.yml

@@ -44,7 +44,7 @@ jobs:
       skip-playwright-webserver: true
       branch: V4
       command: playwright:test:wallet
-    uses: WalletConnect/web3modal/.github/workflows/ui_tests.yml@V3
+    uses: WalletConnect/web3modal/.github/workflows/ui_tests.yml@V4
     secrets:
       NEXT_PUBLIC_PROJECT_ID: ${{ secrets.UI_TEST_PROJECT_ID }}
       TESTS_NEXTAUTH_SECRET: ${{ secrets.TESTS_NEXTAUTH_SECRET }}

dapps/web3modal/svelte/src/lib/constants.ts

@@ -0,0 +1 @@
+export const CUSTOM_WALLET = 'wc:custom_wallet'

dapps/web3modal/svelte/src/lib/types.ts

@@ -1,5 +1,3 @@
-import type { InjectedConnector } from '@wagmi/core'
-
 export type Metadata = {
 	name?: string
 	description?: string
@@ -20,4 +18,4 @@ export type ExtendedProvider = {
 			}
 		}
 	}
-} & InjectedConnector
+}

dapps/web3modal/svelte/src/lib/web3modal.ts

@@ -26,10 +26,17 @@ import {
 	ronin,
 	saigon,
 } from 'viem/chains'
-import type { ExtendedProvider } from './types'
+import { CUSTOM_WALLET } from './constants'
 
 export const projectId = import.meta.env.VITE_PROJECT_ID
 
+let storedCustomWallet;
+if(typeof window !== 'undefined'){
+	storedCustomWallet = localStorage.getItem(CUSTOM_WALLET)
+}
+
+const customWallets = storedCustomWallet ? [JSON.parse(storedCustomWallet)] : undefined
+
 const metadata = {
 	name: 'Web3Modal',
 	description: 'Web3Modal Example',
@@ -71,6 +78,7 @@ createWeb3Modal({
 	themeMode: 'dark',
 	featuredWalletIds: [],
 	enableAnalytics: true,
+	customWallets
 })
 
 export const chainId = readable(getChainId(wagmiConfig), (set) =>
@@ -79,7 +87,7 @@ export const chainId = readable(getChainId(wagmiConfig), (set) =>
 export const account = readable(getAccount(wagmiConfig), (set) =>
 	watchAccount(wagmiConfig, { onChange: set }),
 )
-export const provider = readable<ExtendedProvider | undefined>(
+export const provider = readable<unknown | undefined>(
 	undefined,
 	(set) =>
 		watchAccount(wagmiConfig, {
@@ -90,4 +98,16 @@ export const provider = readable<ExtendedProvider | undefined>(
 		}),
 )
 
+export const customWallet = writable({
+	id: undefined,
+	name: undefined,
+	homepage: undefined,
+	image_url: undefined,
+	mobile_link: undefined,
+	desktop_link: undefined,
+	webapp_link: undefined,
+	app_store: undefined,
+	play_store: undefined
+})
+
 export const supported_chains = writable<string[]>([])

dapps/web3modal/svelte/src/partials/CustomForm.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { CUSTOM_WALLET } from "$lib/constants"
+	import { customWallet } from "$lib/web3modal"
+
+	function handleSubmit(){
+		localStorage.setItem(CUSTOM_WALLET, JSON.stringify($customWallet))
+		location.reload()
+	}
+</script>
+
+<div id="title">Add a Custom Wallet to Web3Modal</div>
+<form on:submit|preventDefault={handleSubmit} >
+  <label>
+		Id
+		<input name="id" type="text" bind:value={$customWallet.id}>
+	</label>
+  <label>
+		Name
+		<input name="name" type="text" bind:value={$customWallet.name}>
+	</label>
+  <label>
+		Homepage (Optional)
+		<input name="homepage" type="url" bind:value={$customWallet.homepage}>
+	</label>
+  <label>
+		Image URL (Optional)
+		<input name="image_url" type="url" bind:value={$customWallet.image_url}>
+	</label>
+  <label>
+		Mobile Link (Optional - Deeplink)
+		<input name="mobile_link" type="text" bind:value={$customWallet.mobile_link}>
+	</label>
+  <label>
+		Desktop Link (Optional - Deeplink)
+		<input name="desktop_link" type="text" bind:value={$customWallet.desktop_link}>
+	</label>
+  <label>
+		Webapp Link (Optional)
+		<input name="webapp_link" type="text" bind:value={$customWallet.webapp_link}>
+	</label>
+  <label>
+		App Store (Optional)
+		<input name="app_store" type="url" bind:value={$customWallet.app_store}>
+	</label>
+  <label>
+		Play Store (Optional)
+		<input name="play_store" type="url" bind:value={$customWallet.play_store}>
+	</label>
+	<button type="submit" >Apply</button>
+</form>
+
+
+<style>
+	#title{
+		text-align: center;
+		font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+			Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
+		font-weight: 600;
+		font-size: 24px;	
+	}
+
+	form{
+		position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+
+		width: 100%;
+		gap: 40px;
+		padding-bottom: 100px;
+	}
+
+	label{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 10px;
+		width: 300px;
+
+		font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+			Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
+		font-weight: 400;
+		font-size: 14px;
+	}
+
+	input {
+		border-radius: 10px;
+		outline: 2px solid rgba(40, 144, 255, 0.8);
+		border: 0;
+		background-color: #e2e2e2;
+		outline-offset: 3px;
+		padding: 10px 1rem;
+		transition: 0.25s;
+		font-size: 15px;
+	}
+
+	input:focus {
+		outline-offset: 5px;
+		outline: 2px solid #2890ff;
+		background-color: #fff
+	}
+
+	button {
+		position: absolute;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		background: #FFFFFF;
+		border: 0 solid #E2E8F0;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-sizing: border-box;
+		color: #1A202C;
+		font-size: 1rem;
+		font-weight: 700;
+		height: 45px;
+		text-decoration: none;
+		border-radius: 8px;
+		cursor: pointer;
+		width: 90px;
+		user-select: none;
+		-webkit-user-select: none;
+		touch-action: manipulation;
+	}
+</style>

dapps/web3modal/svelte/src/partials/SignMessage.svelte

@@ -21,7 +21,6 @@
 			if (_signature !== 'null') {
 				signature = _signature
 				toast.success('Message signed successfully')
-				signature = '_ personal_sign'
 			} else {
 				toast.error('The signature was rejected')
 				signature = '_ personal_sign'

dapps/web3modal/svelte/src/routes/+page.svelte

@@ -6,6 +6,7 @@
 	import SignTypeData from '../partials/SignTypeData.svelte'
 	import Transaction from '../partials/Transaction.svelte'
 	import Wallet from '../partials/Wallet.svelte'
+	import CustomForm from '../partials/CustomForm.svelte'
 </script>
 
 <div class="main">
@@ -15,6 +16,8 @@
 		<SignMessage />
 		<SignTypeData />
 		<Transaction />
+	{:else}
+		<CustomForm/>
 	{/if}
 </div>