Skip to content

Commit

Permalink
handle use case where metamask is not installed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkup
jkup committed Sep 30, 2021
1 parent 882b737 commit c5e4eb7
Showing 1 changed file with 105 additions and 87 deletions.
192 changes: 105 additions & 87 deletions frontend/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@
import { ethers } from "ethers";
const CONTRACT_ID = "0x290422EC6eADc2CC12aCd98C50333720382CA86B";
const ethereum = window.ethereum;
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(CONTRACT_ID, Contract.abi, provider);
const contractWithSigner = contract.connect(signer);
let provider, signer, contract, contractWithSigner;
let maxTokens = -1;
let currentMinted = -1;
Expand All @@ -20,6 +16,21 @@
let ownedTokens = [];
let recentlyMintedTokens = [];
// If Metamask is insalled
if (ethereum) {
provider = new ethers.providers.Web3Provider(ethereum);
signer = provider.getSigner();
contract = new ethers.Contract(CONTRACT_ID, Contract.abi, provider);
contractWithSigner = contract.connect(signer);
ethereum.on("accountsChanged", function (accounts) {
account = accounts[0];
});
init();
}
const init = async () => {
if (!account && ethereum.selectedAddress) {
account = ethereum.selectedAddress;
Expand All @@ -41,10 +52,6 @@
init();
};
ethereum.on("accountsChanged", function (accounts) {
account = accounts[0];
});
const mint = async (evt) => {
evt.preventDefault();
await contractWithSigner.mintToken(quantity, account);
Expand Down Expand Up @@ -95,8 +102,6 @@
recentlyMintedTokens = recentlyMintedTokens;
});
};
init();
</script>

<header>
Expand All @@ -111,90 +116,103 @@
</div>

<main>
{#if account}
<h1>👋 Welcome to the Cloudflare Web3 app</h1>
<h2>You are currently logged in as {account.slice(0, 5)}</h2>
{#if loading}
<p>Transaction processing...</p>
{/if}
{#if minted}
<p>
You minted an NFT! If you haven't already, add a new asset to Metamask
using the below info
</p>
<ul>
<li>Contract address: {CONTRACT_ID}</li>
<li>Token symbol: CFNFT</li>
<li>Token decimal: 0</li>
</ul>
{/if}

<form on:submit={mint}>
<input
type="number"
min="1"
max="3"
placeholder="Quantity to mint"
bind:value={quantity}
/>

{#if currentMinted >= maxTokens}
<button disabled type="submit">Sold out</button>
{:else}
<button type="submit">Mint</button>
{#if ethereum}
{#if account}
<h1>👋 Welcome to the Cloudflare Web3 app</h1>
<h2>You are currently logged in as {account.slice(0, 5)}</h2>
{#if loading}
<p>Transaction processing...</p>
{/if}
{#if minted}
<p>
You minted an NFT! If you haven't already, add a new asset to Metamask
using the below info
</p>
<ul>
<li>Contract address: {CONTRACT_ID}</li>
<li>Token symbol: CFNFT</li>
<li>Token decimal: 0</li>
</ul>
{/if}
</form>

<section>
<span>{currentMinted}/2048 minted</span>
</section>
<form on:submit={mint}>
<input
type="number"
min="1"
max="3"
placeholder="Quantity to mint"
bind:value={quantity}
/>

{#if currentMinted >= maxTokens}
<button disabled type="submit">Sold out</button>
{:else}
<button type="submit">Mint</button>
{/if}
</form>

<h2>Your Tokens:</h2>
{#if ownedTokens}
<section>
<ul class="grid">
{#each ownedTokens as token}
<li>
<div class="grid-image">
<img src={token.image} alt="" />
</div>
<div class="grid-footer">
<h2>{token.name}</h2>
<span>{token.description}</span>
</div>
</li>
{/each}
</ul>
<span>{currentMinted}/2048 minted</span>
</section>

<h2>Your Tokens:</h2>
{#if ownedTokens}
<section>
<ul class="grid">
{#each ownedTokens as token}
<li>
<div class="grid-image">
<img src={token.image} alt="" />
</div>
<div class="grid-footer">
<h2>{token.name}</h2>
<span>{token.description}</span>
</div>
</li>
{/each}
</ul>
</section>
{:else}
<section>
You don't have any tokens. Mint one with the button above to add it to
your collection.
</section>
{/if}
{:else}
<section>
You don't have any tokens. Mint one with the button above to add it to
your collection.
</section>
<h1>👋 Welcome to Cloudflare Web3.</h1>
<h2>Login with Metamask to mint your NFT</h2>
<button on:click={login}>Login</button>

<h2>Recently Minted NFTs:</h2>
{#if recentlyMintedTokens}
<section>
<ul class="grid">
{#each recentlyMintedTokens as token}
<li>
<div class="grid-image">
<img src={token.image} alt="" />
</div>
<div class="grid-footer">
<h2>{token.name}</h2>
<span>{token.description}</span>
</div>
</li>
{/each}
</ul>
</section>
{/if}
{/if}
{:else}
<h1>👋 Welcome to Cloudflare Web3.</h1>
<h2>Login with Metamask to mint your NFT</h2>
<button on:click={login}>Login</button>

<h2>Recently Minted NFTs:</h2>
{#if recentlyMintedTokens}
<section>
<ul class="grid">
{#each recentlyMintedTokens as token}
<li>
<div class="grid-image">
<img src={token.image} alt="" />
</div>
<div class="grid-footer">
<h2>{token.name}</h2>
<span>{token.description}</span>
</div>
</li>
{/each}
</ul>
</section>
{/if}
<h1>This app requires a Metamask wallet.</h1>
<p>
You won't be asked to add any money. Install Metamask
<a href="https://metamask.io/">here</a>.
</p>
<p>
Then follow <a href="https://github.com/cloudflare/cfweb3"
>these instructions</a
> to get started.
</p>
{/if}
</main>

Expand Down

0 comments on commit c5e4eb7

Please sign in to comment.