geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fiat balance

Browse Source
This commit is contained in:
João Geonizeli
2021-08-11 22:53:59 -03:00
parent 1847a276f7
commit fe474dfb08
21 changed files with 596 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/javascript/__generated__/schema.graphql generated
View File

@@ -1,5 +1,5 @@
type Balance implements Node {
amount: Float!
amount: String!
currency: Currency!
id: ID!
}
@@ -44,6 +44,54 @@ type Currency implements Node {
name: String!
}
type FiatBalance implements Node {
amountCents: Int!
amountCurrency: String!
createdAt: ISO8601DateTime!
id: ID!
updatedAt: ISO8601DateTime!
}
"""
The connection type for FiatBalance.
"""
type FiatBalanceConnection {
"""
A list of edges.
"""
edges: [FiatBalanceEdge]
"""
A list of nodes.
"""
nodes: [FiatBalance]
"""
Information to aid in pagination.
"""
pageInfo: PageInfo!
}
"""
An edge in a connection.
"""
type FiatBalanceEdge {
"""
A cursor for use in pagination.
"""
cursor: String!
"""
The item at the end of the edge.
"""
node: FiatBalance
}
"""
An ISO 8601-encoded datetime
"""
scalar ISO8601DateTime
"""
An object with an ID.
"""
@@ -102,6 +150,27 @@ type Query {
last: Int
): BalanceConnection!
currentUser: User
fiatBalances(
"""
Returns the elements in the list that come after the specified cursor.
"""
after: String
"""
Returns the elements in the list that come before the specified cursor.
"""
before: String
"""
Returns the first _n_ elements from the list.
"""
first: Int
"""
Returns the last _n_ elements from the list.
"""
last: Int
): FiatBalanceConnection!
"""
Fetches an object given its ID.

81
app/javascript/src/pages/Wallet/Balances.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { graphql } from "babel-plugin-relay/macro";
import type { FC } from "react";
import React from "react";
import { useFragment } from "react-relay";
import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
import type { Balances_balances$key } from "./__generated__/Balances_balances.graphql";
type Props = {
balancesRef: Balances_balances$key;
};
export const Balances: FC<Props> = ({ balancesRef }) => {
const { nodes } = useFragment<Balances_balances$key>(
graphql`
fragment Balances_balances on BalanceConnection {
nodes {
id
amount
currency {
name
}
}
}
`,
balancesRef
);
return (
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
<div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table className="min-w-full leading-normal">
<thead>
<tr>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Moeda
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Saldo
</th>
</tr>
</thead>
<tbody>
{nodes?.map((balance) => {
return (
<tr key={balance?.id}>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
alt={`${balance?.currency.name} icon`}
src={getCurrencyLogo(balance?.currency.name)}
className="mx-auto object-cover rounded-full h-10 w-10 "
/>
</div>
<div className="ml-3">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.currency.name}
</p>
</div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.amount}
</p>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
};

58
app/javascript/src/pages/Wallet/FiatBalances.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { graphql } from "babel-plugin-relay/macro";
import type { FC } from "react";
import React from "react";
import { useFragment } from "react-relay";
import type { FiatBalances_fiatBalances$key } from "./__generated__/FiatBalances_fiatBalances.graphql";
type Props = {
fiatBalancesRef: FiatBalances_fiatBalances$key;
};
export const FiatBalances: FC<Props> = ({ fiatBalancesRef }) => {
const { nodes } = useFragment<FiatBalances_fiatBalances$key>(
graphql`
fragment FiatBalances_fiatBalances on FiatBalanceConnection {
nodes {
id
amountCents
amountCurrency
}
}
`,
fiatBalancesRef
);
if (!nodes?.length) return null;
const [firstResult] = nodes;
const amount = (
firstResult?.amountCents ? firstResult?.amountCents / 100 : 0
).toFixed(2);
return (
<div className="shadow rounded-lg p-4 bg-white dark:bg-gray-800">
<div className="flex items-center">
<span className="rounded-xl relative p-4 bg-green-200">
<svg
width="40"
fill="currentColor"
height="40"
className="text-green-500 h-4 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1362 1185q0 153-99.5 263.5t-258.5 136.5v175q0 14-9 23t-23 9h-135q-13 0-22.5-9.5t-9.5-22.5v-175q-66-9-127.5-31t-101.5-44.5-74-48-46.5-37.5-17.5-18q-17-21-2-41l103-135q7-10 23-12 15-2 24 9l2 2q113 99 243 125 37 8 74 8 81 0 142.5-43t61.5-122q0-28-15-53t-33.5-42-58.5-37.5-66-32-80-32.5q-39-16-61.5-25t-61.5-26.5-62.5-31-56.5-35.5-53.5-42.5-43.5-49-35.5-58-21-66.5-8.5-78q0-138 98-242t255-134v-180q0-13 9.5-22.5t22.5-9.5h135q14 0 23 9t9 23v176q57 6 110.5 23t87 33.5 63.5 37.5 39 29 15 14q17 18 5 38l-81 146q-8 15-23 16-14 3-27-7-3-3-14.5-12t-39-26.5-58.5-32-74.5-26-85.5-11.5q-95 0-155 43t-60 111q0 26 8.5 48t29.5 41.5 39.5 33 56 31 60.5 27 70 27.5q53 20 81 31.5t76 35 75.5 42.5 62 50 53 63.5 31.5 76.5 13 94z" />
</svg>
</span>
<p className="text-md text-black dark:text-white ml-2">Saldo Fiat</p>
</div>
<div className="flex flex-col justify-start">
<p className="text-gray-700 dark:text-gray-100 text-4xl text-left font-bold my-4">
{amount}
<span className="text-sm">{firstResult?.amountCurrency}</span>
</p>
</div>
</div>
);
};

69
app/javascript/src/pages/Wallet/Wallet.tsx
View File

@@ -3,21 +3,19 @@ import type { FC } from "react";
import React from "react";
import { useLazyLoadQuery } from "react-relay";
import { getCurrencyLogo } from "../../utils/getCurrencyLogo";
import { Balances } from "./Balances";
import { FiatBalances } from "./FiatBalances";
import type { WalletQuery } from "./__generated__/WalletQuery.graphql";
export const Wallet: FC = () => {
const { balances } = useLazyLoadQuery<WalletQuery>(
const { fiatBalances, balances } = useLazyLoadQuery<WalletQuery>(
graphql`
query WalletQuery {
fiatBalances {
...FiatBalances_fiatBalances
}
balances {
nodes {
id
amount
currency {
name
}
}
...Balances_balances
}
}
`,
@@ -28,57 +26,8 @@ export const Wallet: FC = () => {
<div className="flex flex-col h-full w-full overflow-x-hidden">
<div className="container mx-auto px-4 sm:px-8 max-w-3xl">
<div className="py-8">
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
<div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table className="min-w-full leading-normal">
<thead>
<tr>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Moeda
</th>
<th
scope="col"
className="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal"
>
Saldo
</th>
</tr>
</thead>
<tbody>
{balances.nodes?.map((balance) => {
return (
<tr key={balance?.id}>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
alt={`${balance?.currency.name} icon`}
src={getCurrencyLogo(balance?.currency.name)}
className="mx-auto object-cover rounded-full h-10 w-10 "
/>
</div>
<div className="ml-3">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.currency.name}
</p>
</div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.amount}
</p>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
<FiatBalances fiatBalancesRef={fiatBalances} />
<Balances balancesRef={balances} />
</div>
</div>
</div>

79
app/javascript/src/pages/Wallet/__generated__/Balances_balances.graphql.ts generated Normal file
View File

@@ -0,0 +1,79 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type Balances_balances = {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amount: string;
readonly currency: {
readonly name: string;
};
} | null> | null;
readonly " $refType": "Balances_balances";
};
export type Balances_balances$data = Balances_balances;
export type Balances_balances$key = {
readonly " $data"?: Balances_balances$data;
readonly " $fragmentRefs": FragmentRefs<"Balances_balances">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "Balances_balances",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
],
"type": "BalanceConnection",
"abstractKey": null
};
(node as any).hash = '2704da1dc9949b1becbd9ec947c5ec33';
export default node;

66
app/javascript/src/pages/Wallet/__generated__/FiatBalances_fiatBalances.graphql.ts generated Normal file
View File

@@ -0,0 +1,66 @@
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type FiatBalances_fiatBalances = {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amountCents: number;
readonly amountCurrency: string;
} | null> | null;
readonly " $refType": "FiatBalances_fiatBalances";
};
export type FiatBalances_fiatBalances$data = FiatBalances_fiatBalances;
export type FiatBalances_fiatBalances$key = {
readonly " $data"?: FiatBalances_fiatBalances$data;
readonly " $fragmentRefs": FragmentRefs<"FiatBalances_fiatBalances">;
};
const node: ReaderFragment = {
"argumentDefinitions": [],
"kind": "Fragment",
"metadata": null,
"name": "FiatBalances_fiatBalances",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"storageKey": null
}
],
"storageKey": null
}
],
"type": "FiatBalanceConnection",
"abstractKey": null
};
(node as any).hash = '0584f36abe6ca6f8612b8c593c4cfb6d';
export default node;

152
app/javascript/src/pages/Wallet/__generated__/WalletQuery.graphql.ts generated
View File

@@ -3,16 +3,14 @@
// @ts-nocheck
import { ConcreteRequest } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type WalletQueryVariables = {};
export type WalletQueryResponse = {
readonly fiatBalances: {
readonly " $fragmentRefs": FragmentRefs<"FiatBalances_fiatBalances">;
};
readonly balances: {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amount: number;
readonly currency: {
readonly name: string;
};
} | null> | null;
readonly " $fragmentRefs": FragmentRefs<"Balances_balances">;
};
};
export type WalletQuery = {
@@ -24,17 +22,32 @@ export type WalletQuery = {
/*
query WalletQuery {
fiatBalances {
...FiatBalances_fiatBalances
}
balances {
nodes {
...Balances_balances
}
}
fragment Balances_balances on BalanceConnection {
nodes {
id
amount
currency {
name
id
amount
currency {
name
id
}
}
}
}
fragment FiatBalances_fiatBalances on FiatBalanceConnection {
nodes {
id
amountCents
amountCurrency
}
}
*/
const node: ConcreteRequest = (function(){
@@ -44,20 +57,6 @@ var v0 = {
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"fragment": {
@@ -66,6 +65,22 @@ return {
"metadata": null,
"name": "WalletQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalanceConnection",
"kind": "LinkedField",
"name": "fiatBalances",
"plural": false,
"selections": [
{
"args": null,
"kind": "FragmentSpread",
"name": "FiatBalances_fiatBalances"
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -75,29 +90,9 @@ return {
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "Balance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
(v2/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
"kind": "FragmentSpread",
"name": "Balances_balances"
}
],
"storageKey": null
@@ -112,6 +107,43 @@ return {
"kind": "Operation",
"name": "WalletQuery",
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalanceConnection",
"kind": "LinkedField",
"name": "fiatBalances",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "nodes",
"plural": true,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -129,7 +161,13 @@ return {
"plural": true,
"selections": [
(v0/*: any*/),
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -138,7 +176,13 @@ return {
"name": "currency",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
(v0/*: any*/)
],
"storageKey": null
@@ -152,14 +196,14 @@ return {
]
},
"params": {
"cacheID": "6b8d0c664bd2d9df4d323c19c4a823a5",
"cacheID": "82d013e2bf418b53aeec5412f2f92661",
"id": null,
"metadata": {},
"name": "WalletQuery",
"operationKind": "query",
"text": "query WalletQuery {\n balances {\n nodes {\n id\n amount\n currency {\n name\n id\n }\n }\n }\n}\n"
"text": "query WalletQuery {\n fiatBalances {\n ...FiatBalances_fiatBalances\n }\n balances {\n ...Balances_balances\n }\n}\n\nfragment Balances_balances on BalanceConnection {\n nodes {\n id\n amount\n currency {\n name\n id\n }\n }\n}\n\nfragment FiatBalances_fiatBalances on FiatBalanceConnection {\n nodes {\n id\n amountCents\n amountCurrency\n }\n}\n"
}
};
})();
(node as any).hash = '428f4f1ab769f9056dd38ec641a30733';
(node as any).hash = '855efce679c691a77938b64376a1a805';
export default node;