Dev

.env

@@ -1,3 +1,3 @@
 VITE_APP_TITLE="Albus"
 VITE_APP_DESCRIPTION=
-VITE_APP_KEYWORDS=
+VITE_APP_KEYWORDS=

.env.dev

@@ -0,0 +1,2 @@
+VITE_PASSWORD_PROTECT=345719
+VITE_ALBUS_APP_URL='https://dev.app.albus.finance'

.env.production

@@ -1,3 +1,4 @@
 
 VITE_GTAG_ID=
 VITE_SENTRY_DSN=
+VITE_ALBUS_APP_URL='https://app.albus.finance'

.env.staging

@@ -1 +1,2 @@
 VITE_PASSWORD_PROTECT=345719
+VITE_ALBUS_APP_URL='https://stage.app.albus.finance'

.github/workflows/deploy-stage.yaml

@@ -0,0 +1,39 @@
+name: Deploy Stage
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ stage ]
+    paths:
+      - public/**
+      - src/**
+
+# change domain to stage
+# change the proccess to the same as in deploy-main
+env:
+  URL: dev.defi.albus.finance
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install and Build
+        run: |
+          pnpm install
+          pnpm run build:staging
+          cp dist/index.html dist/404.html
+          echo ${{ env.URL }} > dist/CNAME
+          touch dist/.nojekyll
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: dist

.github/workflows/deploy.yaml

@@ -25,7 +25,7 @@ jobs:
       - name: Install and Build
         run: |
           pnpm install
-          pnpm run build:staging
+          pnpm run build:dev
           cp dist/index.html dist/404.html
           echo ${{ env.URL }} > dist/CNAME
           touch dist/.nojekyll

package.json

@@ -7,6 +7,7 @@
     "dev": "vite --port 3333",
     "build": "vite build --mode production",
     "build:staging": "vite build --mode staging",
+    "build:dev": "vite build --mode dev",
     "preview": "vite preview",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

src/App.vue

@@ -26,6 +26,14 @@ onBeforeMount(() => {
 
 const auth = useAuthStore()
 const isPasswordProtected = computed(() => auth.isEnabled && !auth.isAuthenticated)
+
+const route = useRoute()
+const router = useRouter()
+watch(route, () => {
+  if (route.name === 'index' || route.name === 'all' || (route.name && !router.hasRoute(route.name))) {
+    router.push('/transfer')
+  }
+}, { immediate: true })
 </script>
 
 <template>

src/components/AppHeader.vue

@@ -1,3 +1,6 @@
+<script lang="ts" setup>
+</script>
+
 <template>
   <header class="app-header">
     <div class="app-header__buttons">

src/components/EnvironmentWarning.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const mode = import.meta.env.MODE
+</script>
+
+<template>
+  <div v-if="mode !== 'production'" class="text-h5 text-negative fixed-top-right q-pt-xs q-pr-sm">
+    Environment: {{ mode }}
+  </div>
+</template>

src/components/Menu/MobileMenu.vue

@@ -3,7 +3,7 @@ import { evaClose, evaMenu } from '@quasar/extras/eva-icons'
 
 const _route = useRoute()
 
-const routes = ['transfer', 'swap', 'about', 'support']
+const routes = ['transfer', 'swap', 'pools', 'about', 'support']
 
 const isOpen = ref(false)
 

src/components/PolicyCard/PolicyCardView.vue

@@ -63,6 +63,7 @@ const { certificate, certificateLink, certificateValid } = useCertificate(props.
         :certificate-valid="!!certificateValid"
         :certificate-loading="certificateLoading"
         :certificate-link="certificateLink"
+        @close-dialog="dialog = false"
       />
     </q-dialog>
   </q-card>

src/components/PolicyCard/PolicyInfoDialog.vue

@@ -22,6 +22,7 @@ const { certificateLink, certificateValid, certificate } = useCertificate()
       :certificate-valid="!!certificateValid"
       :certificate-loading="certificateLoading"
       :certificate-link="certificateLink"
+      @close-dialog="dialog = false"
     />
   </q-dialog>
 </template>

src/components/PolicyCard/PolicyInfoView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { evaRefresh } from '@quasar/extras/eva-icons'
+import { evaClose, evaRefresh } from '@quasar/extras/eva-icons'
 import { useWallet } from 'solana-wallets-vue'
 import type { Policy } from '@albus-finance/sdk'
 import { formatDate, formatRule } from '@/utils'
@@ -13,6 +13,7 @@ const props = defineProps({
   certificateValid: Boolean,
   certificateLoading: Boolean,
 })
+defineEmits(['closeDialog'])
 
 const userStore = useUserStore()
 const serviceData = computed(() => userStore.serviceData)
@@ -33,6 +34,12 @@ const expiredAt = computed(() => {
 
 <template>
   <q-card class="policy-card">
+    <q-icon
+      size="20px"
+      :name="evaClose"
+      class="cursor-pointer absolute-right q-pa-xs"
+      @click="$emit('closeDialog')"
+    />
     <div>
       <q-inner-loading :showing="serviceLoading" label-class="text-teal" label-style="font-size: 1.1em" />
       <div v-if="connected" class="q-px-md q-pt-md">

src/components/Swap/SwapCard.vue

@@ -140,7 +140,13 @@ watch(() => state.from.amount, (a) => {
       <policy-card class="q-mt-md q-mx-auto" />
 
       <div class="swap-submit q-mt-md">
-        <q-btn :loading="state.swapping" :disable="!state.active || !tokenSwap" rounded :ripple="false" @click="swapSubmit">
+        <q-btn
+          :loading="state.swapping"
+          :disable="!state.active || !tokenSwap || !connected || !state.from.amount"
+          rounded
+          :ripple="false"
+          @click="swapSubmit"
+        >
           Swap {{ state.from.symbol }} / {{ state.to.symbol }}
         </q-btn>
       </div>
@@ -150,7 +156,7 @@ watch(() => state.from.amount, (a) => {
       </div>
       <div v-else class="row q-mt-md text-center relative-position full-width">
         <div class="swap-rate q-mx-auto">
-          1 {{ state.from.name }} ≈ {{ formatBalance(state.rate) }} {{ state.to.name }}
+          1 {{ state.from.symbol }} ≈ {{ formatBalance(state.rate) }} {{ state.to.symbol }}
         </div>
         <div class="absolute-right swap-rate__refresh">
           <q-btn

src/components/Transfer/TransferCard.vue

@@ -52,7 +52,7 @@ function setMaxCurrency() {
   }
 }
 
-const active = computed(() => Number(state.value) > 0 && validateAddress(state.address))
+const active = computed(() => connected.value && Number(state.value) > 0 && validateAddress(state.address))
 </script>
 
 <template>

src/config/common.ts

@@ -3,7 +3,7 @@ export const TELEGRAM_URL = 'https://t.me/albusprotocol'
 export const TWITTER_URL = 'https://twitter.com/AlbusProtocol'
 export const DISCORD_URL = ''
 
-export const ALBUS_APP_URL = 'https://app.albus.finance'
+export const ALBUS_APP_URL = import.meta.env.VITE_ALBUS_APP_URL || 'https://dev.app.albus.finance'
 
 export const RENT_FEE = 0.00203928
 export const MIN_TRANSFER_FEE = 0.00203928

src/config/connection.ts

@@ -4,32 +4,31 @@ import { type Commitment } from '@solana/web3.js'
 import type { Endpoint } from '@/stores'
 import { getJFRpcToken } from '@/utils/rpc'
 
-export const ENDPOINTS: Endpoint[] = [
-  {
+const mode = import.meta.env.MODE
+const isDev = import.meta.env.DEV
+export const ENDPOINTS: Endpoint[] = []
+if (mode !== 'dev') {
+  ENDPOINTS.push({
     id: 'jfactory-mainnet',
     name: 'JFactory RPC',
     cluster: 'mainnet-beta',
-    url: import.meta.env.DEV
+    url: isDev
       ? 'https://restless-blue-valley.solana-mainnet.quiknode.pro/388d47063172de995210b42f44a3483d4269dcf9/'
       : 'https://rpc.jfactory.ch/',
-    wsEndpoint: import.meta.env.DEV ? undefined : 'wss://sleek-solemn-rain.solana-mainnet.quiknode.pro/6e7118f20a84b8d10c8f00ec8f16ab6878f00fb8/',
+    wsEndpoint: isDev ? undefined : 'wss://sleek-solemn-rain.solana-mainnet.quiknode.pro/6e7118f20a84b8d10c8f00ec8f16ab6878f00fb8/',
     getToken: getJFRpcToken,
-  },
-  // {
-  //   id: 'testnet',
-  //   name: 'TestNet',
-  //   cluster: 'testnet',
-  //   url: clusterApiUrl('testnet'),
-  // },
-]
-if (import.meta.env.MODE !== 'production') {
+  })
+}
+
+if (mode === 'dev' || isDev) {
   ENDPOINTS.push({
     id: 'devnet',
     name: 'DevNet',
     cluster: 'devnet',
     url: 'https://polished-damp-dust.solana-devnet.quiknode.pro/e3fdb5a9915e3c3c47709465b4b5fa9f0153b674',
   })
 }
+console.log('ENDPOINTS ===================== ', ENDPOINTS)
 
 export const DEFAULT_ENDPOINT = ENDPOINTS[0] as Endpoint
 

src/config/policies.ts

@@ -25,17 +25,24 @@ export const APP_CONFIG = {
     serviceCode: 'alphaDefi',
     policy: {
       transfer: {
-        // countries Germany, Ukraine, Switzerland
+        // Germany
         default: '6ZHFw4Z6A5g8ktPktzHKG7rPJHGem8HoKhxfYo9iYmhA',
-        // 22 - 55
+        // Liveness
         usdc: 'DfmzXJY5u1VPLmG58dekQoSchhyhZRcuuHy8e3D6Wq6B',
         // 18+
         usdt: 'B6MQGcriR1XXUhs4DbHattdueqRDkfGAQ9EJHSBQbDQn',
       },
-      // swap: {
-      //   // countries Germany, Ukraine, Switzerland
-      //   default: 'CjnpmL6Svfr3Vhpp1jVWCcNbJRxbyPY5ZQF8QiNXWXtT',
-      // },
     },
   },
 }
+// serviceCode: 'alphaDefi',
+// policy: {
+//   transfer: {
+//     // countries Germany, Ukraine, Switzerland
+//     default: '6ZHFw4Z6A5g8ktPktzHKG7rPJHGem8HoKhxfYo9iYmhA',
+//     // 22 - 55
+//     usdc: 'DfmzXJY5u1VPLmG58dekQoSchhyhZRcuuHy8e3D6Wq6B',
+//     // 18+
+//     usdt: 'B6MQGcriR1XXUhs4DbHattdueqRDkfGAQ9EJHSBQbDQn',
+//   },
+// },

src/config/tokens.ts

@@ -58,16 +58,16 @@ export const WRAPPED_SOL_TOKEN = {
 }
 
 export const USDC_TOKEN_DEV = {
-  symbol: 'usdc',
-  name: 'usdc',
+  symbol: 'USDC',
+  name: 'USD Coin',
   image: usdcToken,
   decimals: 6,
   mint: '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU',
 }
 
 export const USDT_TOKEN_DEV = {
-  symbol: 'tether',
-  name: 'usdt',
+  symbol: 'TETHER',
+  name: 'USDT',
   image: usdtToken,
   decimals: 6,
   mint: 'HY6uvCfBQhKANRxBcYLBK7aUva8mT7mLP2SjrLLmipza',

src/layouts/default.vue

@@ -2,6 +2,7 @@
   <div class="container content">
     <sidebar />
     <main>
+      <environment-warning />
       <app-header />
       <router-view />
     </main>

src/stores/user.ts

@@ -14,7 +14,6 @@ export const useUserStore = defineStore('user', () => {
   const anchorWallet = useAnchorWallet()
   const { publicKey } = wallet
   const route = useRoute()
-  const router = useRouter()
   const emitter = useEmitter()
 
   const client = computed(() => AlbusClient.fromWallet(connectionStore.connection, anchorWallet.value).configure('debug', true))
@@ -25,11 +24,6 @@ export const useUserStore = defineStore('user', () => {
   // @ts-expect-error not all of clusters in config
   const appConfig = computed(() => APP_CONFIG[connectionStore.cluster])
 
-  watch(route, () => {
-    if (route.name === 'index') {
-      router.push('/transfer')
-    }
-  }, { immediate: true })
   const pagePolicy = computed<string>(() => {
     if (route.name) {
       const pagePolicy = appConfig.value?.policy[route.name]

types/components.d.ts

@@ -18,12 +18,13 @@ declare module 'vue' {
     CreatePoolTokenData: typeof import('./../src/components/CreatePool/CreatePoolTokenData.vue')['default']
     CreateSwapCard: typeof import('./../src/components/CreatePool/CreateSwapCard.vue')['default']
     DarkThemeToggle: typeof import('./../src/components/DarkThemeToggle.vue')['default']
+    EnvironmentWarning: typeof import('./../src/components/EnvironmentWarning.vue')['default']
     IAppCertificate: typeof import('~icons/app/certificate')['default']
     IAppDiscord: typeof import('~icons/app/discord')['default']
     IAppTelegram: typeof import('~icons/app/telegram')['default']
     IAppTwitterX: typeof import('~icons/app/twitter-x')['default']
     MintTokenA: typeof import('./../src/components/MintTokenA.vue')['default']
-    MobileMenu: typeof import('./../src/components/Menu/MobileMenu.vue')['default']
+    MobileMenu: typeof import('./../src/components/menu/MobileMenu.vue')['default']
     PasswordProtect: typeof import('./../src/components/PasswordProtect.vue')['default']
     PolicyCard: typeof import('./../src/components/PolicyCard/PolicyCard.vue')['default']
     PolicyCardView: typeof import('./../src/components/PolicyCard/PolicyCardView.vue')['default']
@@ -34,17 +35,17 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectPolicyItem: typeof import('./../src/components/CreatePool/SelectPolicyItem.vue')['default']
-    SelectPool: typeof import('./../src/components/Swap/SelectPool.vue')['default']
+    SelectPool: typeof import('./../src/components/swap/SelectPool.vue')['default']
     SelectToken: typeof import('./../src/components/SelectToken.vue')['default']
-    Sidebar: typeof import('./../src/components/Sidebar/Sidebar.vue')['default']
-    SidebarCopyrights: typeof import('./../src/components/Sidebar/SidebarCopyrights.vue')['default']
-    SidebarFooter: typeof import('./../src/components/Sidebar/SidebarFooter.vue')['default']
-    SidebarHeader: typeof import('./../src/components/Sidebar/SidebarHeader.vue')['default']
-    SidebarNavigation: typeof import('./../src/components/Sidebar/SidebarNavigation.vue')['default']
+    Sidebar: typeof import('./../src/components/sidebar/Sidebar.vue')['default']
+    SidebarCopyrights: typeof import('./../src/components/sidebar/SidebarCopyrights.vue')['default']
+    SidebarFooter: typeof import('./../src/components/sidebar/SidebarFooter.vue')['default']
+    SidebarHeader: typeof import('./../src/components/sidebar/SidebarHeader.vue')['default']
+    SidebarNavigation: typeof import('./../src/components/sidebar/SidebarNavigation.vue')['default']
     SocialLinks: typeof import('./../src/components/SocialLinks.vue')['default']
-    StakeCard: typeof import('./../src/components/Stake/StakeCard.vue')['default']
-    SwapCard: typeof import('./../src/components/Swap/SwapCard.vue')['default']
-    TransferCard: typeof import('./../src/components/Transfer/TransferCard.vue')['default']
+    StakeCard: typeof import('./../src/components/stake/StakeCard.vue')['default']
+    SwapCard: typeof import('./../src/components/swap/SwapCard.vue')['default']
+    TransferCard: typeof import('./../src/components/transfer/TransferCard.vue')['default']
     WarningDisclaimer: typeof import('./../src/components/WarningDisclaimer.vue')['default']
   }
 }

vite.config.ts

@@ -20,7 +20,7 @@ const esbuildShim = require.resolve('node-stdlib-browser/helpers/esbuild/shim')
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
-  const isProd = mode === 'production'
+  const isProd = mode === 'production' || mode === 'staging'
 
   const { default: stdLibBrowser } = await import('node-stdlib-browser')