Merge pull request #266 from arcana-network/dev

Mainnet release

src/components/app-configure/ConfigureSidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed, type Ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 import AppFallbackLogo from '@/assets/dapp-fallback.svg'
@@ -20,7 +20,7 @@ import VCard from '@/components/lib/VCard/VCard.vue'
 import VCardButton from '@/components/lib/VCardButton/VCardButton.vue'
 import VSeperator from '@/components/lib/VSeperator/VSeperator.vue'
 import VStack from '@/components/lib/VStack/VStack.vue'
-import { useAppsStore, type AppId } from '@/stores/apps.store'
+import { useAppsStore, type AppId, type AppConfig } from '@/stores/apps.store'
 import { useAppId } from '@/use/getAppId'
 import type { ConfigureTab, ConfigureTabType } from '@/utils/constants'
 
@@ -30,7 +30,7 @@ const showAppsList = ref(false)
 const router = useRouter()
 const route = useRoute()
 const emit = defineEmits(['switch-tab', 'switch-app'])
-const apps = ref([])
+const apps: Ref<AppConfig[]> = ref([])
 
 const socialLinks = [
  {
@@ -79,6 +79,11 @@ const ConfigureTabs = computed(() => {
  icon: socialMediaIcon,
  },
 
+ {
+ type: 'chainManagement',
+ label: 'Chain Management',
+ icon: ChainIcon,
+ },
  {
  type: 'arcanaWallet',
  label: 'Arcana Wallet',
@@ -90,14 +95,6 @@ const ConfigureTabs = computed(() => {
  const configurePageIndex = configureTabsCopy.findIndex(
  (tab) => tab.type === 'configure'
  )
- 
- if (props.currentNetwork !== 'mainnet') {
- configureTabsCopy[configurePageIndex]?.subMenu?.push({
- type: 'chainManagement',
- label: 'Chain Management',
- icon: ChainIcon,
- })
- }
 
  if (props.currentNetwork === 'mainnet') {
  configureTabsCopy[configurePageIndex]?.subMenu?.push({
@@ -106,7 +103,6 @@ const ConfigureTabs = computed(() => {
  icon: KeyspaceIcon,
  })
  }
- 
  return configureTabsCopy
 })
 

src/components/app-configure/auth/SocialAuth.vue

@@ -36,7 +36,7 @@ const socialAuth = socialLogins.map((login) => {
 const socialAuthRef = reactive(socialAuth)
 
 function isAuthValid(auth: typeof socialAuth[0]) {
- if (auth.hasClientSecret) {
+ if (auth.hasClientSecret && auth.verifier !== 'steam') {
  if (!auth.clientId?.length && auth.clientSecret?.length) {
  auth.error = 'Client Id is required'
  return false
@@ -87,6 +87,11 @@ async function handleSave() {
  const { auth } = app
  const social = socialAuthRef
  .map((authRef) => {
+ if (
+ authRef.verifier === 'steam' &&
+ selectedCredentialInput.value === 'steam'
+ )
+ authRef.clientId = app.address
  const { verifier, clientId, clientSecret } = authRef
  return { verifier, clientId, clientSecret }
  })
@@ -130,6 +135,10 @@ function isAuthActive(verifier: SocialAuthVerifier) {
 function showCognitoNote() {
  return ['aws', 'google'].includes(selectedCredentialInput.value)
 }
+
+function showSteamNote() {
+ return ['steam'].includes(selectedCredentialInput.value)
+}
 </script>
 
 <template>
@@ -142,13 +151,16 @@ function showCognitoNote() {
  <a :href="`${DOCS_URL}/howto/config_social/index.html`" target="_blank">
  READ MORE
  </a>
- <br v-if="showCognitoNote()" />
- <br v-if="showCognitoNote()" />
- <span v-if="showCognitoNote()"
- ><strong>Note:</strong> If you enable Cognito as one of the multiple
+ <p v-if="showCognitoNote()" class="mt-3">
+ <strong>Note:</strong> If you enable Cognito as one of the multiple
  onboarding options then you can directly configure Google login
  through Cognito itself instead of using Arcana Dashboard.
- </span>
+ </p>
+ <p v-if="showSteamNote()" class="mt-3">
+ <strong>Note:</strong> When you are a Steam member, and have already
+ spent more than 5.00 USD in the store you should be able to request
+ your Steam API Key.
+ </p>
  </template>
  <form @submit.prevent="handleSave">
  <div class="social-auth-creds__container">
@@ -191,7 +203,10 @@ function showCognitoNote() {
  gap="1rem"
  class="social-auth-input-field__container"
  >
- <VStack class="social-auth-input__wrapper">
+ <VStack
+ v-if="auth.verifier !== 'steam'"
+ class="social-auth-input__wrapper"
+ >
  <div class="flex justify-between space-x-2">
  <p class="input-label">Client ID</p>
  <a
@@ -215,13 +230,16 @@ function showCognitoNote() {
  class="social-auth-input__wrapper"
  >
  <div class="flex justify-between space-x-2">
- <p class="input-label">
- {{
- isAWSSelected()
- ? 'Cognito User Pool Domain'
- : 'Client Secret'
- }}
+ <p v-if="isAWSSelected()" class="input-label">
+ Cognito User Pool Domain
+ </p>
+ <p
+ v-else-if="auth.verifier === 'steam'"
+ class="input-label"
+ >
+ Steam API Key
  </p>
+ <p v-else class="input-label">Client Secret</p>
  <a
  class="input-doc-link"
  :href="
@@ -231,12 +249,13 @@ function showCognitoNote() {
  "
  target="_blank"
  >
- Get your
- {{
- auth.verifier === 'aws'
- ? 'User Pool Domain'
- : 'Client Secret'
- }}
+ <span v-if="isAWSSelected()"
+ >Get your User Pool Domain</span
+ >
+ <span v-else-if="auth.verifier === 'steam'"
+ >Get your Steam API key</span
+ >
+ <span v-else>Get your Client Secret</span>
  </a>
  </div>
  <VTextField
@@ -246,6 +265,8 @@ function showCognitoNote() {
  :placeholder="
  isAWSSelected()
  ? 'Enter the domain without https://'
+ : auth.verifier === 'steam'
+ ? 'Steam API Key'
  : 'Client Secret'
  "
  @keyup.delete="handleInputDelete(auth, 'clientSecret')"
@@ -306,7 +327,6 @@ function showCognitoNote() {
 .logo-img {
  box-sizing: border-box;
  width: 38px;
- height: 38px;
  padding: 4px;
 }
 

src/components/app-configure/chain-management/AppChainManagementForm.vue

@@ -45,8 +45,8 @@ const enableSave = computed(() => {
  chainType.length &&
  currency.length &&
  name.length &&
- isValidUrl(explorerURL) &&
- isValidUrl(rpcURL)
+ isValidUrl(explorerURL.trim()) &&
+ isValidUrl(rpcURL.trim())
  )
 })
 
@@ -125,7 +125,7 @@ async function onSave(formData: object) {
  </p>
  <input
  v-else
- v-model="formData.name"
+ v-model.trim="formData.name"
  type="text"
  class="text-sm bg-[#313131] p-[10px] w-full border-none outline-none"
  name="network-name"
@@ -136,7 +136,7 @@ async function onSave(formData: object) {
  >RPC URL</label
  >
  <input
- v-model="formData.rpcURL"
+ v-model.trim="formData.rpcURL"
  type="text"
  class="text-sm bg-[#313131] p-[10px] w-full border-none outline-none"
  name="rpc-url"
@@ -162,7 +162,7 @@ async function onSave(formData: object) {
  </p>
  <input
  v-else
- v-model="formData.chainId"
+ v-model.trim="formData.chainId"
  type="text"
  class="text-sm bg-[#313131] p-[10px] w-full border-none outline-none"
  name="chain-id"
@@ -182,7 +182,7 @@ async function onSave(formData: object) {
  </p>
  <input
  v-else
- v-model="formData.currency"
+ v-model.trim="formData.currency"
  type="text"
  class="text-sm bg-[#313131] p-[10px] w-full border-none outline-none"
  name="currency"
@@ -198,7 +198,7 @@ async function onSave(formData: object) {
  </p>
  <input
  v-else
- v-model="formData.explorerURL"
+ v-model.trim="formData.explorerURL"
  type="text"
  class="text-sm bg-[#313131] p-[10px] w-full border-none outline-none"
  name="explorer"

src/components/app-configure/chain-management/AppChainManagementList.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
+import { useRoute } from 'vue-router'
 
 import ChainFallbackLogo from '@/assets/chain-fallback-logo.png'
 import MoreIcon from '@/assets/iconography/more.svg'
 import VSwitch from '@/components/lib/VSwitch/VSwitch.vue'
 import { useToast } from '@/components/lib/VToast'
 import { getChainLogo } from '@/services/gateway.service'
+import { useAppsStore } from '@/stores/apps.store'
 import { useChainManagementStore } from '@/stores/chainManagement.store'
 import { useClickOutside } from '@/use/clickOutside'
 
@@ -21,6 +23,10 @@ const { areChainsEmpty, filteredChains } = toRefs(chainManagementStore)
 const showRowOptionsOf = ref(null)
 const showRowOptions_menu = ref(null)
 const toast = useToast()
+const route = useRoute()
+const appStore = useAppsStore()
+const appId = route.params.appId
+const app = appStore.app(appId)
 
 const rowOptions = [
  {
@@ -101,7 +107,7 @@ function onChainLogoError(e) {
  >
  <td>
  <img
- :src="getChainLogo(chain.chain_id)"
+ :src="getChainLogo(chain.chain_id, app.network)"
  alt="chain logo"
  class="w-8"
  @error="onChainLogoError"

src/pages/AppChainManagement.vue

@@ -127,7 +127,6 @@ async function toggleChainStatus(chainData: object) {
  const app = appStore.app(appId)
  try {
  showLoader('Please wait')
- const appId = route.params.appId
  await chainManagementStore.toggleAppChainStatus(
  appId,
  chainData,

src/pages/AppDetails.vue

@@ -148,14 +148,18 @@ function toggleMobileMenu() {
  showNotifications.value = false
 }
 
-async function createMainnetApp(app: AppConfig): Promise<AppResponse> {
+async function createMainnetApp(
+ app: AppConfig,
+ shouldCopyTestnetConfig: boolean
+): Promise<AppResponse> {
  try {
  const mainnetApp = (
  await createApp(
  {
  name: app.name,
  region: RegionMapping[selectedRegion.value.value],
  default_chain: chainManagementStore.defaultChainId,
+ chains: shouldCopyTestnetConfig ? chainManagementStore.appChains : [],
  },
  'mainnet'
  )
@@ -177,7 +181,10 @@ async function handleCreateMainnetApp({
  const testnetAppId = Number(route.params.appId)
  const testnetApp = appsStore.app(testnetAppId)
 
- const mainnetApp = await createMainnetApp(testnetApp)
+ const mainnetApp = await createMainnetApp(
+ testnetApp,
+ shouldCopyTestnetConfig
+ )
  const mainnetAppConfig = createAppConfig(mainnetApp, 'mainnet')
 
  appsStore.addApp(mainnetApp?.ID, mainnetAppConfig, 'mainnet')

src/services/gateway.service.ts

@@ -81,6 +81,7 @@ type CreateAppRequestBody = {
  region: number
  chain: number
  default_chain: number
+ chains?: []
 }
 
 type CreateAppResponse = {
@@ -114,6 +115,7 @@ function createApp(
  region: config.region,
  chain: config.chain,
  default_chain: config.default_chain,
+ chains: config.chains,
  }
  return getGatewayInstance(network).post(
  `${getEnvApi('v2')}/app/`,
@@ -507,8 +509,8 @@ function getAllChains(network: Network) {
  return getGatewayInstance(network).get(`${getEnvApi()}/chain/0/all/`)
 }
 
-function getChainLogo(chainId: string) {
- return `${api.gateway[ApiNetwork]}${getEnvApi()}/chain/logo/${chainId}/`
+function getChainLogo(chainId: string, network: Network) {
+ return `${api.gateway[network]}${getEnvApi()}/chain/logo/${chainId}/`
 }
 
 function addChain(appId: string, data: object, network: Network) {

src/utils/constants.ts

@@ -12,6 +12,7 @@ import InvoiceIcon from '@/assets/iconography/invoices.svg'
 import PassportIcon from '@/assets/iconography/passport.svg'
 import ScheduleIcon from '@/assets/iconography/schedule.svg'
 import settingsIcon from '@/assets/iconography/settings.svg'
+import SteamIcon from '@/assets/iconography/steam-sso.svg'
 import socialMediaIcon from '@/assets/iconography/user.svg'
 import walletIcon from '@/assets/iconography/wallet.svg'
 import TwitchIcon from '@/assets/twitch-sso.svg'
@@ -172,6 +173,7 @@ type SocialAuthVerifier =
  | 'github'
  | 'discord'
  | 'aws'
+ | 'steam'
 
 type SocialAuthVerifierLabel =
  | 'Google'
@@ -181,6 +183,7 @@ type SocialAuthVerifierLabel =
  | 'GitHub'
  | 'Discord'
  | 'Cognito'
+ | 'Steam'
 
 type SocialAuthOption = {
  name: SocialAuthVerifierLabel
@@ -238,6 +241,13 @@ const socialLogins: readonly SocialAuthOption[] = [
  hasClientSecret: true,
  documentation: 'https://developer.twitter.com/en/docs/apps/overview',
  },
+ // {
+ // name: 'Steam',
+ // verifier: 'steam',
+ // icon: SteamIcon,
+ // hasClientSecret: true,
+ // documentation: 'https://steamcommunity.com/dev/apikey',
+ // },
 ]
 
 enum ChainMapping {