Minidapp Prototype

__minidapp/Home/title-bar.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import useAndroidShowTitleBar from "../hooks/use-android"
+
+const TitleBar = () => {
+  const { openTitleBar, isMinimaBrowser } = useAndroidShowTitleBar()
+
+  const goHome = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    window.location.assign("/")
+  }
+
+  if (!isMinimaBrowser) {
+    return null
+  }
+
+  return (
+    <div
+      id="title-bar"
+      className="py-4 flex items-center  text-white border-b border-gray-100 dark:border-gray-900 dark:bg-black"
+      onClick={openTitleBar}
+    >
+      <div className=" w-full">
+        <div className="flex  -ml-2">
+          <div onClick={goHome}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+              width="73px"
+              height="24px"
+              fill="none"
+              viewBox="0 0 512 512"
+            >
+              <path fill="url(#pattern0_10_2)" d="M0 0H512V512H0z"></path>
+              <defs>
+                <pattern
+                  id="pattern0_10_2"
+                  width="1"
+                  height="1"
+                  patternContentUnits="objectBoundingBox"
+                >
+                  <use transform="scale(.00195)" xlinkHref="#image0_10_2"></use>
+                </pattern>
+                <image
+                  id="image0_10_2"
+                  width="512"
+                  height="512"
+                  xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAAsSAAALEgHS3X78AAAeeUlEQVR4nO3dzY+d1Z0n8GNmVj3dhtlQlFSVMItWS9hSGA2JsLMAMQjsFWSihuxwxEuvJhCa7JrE4Nl12mB6FV6EPZpFAE2AlQtEIrOIHSVpxUg2rVb3aCDlbqtWg50/wKPf9b3OdVHlqlv37Zzn9/lIyFIWqec+z3nO+T7nddeVK1dKVy0sLt9SSrmz/98tQ//eXkr5amd/OACj+LyU8lkp5YtSytmhf8+uXVz9oqt3slMBYGFx+d5Syr1Djb5GHoBxfD4IA6WUU2sXV0915W42HQAWFpfjS/7hfqP/UAWXBED3vR9hoJTy3trF1c9a/bXNBYChRv9QKeVrFVwSAHl9Uko53mIYaCYALCwuH+o3+vdUcDkAsN7HEQbWLq4eb+HOVB0A+l/70eg/U0q5uYJLAoCtXCqlvNwPA9X2ClQZAPoN/+FSymMVXA4A7NSJaM9qDAJVBQANPwAdVV0QqCIA9NfrR8P/9NwvBgCm51g/CMx9f4G5B4D+5L6XjfEDkETMEXhm3pMF5xYAFhaX7+w3/Gb1A5DRx/0gcHYev/2mefzRhcXl6O7/ncYfgMSiDfxdv02cuZn2APQn+R3X8APAdaI34NAsJwnOrAdgYXH54f5eyhp/ALhetI1n+23lTMwkACwsLsdY/7sm+gHApqKNfLffZk7dVIcA+sv7jjuoBwBG8n5/SGBqywWnFgD6jf8pB/YAwI7EQUP3TisETGUIoL/E7zONPwDsWLShn/Xb1ImbeADoX+gp4/0AMLZoS09NIwRMNABo/AFg4qYSAiYWADT+ADA1Ew8BEwkAGn8AmLqJhoCxVwH0Z/t/pvEHgJmIw4RuH3d1wFg9AENL/TT+ADAbg56AW8b5a+MOARy31A8AZu5r/TZ4x3YcAPpbFdrhDwDm46Fxtg3e0RyA/mEF73rgADB331q7uPreqBcxcgDoH+l71rg/AFQhJgXeOepRwjsZAjiu8QeAaty8k/kAIwWAhcXlw87zB4Dq3NNvo7dt20MA/Y0HfueZA0C1/vPaxdWz27m4UXoAdjzTEACYiW231dsKAAuLy4d0/QNA9e7pt9lb2nIIwFa/ANCUbW0VvJ0egMMafwBoxs39tvuGbtgD0F/z/389cwBozn+60d4AW/UAjLSkAACoxg3b8E17AHz9A0DzNu0FuFEPgK9/AGjbpm35hj0Avv4BoDM27AXYrAdgW2sIAYDqbdimb9YD8IWlfwDQCZfWLq7esv6HfKkHoL+DkMYfALrh5o12B9xoCED3PwB0y5fa9uuGAEz+A4DOum4y4PoegIc9dwDopOva+PUBQPc/AHTTdW38tSEA3f8A0HnXhgGGewB0/wNAt11r64cDwL0eOgB02rW2fjgAPOSZA0CnXWvrewFgYXHZ1z8AJDBo8wc9AAIAAORwXQC400MHgBR6bb4AAAC59Nr8XbfethQnBP0/Dx8A0viPN/n6B4B07hQAACCfXgC4xYMHgFRu0QMAAPnoAQCAhHo9ALd78gCQyu0RAL7qmQNAKl+9yfMGgHwEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIT+vYfehrWLq9lvwbZ969uPlNOnzzRytbTCO7h93sE26AEAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAABISAAAgIQEAAAm6k//5E/c0AYIAABb2L9/n1s0ggv/+m/NXGtmAgAAE/XpP/6jG9oAAQAAEhIAACAhAQAAEhIAACAhAYDO+aYZ20yYMkUXCQAAkJAA0IjLl/+Q/RZs2/LyUiNXSiuUqe1TV7VDAGjEufPns9+CbVteXm7kSmmFMrV96qp2CAB0zld8rTFhyhRdJADQOUtLKmsmS5miiwSARqyurma/BSPZu2dPQ1dLzZSl0air2iEANGJ19UL2WzCSvXvvaOhqqZmyNBp1VTsEADrJVxuToizRVQJAI86dM7N2FHv2qrSZDGVpNOqqdggAjbh0+XL2WzCS/fvubuhqqZmyNBp1VTsEgEaYWDM6XbeMSxkanbqqHQJAI0ysGd1++7czJmVodOqqdggADblwwYs1Cge4MC5laDTqqLYIAA35vWQ9kgMHHmjoaqmRMjQadVRbBICGGFsb3cEDD7Z2yVRC2RmdOqotAkBDjK2N7uBBlTg7o+yMTh3VFgGgIb88fSb7LRjZwQMHGrtiaqHsjE4d1RYBoCGXL1lfO6rdu/9MVy4jizITZYfRqKPaIgA0xDnbO6Mrl1EpMzujjmqLANCY8+c/zX4LRhZduTfv3t3YVTMvUVZ0/49O3dQeAaAxEvboesMAvujYpigruv9Hp25qjwDQmHPnpOydeOrJJ9q7aOZCWdkZdVN7BIDGSNk7s2fPHfZ1Z0tRRqKsMDp1U3sEgMactsxmx5566vFGr5xZUUZ2Tt3UHgGgQSbb7Myjj/xlWV5eavHSmYEoG1FGGJ06qU0CQIN0te3cD557ttVLZ8qUjZ1TJ7VJAGiQrrad0wvARnz9j0ed1CYBoEFm247Hlx7rKRPjUSe1adetty1dyX4TWvTP//SptcpjuOsb+xxcQk98/f/2175gd+ry5T+UP/8LKydapAegUbrcxuOLjwFlYTzqonYJAI1y6tZ4Yrx3//59Lf8EJiDKgLH/8aiL2iUANErqHt//ePFw6z+BMSkD41MXtUsAaFQsu7lwwRj2OGLHN9u+5hXP3q5/44k6yBLAdgkADdP1Nr4Y/7UsMJ945sb+x6cOapsA0DBdb+OLlRSvHHup9Z/BiOKZW0UzPnVQ2wSAhp08+UH2WzAR+/fdbSggkXjW8cwZnzqobQJAwy5dvlxOn/lV9tswEdEd7LTA7otnrOt/MqLuiTqIdgkAjZPAJ+PqUMDRLvwUbiCesa7/yVD3tE8AaNzJlZXst2BiYka4ENBd8WzN+p8cdU/7BIDGxXa2juKcnNgU5juP2hima+KZ2vBncqLOsZV2+wSADvjpW+9kvwUTdezlo+YDdEg8yyMvvpD9NkyUOqcbBIAO0BU3ee/+7B37A3RAPMN4lsb9J0ud0w0CQAcYBpi8aDBOvPlGuXn37q79tDTi2cUz1PhPlu7/7hAAOkKX3OTFhLH4ehQC2hPPLJ6dSX+Tp67pDgGgI3TJTUc0IEeOODCmNfHMNP7Toa7pDgGgI6JLbmXlw+y3YSpi9rjlge2IZ2XG/3REHaP7vzsEgA6RzKdHCGiDxn+61DHdsuvW25auZL8JXfLP//SpSU9T9Nbb75Tnnz9sC9TKxJh/dPtr/Kfn8uU/lD//C8MqXaIHoGPeeuvt7LdgqqKBMTGwLoMJfxr/6VK3dI8A0DE/ee317Ldg6garA+wTMH+Ddf4m/E2fuqV7BICOiQk6TgicvmhwfvHRh3YMnKO49/EMNP7TF3WKyX/dIwB0kK662Yi5Fj//aMXZAXMQ9zzuvfkus6FO6SaTADvqH35zpiwt6aKelZgc+L2nnTM/C2b6z9aFCxfKf/n6vkw/OQ09AB1lt67ZigbpFx99YEhgiq52+X+g8Z8xdUl36QHoqJgZ/dvf/EoX6YzFUqm//fHR8qoJUxP11JNPlB8896zyPGNRnu/6+t2WvXaUHoCOihfWuN3sRQN15MUfWSUwIYNZ/nFPNf6zF3WIxr+79AB0WFSev/31mey3YW70BozHV//83fWNfWb/d5gegA6LFzcmpzEfg96AGLfev98kqu2KexX3zFf/fEXdofHvNj0AHacXoB5RoUaPgEp1Y1FW44vfJL86+PrvPj0AHacXoB7RsEUYi2Vs5gf8UdyLuCdxbzT+dfD1n4MegAT0AtQpe4+AL/56+frPQQ9AAnoB6jTcI5Bp/4D4rb746+XrPw89AEnoBajf+fOf9lYMnDz5QeeWXsW+FAcPPtib2W/v/rr5+s9DAEjEFqptiOWDJ1dWekHg5MoHTf+Wgwce7DX8Bw8cMKO/Aba0zkUASCR6AeL0NBVxO1oMAxr9NkVZu+/+B3z9JyIAJBOTrp776+9nvw3NWln5sPzy9Jly+vSZcu78+Sp+Rozpx9r9b+7fVw4ceKCCK2Infvx3L/UmpZKHAJCMMwK6Jc5pP3/ufC8MnDv36dRDQTT2e/fe0ft3z949Zf++u/Pd9A6y539OAkBCcZb6sZcl/a6K41t/v3qhrK6uXuvOjV6DUXyzv3NhDBstLy+XrywvOV66w55+5lmn/iUkACQVW62ajQ3E6pP77n8w/X3IyD4ASf3NDw9nvwWAuiA1ASCpmERmcyDILeqA0yMOD9EdhgASMyEQ8jLxDz0AicWLb9kP5BTvvsY/Nz0AlHd/9o7lXJBILB/91n+zK2h2AgDOCYBk7PdPMQRA6Z8WGLuAAd0X77rGn6IHgGH2BoBus+afYXoAuMYpYNBt3nGGCQBcE/vIP//DF9wQ6KB4t2s5QIo6GALgS6wKgG4x65+NCAB8iQ2CoDts+MNmDAHwJVFRfO/p77sx0AHxLmv82YgAwIZOrnxQXnvtDTcHGhbvcLzLsBFDANyQpYHQJkv+2IoeAG7ose8+3htDBNoR72y8u3AjAgA3FDuGmQ8AbYl31m5/bOXf/Yc/3X3YXeJG/uVf/k/ZtWtX2b9/n/sElYutfk/8z//lMbElcwDYthNvvlEOHHjADYNKrax8qOufbRMA2LbYHyA2CTIpEOoTk/5isx9L/tguAYCRxNHBv/joQ5sEQUVi0t999z9g3J+RmATYiPj6rkFUMPGVYWUA1CHexXgna2n8o66qpb7ixgSARvzguXpO8bp6aNCPKrgSIN7Fmg75ibpqz949FVwJWxEAGvHkk49XNQv/p2+9U55+xtGiME/xDsa7WIuoo6Kuog0CQEP+/tjRqrrWouJ56+16Kh/IJN69mhr/qJuijqIdAkBDlpaWypEjdW3b8L2nnxUCYMbinYt3ryZRN0UdRTsEgMY8+shfloMH6trfWwiA2amx8Y86Keom2iIANOiVYy9VN8s2KqRYhwxMT7xjtTX+URdFnUR7BIAGxRr848frO6o3liIJATAdg41+ahN1kX1B2iQANGr/vrurWhoYYgcyIQAmr9Zd/p568oleXUSbBICGPffX3y9799S13lYIgMmqtfGPuufIi/YDaZkA0LgTx1+vbj6AEACTUWvjH3VO1D20TQBoXCy7qXECjhAA46n5cJ+ocyz5a58A0AFxRG9t8wFKPwTcd/+DlgjCiOKdiXenxsY/6hrHgneDANARMR+gpq2Ch9knALavxnX+A1HHRF1DNwgAHXLizTd6x/XWSAiArdXc+EfdEnUM3SEAdEisxY0XtNajOKNic4AQbCzejVob/96kvzet9+8aAaBj9uy5o7rzAoYNThGMM8yBq+f513aq33pRp0TdQrcIAB0Ue3LXOClwICq6mN0sBJBdvAPxLtTc+EddYp//bhIAOiom6nzn0Xpf2nPnz5f77n/AMkHSirJ/19fv7r0LtYo6xKS/7hIAOuzYy0er2ylw2Orqhd7Xj8mBZBNlvtY1/gNRd0QdQncJAB337s/eqToERAUYE5+e/+ELFVwNTF+U9SjztTf+UXfQbQJAx8Ws3VeOHa12ZcDAq6+9Xr717UfMC6CzeuP9336kV9ZrdvV436Nm/CcgACQQs3cjzdceAk6fPmNeAJ0UZTrKdpTxmkUdEXWFGf85CABJxAsd53bXLuYFxBaor71mwxG6IcpylOko27WLPf41/nkIAInEud3RtdeCv/nh4XLou08YEqBZUXajDEdZbkHUDfb4z0UASCbW87YSAk6ufNBbJnX6zK8quBrYviizUXajDLcg6gRr/fMRABJqKQQMjhWOmdN6A6hdlNEoq7Uv8Rum8c9LAEiq9t0C14uZ071JVHoDqFSUzSijtc/yH2aXv9wEgMRq3y1wvcHGQXoDqMnwV38LE/0G7PKHAJBc7PTVUggoegOoSItf/aXf+NvlDwGAJkPAoDfAyYLMw+AEv9a++ovGnyECAD1RIbQ0J2AgTlGL2dbOE2BWoqxFmav5BL/NxDuu8WdAAOCaGA9sZXXAsMF5ArHNqmEBpiXKVpSx2vfx30y828b8GSYAcJ2WlgiuF9usDoYFLlxoq1uWekVZGnT3176V72Ys9WMjAgBf0nIIKP1hgfv+64Plx3/3kvkB7FiUnShDUZZa7O4f0PizGQGADUWF0cIBQpuJLtq//fFR8wPYkcE4f5ShFrv7y9DBPhp/NiMAsKk4O6DlEFCG5gfc9Y19ggBb6jX839jX7Dj/wKDxj3cYNiMAcEODo4T37tnT9I2KpVqCAJsZbvhbW9a3XryrjvRlOwQAttSVEFAEAdbpUsNfNP6MSABgW3bv/rPy849WmtswaDPDQcBkwVwGk/u61PCX/gY/8Y7GuwrbsevW25auuFP1W7u4Ws01RuUZk6O6JMZMH330kfJXTz1elpaWOvXbuCqW8/3k1TfKW2+93fT4/kZig5+a1vj39uRodMlkJgJAI2oKAKXfdfr884c7V5GGgwceLE899YQJVB0RG/i8+urrzZzNP4oIrkeOHK5upr8A0AYBoBG1BYBw/vyn5bHvPt6ZLtT1lpeXyl89+USvZ0C3aluimz++9H/y2uudLp8n3nyjyvF+AaANAkAjagwApV/RRgjo+ssevQLfefSRcuDAAxVcDZtZWfmw/PSttzv5tT9s//59vca/1mAqALRBAGhErQFgoIvzAjYymCsQE67MtK5D9ETFTn1dHNvfSG3j/RsRANogADSi9gBQ+l9f33v6+ykq4dLvgj144IAwMAeDRv/kykpnu/jXi/D5yrGXmuiFEgDaIAA0ooUAUPozrR879EQ5d/58BVczO4Mw8M39+wwTTEkEzF+ePpOq0R+I9f0njr/ezAoVAaANAkAjWgkAA1mGBDYSX2oxRnvw4IO9QGBZ4c5EmOw1+Cc/6DUmWXqW1muhy389AaANAkAjWgsApb/86tChx9NW3APDvQMRDKwo2FhMKI1GI+tX/noRJI8ff6PJ5agCQBsEgEa0GABKv1KPeQFdn5U9iggEgzAQXbtZ5w/EOH4MFQ0a/ewN/rBYdRLj/a2GRQGgDQJAI1oNAANd3jhoEgZhYO/eO8ry8nLnNiGK3qDV1dVy7twfG32+rNaNfUYlALRBAGhE6wGg9Md0//vTz6oYtikCwe6bd/d6C6Jh2LN3T/nK8lK1cwri+f5+9UI5f+58L+hd/apf9WW/TREC//7Y0U7MGREA2iAANKILAWDgtdfe6E0Q1BuwczGMED0FEQz27r16SuPgfxvoBYgxu5BjCGd4Rcdwg36u39Br5McTzzAm+j355OMt/4zrCABtEAAa0aUAUPQGVCECQjTegtj8dOmrf5gA0AbHATMXUeG9+7/f7m1nGl9AzF582Wv85yPKfJT9eAcsE2VeBADmKjbN+e1vflWeevIJD4IUoqxHmbdhFPMmADB3MU595MUflXd/9k6vWxq6KMp2lPEo6/aCoAYCANWIpW8//2ilvHLsqGEBOuPqHv5He2W7a8s7aZsAQHViDbRhAbpg0N3f+rp+ukkAoEqDYYF/+M2Z3q5o0JIos1F2dfdTMwGAqsUM6eNvvt4bO40lU1CzKKNRVqPMmt1P7QQAmhBjp4Nlg7HhDdQkyuRgWZ9xflohANCU3rLBX5/pTaoSBJi3KINRFqNMWtZHawQAmtSbKCgIMCfDDb8JfrRKAKBpggCzpOGnSwQAOmEQBGICliDANMQYv4afLhEA6JSYgDV8Ih5MijF+ukYAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEBAAASEgAAICEdt1629IVDx4ActEDAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJCQAAkJAAAAAJRQD43IMHgFQ+jwDwmWcOAKl8FgHgC88cAFL5IgLAWc8cAFI5qwcAAPLRAwAACZ0VAAAgn7M3rV1c/cJSQABI4/No+wcbAekFAIAcem2+AAAAuVwXAE55+ACQQq/N33XlypXej11YXL7iuQNAt61dXN1V1h0G9L5nDgCddq2tHw4AhgEAoNuutfXDAeA9Dx0AOu1aW38tAKxdXI1TAT/x3AGgkz7pt/U9N637hcc9cwDopOva+PUBwDAAAHTTdW38dQGg3zXwsQcPAJ3y8XD3f9mgB6AYBgCAzvlS235tI6BhC4vLcUDQzZ4/ADTv0trF1VvW/4iNegDCy543AHTChm36ZgHAMAAAdMOGbfqGAaA/UeCEBw8ATTuxfvLfwGY9AOGwZw4ATdu0Ld80AOgFAICmbfr1X7boASh6AQCgWTdsw28YAPrJ4ZhnDwBNOXajr/+y2T4AwxYWl2Pt4Gf2BQCAJlwqpdy+dnH1ixtd7FZDAKX/f/CMZw4ATXhmq8a/bKcHYGBhcflUKeUezx4AqhV7/t+7nYvbsgdgiF4AAKjbttvqbQeAtYurZ0spL3jwAFClF/pt9bZsewhgwFAAAFRn213/A6MMAQwc6s8wBADm71K/bR7JyAGgv65w5D8EAEzFoa3W/G9kJz0AEQLes0EQAMzdsX6bPLKR5wAMW1hcjj/6kOcPADP3/trF1Yd3+kd31AMwJIYCPvHMAWCmPhl3OH6sHoBiq2AAmLVtbfW7lXF7AAZbBd9rZQAATF20tfeO2/iXSQSA8sdNgoQAAJieQeO/7c1+bmQiAaAIAQAwTRNt/MskA0ARAgBgGibe+JdJB4AiBADAJE2l8S/TCADljyHgdksEAWDHPunP9p9441+mFQDK9asD3p/W3wCAjnp/UrP9NzP2PgDbsbC4/HIp5emp/yEAaF9s77vtc/13aiYBoFwNAbFd4XEbBgHAhi71D/bZ0d7+o5raEMB6/R90Z5xZPKu/CQCNiLbxzlk1/mWWPQDDFhaXD5dSfjTzPwwA9Xlh7eLq4Vlf1VwCQLkaAqI3IOYG3DOXCwCA+Yqv/memNct/K3MLAAMLi8uH+kHA3AAAMrjUb/iPz/O3zmwOwGb6NyD2DDg272sBgCk71l/bP9fGv9TQAzBsYXE5gkCMgzxWzUUBwPhORPu2dnH1s1ruZVUBYEAQAKAjqmv4B6oMAAP9IBBzBJ4xRwCARlzqz207XmPDP1B1ABjWnyx4yKoBACr1cb/Rn/v4/nY0EwAG+r0CD/fDwNfquCoAkvqkv8vtezV/7W+kuQAwbCgMxKFDD9VzZQB0WBzUc6rFRn9Y0wFgvYXF5Xv7YeDO/n9fresKAWjM56WUs/3/Tq1dXD3VlQfYqQCw3sLi8i1DYeCWoX9vFw4A6ItGPr7k4+jdaOgH/56d5nG8c1VK+f9elrmtcGmugAAAAABJRU5ErkJggg=="
+                ></image>
+              </defs>
+            </svg>
+          </div>
+          <span className=" dark:text-white text-black">Docs</span>
+        </div>
+        <div className="col-span-6 flex items-center justify-end"></div>
+      </div>
+    </div>
+  )
+}
+
+export default TitleBar

__minidapp/Page/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+import { MDXProvider } from "@mdx-js/react"
+import { useLocation } from "react-router-dom"
+import {PropsWithChildren, useEffect} from "react"
+import { useMDXComponents } from "@/mdx-components"
+import { Link } from "react-router-dom";
+
+export default function Page() {
+  const { pathname, hash } = useLocation()
+
+  useEffect(() => {
+    if (hash) {
+      const elem = document.getElementById(hash.substring(1))
+
+      setTimeout(() => {
+        if (elem) {
+          elem.scrollIntoView()
+        }
+      }, 200)
+    }
+  }, [hash])
+
+  // we remove the starting slash
+  let correctedPathname = pathname.slice(1, pathname.length)
+
+  let MDX
+
+  try {
+    MDX = require(`../../content/${correctedPathname}.mdx`)
+  } catch {
+    if (!MDX) {
+      MDX = require(`../../content/${correctedPathname}/index.mdx`)
+    }
+  }
+
+  if (!MDX) {
+    return null
+  }
+
+  const components = useMDXComponents({})
+
+  return (
+    <div>
+      <MDXProvider>
+        <h1>{MDX.frontmatter.title}</h1>
+        <MDX.default
+          components={{
+            ...components,
+            a: (props: PropsWithChildren<{ href: string }>) => {
+              return (
+                  <Link {...props} to={props.href}>
+                    {props.children}
+                  </Link>
+              )
+            }
+          }}
+        />
+      </MDXProvider>
+    </div>
+  )
+}