feat: expose Environment from @arkecosystem/platform-sdk-profiles

package.json

@@ -40,12 +40,12 @@
 		"build:win": "yarn build && electron-builder --win --x64 --ia32 --publish never"
 	},
 	"dependencies": {
-		"@arkecosystem/platform-sdk": "^0.9.84",
-		"@arkecosystem/platform-sdk-ark": "^0.9.84",
-		"@arkecosystem/platform-sdk-crypto": "^0.9.84",
-		"@arkecosystem/platform-sdk-intl": "^0.9.84",
-		"@arkecosystem/platform-sdk-profiles": "^0.9.84",
-		"@arkecosystem/platform-sdk-support": "^0.9.84",
+		"@arkecosystem/platform-sdk": "^0.9.106",
+		"@arkecosystem/platform-sdk-ark": "^0.9.106",
+		"@arkecosystem/platform-sdk-crypto": "^0.9.106",
+		"@arkecosystem/platform-sdk-intl": "^0.9.106",
+		"@arkecosystem/platform-sdk-profiles": "^0.9.106",
+		"@arkecosystem/platform-sdk-support": "^0.9.106",
 		"@arkecosystem/utils": "^1.1.8",
 		"@testing-library/jest-dom": "^5.9.0",
 		"@testing-library/react": "^10.2.1",
@@ -60,12 +60,14 @@
 		"@types/swiper": "^5.3.2",
 		"about-window": "^1.13.4",
 		"autoprefixer": "^9.8.0",
+		"axios": "^0.19.2",
 		"electron-is-dev": "^1.2.0",
 		"electron-notarize": "^1.0.0",
 		"electron-root-path": "^1.0.16",
 		"electron-window-state": "^5.0.3",
 		"eslint-config-react-app": "^5.2.1",
 		"framer-motion": "^1.11.0",
+		"http2": "^3.3.7",
 		"i18next": "^19.4.5",
 		"postcss": "^7.0.32",
 		"postcss-cli": "^7.1.1",

src/__snapshots__/index.test.ts.snap

@@ -12672,18 +12672,20 @@ exports[`Application root should render without crashing 1`] = `
           <main
             className=""
           >
-            <Switch>
-              <Route
-                exact={true}
-                path="/"
-                render={[Function]}
-              />
-              <Route
-                exact={true}
-                path="/profile/create"
-                render={[Function]}
-              />
-            </Switch>
+            <EnvironmentProvider>
+              <Switch>
+                <Route
+                  exact={true}
+                  path="/"
+                  render={[Function]}
+                />
+                <Route
+                  exact={true}
+                  path="/profile/create"
+                  render={[Function]}
+                />
+              </Switch>
+            </EnvironmentProvider>
           </main>
         </I18nextProvider>
       </HashRouter>,

src/app/contexts/Environment.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+
+import { EnvironmentProvider } from "./Environment";
+
+describe("Environment Context", () => {
+	it("should render the wrapper properly", async () => {
+		const { container, asFragment } = render(
+			<EnvironmentProvider>
+				<span>Provider testing</span>
+			</EnvironmentProvider>,
+		);
+
+		await waitFor(async () => {
+			await expect(screen.findByText("Provider testing")).resolves.toBeInTheDocument();
+		});
+
+		expect(container).toBeTruthy();
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

src/app/contexts/Environment.tsx

@@ -0,0 +1,21 @@
+// Coins
+import { ARK } from "@arkecosystem/platform-sdk-ark";
+// Env
+import { Environment } from "@arkecosystem/platform-sdk-profiles";
+// Services
+import { httpClient } from "app/services";
+import React, { createContext } from "react";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+const EnvironmentContext = createContext({});
+
+const EnvironmentProvider = ({ children }: Props) => {
+	const env: Environment = new Environment({ coins: { ARK }, httpClient, storage: "indexeddb" });
+
+	return <EnvironmentContext.Provider value={{ env }}>{children}</EnvironmentContext.Provider>;
+};
+
+export { EnvironmentContext, EnvironmentProvider };

src/app/contexts/__snapshots__/Environment.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Environment Context should render the wrapper properly 1`] = `
+<DocumentFragment>
+  <span>
+    Provider testing
+  </span>
+</DocumentFragment>
+`;

src/app/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./Environment";

src/app/services/HttpClient.test.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import { HttpClient } from "./HttpClient";
+
+jest.mock("axios", () => ({
+	create: () => ({
+		get: () => jest.fn(),
+		post: () => jest.fn(),
+	}),
+}));
+
+let subject: HttpClient;
+
+beforeEach(() => (subject = new HttpClient()));
+
+describe("HttpClient", () => {
+	beforeEach(() => {
+		jest.spyOn(subject, "get");
+		jest.spyOn(subject, "post");
+	});
+
+	it("should get without params", async () => {
+		await subject.get("/hello-world");
+
+		expect(subject.get).toHaveBeenCalledWith("/hello-world");
+	});
+
+	it("should get with params", async () => {
+		await subject.get("/hello-world", { q: "my-param" });
+
+		expect(subject.get).toHaveBeenCalledWith("/hello-world", { q: "my-param" });
+	});
+
+	it("should post without params", async () => {
+		await subject.post("/hello-world", { key: "value" });
+
+		expect(subject.post).toHaveBeenCalledWith("/hello-world", { key: "value" });
+	});
+
+	it("should post without headers", async () => {
+		await subject.post("/hello-world", { name: "my-param" });
+
+		expect(subject.post).toHaveBeenCalledWith("/hello-world", { name: "my-param" });
+	});
+
+	it("should post without headers", async () => {
+		await subject.post("/hello-world", { name: "my-param" }, { authorization: "Bearer bear" });
+
+		expect(subject.post).toHaveBeenCalledWith(
+			"/hello-world",
+			{ name: "my-param" },
+			{ authorization: "Bearer bear" },
+		);
+	});
+});

src/app/services/HttpClient.ts

@@ -0,0 +1,22 @@
+import { Contracts } from "@arkecosystem/platform-sdk";
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+
+export class HttpClient implements Contracts.HttpClient {
+	readonly client: AxiosInstance;
+
+	public constructor() {
+		const config: AxiosRequestConfig = {
+			timeout: 2000,
+		};
+
+		this.client = axios.create(config);
+	}
+
+	public async get(path: string, query: object = {}): Promise<Record<string, any>> {
+		return await this.client.get(path, { params: { ...query } });
+	}
+
+	public async post(path: string, body: object, headers: object = {}) {
+		return await this.client.post(path, { body, headers });
+	}
+}

src/app/services/index.ts

@@ -0,0 +1,3 @@
+import { HttpClient } from "./HttpClient";
+
+export const httpClient = new HttpClient();

src/domains/profile/components/ProfileCard/ProfileCard.test.tsx

@@ -17,7 +17,7 @@ describe("ProfileCard", () => {
 		expect(container).toBeTruthy();
 		expect(getByTestId("profile-card__user--name")).toHaveTextContent(profile.name);
 		expect(getByTestId("profile-card__user--balance")).toHaveTextContent(profile.balance);
-		expect(getByTestId("profile-card__user--avatar")).toHaveAttribute("src", profile.avatar);
+		expect(getByTestId("profile-card__user--avatar")).toHaveStyle(`background: ${profile.avatar}`);
 		expect(asFragment()).toMatchSnapshot();
 	});
 
@@ -29,7 +29,7 @@ describe("ProfileCard", () => {
 	});
 
 	it("should hide the settings icon", () => {
-		const { container, getByTestId } = render(<ProfileCard {...profile} showSettings={false} />);
+		const { container } = render(<ProfileCard {...profile} showSettings={false} />);
 
 		expect(container).toMatchSnapshot();
 	});

src/domains/profile/components/ProfileCard/ProfileCard.tsx

@@ -28,14 +28,11 @@ export const ProfileCard = ({ avatar, name, balance, actions, onSelect, showSett
 
 			<div className="flex flex-row justify-between w-full">
 				<div className="flex items-center">
-					<div className="block w-12 h-12 mx-auto rounded-full sm:mx-0 sm:flex-shrink-0">
-						<img
-							className="rounded-full"
-							src={avatar}
-							alt="User Avatar"
-							data-testid="profile-card__user--avatar"
-						/>
-					</div>
+					<div
+						className="block w-12 h-12 mx-auto rounded-full sm:mx-0 sm:flex-shrink-0"
+						style={{ backgroundImage: avatar }}
+						data-testid="profile-card__user--avatar"
+					></div>
 					<div className="mt-4 text-center sm:mt-0 sm:ml-4 sm:text-left">
 						<p className="text-sm font-semibold text-theme-neutral">Name</p>
 						<p className="font-semibold text-theme-neutral-dark" data-testid="profile-card__user--name">

src/domains/profile/components/ProfileCard/__snapshots__/ProfileCard.test.tsx.snap

@@ -16,14 +16,8 @@ exports[`ProfileCard should hide the settings icon 1`] = `
         >
           <div
             class="block w-12 h-12 mx-auto rounded-full sm:mx-0 sm:flex-shrink-0"
-          >
-            <img
-              alt="User Avatar"
-              class="rounded-full"
-              data-testid="profile-card__user--avatar"
-              src="https://www.w3schools.com/howto/img_avatar.png"
-            />
-          </div>
+            data-testid="profile-card__user--avatar"
+          />
           <div
             class="mt-4 text-center sm:mt-0 sm:ml-4 sm:text-left"
           >
@@ -103,14 +97,8 @@ exports[`ProfileCard should render 1`] = `
         >
           <div
             class="block w-12 h-12 mx-auto rounded-full sm:mx-0 sm:flex-shrink-0"
-          >
-            <img
-              alt="User Avatar"
-              class="rounded-full"
-              data-testid="profile-card__user--avatar"
-              src="https://www.w3schools.com/howto/img_avatar.png"
-            />
-          </div>
+            data-testid="profile-card__user--avatar"
+          />
           <div
             class="mt-4 text-center sm:mt-0 sm:ml-4 sm:text-left"
           >
@@ -190,14 +178,8 @@ exports[`ProfileCard should render the settings icon 1`] = `
         >
           <div
             class="block w-12 h-12 mx-auto rounded-full sm:mx-0 sm:flex-shrink-0"
-          >
-            <img
-              alt="User Avatar"
-              class="rounded-full"
-              data-testid="profile-card__user--avatar"
-              src="https://www.w3schools.com/howto/img_avatar.png"
-            />
-          </div>
+            data-testid="profile-card__user--avatar"
+          />
           <div
             class="mt-4 text-center sm:mt-0 sm:ml-4 sm:text-left"
           >

src/domains/profile/pages/Welcome/Welcome.stories.tsx

@@ -1,3 +1,4 @@
+import { EnvironmentContext } from "app/contexts";
 import React from "react";
 
 import { Welcome } from "./Welcome";
@@ -6,23 +7,34 @@ export default {
 	title: "Profile / Pages / Welcome",
 };
 
-const profiles = [
-	{
-		id: 1,
-		name: "Oleg Gelo",
-		balance: "234,500.46 USD",
-		avatar: "https://www.w3schools.com/howto/img_avatar.png",
-	},
-];
-
 export const Default = () => (
 	<div className="w-full h-full">
-		<Welcome profiles={[]} />
+		<Welcome />
 	</div>
 );
 
-export const WithProfiles = () => (
-	<div className="w-full h-full">
-		<Welcome profiles={profiles} />
-	</div>
-);
+export const WithProfiles = () => {
+	const env = {
+		profiles: () => ({
+			all: async () =>
+				new Promise((resolve) => {
+					resolve([
+						{
+							id: 1,
+							name: "Oleg Gelo",
+							balance: "234,500.46 USD",
+							avatar: "https://www.w3schools.com/howto/img_avatar.png",
+						},
+					]);
+				}),
+		}),
+	};
+
+	return (
+		<div className="w-full h-full">
+			<EnvironmentContext.Provider value={{ env }}>
+				<Welcome />
+			</EnvironmentContext.Provider>
+		</div>
+	);
+};