Merge branch 'develop' into staking-round

Author: pettinarip

vue-app/src/App.vue

@@ -187,6 +187,7 @@ export default class App extends Vue {
     const excludedRoutes = [
       'landing',
       'join',
+      'join-step',
       'transaction-success',
       'verify',
       'project-added',

vue-app/src/components/ProjectProfile.vue

@@ -205,11 +205,6 @@ export default class ProjectProfile extends Vue {
     const { isRoundContributionPhase, canUserReallocate } = this.$store.getters
     return isRoundContributionPhase || canUserReallocate
   }
-
-  get tokenLogo(): string {
-    const { nativeTokenSymbol } = this.$store.state.currentRound
-    return getTokenLogo(nativeTokenSymbol)
-  }
 }
 </script>
 

vue-app/src/components/TransactionModal.vue

@@ -37,7 +37,7 @@ import { waitForTransaction } from '@/utils/contracts'
   },
 })
 export default class TransactionModal extends Vue {
-  @Prop() transactionFn!: () => Promise<TransactionResponse>
+  @Prop() transaction!: Promise<TransactionResponse>
   @Prop() onTxSuccess!: (txHash) => void
 
   txHash = ''
@@ -49,10 +49,7 @@ export default class TransactionModal extends Vue {
 
   private async executeTx() {
     try {
-      await waitForTransaction(
-        this.transactionFn(),
-        (hash) => (this.txHash = hash)
-      )
+      await waitForTransaction(this.transaction, (hash) => (this.txHash = hash))
 
       this.onTxSuccess(this.txHash)
     } catch (error) {

vue-app/src/plugins/Web3/constants/chains.ts

@@ -44,7 +44,7 @@ export const CHAIN_INFO: ChainInfo = {
   },
   [ChainId.HARDHAT]: {
     label: 'Arbitrum Hardhat',
-    currency: 'ETH',
+    currency: 'AETH',
     logo: 'arbitrum.svg',
     isLayer2: true,
     explorer: 'https://testnet.arbiscan.io',
@@ -55,7 +55,7 @@ export const CHAIN_INFO: ChainInfo = {
   },
   [ChainId.ARBITRUM_ONE]: {
     label: 'Arbitrum',
-    currency: 'ETH',
+    currency: 'AETH',
     logo: 'arbitrum.svg',
     isLayer2: true,
     explorer: 'https://arbiscan.io',
@@ -66,7 +66,7 @@ export const CHAIN_INFO: ChainInfo = {
   },
   [ChainId.ARBITRUM_RINKEBY]: {
     label: 'Arbitrum Rinkeby',
-    currency: 'ETH',
+    currency: 'AETH',
     logo: 'arbitrum.svg',
     isLayer2: true,
     explorer: 'https://testnet.arbiscan.io',
@@ -77,7 +77,7 @@ export const CHAIN_INFO: ChainInfo = {
   },
   [ChainId.OPTIMISM]: {
     label: 'Optimism',
-    currency: 'ETH',
+    currency: 'OETH',
     logo: 'optimism.svg',
     isLayer2: true,
     explorer: 'https://optimistic.etherscan.io',

vue-app/src/store/getters.ts

@@ -175,6 +175,21 @@ const getters = {
       state.currentRound.maxContributors <= state.currentRound.contributors
     )
   },
+  nativeTokenAddress: (state: RootState): string => {
+    const { currentRound, factory } = state
+
+    let nativeTokenAddress = ''
+
+    if (factory) {
+      nativeTokenAddress = factory.nativeTokenAddress
+    }
+
+    if (currentRound) {
+      nativeTokenAddress = currentRound.nativeTokenAddress
+    }
+
+    return nativeTokenAddress
+  },
   nativeTokenSymbol: (state: RootState): string => {
     const { currentRound, factory } = state
 

vue-app/src/views/AboutContributors.vue

@@ -103,8 +103,7 @@ import { ChainInfo } from '@/plugins/Web3/constants/chains'
 export default class AboutContributors extends Vue {
   // TODO: update to new getter
   get nativeTokenSymbol(): string {
-    const { nativeTokenSymbol } = this.$store.state.currentRound
-    return nativeTokenSymbol
+    return this.$store.getters.nativeTokenSymbol
   }
 
   get chain(): ChainInfo {

vue-app/src/views/AboutHowItWorks.vue

@@ -167,7 +167,7 @@ export default class AboutHowItWorks extends Vue {
   }
 
   get nativeTokenSymbol(): string {
-    return this.$store.state?.currentRound?.nativeTokenSymbol
+    return this.$store.getters.nativeTokenSymbol
   }
 
   // TODO: should we hardcode defaults instead of TBD for our round?

vue-app/src/views/AboutLayer2.vue

@@ -131,28 +131,27 @@
         </li>
         <li>
           Select currency (some ETH first for gas, and some
-          {{ nativeToken.symbol }} for contributing)
+          {{ nativeTokenSymbol }} for contributing)
           <p>
-            For {{ nativeToken.symbol }}, click "Token" menu, search for
-            {{ nativeToken.symbol }}
+            For {{ nativeTokenSymbol }}, click "Token" menu, search for
+            {{ nativeTokenSymbol }}
             and select token.
           </p>
         </li>
         <li>Enter amount and click "Deposit"</li>
         <li>Confirm on your wallet</li>
       </ol>
       <p>
-        Once you have bridged your {{ nativeToken.symbol }} to
-        {{ chain.label }}, you may want to add the
-        <links :to="blockExplorerUrl">token</links> to your wallet e.g. in
-        MetaMask.
+        Once you have bridged your {{ nativeTokenSymbol }} to {{ chain.label }},
+        you may want to add the <links :to="blockExplorerUrl">token</links> to
+        your wallet e.g. in MetaMask.
       </p>
       <button
         v-if="currentUser && isMetaMask"
         class="btn-secondary"
         @click="addTokenToWallet"
       >
-        Add {{ chain.label }} {{ nativeToken.symbol }} to MetaMask
+        Add {{ chain.label }} {{ nativeTokenSymbol }} to MetaMask
       </button>
     </div>
     <!-- If chain isn't Arbitrum, but still has a bridge URL, display its information: -->
@@ -216,9 +215,9 @@ export default class AboutLayer2 extends Vue {
           params: {
             type: 'ERC20',
             options: {
-              address: this.nativeToken.address,
-              symbol: this.nativeToken.symbol,
-              decimals: this.nativeToken.decimals,
+              address: this.nativeTokenAddress,
+              symbol: this.nativeTokenSymbol,
+              decimals: this.nativeTokenDecimals,
             },
           },
         })
@@ -237,17 +236,20 @@ export default class AboutLayer2 extends Vue {
     return chain
   }
 
-  get nativeToken(): { [key: string]: any } {
-    const {
-      nativeTokenSymbol: symbol,
-      nativeTokenAddress: address,
-      nativeTokenDecimals: decimals,
-    } = this.$store.state.currentRound
-    return { symbol, address, decimals }
+  get nativeTokenAddress(): string {
+    return this.$store.getters.nativeTokenAddress
+  }
+
+  get nativeTokenSymbol(): string {
+    return this.$store.getters.nativeTokenSymbol
+  }
+
+  get nativeTokenDecimals(): number | undefined {
+    return this.$store.getters.nativeTokenDecimals
   }
 
   get blockExplorerUrl(): string {
-    return `${chain.explorer}/address/${this.nativeToken.address}`
+    return `${chain.explorer}/address/${this.nativeTokenAddress}`
   }
 }
 </script>

vue-app/src/views/RecipientRegistry.vue

@@ -269,7 +269,7 @@ export default class RecipientRegistryView extends Vue {
     this.$modal.show(
       TransactionModal,
       {
-        transactionFn: () => transaction,
+        transaction,
         onTxSuccess: async () => {
           // TODO: this is not ideal. Leaving as is, just because it is an admin
           // page where no end user is using. We are forcing this 2s time to give