Ny vft

idea/gear/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine AS builder
+FROM node:20-slim AS builder
 
 WORKDIR /src
 

idea/gear/frontend/package.json

@@ -10,6 +10,7 @@
     "clean": "echo \"clean gear-idea-frontend\" && rm -rf dist"
   },
   "dependencies": {
+    "@base-ui-components/react": "^1.0.0-beta.7",
     "@gear-js/api": "0.44.2",
     "@gear-js/react-hooks": "*",
     "@gear-js/ui": "*",

idea/gear/frontend/src/features/code/ui/code-card/code-card.module.scss

@@ -1,76 +1,84 @@
-@use '@gear-js/ui/mixins' as *;
-@use '@/shared/assets/styles/shared' as *;
-@use '@/shared/assets/styles/mixins' as *;
-@use '@/shared/assets/styles/variables' as *;
-@use '@/shared/assets/styles/animations' as *;
+@use '@gear-js/ui/mixins' as *; '@gear-js/ui/mixins' as *; @use '@/共享/资产/样式/共享' as *; as *;
+@use '@/共享/资产/样式/共享'作为 *;'@/共享/资产/样式/共享'作为 *;
+@use '@/共享/资产/样式/混合'相对的
+@use '@/共享/资产/样式/变量'作为 *;
+@use '@/共享/资产/样式/动画'作为 *;
 
-.horizontalCodeCard {
-  @include transition(background-color);
+。地平线​​ntalCodeCard {
+  @include过渡(background-color);
 
-  display: flex;
-  position: relative;
-  border-radius: toRem(16);
-  background-color: $bgColor4;
-
-  &:hover {
-    background-color: $gray100;
+展示: 弯曲;
+位置:相对的;
+徘徊边界半径(16)；边界半径: 托雷姆(16);
+背景颜色：$bgColor4；背景颜色：$bgColor4；
 
-    .content::after {
-      background: radial-gradient(50% 50% at 50% 50%, rgba($successColor, 0.45) 25%, rgba(24, 24, 27, 0) 100%);
+&:悬停{hover {
+背景颜色: $gray100;
+ㄓ
+。内容::后 {
+背景: 径向渐变(50% 50%在50% 50%, RGBA($成功颜色,0.45) 25%, RGBA(24, 24, 27, 0) 100%);
     }
   }
 }
 
-.content {
-  flex: 1 1;
-  padding: toRem(24);
-  overflow: hidden;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: -40%;
-    bottom: -100%;
-    width: 100%;
-    height: 200%;
-    background: radial-gradient(50% 50% at 50% 50%, rgba($successColor, 0.23) 0%, rgba(24, 24, 27, 0) 100%);
+。内容 {
+弯曲:1 1;
+填充: 托雷姆(24);
+溢出: 隐;
+位置: 相对的;
+
+&::后 {
+内容:'';'';'';'';
+位置: 绝对;
+正确的:-40%;-40%;-40%;-40%;
+底部：-100%；-100%；-100%;-100%；-100%；-100%;-100%；-100%；-100%;-100%；-100%；-100%;
+宽度:100%;100%;100%;100%;
+高度:200%;200%;200%;200%;
+背景: 径向渐变(50% 50% at 50% 50%, RGBA($successColor, 0.23) 0%, RGBA(24, 24, 27, 0) 100%);50% 50% at 50% 50%, RGBA($successColor, 0.23) 0%, RGBA(24, 24, 27, 0) 100%);50% 50% at 50% 50%, RGBA($successColor, 0.23) 0%, RGBA(24, 24, 27, 0) 100%);50% 50% at 50% 50%, RGBA($successColor, 0.23) 0%, RGBA(24, 24, 27, 0) 100%);
   }
 
-  .name {
-    @include transition;
-    display: block;
-    max-width: 60%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: $fontSizeBig;
-    font-family: 'Kanit';
-    font-weight: 600;
-    line-height: 1.3;
-    margin-right: $margin;
-    margin-bottom: 10px;
-    position: relative;
-    z-index: 1;
-
-    &:hover {
-      opacity: 0.5;
+。关联 {
+@包括过渡；@includetransition;包括过渡；@include过渡;
+
+右边距: $margin;
+边距底部: 10像素;10像素;10像素;10像素;
+
+展示: 弯曲;
+对齐项目: 中心;
+差距:8像素;8像素;8像素;8像素;
+
+位置: 相对的;
+z 索引:1;1;1;1;
+
+&:徘徊 {
+不透明度:0.5;0.5;
     }
   }
 
+。姓名 {
+最大宽度:60%;60%;
+溢出: 隐;
+文本溢出: 省略;
+字体大小：$fontSizeBig；
+字体系列:'卡尼特';
+字体粗细:600;
+行高:1.3;
+  }
+
   .otherInfo {
-    display: flex;
-    position: relative;
+展示: 弯曲;
+位置：相对；
   }
 
-  .codeId {
-    z-index: 2;
-    margin-bottom: 10px;
+.codeIdz 索引.codeId {
+z 索引：2；z 索引: 2;
+底部边距：10像素；边距底部:10像素;
   }
 
-  .otherInfo {
-    @include childrenMargin($margin, right);
+.otherInfo {.otherInfo {
+@include儿童保证金($margin, 右);@include儿童保证金($margin, 右);
 
-    z-index: 4;
+z 索引：4；z 索引:4;
   }
 }
 

idea/gear/frontend/src/features/code/ui/code-card/code-card.tsx

@@ -1,6 +1,7 @@
 import { Link, generatePath } from 'react-router-dom';
 
 import { LocalCode } from '@/features/local-indexer';
+import { isVftCode, VftTag } from '@/features/vft-standard';
 import CreateProgramSVG from '@/shared/assets/images/actions/create-program.svg?react';
 import RelatedrelatedProgramsSVG from '@/shared/assets/images/actions/related-programs.svg?react';
 import { absoluteRoutes, routes } from '@/shared/config';
@@ -24,8 +25,9 @@ function CodeCard({ code }: Props) {
   return (
     <div className={styles.horizontalCodeCard}>
       <div className={styles.content}>
-        <Link to={to} className={styles.name}>
-          {name || 'Code'}
+        <Link to={to} className={styles.link}>
+          <span className={styles.name}>{name || 'Code'}</span>
+          {isVftCode(code.id) && <VftTag />}
         </Link>
 
         {'timestamp' in code && (

idea/gear/frontend/src/features/program/ui/program-card/program-card.module.scss

@@ -39,6 +39,14 @@
 
 .link {
   @include transition;
+
+  margin-right: $margin;
+  margin-bottom: 10px;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
   position: relative;
   z-index: 1;
 
@@ -77,8 +85,6 @@
     font-family: 'Kanit';
     font-weight: 600;
     line-height: 1.3;
-    margin-right: $margin;
-    margin-bottom: 10px;
   }
 }
 

idea/gear/frontend/src/features/program/ui/program-card/program-card.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { Link, generatePath } from 'react-router-dom';
 
 import { LocalProgram } from '@/features/local-indexer';
+import { isVftCode, VftTag } from '@/features/vft-standard';
 import { IssueVoucher, VoucherBadge } from '@/features/voucher';
 import sendSVG from '@/shared/assets/images/actions/send.svg?react';
 import { absoluteRoutes } from '@/shared/config';
@@ -32,6 +33,7 @@ const ProgramCard = ({ program, vertical }: Props) => {
       <div className={styles.content}>
         <Link to={generatePath(absoluteRoutes.program, { programId })} className={styles.link}>
           <h2 className={styles.name}>{name}</h2>
+          {program.codeId && isVftCode(program.codeId) && <VftTag />}
         </Link>
 
         <div className={styles.otherInfo}>

idea/gear/frontend/src/features/vft-standard/assets/extended_vft.idl

@@ -0,0 +1,48 @@
+constructor {
+  New : (name: str, symbol: str, decimals: u8);
+};
+
+service Vft {
+  Burn : (from: actor_id, value: u256) -> bool;
+  GrantAdminRole : (to: actor_id) -> null;
+  GrantBurnerRole : (to: actor_id) -> null;
+  GrantMinterRole : (to: actor_id) -> null;
+  Mint : (to: actor_id, value: u256) -> bool;
+  RevokeAdminRole : (from: actor_id) -> null;
+  RevokeBurnerRole : (from: actor_id) -> null;
+  RevokeMinterRole : (from: actor_id) -> null;
+  Approve : (spender: actor_id, value: u256) -> bool;
+  Transfer : (to: actor_id, value: u256) -> bool;
+  TransferFrom : (from: actor_id, to: actor_id, value: u256) -> bool;
+  query Admins : () -> vec actor_id;
+  query Burners : () -> vec actor_id;
+  query Minters : () -> vec actor_id;
+  query Allowance : (owner: actor_id, spender: actor_id) -> u256;
+  query BalanceOf : (account: actor_id) -> u256;
+  query Decimals : () -> u8;
+  query Name : () -> str;
+  query Symbol : () -> str;
+  query TotalSupply : () -> u256;
+
+  events {
+    Minted: struct {
+      to: actor_id,
+      value: u256,
+    };
+    Burned: struct {
+      from: actor_id,
+      value: u256,
+    };
+    Approval: struct {
+      owner: actor_id,
+      spender: actor_id,
+      value: u256,
+    };
+    Transfer: struct {
+      from: actor_id,
+      to: actor_id,
+      value: u256,
+    };
+  }
+};
+

idea/gear/frontend/src/features/vft-standard/consts.ts

@@ -0,0 +1,3 @@
+const VFT_CODE_IDS = ['0x17a3faf3760254f07b198559a01cf97d7cbf35d4b149293dcc1b8f1edac9e10b'];
+
+export { VFT_CODE_IDS };

idea/gear/frontend/src/features/vft-standard/hooks.ts

@@ -0,0 +1,37 @@
+import { HexString } from '@gear-js/api';
+import { useAccount, useProgram, useProgramQuery } from '@gear-js/react-hooks';
+
+import { SailsProgram } from './sails';
+
+function useVftProgram(id: HexString | undefined) {
+  return useProgram({ id, library: SailsProgram });
+}
+
+function useVftDecimals(id: HexString | undefined) {
+  const { data: program } = useVftProgram(id);
+
+  return useProgramQuery({ program, serviceName: 'vft', functionName: 'decimals', args: [] });
+}
+
+function useVftRoles(id: HexString | undefined) {
+  const { data: program } = useVftProgram(id);
+
+  const admins = useProgramQuery({ program, serviceName: 'vft', functionName: 'admins', args: [] });
+  const minters = useProgramQuery({ program, serviceName: 'vft', functionName: 'minters', args: [] });
+  const burners = useProgramQuery({ program, serviceName: 'vft', functionName: 'burners', args: [] });
+
+  return { admins, minters, burners };
+}
+
+function useAccountRole(id: HexString | undefined) {
+  const { account } = useAccount();
+  const { admins, minters, burners } = useVftRoles(id);
+
+  const isAdmin = account ? admins.data?.includes(account.decodedAddress) : false;
+  const isMinter = account ? minters.data?.includes(account.decodedAddress) : false;
+  const isBurner = account ? burners.data?.includes(account.decodedAddress) : false;
+
+  return { isAdmin, isMinter, isBurner };
+}
+
+export { useVftProgram, useVftDecimals, useVftRoles, useAccountRole };

idea/gear/frontend/src/features/vft-standard/index.ts

@@ -0,0 +1,4 @@
+import { VftTag, Vft } from './ui';
+import { isVftCode } from './utils';
+
+export { VftTag, isVftCode, Vft };