Staking WIP

.github/workflows/push_on_ipfs.yaml

@@ -30,12 +30,12 @@ jobs:
 
       - uses: actions/upload-artifact@v3
         with:
-          name: aleph-cloudsolutions
+          name: aleph-account-page
           path: out/
 
       - uses: actions/download-artifact@v3
         with:
-          name: aleph-cloudsolutions
+          name: aleph-account-page
           path: out/
 
       - name: Push on IPFS

README.md

@@ -1,6 +1,6 @@
-# Aleph Cloud Solutions
+# Aleph Account page
 
-Aleph Cloud Solutions is a [next.js](https://nextjs.org/) frontend dApp that allows you to easily deploy VMs on the aleph network, without worrying about the different configuration options; just launch the app, upload your code and dependencies and enjoy.
+Aleph Account page is a [next.js](https://nextjs.org/) frontend dApp that allows you to easily deploy VMs on the aleph network, without worrying about the different configuration options; just launch the app, upload your code and dependencies and enjoy.
 
 ## Develop locally
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "front-aleph-cloud",
+  "name": "front-aleph-account-page",
   "version": "0.2.11",
   "private": true,
   "scripts": {
@@ -57,4 +57,4 @@
       "preset": "styled-components"
     }
   }
-}
+}

src/components/common/APYCell/cmp.tsx

@@ -0,0 +1,56 @@
+import { memo, useMemo } from 'react'
+import { StyledAPYIcon } from './styles'
+import { CCN } from '@/domain/node'
+import { RewardManager } from '@/domain/reward'
+import { Tooltip } from '@aleph-front/aleph-core'
+
+// https://github.com/aleph-im/aleph-account/blob/main/src/components/NodesTable.vue#L586
+export const APYCell = memo(({ node, nodes }: { node: CCN; nodes: CCN[] }) => {
+  const apyManager = new RewardManager({} as any)
+
+  const nodeAPY = apyManager.computeEstimatedStakersAPY(node, nodes)
+  const currentAPY = apyManager.currentAPY(nodes)
+  const performance = nodeAPY / currentAPY
+
+  const isNotFullyLinked = useMemo(
+    () => node.crnsData.length < 3 || node.crnsData.find((f) => f.score < 0.2),
+    [node],
+  )
+
+  const data = (
+    <div tw="flex gap-3 items-center">
+      <StyledAPYIcon $performance={performance} />
+      {Number(nodeAPY * 100).toFixed(2)}%
+    </div>
+  )
+
+  return (
+    <>
+      {isNotFullyLinked ? (
+        <Tooltip
+          my="top-center"
+          at="bottom-center"
+          content={
+            <div className="fs-sm">
+              <div>
+                <div>{3 - node.crnsData.length} missing CRN</div>
+                <div className="fs-xs">
+                  Link 3 functioning CRN to that Node to maximise its rewards
+                </div>
+              </div>
+              <div>Performance: {Number(performance * 100).toFixed(2)}%</div>
+            </div>
+          }
+          header="Staking performance"
+        >
+          {data}
+        </Tooltip>
+      ) : (
+        data
+      )}
+    </>
+  )
+})
+APYCell.displayName = 'APYCell'
+
+export default APYCell

src/components/common/APYCell/index.ts

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/APYCell/styles.tsx

@@ -0,0 +1,20 @@
+import tw from 'twin.macro'
+import styled, { css } from 'styled-components'
+
+export const StyledAPYIcon = styled.div<{ $performance: number }>(
+  ({ theme, $performance }) => {
+    const color =
+      $performance >= 0.8
+        ? theme.color.main1
+        : $performance >= 0.5
+        ? theme.color.main0
+        : theme.color.error
+
+    return [
+      tw`h-4 w-4 rounded-full`,
+      css`
+        background-color: ${color};
+      `,
+    ]
+  },
+)

src/components/common/AutoBreadcrumb/cmp.tsx

@@ -60,7 +60,5 @@ export default function AutoBreadcrumb({
     return links
   }, [router.pathname, router.asPath, nameProp, names, isHome, includeHome])
 
-  return isHome ? null : (
-    <Breadcrumb navLinks={navLinks} {...rest} tw="py-5 px-6 md:px-16" />
-  )
+  return isHome ? null : <Breadcrumb navLinks={navLinks} {...rest} />
 }

src/components/common/Header/cmp.tsx

@@ -26,80 +26,75 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      {hasBreadcrumb && <AutoBreadcrumb names={breadcrumbNames} />}
-
-      <NavbarLinkList onlyDesktop>
-        <NavbarLink>
-          <StyledButton key="link" forwardedAs="button" disabled>
-            <Icon name="ethereum" />
-          </StyledButton>
-        </NavbarLink>
-        <div tw="relative">
-          <NavbarLink>
-            {account ? (
-              <Button
-                as="button"
-                variant="secondary"
-                color="main1"
-                kind="neon"
-                size="regular"
-                onClick={handleDisplayWalletPicker}
-              >
-                {ellipseAddress(account.address)}{' '}
-                <Icon
-                  name="meteor"
-                  size="lg"
-                  tw="ml-2.5"
-                  color={theme.color.main1}
-                />
-              </Button>
-            ) : (
-              <Button
-                as="button"
-                variant="tertiary"
-                color="main0"
-                kind="neon"
+      <div>{hasBreadcrumb && <AutoBreadcrumb names={breadcrumbNames} />}</div>
+      <div tw="relative flex items-center justify-center gap-7">
+        <StyledButton key="link" forwardedAs="button" disabled>
+          <Icon name="ethereum" />
+        </StyledButton>
+        <>
+          {account ? (
+            <Button
+              as="button"
+              variant="secondary"
+              color="main1"
+              kind="neon"
+              size="regular"
+              onClick={handleDisplayWalletPicker}
+            >
+              {ellipseAddress(account.address)}{' '}
+              <Icon
+                name="meteor"
+                size="lg"
+                tw="ml-2.5"
+                color={theme.color.main1}
+              />
+            </Button>
+          ) : (
+            <Button
+              as="button"
+              variant="tertiary"
+              color="main0"
+              kind="neon"
+              size="regular"
+              onClick={handleDisplayWalletPicker}
+            >
+              Connect{' '}
+              <Icon
+                name="meteor"
+                size="lg"
+                tw="ml-2.5"
+                color={theme.color.main0}
+              />
+            </Button>
+          )}
+          <div tw="absolute top-full leading-4 right-0 mt-10" ref={divRef}>
+            {displayWalletPicker && (
+              <WalletPicker
+                networks={[
+                  {
+                    icon: 'ethereum',
+                    name: 'Ethereum',
+                    wallets: [
+                      {
+                        color: 'orange',
+                        icon: 'circle',
+                        name: 'Metamask',
+                        provider,
+                      },
+                    ],
+                  },
+                ]}
+                onConnect={handleConnect}
+                onDisconnect={handleConnect}
+                address={account?.address}
+                addressHref={`https://etherscan.io/address/${account?.address}`}
+                balance={accountBalance}
                 size="regular"
-                onClick={handleDisplayWalletPicker}
-              >
-                Connect{' '}
-                <Icon
-                  name="meteor"
-                  size="lg"
-                  tw="ml-2.5"
-                  color={theme.color.main0}
-                />
-              </Button>
+              />
             )}
-            <div tw="absolute right-0 mt-10" ref={divRef}>
-              {displayWalletPicker && (
-                <WalletPicker
-                  networks={[
-                    {
-                      icon: 'ethereum',
-                      name: 'Ethereum',
-                      wallets: [
-                        {
-                          color: 'orange',
-                          icon: 'circle',
-                          name: 'Metamask',
-                          provider,
-                        },
-                      ],
-                    },
-                  ]}
-                  onConnect={handleConnect}
-                  onDisconnect={handleConnect}
-                  address={account?.address}
-                  addressHref={`https://etherscan.io/address/${account?.address}`}
-                  balance={accountBalance}
-                  size="regular"
-                />
-              )}
-            </div>
-          </NavbarLink>
-        </div>
-      </NavbarLinkList>
+          </div>
+        </>
+      </div>
     </StyledHeader>
   )
 }

src/components/common/Header/styles.tsx

@@ -2,15 +2,12 @@ import { Button, Navbar } from '@aleph-front/aleph-core'
 import styled from 'styled-components'
 
 export const StyledHeader = styled.header`
-  font-size: inherit;
-  line-height: inherit;
-  box-sizing: border-box;
+  height: 104px;
   width: 100%;
-  margin: 0;
   position: sticky;
-  top: 0;
-  z-index: 10;
-  /* background-color: #141327CC; */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `
 
 export const StyledNavbar = styled(Navbar)`

src/components/common/LinkedCell/cmp.tsx

@@ -0,0 +1,23 @@
+import { memo } from 'react'
+import { StyledLinkIcon } from './styles'
+
+// https://github.com/aleph-im/aleph-account/blob/main/src/components/NodesTable.vue#L163
+export const LinkedCell = memo(
+  ({ nodes, max = 3 }: { nodes: string[]; max?: number }) => {
+    return (
+      <div tw="flex items-center gap-3">
+        <div tw="flex items-stretch gap-0.5">
+          {Array.from({ length: max }).map((_, i) => (
+            <StyledLinkIcon key={i} $active={!!nodes[i]} />
+          ))}
+        </div>
+        <div tw="whitespace-nowrap leading-4" className="fs-xs">
+          {nodes.length} <span tw="opacity-20">of {max}</span>
+        </div>
+      </div>
+    )
+  },
+)
+LinkedCell.displayName = 'LinkedCell'
+
+export default LinkedCell

src/components/common/LinkedCell/index.ts

@@ -0,0 +1 @@
+export { default } from './cmp'

src/components/common/LinkedCell/styles.tsx

@@ -0,0 +1,15 @@
+import tw from 'twin.macro'
+import styled, { css } from 'styled-components'
+
+export const StyledLinkIcon = styled.div<{ $active: boolean }>(
+  ({ theme, $active }) => {
+    const color = $active ? theme.color.main1 : `${theme.color.base0}20`
+
+    return [
+      tw`h-3 w-2`,
+      css`
+        background-color: ${color};
+      `,
+    ]
+  },
+)

src/components/common/Main/styles.tsx

@@ -2,5 +2,5 @@ import styled from 'styled-components'
 import tw from 'twin.macro'
 
 export const StyledMain = styled.main`
-  ${tw`flex flex-col flex-1`}
+  ${tw`flex flex-col flex-1 px-16`}
 `