Replace About page with about.polkaswap.io (#1470)

* Replace About page with about.polkaswap.io * fix icon-container css * Move About to the 1st menu * Remove About page translation strings * Update lokalise --------- Co-authored-by: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Co-authored-by: Nikita-Polyakov <polyakov@soramitsu.co.jp>
sora-xor · Jul 18, 2024 · f194fad · f194fad
1 parent 3778080
commit f194fad
Show file tree

Hide file tree

Showing 62 changed files with 19 additions and 1,487 deletions.
diff --git a/public/about/dark/about02-1.png b/public/about/dark/about02-1.png
diff --git a/public/about/dark/about02-2.png b/public/about/dark/about02-2.png
diff --git a/public/about/dark/about02x.png b/public/about/dark/about02x.png
diff --git a/public/about/dark/about03-1.png b/public/about/dark/about03-1.png
diff --git a/public/about/dark/about03-2.png b/public/about/dark/about03-2.png
diff --git a/public/about/dark/about03x.png b/public/about/dark/about03x.png
diff --git a/public/about/dark/about04-1.png b/public/about/dark/about04-1.png
diff --git a/public/about/dark/about04-2.png b/public/about/dark/about04-2.png
diff --git a/public/about/dark/about04x.png b/public/about/dark/about04x.png
diff --git a/public/about/dark/about05-1.png b/public/about/dark/about05-1.png
diff --git a/public/about/dark/about05x.png b/public/about/dark/about05x.png
diff --git a/public/about/dark/about07-1.png b/public/about/dark/about07-1.png
diff --git a/public/about/dark/about07-2.png b/public/about/dark/about07-2.png
diff --git a/public/about/dark/about07-3.png b/public/about/dark/about07-3.png
diff --git a/public/about/dark/about08.png b/public/about/dark/about08.png
diff --git a/public/about/light/about02-1.png b/public/about/light/about02-1.png
diff --git a/public/about/light/about02-2.png b/public/about/light/about02-2.png
diff --git a/public/about/light/about02x.png b/public/about/light/about02x.png
diff --git a/public/about/light/about03-1.png b/public/about/light/about03-1.png
diff --git a/public/about/light/about03-2.png b/public/about/light/about03-2.png
diff --git a/public/about/light/about03x.png b/public/about/light/about03x.png
diff --git a/public/about/light/about04-1.png b/public/about/light/about04-1.png
diff --git a/public/about/light/about04-2.png b/public/about/light/about04-2.png
diff --git a/public/about/light/about04x.png b/public/about/light/about04x.png
diff --git a/public/about/light/about05-1.png b/public/about/light/about05-1.png
diff --git a/public/about/light/about05x.png b/public/about/light/about05x.png
diff --git a/public/about/light/about07-1.png b/public/about/light/about07-1.png
diff --git a/public/about/light/about07-2.png b/public/about/light/about07-2.png
diff --git a/public/about/light/about07-3.png b/public/about/light/about07-3.png
diff --git a/public/about/light/about08.png b/public/about/light/about08.png
diff --git a/public/about/shared/about06.png b/public/about/shared/about06.png
diff --git a/public/about/dark/hero.png → public/asset-owner/dark-hero.png b/public/about/dark/hero.png → public/asset-owner/dark-hero.png
diff --git a/public/about/light/hero.png → public/asset-owner/light-hero.png b/public/about/light/hero.png → public/asset-owner/light-hero.png
diff --git a/src/App.vue b/src/App.vue
@@ -5,13 +5,12 @@
       <app-menu
         :visible="menuVisibility"
         :on-select="goTo"
-        :is-about-page-opened="isAboutPage"
         @open-product-dialog="openProductDialog"
         @click.native="handleAppMenuClick"
       >
         <app-logo-button slot="head" class="app-logo--menu" :theme="libraryTheme" @click="goToSwap" />
       </app-menu>
-      <div class="app-body" :class="{ 'app-body__about': isAboutPage }">
+      <div class="app-body">
         <s-scrollbar class="app-body-scrollbar" v-loading="pageLoading">
           <div class="app-content">
             <router-view :parent-loading="loading || !nodeIsConnected" />
@@ -281,10 +280,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return getMobileCssClasses();
   }
 
-  get isAboutPage(): boolean {
-    return this.$route.name === PageNames.About;
-  }
-
   get dsProviderClasses(): string[] | BreakpointClass {
     return this.mobileCssClasses?.length ? [...this.mobileCssClasses, this.responsiveClass] : this.responsiveClass;
   }
@@ -624,9 +619,6 @@ i.icon-divider {
     flex: 1;
     flex-flow: column nowrap;
     max-width: 100%;
-    &__about {
-      overflow: hidden;
-    }
   }
 
   &-content {

diff --git a/src/components/App/Menu/AppMenu.vue b/src/components/App/Menu/AppMenu.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    :class="[
-      'app-menu',
-      { visible, collapsed, 'app-menu__about': isAboutPageOpened, 'app-menu__loading': pageLoading },
-    ]"
-  >
+  <div :class="['app-menu', { visible, collapsed, 'app-menu__loading': pageLoading }]">
     <s-button
       class="collapse-button"
       id="collapse-button"
@@ -49,6 +44,18 @@
                 />
               </s-menu-item>
             </s-menu-item-group>
+            <s-menu-item-group>
+              <app-sidebar-item-content
+                v-button
+                class="menu-item menu-item--bottom el-menu-item s-flex"
+                icon="finance-PSWAP-24"
+                href="https://about.polkaswap.io"
+                tag="a"
+                target="_blank"
+                rel="nofollow noopener"
+                :title="t('mainMenu.About')"
+              />
+            </s-menu-item-group>
           </s-menu>
 
           <s-menu
@@ -131,7 +138,6 @@ import AppSidebarItemContent from './SidebarItemContent.vue';
 })
 export default class AppMenu extends Mixins(TranslationMixin) {
   @Prop({ default: false, type: Boolean }) readonly visible!: boolean;
-  @Prop({ default: false, type: Boolean }) readonly isAboutPageOpened!: boolean;
   @Prop({ default: () => {}, type: Function }) readonly onSelect!: (item: any) => void;
 
   @state.settings.faucetUrl faucetUrl!: string;
@@ -196,7 +202,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   }
 
   get currentPath(): string {
-    const currentName = this.$route.name as any;
+    const currentName = this.$route.name as PageNames;
     if (PoolChildPages.includes(currentName)) {
       return PageNames.Pool;
     }
@@ -218,7 +224,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     if (isVaultPage(currentName)) {
       return VaultPageNames.Vaults;
     }
-    return currentName as string;
+    return currentName;
   }
 
   openProductDialog(product: string): void {

diff --git a/src/components/App/Menu/SidebarItemContent.vue b/src/components/App/Menu/SidebarItemContent.vue
@@ -52,6 +52,7 @@ $icon-size: 42px;
 
 .icon-container {
   display: flex;
+  flex-shrink: 0;
   padding-left: 1px; // because of inset shadow
   width: $icon-size;
   height: $icon-size;

diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -114,7 +114,6 @@ export const LiquiditySourceForMarketAlgorithm = {
 export const MarketAlgorithmForLiquiditySource = invert(LiquiditySourceForMarketAlgorithm);
 
 export enum PageNames {
-  About = 'About',
   Swap = 'Swap',
   Pool = 'Pool',
   Stats = 'Stats',
@@ -399,11 +398,6 @@ const OtherPagesMenu: Array<SidebarMenuItemLink> = [
     href: '/#/dashboard/owner',
     index: DashboardPageNames.AssetOwner,
   },
-  {
-    icon: 'finance-PSWAP-24',
-    title: PageNames.About,
-    href: '/#/about',
-  },
 ];
 
 export const SocialNetworkLinks: Array<SidebarMenuItemLink> = [

diff --git a/src/lang/cs.json b/src/lang/cs.json
@@ -396,7 +396,6 @@
         "Swap": "Swap",
         "Pool": "Pool",
         "Bridge": "@:bridgeText",
-        "About": "O projektu",
         "Stats": "Statistiky",
         "Wallet": "Peněženka",
         "AddLiquidity": "Přidat likviditu",
@@ -507,44 +506,6 @@
         "from": "Z",
         "to": "Na"
     },
-    "about": {
-        "title": "DEX pro interoperabilní budoucnost.",
-        "description": "Cross-chain obchodování aktiv, jednoduchá tvorba a zalistování nových aktiv a ty nejjednodušší swapy vůbec. Interoperabilní budoucnost {Polkadot} je tady a my jsme v jejím čele!",
-        "trading": {
-            "title": "Rychlejší obchodování",
-            "first": "{AppName} je non-custodial, cross-chain AMM DEX protokol pro swap tokenů založený na {Polkadot} a {Kusama} relay chainech, {Polkadot} a {Kusama} parachainech a blockchainech přímo připojených přes bridge.",
-            "second": "{AppName} odstraňuje zprostředkovatele a poskytuje možnost rychlejšího obchodování",
-            "third": "{AppName} je komunitní projekt a vývojáři spolupracují na otevřeném kódu s využitím"
-        },
-        "liquidity": {
-            "title": "Neomezená likvidita",
-            "first": "{AppName} kombinuje více zdrojů likvidity pod společným algoritmem agregace likvidity, který funguje zcela on-chain, trustless a decentralizovaně.",
-            "second": "Když tradeři zavolají swap funkci, algoritmus agregace likvidity vyplní příkazy pomocí nejlepších nabídek ze všech zdrojů likvidity. Zdroji likvidity mohou být jiné DEXy, order booky nebo jiné zdroje řízené API.",
-            "third": "Protože je {AppName} projekt s otevřeným zdrojovým kódem, kdokoli může přidat další zdroje likvidity tím, že přispěje do kódové základny {AppName}."
-        },
-        "swap": {
-            "title": "Swapujte jakýkoliv token",
-            "first": "Překročte hranice současných DEXů přidáním tokenů z ekosystému {Polkadot} i jiných blockchainů.",
-            "second": "Vytvářejte, zalistujte a obchodujte své vlastní tokeny v síti {Sora}.",
-            "third": "Naše základní infrastruktura využívá Parity Substrate, který je škálovatelnější než {Ethereum} a ke konsensu nepoužívá nákladnou těžbu."
-        },
-        "pswap": {
-            "title": "PSWAP tokeny",
-            "first": "PSWAP byl vytvořen skrze komunitní governance prostřednictvím hlasování o jeho vydání. Jedná se o utility a governance token, který slouží k odměňování poskytovatelů likvidity na {AppName}. Na rozdíl od většiny ostatních odměnových tokenů je PSWAP pálen při transakcích a jeho nabídka v průběhu času klesá.",
-            "second": "{percent}% poplatek za každý swap na {AppName} DEX se použije na zpětný odkup PSWAP tokenů, které se následně spálí. Zpočátku se 90 % spálených PSWAP tokenů znovu vytiskne a přiděluje poskytovatelům likvidity, ale postupem času se toto procento snižuje až na 35 % po 4 letech."
-        },
-        "links": {
-            "first": {
-                "title": "Staňte se {Sora} validátorem",
-                "desc": "Pomozte zabezpečit budoucnost sítě {Sora} a decentralizovaných aplikací, jako je {AppName}, a získejte odměny za to, že se stanete {Sora} validátorem."
-            },
-            "second": {
-                "title": "Připojte chain k síti {Sora}",
-                "desc": "Rozšiřte decentralizovanou světovou ekonomiku připojením dalších chainů k síti {Sora} a {AppName} pomocí protokolu {Hashi} bridge."
-            }
-        },
-        "network": "{AppName} je postaven na síti {Sora} a zaměřuje se na interoperabilitu pro připojení zbytku krypto ekosystému k {Polkadot}."
-    },
     "exchange": {
         "Swap": "Swap",
         "Pool": "Pool",

diff --git a/src/lang/de.json b/src/lang/de.json
@@ -396,7 +396,6 @@
         "Swap": "Tauschen",
         "Pool": "Pool",
         "Bridge": "@:bridgeText",
-        "About": "Über",
         "Stats": "Statistiken",
         "Wallet": "Wallet",
         "AddLiquidity": "Liquidität hinzufügen",
@@ -507,44 +506,6 @@
         "from": "Von",
         "to": "An"
     },
-    "about": {
-        "title": "Der DEX für die Interoperable Zukunft.",
-        "description": "Cross-Chain-Austausch von Assets, einfache Erstellung und Listung neuer Assets und die einfachsten Swaps aller Zeiten. Die interoperable Zukunft von {Polkadot} ist da und wir stehen an vorderster Front!",
-        "trading": {
-            "title": "Schnellerer Handel",
-            "first": "{AppName} ist ein nicht-custodial, cross-chain AMM DEX-Protokoll zum Austauschen von Token basierend auf {Polkadot} und {Kusama}-Relaychains, {Polkadot} und {Kusama}-Parachains und Blockchains, die direkt über Bridges verbunden sind.",
-            "second": "{AppName} entfernt die vertrauenswürdigen Vermittler und bietet die Möglichkeit für ein schnelleres Trading",
-            "third": "{AppName} ist ein Community-Projekt und Entwickler arbeiten am Open-Source-Code unter Verwendung der BSD 4-Klausel-Lizenz zusammen"
-        },
-        "liquidity": {
-            "title": "Unbegrenzte Liquidität",
-            "first": "{AppName} kombiniert mehrere Liquiditätsquellen unter einem gemeinsamen Liquiditätsaggregationsalgorithmus, der vollständig on-chain, trustless und dezentral arbeitet.",
-            "second": "Wenn Trader die Swap-Funktion aufrufen, wird der Liquiditätsaggregationsalgorithmus Aufträge mit den besten Angeboten aus allen Liquiditätsquellen ausführen. Liquiditätsquellen können andere DEXs, Orderbücher oder andere API-gesteuerte Quellen sein.",
-            "third": "Da {AppName} ein Open-Source-Projekt ist, kann jeder weitere Liquiditätsquellen hinzufügen, indem Beiträge zur {AppName}-Codebasis geleistet werden."
-        },
-        "swap": {
-            "title": "Beliebige Token tauschen",
-            "first": "Gehe über die Grenzen aktueller DEXs hinaus, indem du Token aus dem {Polkadot}-Ökosystem sowie anderen Blockchains hinzufügst.",
-            "second": "Erstelle, liste und handle deine eigenen Token im {Sora}-Netzwerk.",
-            "third": "Unsere Kerninfrastruktur verwendet Parity Substrate, das skalierbarer als {Ethereum} ist und kein teures Mining für den Konsens verwendet."
-        },
-        "pswap": {
-            "title": "PSWAP Token",
-            "first": "PSWAP wurde von der Community Governance erstellt, indem über seine Veröffentlichung abgestimmt wurde. Es ist ein Utility- und Governance-Token, der verwendet wird, um Liquiditätsanbieter auf {AppName} zu belohnen. Im Gegensatz zu den meisten anderen Belohnungstoken wird PSWAP mit Transaktionen verbrannt und das Angebot nimmt im Laufe der Zeit ab.",
-            "second": "Die {percent}% Gebühr für jeden Tausch auf der {AppName} DEX wird genutzt, um PSWAP-Token zurückzukaufen, die dann verbrannt werden. Zu Beginn werden 90% der verbrannten PSWAP-Token neu gemintet, um sie an die Liquiditätsanbieter zu verteilen, aber mit der Zeit verringert sich der Prozentsatz auf letztlich 35% nach 4 Jahren."
-        },
-        "links": {
-            "first": {
-                "title": "Werde ein {Sora} Validator",
-                "desc": "Sichere die Zukunft des {Sora} Netzwerks und dezentralisierter Apps wie {AppName} und verdiene dabei Belohnungen, indem du ein {Sora}-Validator wirst."
-            },
-            "second": {
-                "title": "Verbinde eine Chain mit {Sora}",
-                "desc": "Erweitere die dezentralisierte Weltwirtschaft, indem du mithilfe des {Hashi}-Bridge Protokolls weitere Chains mit {Sora} und {AppName} verbindest."
-            }
-        },
-        "network": "{AppName} baut auf dem {Sora}-Netzwerk auf und konzentriert sich auf Interoperabilität, um den Rest des Krypto-Ökosystems mit {Polkadot} zu verbinden."
-    },
     "exchange": {
         "Swap": "Swap",
         "Pool": "Pool",

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -396,7 +396,6 @@
         "Swap": "Swap",
         "Pool": "Pool",
         "Bridge": "@:bridgeText",
-        "About": "About",
         "Stats": "Statistics",
         "Wallet": "Wallet",
         "AddLiquidity": "Add Liquidity",
@@ -507,44 +506,6 @@
         "from": "From",
         "to": "To"
     },
-    "about": {
-        "title": "The DEX for the Interoperable Future.",
-        "description": "Cross-chain exchange of assets, simple creation and listing of new assets, and the easiest swaps ever. The interoperable future of {Polkadot} is here and we are at the forefront!",
-        "trading": {
-            "title": "Faster Trading",
-            "first": "{AppName} is a non-custodial, cross-chain AMM DEX protocol for swapping tokens based on {Polkadot} and {Kusama} relay chains, {Polkadot} and {Kusama} parachains, and blockchains directly connected via bridges.",
-            "second": "{AppName} removes trusted intermediaries and provides the opportunity for faster trading",
-            "third": "{AppName} is a community project and devs collaborate on the open source code using the"
-        },
-        "liquidity": {
-            "title": "Boundless Liquidity",
-            "first": "{AppName} combines multiple liquidity sources under a common liquidity aggregation algorithm, operating completely on-chain, in a trustless and decentralized way.",
-            "second": "When traders call the swap function, the liquidity aggregation algorithm will fill orders using the best offers across all liquidity sources. Liquidity sources can be other DEXs, order books, or other API-driven sources.",
-            "third": "Because {AppName} is an open-source project, anyone can add more liquidity sources by making contributions to the {AppName} codebase."
-        },
-        "swap": {
-            "title": "Swap Any Token",
-            "first": "Go beyond the limits of current DEXs by adding tokens from the {Polkadot} ecosystem as well as other blockchains.",
-            "second": "Create, list and trade your own tokens on the {Sora} network.",
-            "third": "Our core infrastructure uses Parity Substrate, which is more scalable than {Ethereum}, and does not use expensive mining for consensus."
-        },
-        "pswap": {
-            "title": "PSWAP Tokens",
-            "first": "PSWAP was created by community governance by voting on its release. It is a utility and governance token used to reward liquidity providers on {AppName}. Unlike most other reward tokens, PSWAP is burned with transactions and decreases in supply over time.",
-            "second": "The {percent}% fee for every swap on the {AppName} DEX is used to buy back PSWAP tokens, which are then burned. At first, 90% of burned PSWAP tokens are reminted to allocate to liquidity providers, but with time this percentage will decrease to 35% after 4 years."
-        },
-        "links": {
-            "first": {
-                "title": "Become a {Sora} Validator",
-                "desc": "Secure the future of the {Sora} network and decentralized apps like {AppName}, and earn rewards along the way by becoming a {Sora} validator."
-            },
-            "second": {
-                "title": "Connect a Chain to {Sora}",
-                "desc": "Grow the decentralized world economy by connecting more chains to {Sora} and {AppName} using the {Hashi} bridge protocol."
-            }
-        },
-        "network": "{AppName} is built on the {Sora} Network, focusing on interoperability to connect the rest of the crypto ecosystem to {Polkadot}."
-    },
     "exchange": {
         "Swap": "Swap",
         "Pool": "Pool",

diff --git a/src/lang/es.json b/src/lang/es.json
@@ -396,7 +396,6 @@
         "Swap": "Intercambio",
         "Pool": "Fondo común",
         "Bridge": "@:bridgeText",
-        "About": "Acerca de",
         "Stats": "Estadísticas",
         "Wallet": "Cartera",
         "AddLiquidity": "Añadir Liquidez",
@@ -507,44 +506,6 @@
         "from": "Desde",
         "to": "A"
     },
-    "about": {
-        "title": "El DEX para el futuro interoperable.",
-        "description": "Intercambio de Activos a través de Cadena cruzada, creación y listado sencillo de nuevos Activos y los intercambios más fáciles de la historia. ¡El futuro interoperable de {Polkadot} está aquí y nosotros estamos a la vanguardia!",
-        "trading": {
-            "title": "Comercio más rápido",
-            "first": "{AppName} es un protocolo AMM DEX no custodiado para el intercambio de tokens basado en las cadenas principales de {Polkadot} y {Kusama}, parachains de {Polkadot} y {Kusama}, y blockchains conectadas directamente a través de puentes.",
-            "second": "{AppName} elimina los intermediarios de confianza y ofrece la oportunidad de negociar más rápidamente",
-            "third": "{AppName} es un proyecto comunitario y los desarrolladores colaboran en el código de fuente abierta utilizando el"
-        },
-        "liquidity": {
-            "title": "Liquidez ilimitada",
-            "first": "{AppName} combina múltiples fuentes de liquidez bajo un algoritmo común de agregación de liquidez, operando completamente en cadena, de manera descentralizada y sin intermediarios.",
-            "second": "Cuando los traders llaman la función de intercambio, el algoritmo de agregación de liquidez completará las órdenes utilizando las mejores ofertas en todas las fuentes de liquidez. Las fuentes de liquidez pueden ser otros DEX, libros de ordenes u otras fuentes añadidas por API.",
-            "third": "Dado que {AppName} es un proyecto de código abierto, cualquiera puede añadir más fuentes de liquidez haciendo contribuciones al código base de {AppName}."
-        },
-        "swap": {
-            "title": "Intercambia cualquier token",
-            "first": "Vaya más allá de los límites de los DEX actuales agregando tokens del ecosistema {Polkadot}, así como de otras cadenas de bloques.",
-            "second": "Cree, enumere y opere con sus propios tokens en la red {Sora}.",
-            "third": "Nuestra infraestructura principal utiliza Parity Substrate, que es más escalable que {Ethereum}, y no utiliza la costosa minería para el consenso."
-        },
-        "pswap": {
-            "title": "Tokens PSWAP",
-            "first": "PSWAP fue creado por el gobierno de la comunidad mediante la votación de su lanzamiento. Es un token de utilidad y gobernanza utilizado para recompensar a los proveedores de liquidez en {AppName}. A diferencia de la mayoría de otros tokens de recompensa, PSWAP se quema con las transacciones y disminuye su oferta con el tiempo.",
-            "second": "El {percent}% de la comisión por cada intercambio en el DEX de {AppName} se utiliza para recomprar tokens PSWAP, que luego se queman. Al principio, el 90% de los tokens PSWAP quemados se reacuñan para asignarlos a los proveedores de liquidez, pero con el tiempo este porcentaje se reducirá al 35% después de 4 años."
-        },
-        "links": {
-            "first": {
-                "title": "Conviértase en Validador {Sora}",
-                "desc": "Asegura el futuro de la Red {Sora} y de las aplicaciones descentralizadas como {AppName}, y gana recompensas en el camino convirtiéndote en un validador de {Sora}."
-            },
-            "second": {
-                "title": "Conectar una cadena a {Sora}",
-                "desc": "Haga crecer la economía mundial descentralizada conectando más cadenas a {Sora} y {AppName} utilizando el protocolo del puente {Hashi}."
-            }
-        },
-        "network": "{AppName} está construido sobre la Red {Sora}, centrándose en la interoperabilidad para conectar el resto del ecosistema criptográfico a {Polkadot}."
-    },
     "exchange": {
         "Swap": "Intercambio",
         "Pool": "Fondo común",