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>
This commit is contained in:
Glitch
GitHub
parent
218235865f
commit
8a974713dd
2
.github/workflows/pr_checks.yml
vendored
2
.github/workflows/pr_checks.yml
vendored
@ -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 }}
|
||||
|
||||
1
dapps/web3modal/svelte/src/lib/constants.ts
Normal file
1
dapps/web3modal/svelte/src/lib/constants.ts
Normal file
@ -0,0 +1 @@
|
||||
export const CUSTOM_WALLET = 'wc:custom_wallet'
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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[]>([])
|
||||
|
||||
126
dapps/web3modal/svelte/src/partials/CustomForm.svelte
Normal file
126
dapps/web3modal/svelte/src/partials/CustomForm.svelte
Normal file
@ -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>
|
||||
@ -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'
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user