feat: claim xe flow with xe address generator

package.json

@@ -29,6 +29,9 @@
     "@heroicons/vue": "^1.0.1",
     "@metamask/detect-provider": "^1.2.0",
     "@metamask/onboarding": "^1.0.0",
+    "@noble/curves": "^2.4.0",
+    "@noble/hashes": "^2.4.0",
+    "@scure/bip39": "^2.4.0",
     "@vuelidate/core": "^2.0.0-alpha.16",
     "@vuelidate/validators": "^2.0.0-alpha.13",
     "chart.js": "^3.7.1",

src/components/AccountPanel.vue

@@ -24,7 +24,7 @@
             Create Stake
           </button>
         </div>
-        <div v-else class="account-panel__buttons">
+        <div v-else class="account-panel__buttons" :class="{'account-panel__buttons--four': claimsOpen}">
           <button class="w-full button button--success" @click="openSend">
             <span class="w-12 button__icon">
               <ArrowUpIcon/>
@@ -45,11 +45,19 @@
             </span>
             Swap
           </button>
+
+          <button v-if="claimsOpen" class="w-full button button--outline-success" @click="openClaim">
+            <span class="button__icon w-15">
+              <SparklesIcon/>
+            </span>
+            Claim XE
+          </button>
         </div>
       </div>
     </div>
 
     <div class="account-panel__modals">
+      <ClaimModal v-if="claimsOpen" :close="reset" :visible="modal === 'claim'"/>
       <CreateStakeModal :close="reset" :visible="modal === 'createStake'"/>
       <DepositModal :close="reset" :visible="modal === 'deposit'"/>
       <ReceiveModal :close="reset" :visible="modal === 'receive'"/>
@@ -69,6 +77,7 @@
 
 <script>
 import Amount from './Amount.vue'
+import ClaimModal from './tx/ClaimModal.vue'
 import CreateStakeModal from './stakes/CreateStakeModal.vue'
 import DepositModal from './tx/DepositModal.vue'
 import ReceiveModal from './tx/ReceiveModal.vue'
@@ -77,7 +86,8 @@ import SendModal from './tx/SendModal.vue'
 import SwapModal from './tx/SwapModal.vue'
 import WithdrawModal from './tx/WithdrawModal.vue'
 import { mapState } from 'vuex'
-import { ArrowDownIcon, ArrowUpIcon, PlusIcon, SwitchHorizontalIcon } from '@heroicons/vue/outline'
+import { ArrowDownIcon, ArrowUpIcon, PlusIcon, SparklesIcon, SwitchHorizontalIcon } from '@heroicons/vue/outline'
+import { claimsEnabled, fetchClaimsInfo } from '../utils/claim'
 
 export default {
   name: 'AccountPanel',
@@ -86,23 +96,38 @@ export default {
     Amount,
     ArrowDownIcon,
     ArrowUpIcon,
+    ClaimModal,
     CreateStakeModal,
     DepositModal,
     PlusIcon,
     ReceiveModal,
     SellModal,
     SendModal,
+    SparklesIcon,
     SwapModal,
     SwitchHorizontalIcon,
     WithdrawModal
   },
   computed: mapState(['address', 'balance', 'usdBalance']),
   data() {
     return {
+      claimsOpen: false,
       modal: ''
     }
   },
+  async mounted() {
+    if (!claimsEnabled()) return
+    try {
+      this.claimsOpen = (await fetchClaimsInfo()).open
+    }
+    catch (err) {
+      console.error('Claims service not available:', err)
+    }
+  },
   methods: {
+    openClaim() {
+      this.modal = 'claim'
+    },
     openCreateStake() {
       this.modal = 'createStake'
     },
@@ -204,6 +229,10 @@ export default {
     @apply grid grid-cols-3 mt-0;
   }
 
+  .account-panel__buttons--four {
+    @apply grid-cols-4;
+  }
+
   .account-panel__buttons.staking-buttons {
     @apply grid-cols-1;
   }