pie-dao · TotoFullStackDev · Sep 30, 2021 · Sep 30, 2021 · Sep 30, 2021 · Sep 30, 2021
diff --git a/src/components/AddMetamaskBanner.svelte b/src/components/AddMetamaskBanner.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div class="quantstamp-container pointer">
-  <a on:click={() => addTokenToMM(pie, pieAddress)}  alt="Add to Metamask" target="_blank">
+  <a on:click={() => addTokenToMM(pie.symbol, pieAddress, 18)}  alt="Add to Metamask" target="_blank">
     <span>Add token to</span>
     <img width="100%" height="auto" src={images.logos.addmetamask} alt="{$_('brands.addmetamask')}" />
   </a>

diff --git a/src/components/StakingSummary.svelte b/src/components/StakingSummary.svelte
@@ -5,6 +5,7 @@
   import images from '../config/images.json';
   import smartcontracts from '../config/smartcontracts.json';
   import Modal from '../components/elements/Modal.svelte';
+  import AddToMetamaskButton from '../components/elements/AddToMetamaskButton.svelte';
 
   import { createEventDispatcher } from 'svelte';
   const dispatch = createEventDispatcher();
@@ -20,37 +21,6 @@
     let founded = participations.find(staker => staker.address.toLowerCase() == eth.address.toLowerCase());
     staker = founded ? founded : staker;
   }
-
-  const addToken = () => {
-    ethereum.sendAsync(
-      {
-        method: 'wallet_watchAsset',
-        params: {
-          type: 'ERC20',
-          options: {
-            address: smartcontracts.reward,
-            symbol: 'SLICE',
-            decimals: 18,
-            image: images.rewardsPie,
-          },
-        },
-        id: Math.round(Math.random() * 100000),
-      },
-      (err, added) => {
-        if (added) {
-          displayNotification({
-            message: 'The SLICE token has been added to your Metamask!',
-            type: 'success',
-          });
-        } else {
-          displayNotification({
-            message: 'Sorry, something went wrong. Please try again later.',
-            type: 'error',
-          });
-        }
-      },
-    );
-  };   
 </script>
 
 <Modal title="You can't claim yet" backgroundColor="#f3f3f3" bind:this={modalinfo}>
@@ -181,10 +151,7 @@
       </div>
     </div>    
   </div> 
-  <button
-    on:click={() => addToken()}
-    class="text-center pointer mx-auto object-bottom mb-4 font-thin"
-  >
-  🦊 Add SLICE to MetaMask
-</button> 
+  <div class="mb-2">
+    <AddToMetamaskButton address={smartcontracts.reward} symbol='SLICE' decimals=18 image={images.rewardsPie} showSymbol=true darkMode=true />
+  </div>
 </div>
diff --git a/src/components/elements/AddToMetamaskButton.svelte b/src/components/elements/AddToMetamaskButton.svelte
@@ -0,0 +1,22 @@
+<script>  
+  import {addTokenToMM} from "../../helpers/addTokenToMM.js";
+
+  export let address;
+  export let symbol;
+  export let decimals;
+  export let image;
+  export let showSymbol;
+  export let darkMode;
+
+  const addToken = () => {
+    addTokenToMM(symbol, address, decimals, image);
+  };
+</script>
+
+<button on:click={() => addToken()} class="add-dough-metamask m-2 text-center pointer mx-auto object-bottom font-thin" data-aos="fade-up" data-aos-delay="300">
+  {#if showSymbol}
+    <span class={darkMode ? 'text-black' : 'text-white'}>Add {symbol} to MetaMask 🦊</span>
+  {:else}
+    <span class={darkMode ? 'text-black' : 'text-white'}>Add to MetaMask 🦊</span>
+  {/if}
+</button>
diff --git a/src/components/elements/BoostedModal.svelte b/src/components/elements/BoostedModal.svelte
@@ -5,6 +5,7 @@
   import { formatFiat } from '../helpers.js';
   import confetti from '../Confetti.js';
   import { toNum, calculateVeDough, AVG_SECONDS_MONTH } from '../../helpers/staking.js';
+  import AddToMetamaskButton from '../../components/elements/AddToMetamaskButton.svelte';
 
   let boostedModal;
 
@@ -52,37 +53,6 @@
       }, 10);
     }, 500);
   };
-
-  const addToken = () => {
-    ethereum.sendAsync(
-      {
-        method: 'wallet_watchAsset',
-        params: {
-          type: 'ERC20',
-          options: {
-            address: smartcontracts.reward,
-            symbol: 'SLICE',
-            decimals: 18,
-            image: images.rewardsPie,
-          },
-        },
-        id: Math.round(Math.random() * 100000),
-      },
-      (err, added) => {
-        if (added) {
-          displayNotification({
-            message: 'The SLICE token has been added to your Metamask!',
-            type: 'success',
-          });
-        } else {
-          displayNotification({
-            message: 'Sorry, something went wrong. Please try again later.',
-            type: 'error',
-          });
-        }
-      },
-    );
-  };  
 </script>
 
 <div id="confetti" class="hidden md:block" />
@@ -105,11 +75,6 @@
     <p class="pt-2 font-24px">
       Add SLICE to your Metamask<br />browser plugin so you will see it<br />among your assets.
     </p>
-    <button
-      on:click={() => addToken()}
-      class="text-center pointer mx-auto object-bottom my-8 font-thin"
-    >
-      🦊 Add SLICE to MetaMask
-    </button>
+    <AddToMetamaskButton address={smartcontracts.reward} symbol='SLICE' decimals=18 image={images.rewardsPie} showSymbol=true darkMode=true />
   </div>
 </Modal>
diff --git a/src/components/elements/BuyDoughButton.svelte b/src/components/elements/BuyDoughButton.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { farming } from '../../stores/eth/writables.js';
+  import images from '../../config/images.json';
+
+  let price = 'n/a';
+
+  $: (async () => {
+    price = $farming['0xB9a4Bca06F14A982fcD14907D31DFACaDC8ff88E'].DOUGHPrice.toFixed(2) || 0;
+  })();
+</script>
+
+<button class="items-center stakinggradient shake text-black text-left mt-20 md:mt-4 hover:opacity-80" onclick="location.href='https://app.1inch.io/#/1/swap/ETH/DOUGH';" data-aos="fade-up" data-aos-delay="250">
+  <div class="w-100pc flex items-center">
+    <div class="m-10px">
+      <img class="h-50px inline" src={images.doughtoken} alt="doughtoken" />
+    </div>
+    <div class="mr-20px">
+      <div class="text-base font-bold leading-5">Buy DOUGH</div>
+      <div class="text-sm font-thin">Current price: <strong>${price}</strong></div>
+    </div>
+  </div>
+</button>
diff --git a/src/components/elements/StakedModal.svelte b/src/components/elements/StakedModal.svelte
@@ -6,6 +6,7 @@
   import { parseEther } from '@ethersproject/units';
   import { calculateVeDough, getLastLockForAddress, boostToMax } from '../../helpers/staking.js';
   import BigNumber from 'bignumber.js';
+  import AddToMetamaskButton from '../../components/elements/AddToMetamaskButton.svelte';
   import { createEventDispatcher } from 'svelte';
   const dispatch = createEventDispatcher();
 
@@ -103,37 +104,6 @@
     stakedModal.open();
     animateStakeAmount();
   };
-
-  const addToken = () => {
-    ethereum.sendAsync(
-      {
-        method: 'wallet_watchAsset',
-        params: {
-          type: 'ERC20',
-          options: {
-            address: smartcontracts.veDOUGH,
-            symbol: 'veDOUGH',
-            decimals: 18,
-            image: images.simulator_veDough,
-          },
-        },
-        id: Math.round(Math.random() * 100000),
-      },
-      (err, added) => {
-        if (added) {
-          displayNotification({
-            message: 'The veDOUGH token has been added to your Metamask!',
-            type: 'success',
-          });
-        } else {
-          displayNotification({
-            message: 'Sorry, something went wrong. Please try again later.',
-            type: 'error',
-          });
-        }
-      },
-    );
-  }; 
 
   async function restakeLastLock() {
     let lockId = await getLastLockForAddress(_eth);
@@ -218,11 +188,6 @@
     <p class="pt-2 font-22px">
       3. Add veDOUGH to your Metamask<br />browser plugin so you will see it<br />among your assets.
     </p>
-    <button
-      on:click={() => addToken()}
-      class="text-center pointer mx-auto object-bottom my-8 font-thin"
-    >
-      🦊 Add veDOUGH to MetaMask
-    </button>
+    <AddToMetamaskButton address={smartcontracts.veDOUGH} symbol='veDOUGH' decimals=18 image={images.simulator_veDough} showSymbol=true darkMode=true />
   </div>
 </Modal>
diff --git a/src/helpers/addTokenToMM.js b/src/helpers/addTokenToMM.js
@@ -1,7 +1,7 @@
 import { getTokenImage } from '../components/helpers';
 
 // eslint-disable-next-line import/prefer-default-export
-export const addTokenToMM = (pie, address) => {
+export const addTokenToMM = (symbol, address, decimals, image = null) => {
   /* eslint-disable no-undef */
   ethereum.sendAsync(
     {
@@ -10,16 +10,16 @@ export const addTokenToMM = (pie, address) => {
         type: 'ERC20',
         options: {
           address,
-          symbol: pie.symbol,
-          decimals: 18,
-          image: getTokenImage(address),
+          symbol,
+          decimals,
+          image: image || getTokenImage(address),
         },
       },
       id: Math.round(Math.random() * 100000),
     },
     (err, added) => {
       if (added) {
-        console.log('Thanks for your interest!');
+        console.log(`The ${symbol} token has been added to your Metamask!`);
       } else {
         /* eslint-disable no-alert */
         alert('Something went wrong. Is Metamask there?');

diff --git a/src/pages/Dashboard.svelte b/src/pages/Dashboard.svelte
@@ -4,7 +4,7 @@
   import poolsConfig from "../config/pools.json";
   import { piesMarketDataStore } from '../stores/coingecko.js';
   import { pools } from '../stores/eth.js';
-  import ProductBox from '../components/elements/product-box.svelte';
+  // import ProductBox from '../components/elements/product-box.svelte';
   import Meta from '../components/elements/meta.svelte';
 
   import {

diff --git a/src/pages/Dough.svelte b/src/pages/Dough.svelte
@@ -1,22 +1,12 @@
 <script>
-  import BigNumber from "bignumber.js";
   import images from "../config/images.json";
-  import { farming } from '../stores/eth/writables.js';
+  import smartcontracts from '../config/smartcontracts.json';
   import StakingStats from '../components/StakingStats.svelte';
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
   import { onMount } from 'svelte';
-  import {
-    formatFiat,
-    subscribeToBalance,
-  } from "../components/helpers.js";
-
   import Meta from '../components/elements/meta.svelte';
-
-   import {
-    balanceKey,
-    balances,
-    contract,
-  } from "../stores/eth.js";
+  import BuyDoughButton from '../components/elements/BuyDoughButton.svelte';
+  import AddToMetamaskButton from '../components/elements/AddToMetamaskButton.svelte';
 
     // lottie...
     let controlsLayout = [
@@ -33,16 +23,7 @@
     'zoom',
     'info',
   ];
-
-  const DOUGH = '0xad32A8e6220741182940c5aBF610bDE99E737b2D';
-  const DAO = '0x4efD8CEad66bb0fA64C8d53eBE65f31663199C6d';
-  const MULTISIG = '0x3bFdA5285416eB06Ebc8bc0aBf7d105813af06d0';
 
-  let daoBalanceKey;
-  let msBalanceKey;
-  let doughStaked;
-  let price = 'n/a';
-  let circulatingSupply = 0;
   let proposals;
 
   export async function fetchLastSnapshots() {
@@ -91,51 +72,6 @@
       console.error(error);
     }
   });
-
-  const addToken = () => {
-    ethereum.sendAsync({
-        method: 'wallet_watchAsset',
-        params: {
-          "type":"ERC20",
-          "options":{
-            "address": '0xad32A8e6220741182940c5aBF610bDE99E737b2D',
-            "symbol": 'DOUGH',
-            "decimals": 18,
-            "image": 'https://raw.githubusercontent.com/pie-dao/brand/master/DOUGH%20Token/DOUGH2v.png',
-          },
-        },
-        id: Math.round(Math.random() * 100000),
-    }, (err, added) => {
-      if (added) {
-        console.log('Thanks for your interest!')
-      } else {
-        alert('Something went wrong. Is Metamask there?')
-      }
-    })
-  };
-
-  $: (async () => {
-
-    const doughToken = await contract({ address: DOUGH });
-    // DAO
-    subscribeToBalance(DOUGH, DAO, true);
-    // Multisig
-    subscribeToBalance(DOUGH, MULTISIG, true);
-
-    daoBalanceKey = balanceKey(DOUGH, DAO);
-    msBalanceKey = balanceKey(DOUGH, MULTISIG);
-
-    const totalSupply = await doughToken.totalSupply();
-    const daoBal = $balances[daoBalanceKey] || BigNumber(0);
-    const msBal = $balances[msBalanceKey] || BigNumber(0);
-    doughStaked = $farming['0xB9a4Bca06F14A982fcD14907D31DFACaDC8ff88E'].doughStaked.toFixed(2) || 0;
-    price = $farming['0xB9a4Bca06F14A982fcD14907D31DFACaDC8ff88E'].DOUGHPrice.toFixed(2) || 0;
-
-    if(daoBal > 0 && msBal > 0) {
-      const ts = BigNumber(totalSupply.toString()).dividedBy(10**18)
-      circulatingSupply = ts.minus(BigNumber(msBal)).minus(BigNumber(daoBal)).toFixed(2);
-    }
-  })()
 </script>
 
 <Meta 
@@ -155,18 +91,8 @@
     <div class="text-24px font-bold text-lg leading-8 text-center mb-4" data-aos="fade-up" data-aos-delay="100">PieDAO’s<br />Governance Token</div>
     <img src={images.doughcolorful} class="crisp" alt="dough" data-aos="fade-up" data-aos-delay="150"/>
     <div class="text-lg font-thin text-center mt-4 leading-8" data-aos="fade-up" data-aos-delay="200">Contribute and be rewarded<br />for building a better organization and products.</div>
-    <button class="items-center stakinggradient shake text-black text-left mt-20 md:mt-4 hover:opacity-80" onclick="location.href='https://app.1inch.io/#/1/swap/ETH/DOUGH';" data-aos="fade-up" data-aos-delay="250">
-      <div class="w-100pc flex items-center">
-      <div class="m-10px"><img class="h-50px inline" src={images.doughtoken} alt="doughtoken" /></div>
-      <div class="mr-20px">
-        <div class="text-base font-bold leading-5">Buy DOUGH</div>
-        <div class="text-sm font-thin">Current price: <strong>${price}</strong></div>
-      </div>
-    </div>
-    </button>
-    <button on:click={() => addToken()} class="add-dough-metamask mt-4" data-aos="fade-up" data-aos-delay="300">
-      Add to MetaMask 🦊
-    </button>
+    <BuyDoughButton />
+    <AddToMetamaskButton address={smartcontracts.dough} symbol='DOUGH' decimals=18 image={images.doughtoken} darkMode=true />
   </div>
 </div>