Merge pull request #23 from Nomis-cc/feature/update-layout

feat: update to jsx
Nomis-cc · Aug 7, 2024 · e2c8cb7 · e2c8cb7
2 parents 2b260f7 + 8d920ce
commit e2c8cb7
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 144 deletions.
diff --git a/package.json b/package.json
@@ -56,5 +56,8 @@
       "@lavamoat/preinstall-always-fail": false,
       "sharp": true
     }
+  },
+  "dependencies": {
+    "@metamask/snaps-sdk": "^6.2.1"
   }
 }
diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -27,7 +27,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@metamask/snaps-sdk": "^6.1.1",
+    "@metamask/snaps-sdk": "^6.2.1",
     "buffer": "^6.0.3"
   },
   "devDependencies": {
@@ -37,8 +37,8 @@
     "@metamask/eslint-config-jest": "^12.1.0",
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
-    "@metamask/snaps-cli": "^6.2.1",
-    "@metamask/snaps-jest": "^8.2.0",
+    "@metamask/snaps-cli": "^6.3.0",
+    "@metamask/snaps-jest": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.45.0",

diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "EKgxZg2D/EjYdJAZFj9iHIxGTkDUSJtPKd7uXQAYdvk=",
+    "shasum": "NCyrhjLIV9HDo3dA6L3cHYrGyv1hZJ8fmx39gwTbMaI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/index.tsx b/packages/snap/src/index.tsx
@@ -1,19 +1,16 @@
-import {
-  type OnHomePageHandler,
-  type OnInstallHandler,
-  type OnRpcRequestHandler,
-  type OnTransactionHandler,
-  type OnUpdateHandler,
-  type OnUserInputHandler,
+import type {
+  OnRpcRequestHandler,
+  OnUserInputHandler,
+  OnTransactionHandler,
 } from '@metamask/snaps-sdk';
+import { type OnHomePageHandler } from '@metamask/snaps-sdk';
 
 import { calculateScore } from './api';
 import {
   renderMainUi,
   renderMainUiWithError,
   renderMainUiWithLoading,
   renderMainUiWithScore,
-  renderPromptNextSteps,
   renderTransactionUi,
 } from './ui';
 import { convertCAIP2ToHex, getAccount, getChainId } from './utils';
@@ -25,20 +22,6 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
   }
 };
 
-export const onInstall: OnInstallHandler = async () => {
-  await snap.request({
-    method: 'snap_dialog',
-    params: await renderPromptNextSteps(),
-  });
-};
-
-export const onUpdate: OnUpdateHandler = async () => {
-  await snap.request({
-    method: 'snap_dialog',
-    params: await renderPromptNextSteps(),
-  });
-};
-
 export const onHomePage: OnHomePageHandler = async () => {
   const [account, chainId] = await Promise.all([getAccount(), getChainId()]);
 
@@ -79,12 +62,7 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
         method: 'snap_updateInterface',
         params: {
           id,
-          ui: renderMainUiWithScore(
-            score,
-            scoreName,
-            url,
-            `https://nomis.cc/api/snap/score?chainId=${chainId}&address=${account}`,
-          ),
+          ui: renderMainUiWithScore(score, scoreName, url),
         },
       });
     } catch {

diff --git a/packages/snap/src/types.ts b/packages/snap/src/types.ts
@@ -1,9 +1,12 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export type Holder = {
   isHolder: boolean;
   score: number;
   scoreName: string;
   url: string;
   image: string;
+  tokenId: string;
+  updated_ms: string;
 };
 
 export type Score = {

diff --git a/packages/snap/src/ui.tsx b/packages/snap/src/ui.tsx
@@ -1,92 +1,105 @@
-import type { DialogParams } from '@metamask/snaps-sdk';
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable camelcase */
+import { getImageComponent } from '@metamask/snaps-sdk';
 import {
-  button,
-  divider,
-  form,
-  getImageComponent,
-  heading,
-  panel,
-  spinner,
-  text,
-} from '@metamask/snaps-sdk';
+  Box,
+  Button,
+  Divider,
+  Form,
+  Heading,
+  Image,
+  Link,
+  Row,
+  Spinner,
+  Text,
+} from '@metamask/snaps-sdk/jsx';
 
 import { getScore } from './api';
 
-export const renderPromptNextSteps = async () => {
-  return {
-    type: 'alert',
-    content: panel([
-      heading('After install heading'),
-      text('After install text'),
-    ]),
-  } as DialogParams;
-};
-
 export const renderMainUi = async (account: string, chainId: string) => {
-  const { score, scoreName, url, image } = await getScore(chainId, account);
-
-  const displayData: Parameters<typeof panel>[0] = [
-    heading(`${scoreName} Score: ${score || 'unknown'}`),
-    divider(),
-    form({
-      name: 'calculate-score',
-      children: [
-        button({
-          value: 'Calculate score',
-          buttonType: 'submit',
-        }),
-      ],
-    }),
-    text(`[Mint your score](https://nomis.cc${url})`),
-  ];
-
-  if (image) {
-    displayData.splice(1, 0, await getImageComponent(image, { width: 400 }));
-  }
-
-  return panel(displayData);
+  const { score, scoreName, url, image, tokenId, updated_ms } = await getScore(
+    chainId,
+    account,
+  );
+
+  const imageSrc = await getImageComponent(image, { width: 400 });
+
+  return (
+    <Box>
+      <Heading>{`${scoreName} Score: ${score || 'unknown'}`}</Heading>
+      <Divider />
+      <Image src={imageSrc.value} />
+      {score > 0 && (
+        <Row label="Score">
+          <Text>{String(score)}</Text>
+        </Row>
+      )}
+      {score > 0 && (
+        <Row label="Token id">
+          <Text>{String(tokenId)}</Text>
+        </Row>
+      )}
+      {score > 0 && (
+        <Row label="Updated">
+          <Text>{new Date(updated_ms).toLocaleString('en-Us')}</Text>
+        </Row>
+      )}
+      <Box direction="horizontal" alignment="space-between">
+        <Text>
+          <Link href={`https://nomis.cc${url}`}>Mint your score</Link>
+        </Text>
+        <Form name="calculate-score">
+          <Button name="calculate-score" type="submit">
+            Calculate Score
+          </Button>
+        </Form>
+      </Box>
+    </Box>
+  );
 };
 
 export const renderMainUiWithLoading = () => {
-  return panel([heading('Please wait...'), spinner()]);
+  return (
+    <Box>
+      <Heading>Calculating score...</Heading>
+      <Spinner />
+    </Box>
+  );
 };
 
 export const renderMainUiWithScore = (
   score: number,
   scoreName: string,
   url: string,
-  link: string,
 ) => {
-  return panel([
-    heading(`${scoreName} Score: ${Number((score * 100).toFixed(2))}`),
-    text(`[Mint your score](https://nomis.cc${url})`),
-    text(link),
-    divider(),
-    form({
-      name: 'back',
-      children: [
-        button({
-          value: 'Back',
-          buttonType: 'submit',
-        }),
-      ],
-    }),
-  ]);
+  return (
+    <Box>
+      <Heading>{`${scoreName} Score: ${Number(
+        (score * 100).toFixed(2),
+      )}`}</Heading>
+      <Box direction="horizontal" alignment="space-between">
+        <Form name="back">
+          <Button variant="destructive" type="submit">
+            Back
+          </Button>
+        </Form>
+        <Text>
+          <Link href={`https://nomis.cc${url}`}>Mint score</Link>
+        </Text>
+      </Box>
+    </Box>
+  );
 };
 
 export const renderMainUiWithError = () => {
-  return panel([
-    heading('Failed to calculate score'),
-    form({
-      name: 'back',
-      children: [
-        button({
-          value: 'Back',
-          buttonType: 'submit',
-        }),
-      ],
-    }),
-  ]);
+  return (
+    <Box>
+      <Heading>Failed to calculate score</Heading>
+      <Form name="back">
+        <Button type="submit">Back</Button>
+      </Form>
+    </Box>
+  );
 };
 
 export const renderTransactionUi = async (
@@ -100,51 +113,61 @@ export const renderTransactionUi = async (
   ]);
 
   if (recipientData.isHolder) {
-    const displayData: Parameters<typeof panel>[0] = [
-      heading(
-        `Recipient ${recipientData.scoreName} Score: ${recipientData.score}`,
-      ),
-      divider(),
-      text(`[Get your score](https://nomis.cc${recipientData.url})`),
-    ];
-
-    if (recipientData.image) {
-      displayData.splice(
-        1,
-        0,
-        await getImageComponent(recipientData.image, { width: 400 }),
-      );
-    }
+    const imageSrc = await getImageComponent(recipientData.image, {
+      width: 400,
+    });
 
     return {
-      content: panel(displayData),
+      content: (
+        <Box>
+          <Heading>
+            Recipient {recipientData.scoreName} Score:{' '}
+            {String(recipientData.score)}
+          </Heading>
+          <Divider />
+          <Image src={imageSrc.value} />
+          <Text>
+            <Link href={`https://nomis.cc${recipientData.url}`}>
+              Get your score
+            </Link>
+          </Text>
+        </Box>
+      ),
     };
   }
 
   if (!senderData.isHolder) {
     return {
-      content: panel([
-        heading(`Get your ${senderData.scoreName} Score`),
-        text(`[Get Score](https://nomis.cc${senderData.url})`),
-      ]),
+      content: (
+        <Box>
+          <Heading>Get your ${senderData.scoreName} Score</Heading>
+          <Divider />
+          <Text>
+            <Link href={`https://nomis.cc${recipientData.url}`}>
+              Get your score
+            </Link>
+          </Text>
+        </Box>
+      ),
     };
   }
 
-  const displayData: Parameters<typeof panel>[0] = [
-    heading(`Your ${senderData.scoreName} Score: ${senderData.score}`),
-    divider(),
-    text(`[Update your score](https://nomis.cc${senderData.url})`),
-  ];
-
-  if (senderData.image) {
-    displayData.splice(
-      1,
-      0,
-      await getImageComponent(senderData.image, { width: 400 }),
-    );
-  }
+  const imageSrc = await getImageComponent(senderData.image, { width: 400 });
 
   return {
-    content: panel(displayData),
+    content: (
+      <Box>
+        <Heading>
+          Your {senderData.scoreName} Score: {String(senderData.score)}
+        </Heading>
+        <Divider />
+        <Image src={imageSrc.value} />
+        <Text>
+          <Link href={`https://nomis.cc${senderData.url}`}>
+            Update your score
+          </Link>
+        </Text>
+      </Box>
+    ),
   };
 };
diff --git a/packages/snap/tsconfig.json b/packages/snap/tsconfig.json
@@ -5,5 +5,5 @@
     "jsx": "react-jsx",
     "jsxImportSource": "@metamask/snaps-sdk"
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "src/ui.tsx", "src/index.tsx"]
 }