integration with canisters

mettal-stable · Nov 24, 2024 · 63f5b68 · 63f5b68
1 parent eb10a93
commit 63f5b68
Show file tree

Hide file tree

Showing 31 changed files with 1,472 additions and 194 deletions.
diff --git a/.env b/.env
@@ -9,4 +9,10 @@ VITE_GRAPHQL_URI=http://localhost:4000
 VITE_ICP_IDENTITY_ORIGIN=http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:8080
 VITE_ICP_SC_CANISTER_ID=bkyz2-fmaaa-aaaaa-qaaaq-cai
 
-/#authorize
+VITE_PUSHER_APP_ID=708556
+VITE_PUSHER_KEY=45a9f78df90b886b0e5f
+
+
+VITE_ICRC_PROVIDER=http://localhost:8080
+VITE_ICRC_CANISTER_ID=br5f7-7uaaa-aaaaa-qaaca-cai
+VITE_ICRC_SPENDER=be2us-64aaa-aaaaa-qaabq-cai
diff --git a/package.json b/package.json
@@ -42,9 +42,11 @@
     "jwt-decode": "^4.0.0",
     "mui-one-time-password-input": "^3.0.1",
     "notistack": "^3.0.1",
+    "pusher-js": "^8.4.0-rc2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "devDependencies": {
     "@dfinity/agent": "^2.0.0",

diff --git a/src/lib/account/domain/account.model.ts b/src/lib/account/domain/account.model.ts
diff --git a/src/lib/account/domain/value-objects/wallet.model.ts b/src/lib/account/domain/value-objects/wallet.model.ts
@@ -0,0 +1,110 @@
+import { BaseModel } from "@shared/domain/models/base.model";
+
+export interface IWallet {
+  network?: string;
+  name?: string;
+  balance: number;
+  address?: string;
+  default?: boolean;
+  balance_formated?: string;
+  balance_with_decimals?: string;
+  actions?: {
+    buy: boolean;
+    swap?: boolean;
+    deposit?: boolean;
+    sell?: boolean;
+    withdraw?: boolean;
+  };
+  limits?: {
+    sell_amount?: number;
+    buy_amount?: number;
+  };
+}
+
+export class Wallet extends BaseModel implements IWallet {
+  network?: string;
+  address?: string;
+  balance: number = 0;
+  actions: any = {
+    buy: false,
+    swap: false,
+    deposit: false,
+    sell: false,
+    withdraw: false,
+  };
+  limits: any = {
+    sell_amount: 0,
+    buy_amount: 0,
+  };
+  balance_formated?: string;
+  balance_with_decimals?: string;
+  default?: boolean;
+  constructor(input?: IWallet) {
+    super();
+    this.setNetwork(input?.network);
+    this.setName(input?.name);
+    this.setAddress(input?.address);
+    this.setBalance(input?.balance);
+    this.setActions(input?.actions);
+    this.setLimits(input?.limits);
+    this.setBalanceFormated(input?.balance_formated);
+    this.setBalanceWithDecimals(input?.balance_with_decimals);
+  }
+  setNetwork(value?: string) {
+    if (value) this.network = value;
+  }
+
+  setAddress(value?: string) {
+    if (value) this.address = value;
+  }
+  setBalance(value?: number) {
+    if (typeof value === "number") {
+      this.balance = value;
+    }
+  }
+
+  setActions(value?: any) {
+    if (value) {
+      this.actions = value;
+    }
+  }
+  setLimits(value?: any) {
+    if (value) this.limits = value;
+  }
+  setBalanceFormated(value?: string) {
+    if (value) {
+      return (this.balance_formated = value);
+    }
+    if (Number(this.balance) >= 0) {
+      this.balance_formated = new Intl.NumberFormat("es-MX", {
+        style: "currency",
+        currency: "MXN",
+      }).format(Number(this.balance) / 100);
+    }
+  }
+  setBalanceWithDecimals(value?: string) {
+    if (value) {
+      return (this.balance_with_decimals = value);
+    }
+
+    if (Number(this.balance) >= 0) {
+      const balance_formated = new Intl.NumberFormat("es-MX", {
+        style: "currency",
+        currency: "MXN",
+      }).format(Number(this.balance) / 100);
+      this.balance_with_decimals = balance_formated.replace("$", "");
+    }
+  }
+
+  static formatAmount(amount: number, allowPrefix?: boolean): string {
+    let value = new Intl.NumberFormat("es-MX", {
+      style: "currency",
+      currency: "MXN",
+    }).format(Number(amount));
+
+    if (!allowPrefix) {
+      return value.replace("$", "");
+    }
+    return value;
+  }
+}
diff --git a/src/lib/auth/data/icp.provider.ts b/src/lib/auth/data/icp.provider.ts
@@ -3,6 +3,7 @@ import { User } from "@auth/domain/models/user.model";
 import { IAuthPort } from "@auth/domain/ports/auth.port";
 import { Identity } from "@dfinity/agent/lib/cjs/auth";
 import { AuthClient } from "@dfinity/auth-client";
+import { Principal } from "@dfinity/principal";
 
 export class ICPProvider implements IAuthPort {
   token?: string;
@@ -30,6 +31,10 @@ export class ICPProvider implements IAuthPort {
     return this.authClient?.getIdentity();
   }
 
+  async getPrincipal(): Promise<Principal | undefined> {
+    return this.authClient?.getIdentity()?.getPrincipal();
+  }
+
   async geAuth(): Promise<Auth> {
     this.identity = this.authClient?.getIdentity();
     let token = this.identity?.getPrincipal().toText();

diff --git a/src/lib/auth/interface/providers/auth.provider.tsx b/src/lib/auth/interface/providers/auth.provider.tsx
@@ -21,6 +21,8 @@ export type IAuthContext = {
   validateOtp(input: any): Promise<any>;
   auth: Auth | null;
   authLoading: boolean;
+  account: any;
+  getAccount(): Promise<any>;
 };
 
 export interface IAuthProvider {
@@ -48,6 +50,7 @@ const AuthProvider: React.FC<IAuthProvider> = (props) => {
   const [authLoading, setLoadingAuth] = useState<boolean>(true);
   const [auth, setAuth] = useState<Auth | null>(null);
   const [providerClient, setProviderClient] = useState<any>(null);
+  const [account, setAccount] = useState<any>(null);
 
   const initProvider = async () => {
     await props.provider.init();
@@ -59,24 +62,26 @@ const AuthProvider: React.FC<IAuthProvider> = (props) => {
     let isAuth = await props.provider.isAuthenticated();
 
     if (isAuth) {
-      const auth = await props.provider.geAuth();
-
-      setAuth(auth);
-
-      const account = await props.adapter.getAccount();
-      console.log({ account });
-      props.session.register(auth);
-
-      if (!account) {
-        await props.provider.logout();
-        useErrorAlert!({ message: "Account not found" });
+      const auth = await getAuth();
+      const account = await getAccount();
+
+      if (auth) {
+        props.session.register(auth);
+
+        if (!account) {
+          await props.provider.logout();
+          useErrorAlert!({ message: "Account not found" });
+          return true;
+        }
+        navigate("/");
+        setTimeout(() => {
+          setLoadingAuth(false);
+        }, 300);
         return true;
-      }
-      navigate("/");
-      setTimeout(() => {
+      } else {
         setLoadingAuth(false);
-      }, 300);
-      return true;
+        return false;
+      }
     } else {
       setLoadingAuth(false);
       return false;
@@ -136,6 +141,28 @@ const AuthProvider: React.FC<IAuthProvider> = (props) => {
     }
   };
 
+  const getAuth = async () => {
+    try {
+      const auth = await props.provider.geAuth();
+      setAuth(auth);
+      return auth;
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
+  };
+
+  const getAccount = async () => {
+    try {
+      const account = await props.adapter.getAccount();
+      setAccount(account);
+      return account;
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
+  };
+
   React.useEffect(() => {
     if (!!providerClient) {
       geAuth();
@@ -148,7 +175,17 @@ const AuthProvider: React.FC<IAuthProvider> = (props) => {
 
   return (
     <AuthContext.Provider
-      value={{ login, logout, linkIcp, signup, auth, authLoading, validateOtp }}
+      value={{
+        login,
+        logout,
+        linkIcp,
+        signup,
+        auth,
+        authLoading,
+        validateOtp,
+        account,
+        getAccount,
+      }}
     >
       {props.children}
     </AuthContext.Provider>

diff --git a/src/lib/dash/data/services/get-account.service.ts b/src/lib/dash/data/services/get-account.service.ts
@@ -59,6 +59,25 @@ export class GetAccountService {
                 last_name
                 id
               }
+              wallets{
+                balance
+              balance_formated
+              balance_with_decimals
+              default
+              name
+              network
+              actions{
+                deposit
+                withdraw
+                buy
+                sell  
+                swap
+              }
+              limits{
+                buy_amount
+                sell_amount
+              }
+              }
             }
           }
     `;

diff --git a/src/lib/dash/data/services/get-wallets.service.ts b/src/lib/dash/data/services/get-wallets.service.ts
@@ -23,7 +23,11 @@ export class GetWalletsService {
 
   async request() {
     try {
-      await this.adapter?.query(this.getQuery(), this.getVariables());
+      await this.adapter?.query(
+        this.getQuery(),
+        this.getVariables(),
+        "no-cache"
+      );
     } catch (error) {
       console.log(error);
     }

diff --git a/src/lib/dash/domain/models/wallet.model.ts b/src/lib/dash/domain/models/wallet.model.ts
diff --git a/src/lib/dash/interface/components/card-wallet/card-wallet.tsx b/src/lib/dash/interface/components/card-wallet/card-wallet.tsx
@@ -1,4 +1,4 @@
-import { IWallet } from "@dash/domain/models/wallet.model";
+import { IWallet } from "../../../../account/domain/value-objects/wallet.model";
 import {
   Button,
   Card,
@@ -15,17 +15,26 @@ export interface ICardWallet {
 }
 export const CardWallet: React.FC<ICardWallet> = (props) => {
   return (
-    <Card sx={{}}>
+    <Card
+      sx={{
+        border: "1px solid #ccc",
+        borderRadius: 1,
+
+        transition: "all 300ms ease-in",
+        boxShadow: "11px 17px 60px -81px rgba(0,0,0,0.56)",
+        background: theme.palette.background.secondary,
+      }}
+    >
       <CardContent sx={{ m: 0, pb: 0 }}>
         <Typography sx={{ fontSize: "1.1rem" }}>
-          <strong>{props.data.network.toUpperCase()}</strong> :{" "}
-          {props.data.balance_formated} MXND
+          <strong>{props.data?.network?.toUpperCase()}</strong> :{" "}
+          {props.data?.balance_formated} MXND
         </Typography>
       </CardContent>
       <CardActions>
         <Button
           size="small"
-          disabled={!props.data.actions.sell}
+          disabled={!props.data?.actions?.sell}
           sx={{
             color: theme.palette.secondary.main,
           }}
@@ -36,7 +45,7 @@ export const CardWallet: React.FC<ICardWallet> = (props) => {
 
         <Button
           size="small"
-          disabled={!props.data.actions.buy}
+          disabled={!props.data?.actions?.buy}
           sx={{
             color: theme.palette.secondary.main,
           }}
@@ -46,7 +55,7 @@ export const CardWallet: React.FC<ICardWallet> = (props) => {
 
         <Button
           size="small"
-          disabled={!props.data.actions.deposit}
+          disabled={!props.data?.actions?.deposit}
           sx={{
             color: theme.palette.secondary.main,
           }}
@@ -57,7 +66,7 @@ export const CardWallet: React.FC<ICardWallet> = (props) => {
         <Button
           size="small"
           color="secondary"
-          disabled={!props.data.actions.swap}
+          disabled={!props.data?.actions?.swap}
           sx={{
             color: theme.palette.secondary.main,
           }}