Skip to content

Commit

Permalink
web-wallet: support EVM-compatible wallets
Browse files Browse the repository at this point in the history
  • Loading branch information
@deuch13
deuch13 committed Aug 23, 2024
1 parent 17dba3a commit 85e26cb
Show file tree
Hide file tree
Showing 8 changed files with 12,237 additions and 1,816 deletions.
13,628 changes: 11,861 additions & 1,767 deletions web-wallet/package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion web-wallet/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,16 @@
"@dusk-network/dusk-wallet-js": "0.4.2",
"@floating-ui/dom": "1.6.5",
"@mdi/js": "7.4.47",
"@wagmi/connectors": "5.1.6",
"@wagmi/core": "2.13.4",
"@web3modal/wagmi": "5.1.0",
"bip39": "3.1.0",
"css-doodle": "0.39.2",
"lamb": "0.61.1",
"qr-scanner": "1.4.2",
"qrcode": "1.5.3",
"svelte-persisted-store": "0.11.0"
"svelte-persisted-store": "0.11.0",
"viem": "2.19.8"
},
"devDependencies": {
"@dusk-network/eslint-config": "3.1.0",
Expand Down
133 changes: 85 additions & 48 deletions web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,42 @@
import { createCurrencyFormatter } from "$lib/dusk/currency";
import { logo } from "$lib/dusk/icons";
import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
import { onMount } from "svelte";
import { onDestroy, onMount } from "svelte";
import { settingsStore } from "$lib/stores";
const ERC_TOKEN = "ERC-20";
const BEP_TOKEN = "BEP-20";
import {
account,
accountBalance,
modal,
wagmiConfig,
walletDisconnect,
} from "$lib/migration/walletConnection";
import { switchChain } from "@wagmi/core";
import { bsc, mainnet } from "viem/chains";
const tokens = {
bnb: {
chainId: bsc.id,
name: "BEP-20",
},
eth: {
chainId: mainnet.id,
name: "ERC-20",
},
};
const options = [
{ disabled: false, label: ERC_TOKEN, value: ERC_TOKEN },
{ disabled: false, label: BEP_TOKEN, value: BEP_TOKEN },
{ disabled: false, label: tokens.eth.name, value: tokens.eth.name },
{ disabled: false, label: tokens.bnb.name, value: tokens.bnb.name },
];
/** @type {String} */
let selected = ERC_TOKEN;
let selected = tokens.eth.name;
/** @type {Boolean} */
const migrationInProgress = false;
/** @type {Boolean} */
let isWalletConnected = false;
/** @type {String} */
let connectedWalletAddress =
"6rmam3FisEHih84oJMEsmi2GGVetDPmcjw7H4heeVbm79DwZUPvPJTBeFriLx85Cy2Q2cGisz32BeSYX99kNXjD";
/** @type {Number} */
let connectedWalletBalance = 10;
let connectedWalletBalance = 1;
/** @type {Number | undefined} */
let amount;
Expand All @@ -69,8 +79,9 @@
let screenWidth = window.innerWidth;
const { darkMode } = $settingsStore;
const minAmount = 1e-18;
const minAmount = 0.000000001;
$: ({ address, chainId, isConnected } = $account);
$: maxSpendable = connectedWalletBalance - gasFee;
$: isAmountValid =
Expand All @@ -79,11 +90,47 @@
: false;
$: ({ language } = $settingsStore);
$: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
$: if (selected) {
resetMigrationIfConnected();
/** @param {Number} id */
async function handleSwitchChain(id) {
try {
await switchChain(wagmiConfig, { chainId: id });
} catch (e) {
selected =
chainId === tokens.eth.chainId ? tokens.eth.name : tokens.bnb.name;
}
}
// @ts-ignore
function onNetworkChange(e) {
if (isConnected) {
if (e?.target?.value === tokens.bnb.name) {
handleSwitchChain(bsc.id);
} else {
handleSwitchChain(mainnet.id);
}
}
}
function switchNetwork() {
const currentChainId =
selected === tokens.eth.name ? tokens.eth.chainId : tokens.bnb.chainId;
if (chainId !== currentChainId) {
handleSwitchChain(currentChainId);
}
}
onMount(() => {
modal.subscribeEvents((e) => {
if (e.data.event === "CONNECT_SUCCESS") {
switchNetwork();
accountBalance(address).then((balance) => {
connectedWalletBalance = Number(balance.value);
});
}
});
amountInput = document.querySelector(".migrate__input-field");
const resizeObserver = new ResizeObserver((entries) => {
Expand All @@ -97,23 +144,11 @@
return () => resizeObserver.disconnect();
});
/**
* @param {Number} ms
*/
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
function resetMigrationIfConnected() {
if (isWalletConnected) {
isWalletConnected = false;
connectedWalletAddress = "";
connectedWalletBalance = 10;
amount = undefined;
isMigrationInitialized = false;
isMigrationBeingApproved = false;
onDestroy(async () => {
if (isConnected) {
await walletDisconnect();
}
}
});
</script>
<article class="migrate">
Expand Down Expand Up @@ -151,14 +186,17 @@
<div class="migrate__token">
<p class="migrate__token-header">From:</p>
<ExclusiveChoice {options} bind:value={selected} />
{#if isWalletConnected}
<ExclusiveChoice
{options}
bind:value={selected}
on:change={onNetworkChange}
/>
{#if isConnected}
<p class="migrate__token-header">Connected Wallet:</p>
<p class="migrate__token-address">
{middleEllipsis(
connectedWalletAddress,
calculateAdaptiveCharCount(screenWidth)
)}
{address
? middleEllipsis(address, calculateAdaptiveCharCount(screenWidth))
: ""}
</p>
<div class="migrate__token-balance">
Balance: <span
Expand All @@ -169,11 +207,11 @@
{/if}
</div>
{#if isWalletConnected}
{#if isConnected}
<div class="migrate__amount">
<div class="migrate__amount-header">
<div class="migrate__amount-token">
{#if selected === ERC_TOKEN}
{#if selected === tokens.eth.name}
<AppImage
src={darkMode ? "/eth_dusk_light.svg" : "/eth_dusk.svg"}
alt="Ethereum Dusk"
Expand Down Expand Up @@ -218,11 +256,11 @@
</div>
{/if}
{#if isWalletConnected && !isAmountValid && typeof amount === "number"}
{#if isConnected && !isAmountValid && typeof amount === "number"}
<div class="migrate__amount-notice">Not enough balance</div>
{/if}
{#if isWalletConnected && isAmountValid && isMigrationInitialized}
{#if isConnected && isAmountValid && isMigrationInitialized}
<div class="migrate__information">
<div class="migrate__information-header">
<p class="migrate__information-time">
Expand Down Expand Up @@ -256,7 +294,6 @@
nextButton={{
action: async () => {
isMigrationBeingApproved = true;
await delay(10000);
},
disabled: isMigrationBeingApproved,
icon: null,
Expand Down Expand Up @@ -324,12 +361,12 @@
</div>
{/if}
{#if !isWalletConnected}
{#if !isConnected}
<Button
icon={{ path: mdiWalletOutline }}
text={`CONNECT TO ${selected === ERC_TOKEN ? "ETHEREUM" : "BSC"}`}
text={`CONNECT TO ${selected === tokens.eth.name ? "ETHEREUM" : "BSC"}`}
on:click={() => {
isWalletConnected = true;
modal.open();
}}
/>
{:else if !isMigrationInitialized}
Expand Down
157 changes: 157 additions & 0 deletions web-wallet/src/lib/migration/abi/erc_bep_duskABI.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
[
{
"constant": false,
"inputs": [
{
"name": "spender",
"type": "address"
},
{
"name": "value",
"type": "uint256"
}
],
"name": "approve",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "spender",
"type": "address"
},
{
"name": "addedValue",
"type": "uint256"
}
],
"name": "increaseAllowance",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "owner",
"type": "address"
}
],
"name": "balanceOf",
"outputs": [
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"name": "to",
"type": "address"
},
{
"name": "value",
"type": "uint256"
}
],
"name": "transfer",
"outputs": [
{
"name": "",
"type": "bool"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [
{
"name": "owner",
"type": "address"
},
{
"name": "spender",
"type": "address"
}
],
"name": "allowance",
"outputs": [
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"name": "from",
"type": "address"
},
{
"indexed": true,
"name": "to",
"type": "address"
},
{
"indexed": false,
"name": "value",
"type": "uint256"
}
],
"name": "Transfer",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"name": "owner",
"type": "address"
},
{
"indexed": true,
"name": "spender",
"type": "address"
},
{
"indexed": false,
"name": "value",
"type": "uint256"
}
],
"name": "Approval",
"type": "event"
}
]
Loading

0 comments on commit 85e26cb

Please sign in to comment.