Fix add mobile links

.github/workflows/pages.yml

@@ -1,33 +1,60 @@
-name: Pages
+name: Deploy
 
 on:
   push:
     branches:
       - 'main'
   workflow_dispatch:
 
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  pages: write
+  id-token: write
+
 jobs:
-  pages:
+  build:
     runs-on: ubuntu-latest
-    environment: github_pages
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: corepack enable pnpm
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
-      - name: Setup node env
-        uses: actions/setup-node@v3
+      - name: Restore cache
+        uses: actions/cache@v4
         with:
-          node-version: '16.20.0'
+          path: |
+            dist
+            .nuxt
+          key: ${{ runner.os }}-nuxt-build-${{ hashFiles('dist') }}
+          restore-keys: |
+            ${{ runner.os }}-nuxt-build-
 
-      - name: Install Dependencies
-        run: yarn
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-      - name: Generate
-        run: yarn generate
+      - name: Static HTML export with Nuxt
+        run: pnpm run generate
 
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: .output/public
-          cname: mywitwallet.com
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -9,3 +9,4 @@ dist
 .DS_Store
 assets/.DS_Store
 assets/svg/.DS_Store
+docs/** */

.prettierignore

@@ -0,0 +1,37 @@
+# Ignore build output directories
+.nuxt/
+.output/
+dist/
+docs/
+DEBUG=1/** */
+
+# Ignore node modules
+node_modules/
+
+# Ignore specific configuration files
+*.config.js
+
+# Ignore environment variables files
+.env
+.env.*
+
+# Ignore lock files
+yarn.lock
+package-lock.json
+
+# Ignore logs
+*.log
+
+# Ignore compiled files
+*.min.js
+*.min.css
+
+# Ignore specific file types
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.svg
+
+# Ignore other generated files
+coverage/

components/DownloadBtn.vue

@@ -1,31 +1,58 @@
 <template>
   <a
-    v-if="release.platform"
+    v-if="release && release.downloadName"
     class="link"
     :href="release.releaseUrl"
     target="_blank"
     :download="release.downloadName"
   >
-    <ElButton class="btn" type="primary">
-      <i18n-t keypath="download" tag="span">
+    <button class="btn">
+      <i18n-t keypath="downloadLink" tag="span">
         <template #platform>
           <span>{{ release.platform }}</span>
         </template>
       </i18n-t>
-    </ElButton>
+    </button>
   </a>
   <a
     v-else
     class="link"
-    href="https://github.com/witnet/my-wit-wallet/releases/latest"
+    :href="release ? release.releaseUrl : GITHUB_RELEASE_URL"
   >
-    <ElButton class="btn" type="primary">{{ $t('head.title') }}</ElButton>
+    <button class="btn">
+      <i18n-t v-if="release" keypath="downloadLink" tag="span">
+        <template #platform>
+          <span>{{ release?.platform }}</span>
+        </template>
+      </i18n-t>
+      <span v-else>{{ t('githubLink') }}</span>
+    </button>
   </a>
 </template>
 
-<script setup>
-import { getLatestRelease } from '../getLatestRelease'
-const release = await getLatestRelease(navigator)
+<script setup lang="ts">
+import { getLatestRelease, getStoreRelease, type LatestReleaseResponse } from '@/getLatestRelease'
+import { getBrowserOs } from '@/getBrowserOs'
+import { useI18n } from 'vue-i18n'
+import { GITHUB_RELEASE_URL, URL_RELEASE_BASE } from '@/constants'
+import { computed, type Ref } from 'vue'
+const { t } = useI18n()
+
+const { data }: { data: Ref<LatestReleaseResponse | undefined> } =
+  await useFetch(URL_RELEASE_BASE)
+
+const os = computed(() => getBrowserOs(navigator))
+
+const storeRelease = computed(() => os.value ? getStoreRelease({ os: os.value }) : null)
+const downloadRelease = computed(() => os.value ? getLatestRelease({ os: os.value, data: data.value }) : null)
+const release = computed(() => storeRelease.value ?? downloadRelease.value)
+
 </script>
 
-<style></style>
+<style lang="scss">
+.link {
+  width: max-content;
+  height: auto;
+  display: flex;
+}
+</style>

constants.ts

@@ -25,6 +25,8 @@ export const languages = [
 export const fallbackLocale = 'en'
 
 export const DEFAULT_OS = 'Linux'
+export const GITHUB_RELEASE_URL =
+  'https://github.com/witnet/sheikah/releases/latest'
 
 export const URL_RELEASE_BASE =
   'https://api.github.com/repos/witnet/my-wit-wallet/releases/latest'

eslint.config.js

@@ -0,0 +1,47 @@
+import globals from 'globals'
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+import eslintConfigPrettier from "eslint-config-prettier";
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt().prepend(
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs["flat/strongly-recommended"],
+  eslintConfigPrettier,
+  {
+    ignores: ['node_modules', 'dist', 'public', '.nuxt', 'docs/**/*', 'DEBUG=1/**/*', '.output', 'docs/_nuxt/*'],
+  },
+  {
+    files: ['pages/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 0,
+      "vue/html-self-closing": ["error", {
+        "html": {
+          "void": "always",
+          "normal": "always",
+          "component": "always"
+        },
+        "svg": "always",
+        "math": "always"
+      }]
+    },
+  },
+  {
+    files: ['**/*.vue', '**/*.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+      parserOptions: {
+        parser: {
+          ts: tseslint.parser
+        },
+        ecmaVersion: 2020,
+        sourceType: 'module',
+      },
+    },
+  },
+)

getBrowserOs.ts

@@ -1,7 +1,31 @@
-import { DEFAULT_OS } from './constants'
+export function getBrowserOs(navigator: Navigator) {
+  return navigator.userAgentData?.platform
+    ? detectPlatformWithUserAgentData(navigator)
+    : detectPlatform(navigator)
+}
+
+const detectPlatformWithUserAgentData = (navigator: Navigator) => {
+  const userAgentData: NavigatorUAData | undefined = navigator.userAgentData
+  return userAgentData?.platform.toLowerCase()
+}
 
-export function getBrowserOs(navigator: any) {
-  const supportedOs = ['Win', 'Mac', 'Linux', 'MacIntel']
-  const platform = navigator.platform
-  return supportedOs.find((os) => platform.includes(os)) || DEFAULT_OS
+const detectPlatform = (navigator: Navigator): string | undefined => {
+  const ua = navigator.userAgent.toLowerCase().replace(/^mozilla\/\d\.\d\W/, '')
+  const mobiles: Record<string, RegExp> = {
+    iphone: /iphone/,
+    ipad: /ipad|macintosh/,
+    android: /android/,
+  }
+  const desktops: Record<string, RegExp> = {
+    windows: /win/,
+    macos: /macintosh/,
+    linux: /linux/,
+  }
+  // Determine the operating system
+  const mobileOS = Object.keys(mobiles).find(
+    (os) => mobiles[os].test(ua) && navigator.maxTouchPoints >= 1,
+  )
+  const desktopOS = Object.keys(desktops).find((os) => desktops[os].test(ua))
+  const os = mobileOS || desktopOS
+  return os
 }

getLatestRelease.ts

@@ -1,39 +1,77 @@
-import axios from 'axios'
-import { URL_RELEASE_BASE } from './constants'
-import { getBrowserOs } from '@/getBrowserOs'
+import { GITHUB_RELEASE_URL } from './constants'
 
-type Release = {
-  platform: String
-  releaseUrl: String
-  downloadName: String
+export type Release = {
+  platform: string
+  releaseUrl: string
+  downloadName: string | null
 }
 
-export async function getLatestRelease(navigator: any): Promise<Release> {
-  return await axios.get(URL_RELEASE_BASE).then(async (result: any) => {
-    const os = await getBrowserOs(navigator).toLowerCase()
-    const macRelease = await result.data.assets.find((asset: any) => {
-      return asset.browser_download_url.includes('myWitWallet.dmg')
-    })
-    const linuxRelease = await result.data.assets.find((asset: any) =>
-      asset.browser_download_url.includes('linux.tar.gz')
-    )
+export type LatestReleaseResponse = {
+  assets: Array<ReleaseAsset>
+}
+
+export type ReleaseAsset = {
+  browser_download_url: string
+  name: string | null
+}
+
+export function getStoreRelease({ os }: { os: string }): Release | undefined {
+  const iosLink = {
+    platform: 'iOS',
+    releaseUrl: 'https://apps.apple.com/cl/app/mywitwallet/id6449979271',
+    downloadName: null,
+  }
+  const storeReleases: Record<string, Release> = {
+    iphone: iosLink,
+    ipad: iosLink,
+    android: {
+      platform: 'Android',
+      releaseUrl:
+        'https://play.google.com/store/apps/details?id=io.witnet.myWitWallet&hl=es_419&pli=1',
+      downloadName: null,
+    },
+    windows: {
+      platform: 'Windows',
+      releaseUrl: 'https://apps.microsoft.com/detail/9PN09DKWPL57',
+      downloadName: null,
+    },
+  }
+  if (storeReleases[os]) {
+    return storeReleases[os]
+  }
+}
+
+export function getLatestRelease({
+  os,
+  data,
+}: {
+  os: string
+  data: LatestReleaseResponse | undefined
+}): Release | null {
+  if (data) {
+    const macRelease: ReleaseAsset = data.assets.find(
+      (asset: ReleaseAsset) => {
+        return asset.browser_download_url.includes('myWitWallet.dmg')
+      },
+    ) ?? { browser_download_url: GITHUB_RELEASE_URL, name: null }
+    const linuxRelease: ReleaseAsset = data.assets.find(
+      (asset: ReleaseAsset) =>
+        asset.browser_download_url.includes('linux.tar.gz'),
+    ) ?? { browser_download_url: GITHUB_RELEASE_URL, name: null }
+
     const release: Record<string, Release> = {
       linux: {
         platform: 'GNU / Linux',
         releaseUrl: linuxRelease.browser_download_url,
         downloadName: linuxRelease.name,
       },
-      win: {
-        platform: 'Windows',
-        releaseUrl: 'https://apps.microsoft.com/detail/9PN09DKWPL57',
-        downloadName: 'myWitWallet',
-      },
-      mac: {
+      macos: {
         platform: 'Mac OS',
         releaseUrl: macRelease.browser_download_url,
         downloadName: macRelease.name,
       },
     }
     return release[os]
-  })
+  }
+  return null
 }