feat: adjust UI and descriptions

packages/site/src/components/Footer.tsx

@@ -1,7 +1,13 @@
 export const Footer = () => {
   return (
     <footer className="flex flex-row items-center justify-center my-10 border-t border-solid">
-      <span> powered by RSS3 </span>
+      <span>
+        {' '}
+        Powered by{' '}
+        <a className="text-[#0072ff]" href="https://rss3.io" about="_blank">
+          RSS3
+        </a>{' '}
+      </span>
     </footer>
   );
 };

packages/site/src/components/Header.tsx

@@ -25,7 +25,7 @@ export const Header = () => {
     <div className="flex flex-row justify-between items-center p-4 border-b border-solid">
       <div className="flex flex-row items-center space-x-4">
         <SnapLogo />
-        <p>RSS3 Activity Monitor Snap</p>
+        <p>RSS3 Social Notifier Snap</p>
       </div>
       <div className="flex flex-row items-center">
         {/* <Toggle

packages/site/src/config/snap.ts

@@ -8,3 +8,6 @@
  */
 export const defaultSnapOrigin =
   process.env.SNAP_ORIGIN ?? `local:http://localhost:8080`;
+
+export const isProduction =
+  (process.env.ENVIRONMENT ?? `development`) === 'production';

packages/site/src/pages/index.tsx

@@ -22,7 +22,7 @@ import {
   ReconnectButton,
   SendHelloButton,
 } from '../components';
-import { defaultSnapOrigin } from '../config';
+import { defaultSnapOrigin, isProduction } from '../config';
 import {
   Card,
   // CardContent,
@@ -187,20 +187,47 @@ const Index = () => {
     <div className="container my-12">
       <h1 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
         Welcome to{' '}
-        <span className="text-[#0072ff] drop-shadow-lg">
-          RSS3 Activity Monitor Snap
+        <span className="text-[#0072ff] drop-shadow-md">
+          RSS3 Social Notifier -
         </span>
+        <span className="text-[#E97C23] drop-shadow-md"> A MetaMask Snap</span>
       </h1>
       <h2 className="mt-5 mb-10 text-base text-left max-2xl text-muted-foreground sm:text-lg">
         <p>
-          This Snap for <span>MetaMask</span> allows you to monitor the
-          activities of any address.
+          This Snap for <span className="text-[#E97C23]">MetaMask</span> offers
+          a quick and easy way to stay on top of your frens' social activities.
         </p>
         <p>1. Connect to the Snap and install.</p>
-        <p>2. Start monitoring any address.</p>
         <p>
-          3. When there is a new activity produced by any of your monitored
-          addresses, <span>you will be notified</span>.
+          2. Your Web3 social graphs on{' '}
+          <a
+            className="text-[#F6C549] font-bold"
+            href="https://crossbell.io/"
+            target="_blank"
+          >
+            Crossbell
+          </a>
+          ,{' '}
+          <a
+            className="text-[#8A63D1] font-bold"
+            href="https://www.farcaster.xyz/"
+            target="_blank"
+          >
+            Farcaster
+          </a>
+          ,{' '}
+          <a
+            className="text-[#AAFE2D] font-bold"
+            href="https://www.lens.xyz/"
+            target="_blank"
+          >
+            Lens Protocol
+          </a>
+          , will be automatically imported.
+        </p>
+        <p>
+          3. When a new social activity initiated by any of your Web3 frens,{' '}
+          <span>you will be notified</span>.
         </p>
       </h2>
       {state.error && (
@@ -218,7 +245,7 @@ const Index = () => {
         {!isMetaMaskReady && (
           <Card>
             <CardHeader>
-              <CardTitle>Install</CardTitle>
+              <CardTitle>Install MetaMask Flask</CardTitle>
               <CardDescription className="h-[120px]">
                 Snaps is pre-release software only available in MetaMask Flask,
                 a canary distribution for developers with access to upcoming
@@ -267,8 +294,8 @@ const Index = () => {
           <CardHeader>
             <CardTitle>Reset Snap State</CardTitle>
             <CardDescription className="h-[120px]">
-              Clean all the data saved in this Snap. This does not affect your
-              wallet in anyway.
+              Reset the Snap's state, in case anything does not work properly.
+              This does not affect your wallet or assets in anyway.
             </CardDescription>
           </CardHeader>
           <CardFooter>
@@ -279,30 +306,27 @@ const Index = () => {
           </CardFooter>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Monitor your social profiles</CardTitle>
-            <CardDescription className="h-[120px]">
-              You can bind the profile you want to monitor on this page, and
-              then you will be able to monitor all the new activities from
-              people that your profile is following.
-            </CardDescription>
-          </CardHeader>
-          <CardFooter>
-            {/* <SendHelloButton
-              onClick={handleSendClearStateClick}
-              disabled={!state.installedSnap}
-            /> */}
-            <Button
-              disabled={!state.installedSnap}
-              onClick={() => {
-                navigate('/monitor/create');
-              }}
-            >
-              Forward
-            </Button>
-          </CardFooter>
-        </Card>
+        {!isProduction && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Stalk Someone</CardTitle>
+              <CardDescription className="h-[120px]">
+                You can get notified if someone else's frens publish something
+                (actually, this is for debugging purpose).
+              </CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <Button
+                disabled={!state.installedSnap}
+                onClick={() => {
+                  navigate('/monitor/create');
+                }}
+              >
+                Begin Stalking
+              </Button>
+            </CardFooter>
+          </Card>
+        )}
 
         {/* <Card>
           <CardHeader>

packages/site/src/pages/monitor/create.tsx

@@ -130,12 +130,13 @@ const MonitorCreate = () => {
             render={() => (
               <FormItem>
                 <div className="mb-4">
-                  <FormLabel className="text-base">Search Key</FormLabel>
+                  <FormLabel className="text-base">Stalk</FormLabel>
                   <FormDescription>
                     <p>
-                      Start monitoring a new address. Supported Web3 Name
-                      Service:
+                      Feeling stalk-y? Get notified for someone else's frens
+                      publish something on Web3 social platforms.
                     </p>
+                    <p>Supported Web3 Name Service:</p>
                     <b>
                       .eth, .lens, .csb, .bnb, .bit, .crypto, .zil, .nft, .x,
                       .wallet, .bitcoin, .dao, .888, .blockchain, .avax, .arb,
@@ -153,7 +154,7 @@ const MonitorCreate = () => {
                   render={({ field }) => (
                     <FormItem className="flex flex-row items-center space-x-2 leading-8 space-y-0">
                       <FormControl>
-                        <Input placeholder="Wallet Address" {...field} />
+                        <Input placeholder="Web3 DID" {...field} />
                       </FormControl>
                     </FormItem>
                   )}
@@ -171,7 +172,7 @@ const MonitorCreate = () => {
                 <div className="mb-4">
                   <FormLabel className="text-base">Platforms</FormLabel>
                   <FormDescription>
-                    Select the platforms you want to monitor in the snap.
+                    Select the platforms you want to get notified.
                   </FormDescription>
                 </div>
                 <div className="flex flex-row items-center justify-start gap-3">
@@ -212,13 +213,13 @@ const MonitorCreate = () => {
             )}
           />
 
-          <Button type="submit">query</Button>
+          <Button type="submit">Begin Stalking</Button>
         </form>
       </Form>
       {profiles.length > 0 && (
         <div className="flex flex-col items-start justify-center gap-3 mt-10">
           <h3 className="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-base">
-            Select you want to monitor profiles
+            Select the Profile(s)
           </h3>
           <div className="flex flex-wrap items-start justify-start gap-3">
             {profiles.map((item) => (
@@ -254,7 +255,11 @@ const MonitorCreate = () => {
                       </AvatarFallback>
                     </Avatar>
                     <h3 className="text-sm text-muted-foreground">
-                      {item.handle}
+                      {(item.handle?.length ?? 0) > 10
+                        ? `${item.handle?.slice(0, 6)}...${item.handle?.slice(
+                            -8,
+                          )}`
+                        : item.handle}
                     </h3>
                   </div>
                   <p className="text-sm line-clamp-1 min-h-[20px]">
@@ -266,7 +271,7 @@ const MonitorCreate = () => {
           </div>
 
           <Button onClick={addProfilesToMonitorFollowingHandler}>
-            Submit your monitor
+            Get Notfied!
           </Button>
         </div>
       )}

packages/site/src/pages/monitor/list.tsx

@@ -61,7 +61,7 @@ const MonitorList = () => {
                 className="flex flex-col items-start justify-center gap-4 border border-solid border-gray-100 w-full p-6 rounded-lg"
               >
                 <h3 className="text-lg font-bold">
-                  Monitor {monitor.search}'s following
+                  {monitor.search}'s following
                 </h3>
                 <p>
                   Last Updated:{' '}

packages/site/src/utils/snap.ts

@@ -197,13 +197,13 @@ export const showAllActivities = async () => {
   });
 };
 
-export const showAllMonitoredAddresses = async () => {
+export const showAllFollowedAddresses = async () => {
   await window.ethereum.request({
     method: 'wallet_invokeSnap',
     params: {
       snapId: defaultSnapOrigin,
       request: {
-        method: 'showAllMonitoredAddresses',
+        method: 'showAllFollowedAddresses',
       },
     },
   });

packages/snap/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rss3-metamask-snap",
   "version": "0.1.0",
-  "description": "Get notifications when monitored addresses produce new activities.",
+  "description": "Get notifications when your Web3 frens produce new activities.",
   "repository": {
     "type": "git",
     "url": "https://github.com/NaturalSelectionLabs/RSS3-MetaMask-Snap.git"

packages/snap/snap.config.ts

@@ -11,6 +11,9 @@ const config: SnapConfig = {
     buffer: false,
     builtIns: false,
   },
+  polyfills: {
+    buffer: true,
+  },
 };
 
 export default config;

packages/snap/snap.manifest.json

@@ -1,13 +1,13 @@
 {
   "version": "0.1.0",
-  "description": "Get notifications when monitored addresses produce new activities.",
-  "proposedName": "Activity Monitor",
+  "description": "Get notifications when your Web3 frens produce new activities.",
+  "proposedName": "RSS3 Social Notifier",
   "repository": {
     "type": "git",
     "url": "https://github.com/NaturalSelectionLabs/RSS3-MetaMask-Snap.git"
   },
   "source": {
-    "shasum": "1lmnkid0IQzmmw0ZJyWTODIJu+Vzqeo1KG5TL2xmFeY=",
+    "shasum": "otV0CuKpgG18gqS4SPVejZdu0OtF7aN9RmFrx13s674=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.ts

@@ -175,10 +175,10 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
       });
     }
 
-    // show the all monitored addresses
-    case 'showAllMonitoredAddresses': {
+    // show the all Followed addresses
+    case 'showAllFollowedAddresses': {
       const state = await getState();
-      const content: any = [heading('All Monitored Addresses')];
+      const content: any = [heading('Your Web3 frens')];
       state.socialActivities.forEach((activity) => {
         content.push(text(activity.address));
         content.push(divider());