Merge pull request #19 from wpdas/staging

Docs update: Alem beta 30

package.json

@@ -13,7 +13,7 @@
     "deploy:testnet": "npm run build; alem deploy --network testnet"
   },
   "dependencies": {
-    "alem": "1.0.0-beta.26"
+    "alem": "1.0.0-beta.30"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

src/assets/svgs/telegram-icon.module.tsx

@@ -1,5 +1,6 @@
-const TelegramIcon = () => (
+const TelegramIcon = (props: any) => (
   <svg
+    {...props}
     width="24px"
     height="24px"
     version="1.1"

src/md/Cli.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const Cli = () => {
-   const mdContent = Buffer.from(`IyBBbMOpbSBDTEkKCkFsw6ltIGhhcyBpdHMgb3duIGNvbW1hbmQgc3lzdGVtLiBUbyB1c2UgaXQsIGluc3RhbGwgQWzDqW0gZ2xvYmFsbHkuCgpgYGBzaAojIG5wbQpucG0gaW5zdGFsbCBhbGVtIC1nCmBgYAoKYGBgc2gKIyB5YXJuCnlhcm4gZ2xvYmFsIGFkZCBhbGVtCmBgYAoKIyMjIENvbW1hbmRzCgpgYGBiYXNoClVzYWdlOiBhbGVtIFtvcHRpb25zXSBbY29tbWFuZF0KCk9wdGlvbnM6CiAgLVYsIC0tdmVyc2lvbiAgIG91dHB1dCB0aGUgdmVyc2lvbiBudW1iZXIKICAtaCwgLS1oZWxwICAgICAgZGlzcGxheSBoZWxwIGZvciBjb21tYW5kCgpDb21tYW5kczoKICBkZXYgW29wdGlvbnNdICAgICAgICAgICAgICBSdW4gdGhlIGRldmVsb3BtZW50IHNlcnZlcgogIGJ1aWxkICAgICAgICAgICAgICAgICAgICAgIEJ1aWxkIHRoZSBwcm9qZWN0CiAgZGVwbG95IFtvcHRpb25zXSAgICAgICAgICAgRGVwbG95IHRoZSBwcm9qZWN0CiAgdXBsb2FkLW1ldGFkYXRhIFtvcHRpb25zXSAgVXBsb2FkIG1ldGFkYXRhIHRvIFNvY2lhbERCIChhcHAgbmFtZSwgZGVzY3JpcHRpb24sIGljb24sIHRhZ3MsIGV0YykKYGBgCgojIyMjIENvbW1hbmQ6IGBkZXZgCgpSdW4gdGhlIGRldmVsb3BtZW50IHNlcnZlciB3aXRoIHZhcmlvdXMgb3B0aW9uczoKCmBgYGJhc2gKVXNhZ2U6IGFsZW0gZGV2IFtvcHRpb25zXQoKT3B0aW9uczoKICAtbiwgLS1uZXR3b3JrIDxuZXR3b3JrPiAgTmV0d29yayB3aGVyZSB0aGUgYXBwIHdpbGwgYmUgcnVubmluZyAoZGVmYXVsdDogIm1haW5uZXQiKQogIC1wLCAtLXBvcnQgPHBvcnQ+ICAgICAgICBQb3J0IHRvIHJ1biB0aGUgc2VydmVyIG9uIChkZWZhdWx0OiA4MDgwKQogIC1uby1vcGVuICAgICAgICAgICAgICAgICBEaXNhYmxlIG9wZW5pbmcgdGhlIGJyb3dzZXIgKGRlZmF1bHQ6IGZhbHNlKQpgYGAKCiMjIyMgQ29tbWFuZDogYGJ1aWxkYAoKQnVpbGQgdGhlIHByb2plY3Q6CgpgYGBiYXNoClVzYWdlOiBhbGVtIGJ1aWxkCmBgYAoKVGhpcyB3aWxsIG91dHB1dCB2YWxpZCB3aWRnZXQgY29kZSB0byB0aGUgYC9idWlsZGAgZGlyZWN0b3J5LgoKIyMjIyBDb21tYW5kOiBgZGVwbG95YAoKRGVwbG95IHRoZSBwcm9qZWN0IHRvIE5lYXIgQk9TOgoKYGBgYmFzaApVc2FnZTogYWxlbSBkZXBsb3kgW29wdGlvbnNdCgpPcHRpb25zOgogIC1uLCAtLW5ldHdvcmsgPG5ldHdvcms+ICBOZXR3b3JrIHdoZXJlIHRoZSBhcHAgc2hvdWxkIGJlIGRlcGxveWVkIChkZWZhdWx0OiAibWFpbm5ldCIpCiAgLWgsIC0taGVscCAgICAgICAgICAgICAgIGRpc3BsYXkgaGVscCBmb3IgY29tbWFuZApgYGAKCiMjIyMgQ29tbWFuZDogYHVwbG9hZC1tZXRhZGF0YWAKClVwbG9hZCBtZXRhZGF0YSB0byBTb2NpYWxEQi4gVGhpcyBpcyBnb2luZyB0byB1c2UgdGhlIGRhdGEgcHJvdmlkZWQgYnkgYGFsZW0uY29uZmlnLmpzb25gIGZpbGUuIFRoZSBjb250ZW50IHJlcHJlc2VudHMgdGhlIGFwcCdzIGRldGFpbHMgbGlrZSBgbmFtZSwgZGVzY3JpcHRpb24sIGljb24sIHRhZ3MsIGV0Y2AuIFlvdSBjYW4gdXBkYXRlIHRoaXMgaW5mb3JtYXRpb24gbWFudWFsbHkgYnkgZ29pbmcgdG8gdGhlIHdpZGdldCBtZXRhZGF0YSB0YWIgdXNpbmcgdGhlIFtOZWFyIFNhbmRib3hdKGh0dHBzOi8vbmVhci5vcmcvc2FuZGJveCkuCgpgYGBiYXNoClVzYWdlOiBhbGVtIHVwbG9hZC1tZXRhZGF0YSBbb3B0aW9uc10KCk9wdGlvbnM6CiAgLW4sIC0tbmV0d29yayA8bmV0d29yaz4gIE5ldHdvcmsgd2hlcmUgdGhlIG1ldGFkYXRhIHNob3VsZCBiZSBkZXBsb3llZCAoZGVmYXVsdDogIm1haW5uZXQiKQogIC1oLCAtLWhlbHAgICAgICAgICAgICAgICBkaXNwbGF5IGhlbHAgZm9yIGNvbW1hbmQKYGBgCg==`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBBbMOpbSBDTEkKCkFsw6ltIGhhcyBpdHMgb3duIGNvbW1hbmQgc3lzdGVtLiBUbyB1c2UgaXQsIGluc3RhbGwgQWzDqW0gZ2xvYmFsbHkuCgpgYGBzaAojIG5wbQpucG0gaW5zdGFsbCBhbGVtIC1nCmBgYAoKYGBgc2gKIyB5YXJuCnlhcm4gZ2xvYmFsIGFkZCBhbGVtCmBgYAoKIyMjIENvbW1hbmRzCgpgYGBiYXNoClVzYWdlOiBhbGVtIFtvcHRpb25zXSBbY29tbWFuZF0KCk9wdGlvbnM6CiAgLVYsIC0tdmVyc2lvbiAgIG91dHB1dCB0aGUgdmVyc2lvbiBudW1iZXIKICAtaCwgLS1oZWxwICAgICAgZGlzcGxheSBoZWxwIGZvciBjb21tYW5kCgpDb21tYW5kczoKICBkZXYgW29wdGlvbnNdICAgICAgICAgICAgICBSdW4gdGhlIGRldmVsb3BtZW50IHNlcnZlcgogIGJ1aWxkICAgICAgICAgICAgICAgICAgICAgIEJ1aWxkIHRoZSBwcm9qZWN0CiAgZGVwbG95IFtvcHRpb25zXSAgICAgICAgICAgRGVwbG95IHRoZSBwcm9qZWN0CiAgdXBsb2FkLW1ldGFkYXRhIFtvcHRpb25zXSAgVXBsb2FkIG1ldGFkYXRhIHRvIFNvY2lhbERCIChhcHAgbmFtZSwgZGVzY3JpcHRpb24sIGljb24sIHRhZ3MsIGV0YykKYGBgCgojIyMjIENvbW1hbmQ6IGBkZXZgCgpSdW4gdGhlIGRldmVsb3BtZW50IHNlcnZlciB3aXRoIHZhcmlvdXMgb3B0aW9uczoKCmBgYGJhc2gKVXNhZ2U6IGFsZW0gZGV2IFtvcHRpb25zXQoKT3B0aW9uczoKICAtbiwgLS1uZXR3b3JrIDxuZXR3b3JrPiAgTmV0d29yayB3aGVyZSB0aGUgYXBwIHdpbGwgYmUgcnVubmluZyAoZGVmYXVsdDogIm1haW5uZXQiKQogIC1wLCAtLXBvcnQgPHBvcnQ+ICAgICAgICBQb3J0IHRvIHJ1biB0aGUgc2VydmVyIG9uIChkZWZhdWx0OiA4MDgwKQogIC1uby1vcGVuICAgICAgICAgICAgICAgICBEaXNhYmxlIG9wZW5pbmcgdGhlIGJyb3dzZXIgKGRlZmF1bHQ6IGZhbHNlKQpgYGAKCiMjIyMgQ29tbWFuZDogYGJ1aWxkYAoKQnVpbGQgdGhlIHByb2plY3Q6CgpgYGBiYXNoClVzYWdlOiBhbGVtIGJ1aWxkIFtvcHRpb25zXQoKQnVpbGQgdGhlIHByb2plY3QKCk9wdGlvbnM6CiAgLW4sIC0tbmV0d29yayA8bmV0d29yaz4gIE5ldHdvcmsgd2hlcmUgdGhlIGFwcCB3aWxsIGJlIHJ1bm5pbmcgKGRlZmF1bHQ6ICJtYWlubmV0IikKICAtaCwgLS1oZWxwICAgICAgICAgICAgICAgZGlzcGxheSBoZWxwIGZvciBjb21tYW5kCmBgYAoKVGhpcyB3aWxsIG91dHB1dCB2YWxpZCB3aWRnZXQgY29kZSB0byB0aGUgYC9idWlsZGAgZGlyZWN0b3J5LgoKIyMjIyBDb21tYW5kOiBgZGVwbG95YAoKRGVwbG95IHRoZSBwcm9qZWN0IHRvIE5lYXIgQk9TOgoKYGBgYmFzaApVc2FnZTogYWxlbSBkZXBsb3kgW29wdGlvbnNdCgpPcHRpb25zOgogIC1uLCAtLW5ldHdvcmsgPG5ldHdvcms+ICBOZXR3b3JrIHdoZXJlIHRoZSBhcHAgc2hvdWxkIGJlIGRlcGxveWVkIChkZWZhdWx0OiAibWFpbm5ldCIpCiAgLWgsIC0taGVscCAgICAgICAgICAgICAgIGRpc3BsYXkgaGVscCBmb3IgY29tbWFuZApgYGAKCiMjIyMgQ29tbWFuZDogYHVwbG9hZC1tZXRhZGF0YWAKClVwbG9hZCBtZXRhZGF0YSB0byBTb2NpYWxEQi4gVGhpcyBpcyBnb2luZyB0byB1c2UgdGhlIGRhdGEgcHJvdmlkZWQgYnkgYGFsZW0uY29uZmlnLmpzb25gIGZpbGUuIFRoZSBjb250ZW50IHJlcHJlc2VudHMgdGhlIGFwcCdzIGRldGFpbHMgbGlrZSBgbmFtZSwgZGVzY3JpcHRpb24sIGljb24sIHRhZ3MsIGV0Y2AuIFlvdSBjYW4gdXBkYXRlIHRoaXMgaW5mb3JtYXRpb24gbWFudWFsbHkgYnkgZ29pbmcgdG8gdGhlIHdpZGdldCBtZXRhZGF0YSB0YWIgdXNpbmcgdGhlIFtOZWFyIFNhbmRib3hdKGh0dHBzOi8vbmVhci5vcmcvc2FuZGJveCkuCgpgYGBiYXNoClVzYWdlOiBhbGVtIHVwbG9hZC1tZXRhZGF0YSBbb3B0aW9uc10KCk9wdGlvbnM6CiAgLW4sIC0tbmV0d29yayA8bmV0d29yaz4gIE5ldHdvcmsgd2hlcmUgdGhlIG1ldGFkYXRhIHNob3VsZCBiZSBkZXBsb3llZCAoZGVmYXVsdDogIm1haW5uZXQiKQogIC1oLCAtLWhlbHAgICAgICAgICAgICAgICBkaXNwbGF5IGhlbHAgZm9yIGNvbW1hbmQKYGBgCg==`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/ConfigFile.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const ConfigFile = () => {
-   const mdContent = Buffer.from(`IyBDb25maWcgRmlsZQoKQ3JlYXRlIGEgYGFsZW0uY29uZmlnLmpzb25gIGZpbGUgYXQgdGhlIHJvb3Qgb2YgdGhlIHByb2plY3Qgd2l0aCB0aGUgZm9sbG93aW5nIGNvbnRlbnQ6CgpgYGBqc29uCnsKICAvLyBUaGlzIGlzIHRoZSByb290IHBhdGggb2YgdGhlIGFwcC4KICAvLyBpZiB0cnVlOiBhbGVtLWxpYi5uZWFyL3dpZGdldC9JbmRleAogIC8vIGlmIGZhbHNlOiBhbGVtLWxpYi5uZWFyL3dpZGdldC9hbGVtLWRvY3MgKGl0J3MgZ29pbmcgdG8gdXNlIHRoZSBzbHVnaWZpZWQgIm5hbWUiKQogICJpc0luZGV4IjogdHJ1ZSwKICAvLyBUaGUgbWFpbm5ldCBhY2NvdW50IElEIHVuZGVyIHdoaWNoIHRoZSBhcHAgd2lsbCBiZSBkZXBsb3llZC4KICAibWFpbm5ldEFjY291bnQiOiAiYWxlbS1saWIubmVhciIsCiAgLy8gVGhlIHRlc3RuZXQgYWNjb3VudCBJRCB1bmRlciB3aGljaCB0aGUgYXBwIHdpbGwgYmUgZGVwbG95ZWQuCiAgInRlc3RuZXRBY2NvdW50IjogImFsZW0tbGliLnRlc3RuZXQiLAogIC8vIEFwcCBuYW1lCiAgIm5hbWUiOiAiQWxlbSBEb2NzIiwKICAvLyBBcHAgRGVzY3JpcHRpb24KICAiZGVzY3JpcHRpb24iOiAiQ3JlYXRlIHdlYjMgYXBwbGljYXRpb25zIGZvciBORUFSIEJPUyB3aXRoIGEgZm9jdXMgb24gcGVyZm9ybWFuY2Ugd2hpbGUgdXNpbmcgY29uY2VwdHMgdGhhdCBhcmUgYmFzZWQgb24gUmVhY3RKUy4iLAogIC8vIFNvY2lhbCBsaW5rcy4gQ2hlY2sgb3V0IE5FQVIgU29jaWFsIEJvcyBkb2NzIHRvIGdldCB0byBrbm93IHRoZSBvcHRpb25zCiAgLy8gaHR0cHM6Ly9kb2NzLm5lYXIub3JnL3NvY2lhbC9jb250cmFjdAogICJsaW5rdHJlZSI6IHsKICAgICJ3ZWJzaXRlIjogImdpdGh1Yi5jb20vd3BkYXMvYWxlbSIKICB9LAogICJpbWFnZSI6IHsKICAgICJpcGZzX2NpZCI6ICJiYWZrcmVpY2pkZ2F0NXhzdzd2eGJvc295eWdlcm1hd2hrZmkyYnkzb3ZnN2M2dHVtcmF5bjRyaW10eSIKICB9LAogIC8vIFRhZ3Mgb2YgdGhpcyBwcm9qZWN0CiAgInRhZ3MiOiBbInRoZSIsICJwcm9qZWN0IiwgInRhZ3MiLCAiaGVyZSJdCn0KYGBgCgojIFBhdGggQWxpYXNlcwoKWW91IGNhbiBvcHRpb25hbGx5IGNvbmZpZ3VyZSB5b3VyIGFwcGxpY2F0aW9uJ3MgcGF0aCBhbGlhc2VzIHNvIHRoYXQgaXQgd29ya3MgdG9nZXRoZXIgd2l0aCB0c2NvbmZpZy5qc29uLCBmb3IgZXhhbXBsZS4gQXNzdW1pbmcgeW91ciBwcm9qZWN0J3MgYHRzY29uZmlnLmpzb25gIGZpbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhdGlvbiBmb3IgcGF0aHM6CgpgYGBqc29uCnsKICAiY29tcGlsZXJPcHRpb25zIjogewogICAgLy8gLi4uCiAgICAiYmFzZVVybCI6ICIuIiwKICAgICJwYXRocyI6IHsKICAgICAgIkBhcHAvKiI6IFsic3JjLyoiXSwKICAgICAgIkBjb21wb25lbnRzLyoiOiBbInNyYy9jb21wb25lbnRzLyoiXQogICAgfQogIH0KfQpgYGAKCllvdSB3aWxsIHdhbnQgdG8gY29uZmlndXJlIHRoZSBzYW1lIGJlaGF2aW9yIHVzaW5nIHRoZSBgYWxlbS5jb25maWcuanNvbmAgZmlsZSBhcyBmb2xsb3dzOgoKYGBganNvbgp7CiAgLy8gLi4uCiAgImNvbXBpbGVyT3B0aW9ucyI6IHsKICAgICJiYXNlVXJsIjogIi4iLAogICAgInBhdGhzIjogewogICAgICAiQGFwcC8iOiAic3JjLyIsCiAgICAgICJAY29tcG9uZW50cy8iOiAic3JjL2NvbXBvbmVudHMvIgogICAgfQogIH0KfQpgYGAKCk5vdyBpbiBhbGwgb2YgeW91ciBzb3VyY2UgZmlsZXMsIHlvdSBjYW4gaW1wb3J0IGNvbXBvbmVudHMgbGlrZSB0aGlzOgoKYGBgdHN4Ci8vIFdpdGhvdXQgcGF0aCBhbGlhc2VzCmltcG9ydCBIZXJvIGZyb20gIi4uLy4uLy4uL2NvbXBvbmVudHMvSGVybyI7CmltcG9ydCBGb290ZXIgZnJvbSAiLi4vLi4vLi4vY29tcG9uZW50cy9Gb290ZXIiOwoKLy8gV2l0aCBwYXRoIGFsaWFzZXMKaW1wb3J0IEhlcm8gZnJvbSAiQGNvbXBvbmVudHMvSGVybyI7CmltcG9ydCBGb290ZXIgZnJvbSAiQGNvbXBvbmVudHMvRm9vdGVyIjsKYGBgCgojIE9wdGlvbnMKCkl0IGlzIHBvc3NpYmxlIHRvIGNvbmZpZ3VyZSBzb21lIGNvbXBpbGVyIGJlaGF2aW9ycyB1c2luZyB0aGUgb3B0aW9ucyBzZXNzaW9uLgoKIyMgS2VlcCBSb3V0ZQoKYGtlZXBSb3V0ZWAgaXMgb25seSB2YWxpZCBkdXJpbmcgZGV2ZWxvcG1lbnQsIGFuZCBpcyBhdXRvbWF0aWNhbGx5IGRpc2FibGVkIGluIHByb2R1Y3Rpb24uCgpUaGlzIHByb3BlcnR5IGRlZmluZXMgd2hldGhlciB0aGUgcm91dGUgc2hvdWxkIHJlbWFpbiB0aGUgc2FtZSBkdXJpbmcgcmVmcmVzaGVzLiBUaGlzIGlzIG9ubHkgdmFsaWQgaWYgdGhlIGBSb3V0ZXJgIHR5cGUgaXMgYCJDb250ZW50QmFzZWQiYC4KCkRlZmF1bHQgdmFsdWUgaXMgYGZhbHNlYC4KCmBgYGpzb24KewogIC8vIC4uLgogICJvcHRpb25zIjogewogICAgImtlZXBSb3V0ZSI6IHRydWUKICB9Cn0KYGBgCgojIyBIaWRlIEFsw6ltIEJhcgoKWW91IGNhbiB1c2UgYG9wdGlvbnMuaGlkZUFsZW1CYXJgIHRvIHByZXZlbnQgdGhlIEFsw6ltIHRvcCBiYXIgZnJvbSBiZWluZyBkaXNwbGF5ZWQuIFRoaXMgc2V0dGluZyBhcHBsaWVzIG9ubHkgaW4gdGhlIGRldmVsb3BtZW50IGVudmlyb25tZW50LgoKYGBganNvbgp7CiAgLy8gLi4uCiAgIm9wdGlvbnMiOiB7CiAgICAiaGlkZUFsZW1CYXIiOiB0cnVlCiAgfQp9CmBgYAo=`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBDb25maWcgRmlsZQoKQ3JlYXRlIGEgYGFsZW0uY29uZmlnLmpzb25gIGZpbGUgYXQgdGhlIHJvb3Qgb2YgdGhlIHByb2plY3Qgd2l0aCB0aGUgZm9sbG93aW5nIGNvbnRlbnQ6CgpgYGBqc29uCnsKICAvLyBUaGlzIGlzIHRoZSByb290IHBhdGggb2YgdGhlIGFwcC4KICAvLyBpZiB0cnVlOiBhbGVtLWxpYi5uZWFyL3dpZGdldC9JbmRleAogIC8vIGlmIGZhbHNlOiBhbGVtLWxpYi5uZWFyL3dpZGdldC9hbGVtLWRvY3MgKGl0J3MgZ29pbmcgdG8gdXNlIHRoZSBzbHVnaWZpZWQgIm5hbWUiKQogICJpc0luZGV4IjogdHJ1ZSwKICAvLyBUaGUgbWFpbm5ldCBhY2NvdW50IElEIHVuZGVyIHdoaWNoIHRoZSBhcHAgd2lsbCBiZSBkZXBsb3llZC4KICAibWFpbm5ldEFjY291bnQiOiAiYWxlbS1saWIubmVhciIsCiAgLy8gVGhlIHRlc3RuZXQgYWNjb3VudCBJRCB1bmRlciB3aGljaCB0aGUgYXBwIHdpbGwgYmUgZGVwbG95ZWQuCiAgInRlc3RuZXRBY2NvdW50IjogImFsZW0tbGliLnRlc3RuZXQiLAogIC8vIEFwcCBuYW1lCiAgIm5hbWUiOiAiQWxlbSBEb2NzIiwKICAvLyBBcHAgRGVzY3JpcHRpb24KICAiZGVzY3JpcHRpb24iOiAiQ3JlYXRlIHdlYjMgYXBwbGljYXRpb25zIGZvciBORUFSIEJPUyB3aXRoIGEgZm9jdXMgb24gcGVyZm9ybWFuY2Ugd2hpbGUgdXNpbmcgY29uY2VwdHMgdGhhdCBhcmUgYmFzZWQgb24gUmVhY3RKUy4iLAogIC8vIFNvY2lhbCBsaW5rcy4gQ2hlY2sgb3V0IE5FQVIgU29jaWFsIEJvcyBkb2NzIHRvIGdldCB0byBrbm93IHRoZSBvcHRpb25zCiAgLy8gaHR0cHM6Ly9kb2NzLm5lYXIub3JnL3NvY2lhbC9jb250cmFjdAogICJsaW5rdHJlZSI6IHsKICAgICJ3ZWJzaXRlIjogImdpdGh1Yi5jb20vd3BkYXMvYWxlbSIKICB9LAogICJpbWFnZSI6IHsKICAgICJpcGZzX2NpZCI6ICJiYWZrcmVpY2pkZ2F0NXhzdzd2eGJvc295eWdlcm1hd2hrZmkyYnkzb3ZnN2M2dHVtcmF5bjRyaW10eSIKICB9LAogIC8vIFRhZ3Mgb2YgdGhpcyBwcm9qZWN0CiAgInRhZ3MiOiBbInRoZSIsICJwcm9qZWN0IiwgInRhZ3MiLCAiaGVyZSJdCn0KYGBgCgojIFBhdGggQWxpYXNlcwoKWW91IGNhbiBvcHRpb25hbGx5IGNvbmZpZ3VyZSB5b3VyIGFwcGxpY2F0aW9uJ3MgcGF0aCBhbGlhc2VzIHNvIHRoYXQgaXQgd29ya3MgdG9nZXRoZXIgd2l0aCB0c2NvbmZpZy5qc29uLCBmb3IgZXhhbXBsZS4gQXNzdW1pbmcgeW91ciBwcm9qZWN0J3MgYHRzY29uZmlnLmpzb25gIGZpbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhdGlvbiBmb3IgcGF0aHM6CgpgYGBqc29uCnsKICAiY29tcGlsZXJPcHRpb25zIjogewogICAgLy8gLi4uCiAgICAiYmFzZVVybCI6ICIuIiwKICAgICJwYXRocyI6IHsKICAgICAgIkBhcHAvKiI6IFsic3JjLyoiXSwKICAgICAgIkBjb21wb25lbnRzLyoiOiBbInNyYy9jb21wb25lbnRzLyoiXQogICAgfQogIH0KfQpgYGAKCllvdSB3aWxsIHdhbnQgdG8gY29uZmlndXJlIHRoZSBzYW1lIGJlaGF2aW9yIHVzaW5nIHRoZSBgYWxlbS5jb25maWcuanNvbmAgZmlsZSBhcyBmb2xsb3dzOgoKYGBganNvbgp7CiAgLy8gLi4uCiAgImNvbXBpbGVyT3B0aW9ucyI6IHsKICAgICJiYXNlVXJsIjogIi4iLAogICAgInBhdGhzIjogewogICAgICAiQGFwcC8iOiAic3JjLyIsCiAgICAgICJAY29tcG9uZW50cy8iOiAic3JjL2NvbXBvbmVudHMvIgogICAgfQogIH0KfQpgYGAKCk5vdyBpbiBhbGwgb2YgeW91ciBzb3VyY2UgZmlsZXMsIHlvdSBjYW4gaW1wb3J0IGNvbXBvbmVudHMgbGlrZSB0aGlzOgoKYGBgdHN4Ci8vIFdpdGhvdXQgcGF0aCBhbGlhc2VzCmltcG9ydCBIZXJvIGZyb20gIi4uLy4uLy4uL2NvbXBvbmVudHMvSGVybyI7CmltcG9ydCBGb290ZXIgZnJvbSAiLi4vLi4vLi4vY29tcG9uZW50cy9Gb290ZXIiOwoKLy8gV2l0aCBwYXRoIGFsaWFzZXMKaW1wb3J0IEhlcm8gZnJvbSAiQGNvbXBvbmVudHMvSGVybyI7CmltcG9ydCBGb290ZXIgZnJvbSAiQGNvbXBvbmVudHMvRm9vdGVyIjsKYGBgCgojIE9wdGlvbnMKCkl0IGlzIHBvc3NpYmxlIHRvIGNvbmZpZ3VyZSBzb21lIGNvbXBpbGVyIGJlaGF2aW9ycyB1c2luZyB0aGUgb3B0aW9ucyBzZXNzaW9uLgoKIyMgQ3JlYXRlIExvYWRlciBXaWRnZXQKClRoaXMgZmVhdHVyZSBhbGxvd3MgeW91IHRvIGNyZWF0ZSBhbiBhZGRpdGlvbmFsIFdpZGdldCB0aGF0IHdpbGwgc2VydmUgYXMgYSBMb2FkZXIgZm9yIHRoZSBtYWluIFdpZGdldC4gWW91IGNhbiBvcHRpb25hbGx5IGRlZmluZSB3aGljaCBjb21wb25lbnQgd2lsbCBzZXJ2ZSBhcyB0aGUgTG9hZGluZyBkaXNwbGF5IHdoaWxlIHRoZSBtYWluIFdpZGdldCBjb250ZW50IGlzIGxvYWRlZC4gSWYgbm8gZmlsZSBpcyBwcm92aWRlZCwgdGhlIGRlZmF1bHQgTG9hZGluZyBjb21wb25lbnQgb2YgQWzDqW0gd2lsbCBiZSB1c2VkLgoKVGhlIGdlbmVyYXRlZCBmaWxlIG5hbWUgd2lsbCBiZSBhIG1peCBvZiB0aGUgbmFtZSBvZiB0aGUgbWFpbiBXaWRnZXQgKyAiTG9hZGVyIi4gRm9yIGV4YW1wbGU6IGBJbmRleExvYWRlcmAuIEl0IGlzIHVwIHRvIHlvdSB3aGljaCBmaWxlIHRvIHVzZSBhcyB0aGUgcHJpbWFyeSBtZWFucyBvZiBhY2Nlc3NpbmcgeW91ciBhcHBsaWNhdGlvbi4KCi0gKipgY3JlYXRlTG9hZGVyV2lkZ2V0YDogYm9vbGVhbioqIC0gU2hvdWxkIHRoZSBXaWRnZXQgTG9hZGVyIGJlIGNyZWF0ZWQ/Ci0gKipgbG9hZGluZ0NvbXBvbmVudEZpbGVgOiBzdHJpbmcgKG9wdGlvbmFsKSoqIC0gUGF0aCB0byB0aGUgY29tcG9uZW50IHRoYXQgd2lsbCBzZXJ2ZSBhcyBsb2FkaW5nIHdoaWxlIHRoZSBtYWluIFdpZGdldCBjb250ZW50IGlzIGxvYWRlZC4KLSAqKmBsb2FkaW5nQ29tcG9uZW50TmFtZWA6IHN0cmluZyAob3B0aW9uYWwpKiogLSBFeGFjdCBuYW1lIG9mIHRoZSBjb21wb25lbnQgYmVpbmcgbG9hZGVkIHZpYSBgbG9hZGluZ0NvbXBvbmVudEZpbGVgLiBGb3IgZXhhbXBsZSwgaWYgdGhlIGxvYWRpbmcgZmlsZSBoYXMgdGhpcyBzdHJ1Y3R1cmU6CgpgYGB0c3gKY29uc3QgU3VzcGVuc2VMb2FkaW5nID0gKCkgPT4gPHA+TG9hZGluZy4uLjwvcD47CmBgYAoKU28gdGhlIG5hbWUgbXVzdCBiZSAqKlN1c3BlbnNlTG9hZGluZyoqLgoKKipDb25maWcgRXhhbXBsZSoqCgpgYGBqc29uCiJvcHRpb25zIjogewogICAgImNyZWF0ZUxvYWRlcldpZGdldCI6IHRydWUsCiAgICAibG9hZGluZ0NvbXBvbmVudEZpbGUiOiAic3JjL2NvbXBvbmVudHMvU3VzcGVuc2VMb2FkaW5nLnRzeCIsCiAgICAibG9hZGluZ0NvbXBvbmVudE5hbWUiOiAiU3VzcGVuc2VMb2FkaW5nIgogIH0KYGBgCgojIyBLZWVwIFJvdXRlCgpga2VlcFJvdXRlYCBpcyBvbmx5IHZhbGlkIGR1cmluZyBkZXZlbG9wbWVudCwgYW5kIGlzIGF1dG9tYXRpY2FsbHkgZGlzYWJsZWQgaW4gcHJvZHVjdGlvbi4KClRoaXMgcHJvcGVydHkgZGVmaW5lcyB3aGV0aGVyIHRoZSByb3V0ZSBzaG91bGQgcmVtYWluIHRoZSBzYW1lIGR1cmluZyByZWZyZXNoZXMuIFRoaXMgaXMgb25seSB2YWxpZCBpZiB0aGUgYFJvdXRlcmAgdHlwZSBpcyBgIkNvbnRlbnRCYXNlZCJgLgoKRGVmYXVsdCB2YWx1ZSBpcyBgZmFsc2VgLgoKYGBganNvbgp7CiAgLy8gLi4uCiAgIm9wdGlvbnMiOiB7CiAgICAia2VlcFJvdXRlIjogdHJ1ZQogIH0KfQpgYGAKCiMjIEhpZGUgQWzDqW0gQmFyCgpZb3UgY2FuIHVzZSBgb3B0aW9ucy5oaWRlQWxlbUJhcmAgdG8gcHJldmVudCB0aGUgQWzDqW0gdG9wIGJhciBmcm9tIGJlaW5nIGRpc3BsYXllZC4gVGhpcyBzZXR0aW5nIGFwcGxpZXMgb25seSBpbiB0aGUgZGV2ZWxvcG1lbnQgZW52aXJvbm1lbnQuCgpgYGBqc29uCnsKICAvLyAuLi4KICAib3B0aW9ucyI6IHsKICAgICJoaWRlQWxlbUJhciI6IHRydWUKICB9Cn0KYGBgCg==`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/cli.md

@@ -46,7 +46,13 @@ Options:
 Build the project:
 
 ```bash
-Usage: alem build
+Usage: alem build [options]
+
+Build the project
+
+Options:
+  -n, --network <network>  Network where the app will be running (default: "mainnet")
+  -h, --help               display help for command
 ```
 
 This will output valid widget code to the `/build` directory.

src/md/config-file.md

@@ -77,6 +77,32 @@ import Footer from "@components/Footer";
 
 It is possible to configure some compiler behaviors using the options session.
 
+## Create Loader Widget
+
+This feature allows you to create an additional Widget that will serve as a Loader for the main Widget. You can optionally define which component will serve as the Loading display while the main Widget content is loaded. If no file is provided, the default Loading component of Além will be used.
+
+The generated file name will be a mix of the name of the main Widget + "Loader". For example: `IndexLoader`. It is up to you which file to use as the primary means of accessing your application.
+
+- **`createLoaderWidget`: boolean** - Should the Widget Loader be created?
+- **`loadingComponentFile`: string (optional)** - Path to the component that will serve as loading while the main Widget content is loaded.
+- **`loadingComponentName`: string (optional)** - Exact name of the component being loaded via `loadingComponentFile`. For example, if the loading file has this structure:
+
+```tsx
+const SuspenseLoading = () => <p>Loading...</p>;
+```
+
+So the name must be **SuspenseLoading**.
+
+**Config Example**
+
+```json
+"options": {
+    "createLoaderWidget": true,
+    "loadingComponentFile": "src/components/SuspenseLoading.tsx",
+    "loadingComponentName": "SuspenseLoading"
+  }
+```
+
 ## Keep Route
 
 `keepRoute` is only valid during development, and is automatically disabled in production.

src/pages/About/About.tsx

@@ -1,4 +1,6 @@
 import { RouteLink } from "alem";
+import { Row } from "../../components/UI";
+import { RoutesPath } from "../../routes/routeProps";
 import {
   Container,
   Logo,
@@ -10,9 +12,10 @@ import {
   CustomAnchor,
   BlueCode,
   RedCode,
+  ExampleApp,
+  AppsList,
 } from "./styles";
-import { Row } from "../../components/UI";
-import { RoutesPath } from "../../routes/routeProps";
+import TelegramIcon from "@app/assets/svgs/telegram-icon.module";
 
 export const AboutPage = () => {
   return (
@@ -26,15 +29,49 @@ export const AboutPage = () => {
         <Title>Além</Title>
         <Description>The library to build web3 applications for Near BOS</Description>
         <Row>
-          <CustomLink href="https://github.com/wpdas/bitbabble-dchat" target="_blank">
-            <p>See an Example</p>
+          <CustomLink href="https://t.me/alemlib" target="_blank">
+            <TelegramIcon fill="white" />
+            <p style={{ marginLeft: 8 }}>Telegram</p>
           </CustomLink>
 
           <CustomAnchor>
             <RouteLink to={RoutesPath.featureOverview.path} label="Learn Alem" />
           </CustomAnchor>
         </Row>
       </Container>
+      <Section
+        style={{
+          marginTop: 40,
+          paddingTop: 20,
+          paddingBottom: 50,
+          marginBottom: 60,
+          backgroundColor: "#fff",
+        }}
+      >
+        <p>Some dApps built using this tool</p>
+        <AppsList>
+          <ExampleApp href="https://github.com/wpdas/alem-docs-web" target="_blank">
+            <img
+              src="https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png"
+              alt="Além Docs"
+            />
+            <span>Além Docs</span>
+          </ExampleApp>
+
+          <ExampleApp href="https://github.com/wpdas/bitbabble-dchat" target="_blank">
+            <img
+              src="https://ipfs.near.social/ipfs/bafkreiegyjsgok6ctnurix3shkm7mrbdqzclfqpsh4tltnkxqyuxzgvbk4"
+              alt="Bit Babble"
+            />
+            <span>Bit Babble</span>
+          </ExampleApp>
+
+          <ExampleApp href="https://github.com/PotLock/bos-app-alem" target="_blank">
+            <img src="https://app.potlock.org/favicon.png" alt="PotLock" />
+            <span>PotLock</span>
+          </ExampleApp>
+        </AppsList>
+      </Section>
       <Section style={{ backgroundColor: "#fff", paddingTop: 40 }}>
         <img
           src="https://cdn.jsdelivr.net/gh/wpdas/alem-docs-web/src/md/assets/diagram.jpg"

src/pages/About/styles.ts

@@ -47,11 +47,13 @@ export const CustomAnchor = styled.div`
 `;
 
 export const CustomLink = styled.a`
+  display: flex;
   padding: 0.75rem 1.5rem;
   border-radius: 30px;
   border: 1px solid rgb(8 126 164);
   background-color: rgb(8 126 164);
   margin-right: 12px;
+  text-decoration: none;
 
   p {
     color: #fff !important;
@@ -61,7 +63,7 @@ export const CustomLink = styled.a`
   }
 
   :hover {
-    background-color: rgb(8 126 164);
+    background-color: rgb(8 116 154);
   }
 `;
 
@@ -117,3 +119,28 @@ export const RedCode = styled.span`
   color: rgb(67 74 90);
   padding: 0.125rem 0.25rem;
 `;
+
+export const AppsList = styled.div`
+  display: flex;
+  gap: 2rem;
+`;
+
+export const ExampleApp = styled.a`
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    border-radius: 8px;
+    height: 60px;
+  }
+  span {
+    margin-top: 12px;
+    color: rgb(35, 39, 47);
+    font-weight: 600;
+    text-decoration: none;
+  }
+`;