Merge pull request #22 from wpdas/staging

update docs, alem v1.0.0

.gitignore

@@ -1,5 +1,6 @@
 /build
 /node_modules
+/removed
 .env
 
 # misc

.prettierrc

@@ -3,5 +3,7 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "printWidth": 100
+  "printWidth": 120,
+  "importOrder": ["^alem/(.*)$", "^@(.*)$", "^[./]"],
+  "importOrderSeparation": false
 }

package.json

@@ -13,9 +13,10 @@
     "deploy:testnet": "npm run build; alem deploy --network testnet"
   },
   "dependencies": {
-    "alem": "1.0.0-beta.34"
+    "alem": "1.0.0"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/styled-components": "^5.1.26",
     "lint-staged": "^13.2.1",
     "prettier": "^2.8.8"

src/Main.tsx

@@ -1,16 +1,10 @@
-import { RouterContext, Storage, asyncFetch, useEffect, useState } from "alem";
-import Modals from "./components/Modals/Modals";
-import {
-  AppBackground,
-  AppContainer,
-  Banner,
-  MobileNavBarSwitcher,
-  SideBarSwitcher,
-} from "./styles";
+import { RouterContext, Storage, asyncFetch, props, useEffect, useState } from "alem";
+import Footer from "@app/components/Footer/Footer";
+import ContentView from "./components/ContentView";
 import MobileNavBar from "./components/MobileNavBar";
+import Modals from "./components/Modals/Modals";
 import Sidebar from "./components/Sidebar";
-import ContentView from "./components/ContentView";
-import Footer from "@app/components/Footer/Footer";
+import { AppBackground, AppContainer, Banner, MobileNavBarSwitcher, SideBarSwitcher } from "./styles";
 
 const Main = () => {
   const [libVersion, setLibVersion] = useState(Storage.get("version"));
@@ -28,7 +22,7 @@ const Main = () => {
     <div style={{ marginTop: "calc(-1 * var(--body-top-padding, 0))" }}>
       <Modals />
       <Banner>
-        Alem is currently on version <span>{libVersion}</span>
+        Além is currently on version <span>{libVersion}</span>
       </Banner>
       <MobileNavBarSwitcher>
         <MobileNavBar />

src/components/ContentView/index.tsx

@@ -1,12 +1,10 @@
 import { clipboard, getLocation, isDevelopment } from "alem";
+import ShareIcon from "../../assets/svgs/share-icon";
 import Routes from "../../routes/Routes";
 import { Container, Margin, ShareButton, TopSection } from "./styles";
-import ShareIcon from "../../assets/svgs/share-icon";
 
 const ContentView = () => {
-  const site = isDevelopment
-    ? "http://127.0.0.1:8080/alem-lib.near/widget/Index"
-    : "https://alem.dev/";
+  const site = isDevelopment ? "http://127.0.0.1:8080/alem-lib.near/widget/Index" : "https://alem.dev/";
 
   const { pathname } = getLocation();
 
@@ -19,11 +17,7 @@ const ContentView = () => {
       {pathname !== "about" && pathname !== "" && (
         <TopSection>
           <div>
-            <ShareButton
-              data-bs-toggle="modal"
-              data-bs-target="#sharedInfoModal"
-              onClick={copyToCliboard}
-            >
+            <ShareButton data-bs-toggle="modal" data-bs-target="#sharedInfoModal" onClick={copyToCliboard}>
               <ShareIcon />
               Share
             </ShareButton>

src/md/BosOverview.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const BosOverview = () => {
-   const mdContent = Buffer.from(`IyBORUFSIEFQSXMgYW5kIENvbXBvbmVudHMKClRoZSBuYXRpdmUgTkVBUiBWTSAoQk9TKSByZXNvdXJjZXMgY29udGludWUgdG8gZnVuY3Rpb24uCgpHZXQgdG8ga25vdyBtb3JlIGFib3V0IHRoZSBCT1MgYnVpbHQgaW4gcmVzb3VyY2VzIGhlcmU6IFtodHRwczovL2RvY3MubmVhci5vcmcvYm9zL2FwaS9zdGF0ZV0oaHR0cHM6Ly9kb2NzLm5lYXIub3JnL2Jvcy9hcGkvc3RhdGUpCgpgYGB0c3gKLy8gTk9URTogVGhlc2UgYXJlIGp1c3QgdGhlIEJPUyBmZWF0dXJlIHJlZmVyZW5jZXMgdHlwZXMKaW1wb3J0IHsKICBGaWxlcywKICBJbmZpbml0ZVNjcm9sbCwKICBJcGZzSW1hZ2VVcGxvYWQsCiAgTWFya2Rvd24sCiAgTmVhciwKICBPdmVybGF5VHJpZ2dlciwKICBTb2NpYWwsCiAgU3RhdGUsCiAgU3RvcmFnZSwKICBUb29sdGlwLAogIFR5cGVBaGVhZCwKICBWTSwKICBXaWRnZXQsCiAgYXN5bmNGZXRjaCwKICBjbGlwYm9hcmQsCiAgY29udGV4dCwKICBmZXRjaCwKICBwcm9wcywKICBzdGF0ZSwKICB1c2VDYWNoZSwKICB1c2VFZmZlY3QsCiAgdXNlU3RhdGUsCiAgdXNlTWVtbywKICBCaWcsCn0gZnJvbSAiYWxlbSI7CgpleHBvcnQgY29uc3QgQ29tcG9uZW50QyA9ICgpID0+IHsKICBjb25zb2xlLmxvZyhwcm9wcyk7IC8vIHdpbGwgcHJpbnQgdGhlIHdpZGdldCBwcm9wcwoKICByZXR1cm4gPENvbXBvbmVudEEgbmFtZT0iV2VuZHoiIC8+Owp9OwpgYGAK`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBORUFSIEFQSXMgYW5kIENvbXBvbmVudHMKClRoZSBuYXRpdmUgTkVBUiBWTSAoQk9TKSByZXNvdXJjZXMgY29udGludWUgdG8gZnVuY3Rpb24uCgpHZXQgdG8ga25vdyBtb3JlIGFib3V0IHRoZSBCT1MgYnVpbHQgaW4gcmVzb3VyY2VzIGhlcmU6IFtodHRwczovL2RvY3MubmVhci5vcmcvYm9zL2FwaS9zdGF0ZV0oaHR0cHM6Ly9kb2NzLm5lYXIub3JnL2Jvcy9hcGkvc3RhdGUpCgpgYGB0c3gKLy8gTk9URTogVGhlc2UgYXJlIGp1c3QgdGhlIEJPUyBmZWF0dXJlIHJlZmVyZW5jZXMgdHlwZXMKaW1wb3J0IHsKICBGaWxlcywKICBJbmZpbml0ZVNjcm9sbCwKICBJcGZzSW1hZ2VVcGxvYWQsCiAgTWFya2Rvd24sCiAgTmVhciwKICBPdmVybGF5VHJpZ2dlciwKICBTb2NpYWwsCiAgU3RhdGUsCiAgU3RvcmFnZSwKICBUb29sdGlwLAogIFR5cGVBaGVhZCwKICBWTSwKICBXaWRnZXQsCiAgYXN5bmNGZXRjaCwKICBjbGlwYm9hcmQsCiAgY29udGV4dCwKICBmZXRjaCwKICBwcm9wcywKICBzdGF0ZSwKICB1c2VDYWNoZSwKICB1c2VFZmZlY3QsCiAgdXNlU3RhdGUsCiAgdXNlTWVtbywKICB1c2VDYWxsYmFjaywKICBCaWcsCn0gZnJvbSAiYWxlbSI7CgpleHBvcnQgY29uc3QgQ29tcG9uZW50QyA9ICgpID0+IHsKICBjb25zb2xlLmxvZyhwcm9wcyk7IC8vIHdpbGwgcHJpbnQgdGhlIHdpZGdldCBwcm9wcwoKICByZXR1cm4gPENvbXBvbmVudEEgbmFtZT0iV2VuZHoiIC8+Owp9OwpgYGAK`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/bos-overview.md

@@ -30,6 +30,7 @@ import {
   useEffect,
   useState,
   useMemo,
+  useCallback,
   Big,
 } from "alem";
 

src/md/feature-overview.md

@@ -6,16 +6,6 @@ Alem makes it painless to create interactive UIs. Design simple views for each s
 
 Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript, you can easily pass rich data through your app.
 
-**Tip:** Use function as much as possible. Even if it is an object to be shared, use a function to return the object. E.g.:
-
-```ts
-export const utils = () => ({
-  contractId: "contract-foo.near",
-  getItems: () => Storage.get("items"),
-  // ...
-});
-```
-
 ## Component
 
 You can create any component file using **JavaScript** or **TypeScript**. The entrypoint must be an App component like so:
@@ -90,8 +80,8 @@ Now, let's implement the component that is going to import both components above
 ```tsx
 // Stateful component
 import { State, state } from "alem";
-import Hero from "./Hero";
 import Footer from "./Footer";
+import Hero from "./Hero";
 
 const MyStatefulComponent = () => {
   State.init({ version: 1 }); // Any random information

src/pages/About/About.tsx

@@ -1,4 +1,5 @@
 import { RouteLink } from "alem";
+import TelegramIcon from "@app/assets/svgs/telegram-icon.module";
 import { Row } from "../../components/UI";
 import { RoutesPath } from "../../modules/routes/routeProps";
 import {
@@ -15,17 +16,12 @@ import {
   ExampleApp,
   AppsList,
 } from "./styles";
-import TelegramIcon from "@app/assets/svgs/telegram-icon.module";
 
 export const AboutPage = () => {
   return (
     <div>
       <Container style={{ marginBottom: 0 }}>
-        <Logo
-          src="https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png"
-          width={120}
-          alt="logo"
-        />
+        <Logo src="https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png" width={120} alt="logo" />
         <Title>Além</Title>
         <Description>The library to build web3 applications for Near BOS</Description>
         <Row>
@@ -48,13 +44,17 @@ export const AboutPage = () => {
           backgroundColor: "#fff",
         }}
       >
-        <p>Some dApps built using this tool</p>
+        <p>
+          Some dApps built using this tool. <br /> Click to visit their repository and get to know more!
+        </p>
         <AppsList>
+          <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>
+
           <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"
-            />
+            <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>
 
@@ -65,11 +65,6 @@ export const AboutPage = () => {
             />
             <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 }}>
@@ -80,32 +75,31 @@ export const AboutPage = () => {
         />
 
         <p>
-          You can create your applications in a similar way to React. All components and other
-          resources will be transformed into a file understandable by Near VM.
+          You can create your applications in a similar way to React. All components and other resources will be
+          transformed into a file understandable by Near VM.
         </p>
       </Section>
       <Section>
         <Title>Create user interfaces from components</Title>
         <p>
-          Alem use its compiler to let you build user interfaces out of individual pieces. Create
-          your own components like <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{" "}
-          <Code>Avatar</Code>. Then combine them into entire screens, pages, and other components.
+          Alem use its compiler to let you build user interfaces out of individual pieces. Create your own components
+          like <Code>Thumbnail</Code>, <Code>LikeButton</Code>, and <Code>Avatar</Code>. Then combine them into entire
+          screens, pages, and other components.
         </p>
       </Section>
       <Section style={{ backgroundColor: "#fff" }}>
         <Title>Stateless & Stateful Component</Title>
         <p>
-          Leverage the full power of JSX to create your components easily, quickly, and efficiently.
-          Both stateful and stateless components <BlueCode>support children</BlueCode>, which is not
-          natively supported by the Near VM, but Além handles this in a way that it is processed and
-          understood.
+          Leverage the full power of JSX to create your components easily, quickly, and efficiently. Both stateful and
+          stateless components <BlueCode>support children</BlueCode>, which is not natively supported by the Near VM,
+          but Além handles this in a way that it is processed and understood.
         </p>
       </Section>
       <Section>
         <Title>Network</Title>
         <p>
-          Currently supports <Code>Mainnet</Code> and <Code>Testnet</Code>. So, while you are
-          developing and testing features you can test everything without worrying about expenses.
+          Currently supports <Code>Mainnet</Code> and <Code>Testnet</Code>. So, while you are developing and testing
+          features you can test everything without worrying about expenses.
         </p>
       </Section>
     </div>