Merge branch 'main' into tx-internal-filters-and-search

data/apps.ts

@@ -4,6 +4,7 @@ import { APP_CATEGORIES } from 'ui/apps/constants';
 
 export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
   {
+    author: 'xDaichain',
     id: 'easy-staking',
     title: 'Easy Staking',
     logo: 'https://www.fillmurray.com/144/144',
@@ -18,6 +19,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'curve',
     title: 'Curve',
     logo: 'https://www.fillmurray.com/144/144',
@@ -33,6 +35,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'honwyswap',
     title: 'HonwySwap',
     logo: 'https://www.fillmurray.com/144/144',
@@ -48,6 +51,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'sushi',
     title: 'Sushi',
     logo: 'https://www.fillmurray.com/144/144',
@@ -61,6 +65,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'bao-finance',
     title: 'Bao Finance',
     logo: 'https://www.fillmurray.com/144/144',
@@ -74,6 +79,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'component',
     title: 'Component',
     logo: 'https://www.fillmurray.com/144/144',
@@ -89,6 +95,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'pooltogether',
     title: 'PoolTogether',
     logo: 'https://www.fillmurray.com/144/144',
@@ -102,6 +109,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'swapr',
     title: 'Swapr',
     logo: 'https://www.fillmurray.com/144/144',
@@ -115,6 +123,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'levinswap',
     title: 'Levinswap',
     logo: 'https://www.fillmurray.com/144/144',
@@ -129,6 +138,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'omen',
     title: 'Omen',
     logo: 'https://www.fillmurray.com/144/144',
@@ -142,6 +152,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'nifty-ink',
     title: 'Nifty Ink',
     logo: 'https://www.fillmurray.com/144/144',
@@ -155,6 +166,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'treasure-chess',
     title: 'Treasure Chess',
     logo: 'https://www.fillmurray.com/144/144',
@@ -168,6 +180,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'unique-one',
     title: 'Unique.One',
     logo: 'https://www.fillmurray.com/144/144',
@@ -183,6 +196,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'cold-truth-culture',
     title: 'Cold Truth Culture',
     logo: 'https://www.fillmurray.com/144/144',
@@ -196,6 +210,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'xdai-bridge',
     title: 'xDai Bridge',
     logo: 'https://www.fillmurray.com/144/144',
@@ -209,6 +224,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'omni-bridge',
     title: 'OmniBridge',
     logo: 'https://www.fillmurray.com/144/144',
@@ -222,6 +238,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'gnosis-safe',
     title: 'Gnosis Safe',
     logo: 'https://www.fillmurray.com/144/144',
@@ -235,6 +252,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'multisender',
     title: 'Multisender',
     logo: 'https://www.fillmurray.com/144/144',
@@ -250,6 +268,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'disperse',
     title: 'Disperse',
     logo: 'https://www.fillmurray.com/144/144',
@@ -263,6 +282,7 @@ export const TEMPORARY_DEMO_APPS: Array<AppItemOverview> = [
     github: 'https://github.com/mikhin',
   },
   {
+    author: 'xDaichain',
     id: 'symmetric',
     title: 'Symmetric',
     logo: 'https://www.fillmurray.com/144/144',

icons/empty_search_result.svg

 <svg viewBox="0 0 240 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M82.667 4H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM56 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H56Zm122.667 4H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM152 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H152ZM56 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V56a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V56Zm34.667 44H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V104a4 4 0 0 0-4-4ZM56 96a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V104a8 8 0 0 0-8-8H56Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V152a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V152ZM178.667 52H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V56a4 4 0 0 0-4-4ZM152 48a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8H152Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H152a4 4 0 0 1-4-4V104a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H152a8 8 0 0 1-8-8V104Zm34.667 44H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V152a4 4 0 0 0-4-4ZM152 144a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8H152ZM8 28h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V32Zm104-4h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V32Zm130.667-4H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V32a4 4 0 0 0-4-4ZM200 24a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8H200Zm-96 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V80Zm34.667 44H104a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM104 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H104Zm96-44h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H200a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H200a8 8 0 0 1-8-8V80Zm34.667 44H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM200 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H200ZM8 76h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V80Zm34.667 44H8a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM8 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H8Z" fill="url(#empty_svg__a)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M82.667 4H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM56 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H56Zm122.667 4H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4ZM152 0a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H152ZM56 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V56a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V56Zm34.667 44H56a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V104a4 4 0 0 0-4-4ZM56 96a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V104a8 8 0 0 0-8-8H56Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4V152a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H56a8 8 0 0 1-8-8V152ZM178.667 52H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V56a4 4 0 0 0-4-4ZM152 48a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8H152Zm0 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H152a4 4 0 0 1-4-4V104a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H152a8 8 0 0 1-8-8V104Zm34.667 44H152a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V152a4 4 0 0 0-4-4ZM152 144a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8H152ZM8 28h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V32Zm104-4h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V32Zm130.667-4H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V32a4 4 0 0 0-4-4ZM200 24a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V32a8 8 0 0 0-8-8H200Zm-96 52h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H104a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H104a8 8 0 0 1-8-8V80Zm34.667 44H104a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM104 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H104Zm96-44h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H200a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H200a8 8 0 0 1-8-8V80Zm34.667 44H200a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM200 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H200ZM8 76h26.667a4 4 0 0 1 4 4v26.667a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V80a4 4 0 0 1 4-4Zm-8 4a8 8 0 0 1 8-8h26.667a8 8 0 0 1 8 8v26.667a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V80Zm34.667 44H8a4 4 0 0 0-4 4v26.667a4 4 0 0 0 4 4h26.667a4 4 0 0 0 4-4V128a4 4 0 0 0-4-4ZM8 120a8 8 0 0 0-8 8v26.667a8 8 0 0 0 8 8h26.667a8 8 0 0 0 8-8V128a8 8 0 0 0-8-8H8Z" fill="url(#empty_search_result_svg__a)"/>
   <path d="m135.337 94.376 11.182 11.242-3.694 3.715-11.18-11.245a23.31 23.31 0 0 1-14.666 5.17c-12.971 0-23.498-10.586-23.498-23.629C93.48 66.586 104.008 56 116.979 56c12.971 0 23.499 10.586 23.499 23.629a23.614 23.614 0 0 1-5.141 14.747Zm-5.238-1.948a18.372 18.372 0 0 0 5.157-12.799c0-10.155-8.18-18.378-18.277-18.378-10.099 0-18.276 8.223-18.276 18.378 0 10.153 8.177 18.378 18.276 18.378a18.166 18.166 0 0 0 12.729-5.185l.391-.394Z" fill="#A0AEC0"/>
   <defs>
-    <radialGradient id="empty_svg__a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(103.716 25.035 85.404) scale(58.3301 137.703)">
+    <radialGradient id="empty_search_result_svg__a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(103.716 25.035 85.404) scale(58.3301 137.703)">
       <stop offset=".081" stop-color="#CBD5E0" stop-opacity="0"/>
       <stop offset=".563" stop-color="#CBD5E0" stop-opacity=".54"/>
       <stop offset="1" stop-color="#CBD5E0" stop-opacity="0"/>

icons/star_outline.svg

+<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.76 17.333a.604.604 0 0 1-.294-.075l.293.075Zm.004 0a.625.625 0 0 0 .477-.234.671.671 0 0 0 .14-.538l-.853-5.21 3.615-3.689a.69.69 0 0 0 .16-.677.663.663 0 0 0-.194-.301.617.617 0 0 0-.316-.149l-4.884-.743a.208.208 0 0 1-.157-.117l-2.186-4.64a.65.65 0 0 0-.233-.269.61.61 0 0 0-.666 0 .65.65 0 0 0-.232.269l-2.186 4.64a.208.208 0 0 1-.158.117l-4.884.743a.618.618 0 0 0-.316.149.663.663 0 0 0-.193.3.69.69 0 0 0 .16.678l3.54 3.614a.208.208 0 0 1 .058.18l-.837 5.105a.69.69 0 0 0 .038.36.657.657 0 0 0 .213.286.613.613 0 0 0 .663.05L8.9 14.854a.208.208 0 0 1 .2 0l4.366 2.405m-7.795-2.915c-.028.172.154.3.307.216L8.9 12.95a.208.208 0 0 1 .2 0l2.923 1.61a.208.208 0 0 0 .306-.216l-.566-3.452a.208.208 0 0 1 .057-.18l2.486-2.536a.208.208 0 0 0-.118-.351l-3.408-.519a.208.208 0 0 1-.157-.117L9.189 4.145a.208.208 0 0 0-.377 0L7.378 7.19a.208.208 0 0 1-.158.117l-3.408.519a.208.208 0 0 0-.117.351l2.485 2.537a.208.208 0 0 1 .057.18l-.566 3.45Zm8.093 2.99h-.003.003Z" fill="#4A5568"/>
+</svg>

theme/components/Tag.ts

@@ -23,6 +23,7 @@ const sizes = {
       minH: 6,
       minW: 6,
       fontSize: 'sm',
+      lineHeight: 'sm',
       px: 2,
       py: '2px',
     },

theme/foundations/breakpoints.ts

 const breakpoints = {
 // maybe we need them in future
-//   sm: '320px',
-//   md: '768px',
+  sm: '414px',
+  //   md: '768px',
   lg: '1000px',
   xl: '1440px',
   // these breakpoint are needed just to make others work

types/client/apps.ts

@@ -12,10 +12,11 @@ export type AppItemPreview = {
 }
 
 export type AppItemOverview = AppItemPreview & {
+  author: string;
   url: string;
   description: string;
-  site: string;
-  twitter: string;
-  telegram: string;
-  github: string;
+  site?: string;
+  twitter?: string;
+  telegram?: string;
+  github?: string;
 }

ui/apps/AppList.tsx

 import { Grid, GridItem, VisuallyHidden, Heading } from '@chakra-ui/react';
 import React from 'react';
 
-import type { AppItemOverview } from 'types/client/apps';
+import type { AppItemPreview } from 'types/client/apps';
 
 import { apos } from 'lib/html-entities';
 import AppCard from 'ui/apps/AppCard';
 import EmptySearchResult from 'ui/apps/EmptySearchResult';
 
 type Props = {
-  apps: Array<AppItemOverview>;
+  apps: Array<AppItemPreview>;
 }
 
 const AppList = ({ apps }: Props) => {

ui/apps/AppModal.tsx

+import { LinkIcon, StarIcon } from '@chakra-ui/icons';
+import {
+  Box, Button, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody,
+  ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text,
+} from '@chakra-ui/react';
+import type { FunctionComponent } from 'react';
+import React, { useCallback } from 'react';
+
+import type { AppCategory, AppItemOverview } from 'types/client/apps';
+
+import { TEMPORARY_DEMO_APPS } from 'data/apps';
+import ghIcon from 'icons/social/git.svg';
+import tgIcon from 'icons/social/telega.svg';
+import twIcon from 'icons/social/tweet.svg';
+import starOutlineIcon from 'icons/star_outline.svg';
+import { nbsp } from 'lib/html-entities';
+
+type Props = {
+  id: string | null;
+  onClose: () => void;
+}
+
+const AppModal = ({
+  id,
+  onClose,
+}: Props) => {
+  const handleFavorite = useCallback(() => {
+    // TODO: implement
+  }, []);
+
+  if (!id) {
+    return null;
+  }
+
+  const {
+    title,
+    author,
+    description,
+    url,
+    site,
+    github,
+    telegram,
+    twitter,
+    logo,
+    categories,
+  } = TEMPORARY_DEMO_APPS.find(app => app.id === id) as AppItemOverview;
+
+  const isFavorite = false;
+
+  const socialLinks = [
+    Boolean(telegram) && {
+      icon: tgIcon,
+      url: telegram,
+    },
+    Boolean(twitter) && {
+      icon: twIcon,
+      url: twitter,
+    },
+    Boolean(github) && {
+      icon: ghIcon,
+      url: github,
+    },
+  ].filter(Boolean) as Array<{ icon: FunctionComponent; url: string }>;
+
+  return (
+    <Modal
+      isOpen={ Boolean(id) }
+      onClose={ onClose }
+      size={{ base: 'full', lg: 'md' }}
+      isCentered
+    >
+      <ModalOverlay/>
+
+      <ModalContent>
+        <ModalHeader
+          display="grid"
+          gridTemplateColumns={{ base: 'auto 1fr' }}
+          paddingRight={{ sm: 12 }}
+        >
+          <Box
+            w={{ base: '72px', sm: '144px' }}
+            h={{ base: '72px', sm: '144px' }}
+            marginRight={{ base: 6, sm: 8 }}
+            gridRow={{ base: '1 / 3', sm: '1 / 4' }}
+          >
+            <Image
+              src={ logo }
+              alt={ `${ title } app icon` }
+            />
+          </Box>
+
+          <Heading
+            as="h2"
+            gridColumn={ 2 }
+            fontSize={{ base: '2xl', sm: '3xl' }}
+            fontWeight="medium"
+            lineHeight={ 1 }
+            color="blue.600"
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
+          >
+            { title }
+          </Heading>
+
+          <Text
+            variant="secondary"
+            gridColumn={ 2 }
+            fontSize="sm"
+            fontWeight="normal"
+            lineHeight={ 1 }
+          >
+            By{ nbsp }{ author }
+          </Text>
+
+          <Box
+            gridColumn={{ base: '1 / 3', sm: 2 }}
+            marginTop={{ base: 6, sm: 0 }}
+          >
+            <Box display="flex">
+              <Button
+                href={ url }
+                as="a"
+                size="sm"
+                marginRight={ 2 }
+                width={{ base: '100%', sm: 'auto' }}
+              >
+                Launch app
+              </Button>
+
+              <IconButton
+                aria-label="Mark as favorite"
+                title="Mark as favorite"
+                variant="outline"
+                colorScheme="gray"
+                w={ 9 }
+                h={ 8 }
+                onClick={ handleFavorite }
+                icon={ isFavorite ?
+                  <Icon as={ StarIcon } w={ 4 } h={ 4 } color="yellow.400"/> :
+                  <Icon as={ starOutlineIcon } w={ 4 } h={ 4 }/> }
+              />
+            </Box>
+          </Box>
+        </ModalHeader>
+
+        <ModalCloseButton/>
+
+        <ModalBody>
+          <Heading
+            as="h3"
+            fontSize="2xl"
+            marginBottom={ 4 }
+          >
+            Overview
+          </Heading>
+
+          <Box marginBottom={ 2 }>
+            { categories.map((category: AppCategory) => (
+              <Tag
+                colorScheme="blue"
+                marginRight={ 2 }
+                marginBottom={ 2 }
+                key={ category.id }
+              >
+                { category.name }
+              </Tag>
+            )) }
+          </Box>
+
+          <Text>{ description }</Text>
+        </ModalBody>
+
+        <ModalFooter
+          display="flex"
+          flexDirection={{ base: 'column', sm: 'row' }}
+          alignItems={{ base: 'flex-start', sm: 'center' }}
+        >
+          { site && (
+            <Link
+              isExternal
+              href={ site }
+              display="flex"
+              alignItems="center"
+              paddingRight={{ sm: 2 }}
+              marginBottom={{ base: 3, sm: 0 }}
+              maxW="100%"
+              overflow="hidden"
+            >
+              <Icon
+                as={ LinkIcon }
+                display="inline"
+                verticalAlign="baseline"
+                boxSize={ 3 }
+                marginRight={ 2 }
+              />
+
+              <Text
+                color="inherit"
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              >
+                { site }
+              </Text>
+            </Link>
+          ) }
+
+          { socialLinks.length && (
+            <List
+              marginLeft={{ sm: 'auto' }}
+              display="grid"
+              gridAutoFlow="column"
+              columnGap={ 2 }
+            >
+              { socialLinks.map(({ icon, url }) => (
+                <Link
+                  aria-label={ `Link to ${ url }` }
+                  title={ url }
+                  key={ url }
+                  href={ url }
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                  isExternal
+                  w={ 10 }
+                  h={ 10 }
+                >
+                  <Icon
+                    as={ icon }
+                    w="20px"
+                    h="20px"
+                    display="block"
+                  />
+                </Link>
+              )) }
+            </List>
+          ) }
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AppModal;

ui/blocks/navigation/NavLink.tsx

-import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react';
+import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -28,36 +28,37 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px }: Props) => {
   })();
 
   return (
-    <NextLink href={ url } passHref>
-      <Link
-        as="li"
-        listStyleType="none"
-        w={ width }
-        px={ px || (isCollapsed ? '15px' : 3) }
-        py={ 2.5 }
-        color={ isActive ? colors.text.active : colors.text.default }
-        bgColor={ isActive ? colors.bg.active : colors.bg.default }
-        _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="base"
-        whiteSpace="nowrap"
-        { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
-      >
-        <Tooltip
-          label={ text }
-          hasArrow={ false }
-          isDisabled={ !isCollapsed }
-          placement="right"
-          variant="nav"
-          gutter={ 15 }
-          color={ isActive ? colors.text.active : colors.text.hover }
+    <Box as="li" listStyleType="none" w="100%">
+      <NextLink href={ url } passHref>
+        <Link
+          w={ width }
+          px={ px || (isCollapsed ? '15px' : 3) }
+          py={ 2.5 }
+          display="flex"
+          color={ isActive ? colors.text.active : colors.text.default }
+          bgColor={ isActive ? colors.bg.active : colors.bg.default }
+          _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
+          borderRadius="base"
+          whiteSpace="nowrap"
+          { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
         >
-          <HStack spacing={ 3 }>
-            <Icon as={ icon } boxSize="30px"/>
-            { !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> }
-          </HStack>
-        </Tooltip>
-      </Link>
-    </NextLink>
+          <Tooltip
+            label={ text }
+            hasArrow={ false }
+            isDisabled={ !isCollapsed }
+            placement="right"
+            variant="nav"
+            gutter={ 15 }
+            color={ isActive ? colors.text.active : colors.text.hover }
+          >
+            <HStack spacing={ 3 }>
+              <Icon as={ icon } boxSize="30px"/>
+              { !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> }
+            </HStack>
+          </Tooltip>
+        </Link>
+      </NextLink>
+    </Box>
   );
 };
 

ui/pages/Apps.tsx

 import debounce from 'lodash/debounce';
 import React, { useCallback, useState } from 'react';
 
+import type { AppItemOverview } from 'types/client/apps';
+
 import { TEMPORARY_DEMO_APPS } from 'data/apps';
 import AppList from 'ui/apps/AppList';
 import FilterInput from 'ui/shared/FilterInput';
+import AppModal from 'ui/apps/AppModal';
 
 const defaultDisplayedApps = [ ...TEMPORARY_DEMO_APPS ]
   .sort((a, b) => a.title.localeCompare(b.title));
 
 const Apps = () => {
-  const [ displayedApps, setDisplayedApps ] = useState(defaultDisplayedApps);
+  const [ displayedApps, setDisplayedApps ] = useState<Array<AppItemOverview>>(defaultDisplayedApps);
+  const [ displayedAppId, setDisplayedAppId ] = useState<string | null>('component');
 
   const filterApps = (q: string) => {
     const apps = displayedApps
@@ -21,10 +25,16 @@ const Apps = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debounceFilterApps = useCallback(debounce(q => filterApps(q), 500), []);
 
+  const clearDisplayedAppId = useCallback(() => setDisplayedAppId(null), []);
+
   return (
     <>
       <FilterInput onChange={ debounceFilterApps } marginBottom={{ base: '4', lg: '6' }} placeholder="Find app"/>
       <AppList apps={ displayedApps }/>
+      <AppModal
+        id={ displayedAppId }
+        onClose={ clearDisplayedAppId }
+      />
     </>
   );
 };